/* PROJECT.CSS — Individual Project Page (reusable blocks)
   Luis Praxmarer Portfolio 2026

   Wiederverwendbare Bausteine für ALLE Projektdetail-Seiten:
     .project-hero      — H1-Titel + Full-Screen Hero-Bild
     .media-group       — Bild-Container (Margin 8px statt 56px)
       .media-row         — Full-Screen Bild (16:9)
       .media-row--2      — Two-Images (Quadrate)
       .media-row--3      — Three-Images (Quadrate)
     .project-text      — H3-Textblock (8 Columns / 880px, Spacing oben 24px)
     .read-more         — Liquid-Glass Button
     .more-projects     — Featured-Projekte unten
     .info-panel        — Slide-in Overlay "Full Description"

   Bild-Margin = 8px (Ausnahme), Bild-Abstand untereinander = 8px.
   Normale Seiten-Margin (Text/Titel) = 56px (--grid-margin). */


/* ─── Page Shell ───────────────────────────────────────── */

body.page-project {
  overflow-y: auto;
  overflow-x: hidden;
  cursor: auto;
  background: var(--color-black);
}

body.page-project a,
body.page-project button {
  cursor: pointer;
}

/* Nav: solid schwarz (wie Work/About) */
body.page-project .nav {
  background: var(--color-black);
  pointer-events: all;
}

body.page-project .nav__logo,
body.page-project .nav__link {
  mix-blend-mode: normal;
  color: var(--color-white);
}

body.page-project .nav__link::after {
  background: var(--color-white);
}

/* Scroll-Lock wenn Panel offen */
body.page-project.is-panel-open {
  overflow: hidden;
}


/* ─── Hero (Titel + Full-Screen Bild) ──────────────────── */

.project-hero {
  padding: calc(var(--nav-height) + var(--space-xl))
           var(--grid-margin)
           var(--space-basic);          /* 56px Abstand zum Bild */
}

.project-hero__title {
  color: var(--color-white);
}


/* ─── Media Blocks (Margin 8px) ────────────────────────── */

.media-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                   /* 8px zwischen mehreren Rows */
  padding: 0 var(--space-8);             /* 8px Bild-Margin (Ausnahme) */
}

/* Full-Screen Bild — 16:9 */
.media-row {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-dark-gray-border);
}

/* Two- / Three-Images — Quadrate, 8px Abstand */
.media-row--2,
.media-row--3 {
  display: grid;
  gap: var(--space-8);
  aspect-ratio: auto;
  background: none;
  overflow: visible;
}

.media-row--2 { grid-template-columns: repeat(2, 1fr); }
.media-row--3 { grid-template-columns: repeat(3, 1fr); }

.media-row--2 .media-item,
.media-row--3 .media-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-dark-gray-border);
}

/* 16:9-Zwei-Bild-Modul — Zellen im Seitenverhältnis 16:9 statt quadratisch.
   Bilder werden vollständig gezeigt (object-fit:contain → KEIN Beschnitt);
   16:9-Quellen füllen randlos, abweichende Formate bekommen schmale
   Ränder (Bühne = schwarz, blendet mit der Seite). Für Projekte, bei
   denen der Bildinhalt nicht angeschnitten werden darf. */
.media-row--16x9 .media-item {
  aspect-ratio: 16 / 9;
  background: var(--color-black);
}
.media-row--16x9 .media-item > img,
.media-row--16x9 .media-item picture > img {
  object-fit: contain;
}

/* Modifier `--fill`: 16:9-Zelle, aber Bild FÜLLT (cover) statt contain.
   Für 16:9-Quellen randlos; minimal abweichende Formate werden leicht
   beschnitten (kein Rand mehr). Kombinierbar mit `.media-row--16x9`. */
.media-row--fill .media-item > img,
.media-row--fill .media-item picture > img {
  object-fit: cover;
}

/* Portrait-Zwei-Bild-Modul — Zellen im Hochformat (3:4) statt quadratisch.
   Für hochformatige Mockups/Screens, die im Quadrat oben/unten abgeschnitten
   würden. Modifier ZUSÄTZLICH zu `.media-row--2`. Mobile: bleibt 2-spaltig. */
.media-row--portrait .media-item {
  aspect-ratio: 3 / 4;
}

/* 4:3-Zwei-Bild-Modul — Zellen im Seitenverhältnis 4:3, Bild FÜLLT (cover,
   Default). Für ~4:3-Quellen (z.B. Sketchbook-Fotos), die im 16:9-contain-
   Modul zu grosse schwarze Ränder bekämen. Modifier ZUSÄTZLICH zu
   `.media-row--2`. Mobile: bleibt 2-spaltig. */
.media-row--4x3 .media-item {
  aspect-ratio: 4 / 3;
}

/* <picture> als Wrapper neutralisieren → img füllt die Zelle */
.media-row > picture,
.media-item > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.media-row > img,
.media-item > img,
.media-row picture > img,
.media-item picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 8px Abstand zwischen direkt aufeinanderfolgenden Bild-/Video-Modulen.
   (Greift NICHT nach Text-Blöcken — die haben eigenes Spacing.) */
.media-group + .media-group {
  margin-top: var(--space-8);
}

/* Folgt ein <video-slider> direkt auf ein Bild-Modul, braucht der
   Slider-Titel mehr Luft nach oben (8px wären zu nah am Bild).
   Greift NICHT, wenn der Slider auf einen Text folgt — dort sorgt
   schon das Text-Spacing für Abstand. */
.media-group + .media-group:has(video-slider) {
  margin-top: var(--space-basic);
}

/* ─── Media-Section-Titel (gleiches Styling/Spacing wie Slider-Titel) ─
   Überschrift über einer Bild-Sektion (z.B. Kunden-Abschnitt).
   Markup: <p class="media-title t-lead">Credit Suisse</p>
   Einzug = grid-margin (wie Texte), 16px zum Bild darunter. Folgt der
   Titel auf ein Bild-Modul, gibt es 56px Luft oben (sonst klebt er). */
.media-title {
  color: var(--color-white);
  padding: 0 var(--grid-margin);
  margin-bottom: var(--space-16);
}

.media-group + .media-title {
  margin-top: var(--space-basic);
}


/* ─── Text Block (H3, 8 Columns) ───────────────────────── */

.project-text {
  padding: var(--space-small)            /* 24px oberhalb */
           var(--grid-margin)
           var(--space-padding-1);       /* 96px unterhalb */
}

.project-text__body {
  max-width: var(--grid-text-width-1);   /* 880px ≈ 8 Columns */
  color: var(--color-white);
}


/* ─── Read More Button ─────────────────────────────────── */
/* Schlicht: weisse Kontur. Hover: weisse Fläche schiebt von
   unten hoch, Text invertiert via mix-blend-mode:difference. */

.read-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  isolation: isolate;                    /* Blend auf diesen Button begrenzen */
  overflow: hidden;
  margin-top: var(--space-normal);       /* 40px Abstand zum Text */
  padding: 0;
  border: 1px solid var(--color-white);
  background: transparent;
}

/* weisse Fläche, fährt von unten nach oben */
.read-more__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-white);
  transform: translateY(101%);
  transition: transform var(--duration-med) var(--ease-smooth);
}

.read-more:hover .read-more__fill {
  transform: translateY(0);
}

/* Inhalt: Differenz-Blend → invertiert beim Übergang schwarz↔weiss */
.read-more__content {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-8) 12px;
  mix-blend-mode: difference;
  color: var(--color-white);
  font-size: var(--text-body-medium-size);
  font-weight: var(--text-body-medium-weight);
  line-height: var(--text-body-medium-line-height);
  letter-spacing: var(--text-body-medium-letter-spacing);
  font-variation-settings: var(--font-opsz);
}

/* Plus-Icon (CSS-Kreuz, erbt currentColor → invertiert mit) */
.read-more__icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.read-more__icon::before,
.read-more__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
}

.read-more__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  transform: translateY(-50%);
}

.read-more__icon::after {
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 100%;
  transform: translateX(-50%);
}


/* ─── More Projects ────────────────────────────────────── */

.more-projects {
  display: flex;
  flex-direction: column;
  gap: var(--space-basic);               /* 56px */
  padding: var(--space-xl)               /* 192px oben */
           var(--grid-margin)
           var(--space-basic);
}

.more-projects__title {
  display: flex;
  align-items: baseline;                 /* Pfeil-Unterkante an Text-Grundlinie */
  gap: var(--space-16);
}

.more-projects__arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-white);
  /* Pfeilspitze (≈4px über SVG-Unterkante) auf die Grundlinie setzen */
  transform: translateY(4px);
}

/* H1-Grösse, aber bewusst als <p> (kein zweites H1 pro Seite) */
.more-projects__heading {
  font-family: var(--font-primary);
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-line-height);
  letter-spacing: var(--text-h1-letter-spacing);
  font-variation-settings: var(--font-opsz);
  color: var(--color-white);
}

.more-projects__grid {
  display: flex;
  gap: var(--space-8);
}

.more-projects__grid .project-card {
  flex: 1 1 0;
  min-width: 0;
}


/* ─── Info Panel (Slide-in Overlay) ────────────────────── */

.info-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
  /* beim Schliessen erst nach dem Slide-out (700ms) ausblenden,
     damit Sheet + Backdrop sauch raus-animieren */
  transition: visibility 0s linear var(--duration-slide);
}

.info-panel.is-open {
  visibility: visible;
  pointer-events: all;
  transition: visibility 0s linear 0s;
}

.info-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity var(--duration-med) var(--ease-smooth);
}

.info-panel.is-open .info-panel__backdrop {
  opacity: 1;
}

.info-panel__sheet {
  position: absolute;
  top: 0;
  right: 0;
  width: 720px;
  max-width: 92vw;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: none;             /* kein Bounce am Anfang/Ende */
  background: var(--color-bright);
  padding: var(--space-basic);
  transform: translateX(100%);
  transition: transform var(--duration-slide) var(--ease-smooth);
}

.info-panel.is-open .info-panel__sheet {
  transform: translateX(0);
}

.info-panel__close {
  display: block;
  margin-left: auto;
  position: relative;
  width: 34px;
  height: 34px;
}

.info-panel__close::before,
.info-panel__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 1.5px;
  background: var(--color-black);
}

.info-panel__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.info-panel__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.info-panel__intro {
  color: var(--color-black);
  margin-top: var(--space-basic);
  margin-bottom: var(--space-padding-1);
}

.info-list {
  margin-bottom: var(--space-padding-1);
}

.info-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-normal);
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-bright-font);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  font-variation-settings: var(--font-opsz);
}

.info-list__label {
  flex-shrink: 0;
  color: var(--color-bright-font);
}

/* Verlinkter Wert (z.B. Projekt-Website) — klassisch: schwarz, KEINE
   Unterstreichung; Hover = Unterstreichung (kein Farbwechsel, da heller
   Panel-Hintergrund). */
.info-list__link {
  color: var(--color-black);
  text-decoration: none;
  text-underline-offset: 3px;
}
.info-list__link:hover {
  text-decoration: underline;
}

.info-list__value {
  width: 286px;
  max-width: 60%;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  color: var(--color-black);
}

/* Description: Label oben, Text darunter (volle Breite) */
.info-list__row--stack {
  flex-direction: column;
  gap: 10px;
}

.info-list__row--stack .info-list__value {
  width: 100%;
  max-width: none;
}

.info-list__row--stack .info-list__value p + p {
  margin-top: var(--space-16);
}

/* Kleine Überschrift im Panel (z.B. „In the field of …") — Schrift via
   t-body-medium aus dem Design-System. Plus Bullet-Liste darunter. */
.info-sub {
  color: var(--color-black);
  margin-top: var(--space-normal);      /* 40px Abstand zum Block davor */
  margin-bottom: var(--space-8);
}

/* Einheitlicher Abstand (40px) oberhalb JEDER Überschrift + oberhalb des
   Schluss-Absatzes nach einer Liste. Höhere Spezifität als die generische
   `p + p`-Regel (16px), damit „Area of responsibility" (folgt auf einen
   <p>) denselben Abstand bekommt wie „In the field of …" (folgt auf <ul>). */
.info-list__row--stack .info-list__value .info-sub,
.info-list__row--stack .info-list__value .info-bullets + p {
  margin-top: var(--space-normal);
}

/* Startet der erste Zwischentitel zuoberst im Wert, soll der Abstand zum
   Label gleich sein wie bei „Description“ → Text (nur der 10px Row-Gap),
   nicht zusätzlich 40px. */
.info-list__row--stack .info-list__value .info-sub:first-child {
  margin-top: 0;
}

.info-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                   /* Bullets enger beieinander */
}

.info-bullets li {
  position: relative;
  padding-left: 18px;
  color: var(--color-black);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  font-variation-settings: var(--font-opsz);
}

.info-bullets li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-bright-font);
}


/* ─── Mobile (≤768px) ────────────────────────────────────── */
@media (max-width: 768px) {
  /* Bild-Margin 16px (Seitenrand); Bild-Abstände bleiben 8px */
  .media-group {
    padding: 0 var(--grid-margin);
  }

  /* 16:9-Duo: gestapelt (volle Breite) → Bildinhalt bleibt lesbar */
  .media-row--16x9 {
    grid-template-columns: 1fr;
  }

  /* Three-Image → zwei Quadrate nebeneinander (8px),
     drittes Bild als 16:9 in voller Breite darunter */
  .media-row--3 {
    grid-template-columns: 1fr 1fr;
  }

  .media-row--3 .media-item:nth-child(3) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }

  /* More Projects: untereinander */
  .more-projects__grid {
    flex-direction: column;
    gap: var(--space-normal);
  }

  /* Read-more: bricht bei Bedarf um */
  .read-more__content {
    white-space: normal;
  }

  /* Info-Panel über volle Breite */
  .info-panel__sheet {
    width: 100%;
    max-width: 100%;
    padding: var(--space-normal) var(--grid-margin);
  }

  /* Mobile: alle Zeilen gestapelt (Label oben, Wert darunter) — wie Description */
  .info-list__row {
    flex-direction: column;
    gap: 10px;
  }

  .info-list__value {
    width: 100%;
    max-width: none;
  }
}