/* ==========================================================================
   PROJEKTSEITE
   ========================================================================== */

.project-hero {
  padding-bottom: var(--space-lg);
}

/* Hero beginnt bündig am oberen Viewport-Rand (kein Header-Offset) – der
   fixed Header schwebt transparent darüber, wie beim Home-Hero (s.
   main > .hero:first-child in hero.css). Überschreibt main > .section:
   first-child (base.css), das sonst hier ebenfalls padding-top erzwingen
   würde. */
main > .project-hero:first-child {
  padding-top: 0;
}

/* Full-bleed (100vw), liegt jetzt direkt in der Section statt in .wrapper
   (s. project.php) – zentriert per left:50%/translateX(-50%), unabhängig
   von der schmaleren --container-max-Breite des restlichen Contents. */
.project-hero__image {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  transform: translateX(-50%);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* full-bleed: keine abgerundeten Ecken, wie beim Home-Hero/Footer-Bild */
  border-radius: 0;
}

.project-intro {
  padding-bottom: var(--space-2xl);
}

/* Titel + Tags/Elevator-Satz: align-items:end statt fixer Höhe, damit ein
   doppelt so langer (mehrzeiliger) CMS-Titel nicht mit den Tags kollidiert
   – die Meta-Spalte (Tags + Elevator-Satz) bleibt dadurch unten bündig mit
   der Titel-Unterkante, unabhängig von der Titel-Höhe. */
.project-title-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--space-lg);
  padding-bottom: var(--space-md);
}

.project-title {
  /* font-family + line-height kommen aus .page-heading, Umbruch nur an
     Wortgrenzen aus .no-word-break (beide components.css, im Markup
     zusätzlich gesetzt) — hier nur die projekteigene Größe. */
  font-size: calc(var(--fs-h1) * 1.1);
}

/* Enthält Tags/Elevator-Satz UND (optional) den "Live Website"-Button
   (project.php) — align-items:flex-end reicht als einzige Regel, um auch
   den Button rechtsbündig unter den Elevator-Satz zu stapeln (Optik von
   .btn-solid, components.css). */
.project-title-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-sm);
  text-align: right;
  justify-self: end;
  max-width: 32rem;
}

.project-elevator {
  font-weight: var(--fw-light);
  font-size: calc(var(--fs-h2) * 0.85);
  /* Etwas enger als --lh-heading (1.15, tokens.css) – eigener Wert statt den
     sitweiten Heading-Token anzufassen, der auch für echte Überschriften
     gilt. */
  line-height: 0.95;
  /* Zusätzlicher Abstand zur Tag-List darüber (.project-title-meta gap
     davor ist --space-sm, gilt aber gleichmäßig für alle Kinder inkl. dem
     "Live Website"-Button danach) – margin-top betrifft gezielt nur diesen
     einen Abstand. */
  margin-top: var(--space-2xs);
  /* Optischer Ausgleich, gleiche Ursache wie --font-pixel-grotesk-nudge
     (tokens.css), aber hier ein eigener, per Screenshot ausgemessener Wert:
     align-items:end (.project-title-row) gleicht nur die Zeilenbox-Kanten
     an, nicht die tatsächliche Zeichentinte. Da Titel (--font-pixel-serif)
     und Elevator-Satz (--font-pixel-grotesk) unterschiedliche Fonts mit
     unterschiedlichem Ascent/Descent-Verhältnis sind, hängt der Elevator-
     Satz trotz bündiger Boxen sichtbar tiefer als die Titel-Grundlinie
     (~0.33em bei diesem Screenshot) – transform statt Padding, da hier kein
     Hintergrund/Box mitverschoben werden muss. */
  transform: translateY(-0.33em);
}

/* Button "Live Website", zwischen Titel-Zeile und Beschreibung — Optik von
   .btn-solid (components.css), Klasse steht im Markup nur als Hook für
   künftige page-spezifische Overrides. Kein eigenes text-align/margin-auto:
   .btn-solid ist inline-block, sitzt dadurch schon linksbündig im Wrapper. */
.project-live-link-wrap {
  padding-bottom: var(--space-sm);
}

.project-description {
  /* font-family + font-size kommen aus .section-introduction (components.css,
     im Markup zusätzlich gesetzt) — dieselbe Formatierung wie die Intro-
     Texte der Home-Sections (.project-fan__subtext, .services__intro-text).
     Bewusst einspaltiger Blockfluss (kein Grid mehr): mehrere Absätze sollen
     untereinander stehen, nicht nebeneinander in zwei Spalten laufen. */
  padding-top: var(--space-lg);
}

.project-description > * {
  max-width: 55ch;
}

/* Vorher (2-spaltiges Grid) lagen mehrere Absätze nebeneinander, ein
   vertikaler Abstand war dadurch nie nötig. Jetzt (Blockfluss, s. o.)
   stapeln sie sich – ohne diesen Abstand kleben sie sonst direkt
   aneinander (p hat margin:0, s. base.css). */
.project-description > * + * {
  /* em statt --space-Token: soll mit der Textgröße (--fs-lead,
     .section-introduction) mitskalieren statt eines starren rem-Werts. */
  margin-top: 1.5em;
}

/* Links im (jetzt formatierbaren, type: writer) description-Feld: graue
   Box wie .tag (components.css) statt Standard-Link (base.css:
   a { color:inherit; text-decoration:none }, sonst im Fließtext unsichtbar) –
   Font-Face und -Größe bleiben aber bewusst die des umgebenden Fließtexts
   (font-pixel-serif, --fs-lead über .section-introduction/p geerbt) statt
   der Grotesk/Uppercase-Optik von .tag, damit der Link nicht wie ein
   losgelöstes UI-Chrome-Element aus dem Lesefluss herausfällt.
   Bewusst "display: inline" statt .tag' "inline-flex" – vertikales
   Padding/Border eines "inline"-Elements zählt laut Spec nicht in die
   Zeilenhöhe der umgebenden Absatzzeile hinein (bei inline-flex/-block
   dagegen schon), Links dürfen die Zeilenhöhe also nicht verschieben.
   box-decoration-break:clone sorgt dafür, dass ein zeilenumbrechender Link
   auf jeder Zeile seine eigene abgerundete Box bekommt statt an der
   Umbruchstelle hart abgeschnitten zu werden. */
.project-description a {
  padding-inline: 0.5em;
  padding-block: 0.15em;
  background: var(--color-heading-badge-background);
  color: var(--color-badge-font);
  border-radius: var(--radius-sm);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  /* Gleiche Mechanik wie .btn/.btn-solid:hover (components.css): Radius
     läuft beim Hover sichtbar "nach". */
  transition: border-radius calc(var(--duration-fast) * 4) var(--ease-standard);
}

.project-description a:hover,
.project-description a:focus-visible {
  border-radius: var(--radius-md);
}

.project-media {
  padding-bottom: var(--space-2xl);
}

.project-media__row {
  display: flex;
  /* align-items:flex-start statt des geerbten stretch: bei Zeilen ohne feste
     Ratio ("Original", s. project.yml settings.aspectRatio) soll jede Spalte
     ihre eigene, vom Seitenverhältnis abgeleitete Höhe behalten dürfen statt
     auf die Höhe der Nachbarspalte gestreckt zu werden – sonst würde stretch
     die per aspect-ratio:auto berechnete Höhe wieder überschreiben. Bei
     Zeilen mit fester Ratio ist das ein No-op, weil dort ohnehin alle
     Spalten schon dieselbe Höhe haben. */
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.project-media__col {
  /* --col-width kommt aus dem Kirby Layout-Feld ("1/1" oder "1/2") */
  flex: 1 1 0;
}

.next-project {
  padding-bottom: var(--space-2xl);
}

.next-project__heading {
  font-family: var(--font-pixel-grotesk);
  font-size: var(--fs-h2);
  /* --lh-tight statt geerbtem --lh-body (1.55, base.css): .section-heading__word
     (components.css) ist für den knappen Zeilenabstand von .section-heading
     (--lh-tight) gebaut – dessen padding-block-Nudge zentriert die Zeichentinte
     nur innerhalb EINER derart engen Zeilenbox korrekt. Mit --lh-body bliebe
     die Badge-Box (Label) durch den geerbten Leerraum sichtbar größer/anders
     proportioniert als ihr Vorbild auf der Startseite. */
  line-height: var(--lh-tight);
  margin-bottom: var(--space-md);
  /* flex statt normalem Inline-Fluss (der an der Grundlinie ausrichtet):
     Label und Titel sind beides Badge-Pillen exakt gleicher Höhe (s.
     .next-project__title), align-items:flex-start richtet sie dadurch
     genauso bündig aus wie center. */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4em;
}

.next-project__label {
  font-weight: var(--fw-regular);
}

/* Verlinkt zum Project-Fan-Slider auf der Startseite (#work, s. site-header.php),
   zentriert unter dem Next-Project-Bild statt in der Heading-Flex-Row.
   Gleicher Wrapper-Aufbau wie .project-fan__load-more-wrap (project-fan.css):
   text-align:center statt eines eigenen Flex/Grid-Layouts, da hier nur ein
   einzelner Button zentriert werden muss. margin-top identisch zu dort
   (--space-sm/4, s. Anfrage). Dort trägt zusätzlich html[data-device="touch"]
   .project-fan__body (project-fan.css) selbst ein padding-block:var(--space-sm)
   zwischen Bild und Tag-Liste/Button – hier fehlt dieses Polster (die
   Feature-Card hat keine eigene "Body"-Zone, s. .project-card--feature
   .project-card__title{display:none} oben), macht den knappen margin-top
   allein sonst zu eng. Gleiches padding-block deshalb direkt hier ergänzt. */
.next-project__overview-wrap {
  padding-block: var(--space-sm);
  margin-top: calc(var(--space-sm) / 4);
  margin-bottom: var(--space-md);
  text-align: center;
}

/* Optik von .next-project__overview kommt von .btn-solid (components.css)
   — Klasse steht im Markup nur als Hook für künftige page-spezifische
   Overrides. */

.next-project__title {
  /* Testweise verkleinerter Titel (s. font-size unten), Badge soll dabei
     trotzdem exakt so hoch bleiben wie das Label-Badge
     (.next-project__label/.section-heading__word). Der durch die kleinere
     Schrift fehlende Höhenanteil ((1 - Skalierung) * --fs-h2 * --lh-tight)
     wird deshalb zusätzlich ins Padding-Block verschoben, statt wie beim
     Label pauschal 1rem oben/unten anzusetzen. Eine gemeinsame Variable
     für Skalierung UND Padding-Ausgleich hält beide synchron, statt den
     0.7-Wert doppelt zu pflegen. */
  --title-font-scale: 0.7;
  --title-pad-block-base: calc((2rem + (1 - var(--title-font-scale)) * var(--fs-h2) * var(--lh-tight)) / 2);
  padding-inline: calc(1rem / 1.5);
  /* Gleiches Nudge-Muster wie .section-heading__word (components.css),
     nur auf der oben berechneten Basis statt auf starren 1rem. */
  padding-block: calc(var(--title-pad-block-base) - var(--font-pixel-grotesk-nudge)) calc(var(--title-pad-block-base) + var(--font-pixel-grotesk-nudge));
  /* 9999px statt eines festen --radius-Werts: die Höhe hier ist über
     --fs-h2 responsiv, ein fixer Radius (z.B. --radius-md) bliebe auf
     breiten Viewports also kleiner als die halbe Boxhöhe und links/rechts
     blieben gerade Kanten stehen. 9999px wird vom Browser automatisch auf
     die halbe Boxhöhe gekappt (CSS-Radius-Overlap-Regel) – dadurch immer
     eine echte Pillenform, ganz wie bei .project-fan-tooltip__pill
     (project-fan.css), unabhängig von der aktuellen --fs-h2-Größe. */
  border-radius: 9999px;
  /* Gleicher Hintergrund-Ton wie .site-header .btn (header.css):
     --color-nav-button-background (= --color-white) statt des dunklen
     Tints von .tag/.section-heading__word – --nav-btn-bg-opacity (90%)
     ist auf .site-header gescoped, deshalb hier der Wert direkt
     übernommen statt der Variable. */
  background: color-mix(in srgb, var(--color-nav-button-background) 90%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-shadow);
  color: var(--color-font-dark);
  /* Gleiche Schrift wie die Section-Headings (.section-heading__word/
     .next-project__label): --font-pixel-grotesk statt --font-pixel-serif.
     text-transform bewusst eigens auf uppercase (anders als das Label):
     Badge-Pille soll wie ein UI-Chrome-Element (.tag/.btn) wirken, nicht
     wie der Fließtext-Titel eines Editorial-Headings. */
  font-family: var(--font-pixel-grotesk);
  text-transform: uppercase;
  /* Testweise kleiner als das geerbte --fs-h2 (Label-Größe) – s.
     --title-font-scale oben, der den fehlenden Höhenanteil kompensiert. */
  font-size: calc(var(--title-font-scale) * 1em);
}

.project-card--feature .project-card__media {
  aspect-ratio: 21 / 9;
}

.project-card--feature .project-card__title {
  display: none; /* Titel steht bereits in der "NEXT:"-Überschrift */
}

/* bp: --bp-tablet (1024px) */
@media (max-width: 1024px) {
  .project-title-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-sm);
    padding-bottom: calc(var(--space-md) / 2);
  }

  .project-title-meta {
    align-items: flex-start;
    text-align: left;
    justify-self: start;
    max-width: none;
  }

  .project-description {
    padding-top: calc(var(--space-lg) / 2);
  }
}

/* bp: --bp-mobile (640px) */
@media (max-width: 640px) {
  .project-media__row {
    flex-direction: column;
  }

  /* Auf dem Smartphone soll das Hero-Bild unterhalb des Headers erscheinen
     statt darunter hervorzuschimmern (wie am Desktop, s. Kommentar oben
     main > .project-hero:first-child): der fixed Header bekommt hier wieder
     seinen regulären Platz vor dem Bild zugewiesen. */
  main > .project-hero:first-child {
    padding-top: var(--header-height);
  }

  /* "Next Project"-Karte auf dem Smartphone höher: das schmale 21:9-Format
     (s. .project-card--feature .project-card__media oben) staucht das Bild
     auf der schmalen Mobile-Breite zu stark – --project-media-ratio (3:2,
     tokens.css) statt 21:9, wie beim regulären .project-card__media. */
  .project-card--feature .project-card__media {
    aspect-ratio: var(--project-media-ratio);
  }
}