/* ==========================================================================
   Architequus – Projektseiten-Template (Architektur-Portfolio)
   Baut auf styles.css (Tokens/Header/Footer), quelle.css (Sidebar,
   Farb-Bänder, .section-inner, .reveal, .ph, .text-link) und blocks.css
   (.block-split, .lede-accent) auf.
   ========================================================================== */

/* ---------- Projekt-Kopf: Nummer, Titel, Slogan, Einführung, Bild ---------- */
.project-hero{ background: var(--color-bg-alt); }
.project-hero__text{
  padding: clamp(2.2rem, 6vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
}
.project-hero__num{
  display:block;
  font-family: var(--font-display);
  color: var(--color-accent);
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}
.project-hero__title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5.5vw, 2.6rem);
  margin: 0 0 1.2rem;
}
.project-hero__divider{
  width: 40px; height:1px; background: var(--color-line);
  margin: 0 0 1.3rem;
}
.project-hero__slogan{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-accent);
  font-size: 1.15rem;
  line-height:1.5;
  margin: 0 0 1.3rem;
}
.project-hero__intro{
  color: var(--color-ink-soft);
  font-size: 0.98rem;
  line-height: 1.75;
  margin:0;
}
.project-hero__image{ position:relative; min-height: 260px; }
.project-hero__image .ph{ width:100%; height:100%; border:none; border-radius:0; }

@media (min-width: 700px){
  .project-hero{ display:flex; align-items:stretch; }
  .project-hero__text{
    flex: 0 0 44%;
    display:flex; flex-direction:column; justify-content:center;
    padding: clamp(2.2rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3.5rem) clamp(2.2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  }
  .project-hero__image{ flex: 1 1 56%; }
}

/* ---------- Feature-Icon-Reihe ---------- */
.feature-row{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  text-align:center;
}
.feature-item{
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--color-line);
}
.feature-item:last-child{ border-bottom:none; padding-bottom:0; }
.feature-item svg{
  width: 32px; height:32px;
  color: var(--color-accent);
  margin: 0 auto 1rem;
  display:block;
}
.feature-item p{
  color: var(--color-ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 22ch;
  margin: 0 auto;
}
@media (min-width: 700px){
  .feature-row{ grid-template-columns: repeat(4, 1fr); gap:0; }
  .feature-item{ padding: 0 1.6rem; border-bottom:none; border-left: 1px solid var(--color-line); }
  .feature-item:first-child{ border-left:none; }
}

/* ---------- Projekt-Body: Text links, Bilder/Info rechts ---------- */
.project-body{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 3.5rem);
}
@media (min-width: 900px){
  .project-body{ grid-template-columns: 1fr 1fr; align-items:start; }
}

.project-block{ margin-bottom: clamp(2.5rem, 6vw, 3.5rem); }
.project-block:last-child{ margin-bottom:0; }
.project-block__heading{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0 0 1rem;
}
.project-block p{
  color: var(--color-ink-soft);
  font-size: 0.97rem;
  line-height: 1.75;
  margin: 0 0 1rem;
}
.project-block p:last-child{ margin-bottom:0; }

/* Rechte Spalte: beliebig viele Zeilen frei kombinierbar – jede Zeile ist
   entweder .gallery-row (ein Bild, volle Breite) oder .gallery-row--split
   (zwei Bilder nebeneinander). Der Abstand zwischen allen Kindern
   (Bildzeilen wie auch die Projektinformationen-Karte) kommt einheitlich
   vom gap des Elternelements – einfach beliebig viele Zeilen ergänzen oder
   entfernen, ohne weitere Anpassungen. */
.project-body__media{
  display:flex;
  flex-direction:column;
  gap: clamp(1.6rem, 4vw, 2.2rem);
}
.gallery-row .ph{ width:100%; }
.gallery-row--split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 480px){
  /* Auf sehr schmalen Screens wird aus der 2-Spalte notfalls 1 Spalte */
  .gallery-row--split{ grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 2.2rem); }
}

/* ---------- Projektinformationen (Definitionsliste) ---------- */
.info-card{
  background: var(--color-bg-alt);
  padding: clamp(1.6rem, 4vw, 2.2rem);
}
.info-card__title{
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0 0 1.4rem;
}
.info-row{
  display:grid;
  grid-template-columns: minmax(90px, 120px) 1fr;
  gap: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--color-line);
}
.info-row:first-of-type{ border-top:none; }
.info-row dt{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-ink);
  font-size: 0.94rem;
}
.info-row dd{
  margin:0;
  color: var(--color-ink-soft);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* ---------- Aphorismus / Zitat ---------- */
.quote-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 1.2rem;
}
.quote-block__mark{
  font-family: var(--font-display);
  color: var(--color-accent);
  font-size: 3rem;
  line-height:1;
}
.quote-block__line1{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-accent);
  font-size: clamp(1.1rem, 2.8vw, 1.35rem);
  margin:0;
}
.quote-block__line2{
  font-family: var(--font-display);
  color: var(--color-ink);
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  margin:0;
}
.quote-block__illustration{
  width: 140px;
  height: 100px;
  opacity: 0.7;
}
@media (min-width: 800px){
  .quote-block{ flex-direction:row; text-align:left; gap: 2.5rem; }
  .quote-block__text{ flex:1; }
  .quote-block__illustration{ flex-shrink:0; }
}

/* ---------- Weitere Lebensräume (verwandte Projekte) ---------- */
.related-heading{
  text-align:center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 3.6vw, 1.7rem);
  margin: 0 0 2.4rem;
}
.related-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}
@media (min-width: 700px){
  .related-grid{ grid-template-columns: repeat(4, 1fr); gap: 1.8rem; }
}
.related-card{ text-align:center; }
.related-card__frame{
  overflow:hidden;
  border-radius: 999px 999px 6px 6px;
  aspect-ratio: 3 / 4;
}
.related-card__frame .ph{
  width:100%; height:100%; border:none; border-radius:0;
}
.related-card__num{
  display:block;
  font-family: var(--font-display);
  color: var(--color-accent);
  font-size: 0.9rem;
  margin: 1rem 0 0.3rem;
}
.related-card__title{
  font-size: 0.92rem;
  color: var(--color-ink);
  margin:0;
  line-height:1.4;
}