/* =============================================================================
   WV-Index — Layout Module
   Konzept: 16-Spalten-Grid, gap: --space-sm (1rem)
   Zeilen-Rhythmus: L+P+P / P+P+L / L+P+P / P+P+L
   L = span 8, aspect-ratio: 16/9
   P = span 4, aspect-ratio: 9/16

   REGEL: NUR Layout. Keine Typografie. Keine Farben direkt.
          Alle Werte via CSS Custom Properties aus globals.css.
   ============================================================================= */


/* =============================================================================
   NAVIGATION
   Logo links — Hamburger rechts — hide-on-scroll via .nav--hidden
   ============================================================================= */

.nav {
  position:    fixed;
  top:         0;
  left:        0;
  right:       0;
  z-index:     var(--z-navigation);
  padding-inline: var(--page-margin);
  padding-block:  var(--space-md);
  display:     flex;
  align-items: center;
  justify-content: space-between;
  transition:  transform var(--dur-deliberate) var(--ease-out-expo);
}

.nav--hidden {
  transform: translateY(-100%);
}

/* Spalte 1: Logo */
.nav__logo {
  display:      block;
  height:       3rem;
  width:        auto;
  line-height:  0;
  justify-self: start;
}

.nav__logo svg {
  height: 3rem;
  width:  auto;
}

.nav__logo svg path {
  fill: var(--color-logo);
}

/* Spalte 2: Counter — Grid-Mitte, kein absolute mehr */
/* Controls + Menu — rechtsbündig */
.nav__right {
  display:      flex;
  align-items:  center;
  gap:          var(--space-sm);
  justify-self: end;
}

/* Nav-Controls: Lang + Theme-Toggle, rechts vom Counter */
.nav__controls {
  display:     flex;
  align-items: center;
  gap:         var(--space-sm);
  flex-shrink: 0;
}

.nav__lang {
  display:     flex;
  align-items: center;
  gap:         var(--space-xs);
}

.nav__lang-opt {
  font-size:      var(--text-body);
  font-weight:    400;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  opacity:        0.4;
  transition:     opacity var(--dur-quick) var(--ease-material);
}

.nav__lang-opt--active,
.nav__lang-opt:hover {
  opacity: 1;
}

.nav__lang-sep {
  font-size: var(--text-body);
  opacity:   0.2;
}

.nav__theme-toggle {
  font-size:   var(--text-body);
  line-height: 1;
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     var(--space-xs);
  min-height:  44px;
  opacity:     0.6;
  transition:  opacity var(--dur-quick) var(--ease-material);
}

.nav__theme-toggle:hover {
  opacity: 1;
}

/* Menu-Trigger (alle Viewports) */
.nav__menu-trigger {
  font-family:    inherit;
  font-size:      var(--text-body);
  font-weight:    400;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  white-space:    nowrap;
  background:     none;
  border:         none;
  padding:        var(--space-xs);
  cursor:         pointer;
  min-height:     44px;
}


/* =============================================================================
   NAV MENU — Overlay
   Vollbild-Overlay beim Öffnen des Hamburgers
   ============================================================================= */

.nav-menu {
  position:   fixed;
  inset:      0;
  z-index:    var(--z-overlay);
  background: var(--color-bg);
  display:    flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: var(--page-margin);
  padding-block:  var(--space-xl);

  /* Versteckt: clip-path von oben — kein display:none für Animation */
  clip-path:  polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path var(--dur-cinematic) var(--ease-out-expo);
  pointer-events: none;
}

.nav-menu[aria-hidden="false"] {
  clip-path:      polygon(0 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: auto;
}

/* Close-Button: spiegelt Position von "Menu" in der Nav */
.nav-menu__close {
  position:       absolute;
  top:            var(--space-md);
  right:          var(--page-margin);
  font-family:    inherit;
  font-size:      var(--text-body);
  font-weight:    400;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  background:     none;
  border:         none;
  cursor:         pointer;
  min-height:     44px;
  padding:        var(--space-xs);
}

/* Overlay: 2 Spalten nebeneinander, Meta unten */
.nav-menu__body {
  display:   flex;
  gap:       var(--space-xl);
  flex:      1;
  align-items: flex-start;
  padding-top: var(--space-xl);
}

.nav-menu__col {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
  list-style:     none;
}

.nav-menu__link {
  font-size:      var(--text-body);
  font-weight:    400;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  display:        block;
  padding-block:  var(--space-xs);
  transition:     opacity var(--dur-quick) var(--ease-material);
  hyphens:        none;
  word-break:     keep-all;
}

.nav-menu__link:hover {
  opacity: 0.5;
}

.nav-menu__meta {
  display:     flex;
  gap:         var(--space-md);
  align-items: baseline;
  flex-wrap:   wrap;
  padding-top: var(--space-lg);
  border-top:  var(--border-hairline) solid var(--color-border);
}

.nav-menu__meta-link {
  font-size:      var(--text-body);
  font-weight:    400;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  opacity:        0.45;
  transition:     opacity var(--dur-quick) var(--ease-material);
}

.nav-menu__meta-link:hover {
  opacity: 1;
}

.nav-menu__meta-sep {
  font-size:      var(--text-body);
  font-weight:    400;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  opacity:        0.25;
  margin-left:    auto;
}


/* =============================================================================
   PAGE WRAPPER
   ============================================================================= */

.wv-index {
  width:      100%;
  overflow-x: hidden;
  /* Nav-Clearance: 3rem Logo + space-md padding oben */
  padding-top: calc(3rem + var(--space-md));
  min-height:  100vh;
}


/* =============================================================================
   WV-HERO
   Manifesto-Text + Subhead über dem Grid
   --text-hero: clamp(5rem, 22vw, 35rem) — user-spezifiziert: "so 35rem"
   ============================================================================= */

.wv-hero {
  padding-inline:  var(--page-margin);
  padding-top:     var(--space-lg);
  padding-bottom:  var(--space-md);
}

.wv-hero__statement,
.wv-hero__subhead {
  font-family: var(--font-base);
  font-size:   var(--text-h1);
  line-height: 1.1;
  font-weight: 400;
  color:       var(--color-fg);
}


.wv-hero__statement {
  padding-bottom: 0.1em;
}

.wv-hero__subhead {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  font-size:       var(--text-body);
  line-height:     1.3;
  padding-top:     var(--space-lg);
}

/* Footer: Index links | Counter rechts */

.wv-hero__footer-link {
  font-family:     inherit;
  font-size:       inherit;
  font-weight:     inherit;
  line-height:     inherit;
  color:           inherit;
  text-decoration: none;
  border:          var(--border-hairline) solid var(--color-forge);
  padding:         0.15em 0.4em;
}

.wv-hero__footer-link:hover {
  background: var(--color-forge);
  color:      var(--color-ivory);
}

.wv-hero__footer {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding-top:     var(--space-sm);
  font-family:     var(--font-base);
  font-size:       var(--text-body);
  line-height:     1.3;
  font-weight:     400;
  color:           var(--color-fg);
}


/* =============================================================================
   WV-GRID
   16 Spalten, gap: --space-sm (1rem — freigegebenes Konzept)
   Kein row-gap explizit: identisch mit column-gap = --space-sm
   ============================================================================= */

.wv-grid {
  display:               grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-auto-flow:        row dense;
  gap:                   var(--space-sm);
  padding-inline:        var(--page-margin);
}


/* =============================================================================
   WV-CARD — Basis
   Gemeinsame Styles für Landscape und Portrait.
   Link-Element: klickbar, kein Hover-Effekt auf Bild.
   WV-Nummer (type-label) über dem Bild.
   ============================================================================= */

.wv-card {
  display:         block;
  position:        relative;
  text-decoration: none;
  color:           inherit;
  /* Kein Hover-Effekt auf der Card — Konzept: kein Hover */
}

/* WV-Nummer: über dem Bild, links oben */
.wv-card__number {
  display:       block;
  margin-bottom: var(--space-xs);
  color:         var(--color-fg);
}

/* Bild-Wrapper: aspect-ratio via Modifier-Klasse */
.wv-card__image-wrap {
  position:   relative;
  overflow:   hidden;
  background: var(--color-bg-elevated); /* Ivory-Platzhalter, kein Blur-Up */
  width:      100%;
}

/* Bild: vollflächig im Wrapper */
.wv-card__image {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  /* Kein filter, kein opacity-Effekt — Objekt spricht für sich */
}


/* =============================================================================
   WV-CARD MODIFIER: LANDSCAPE (span 8, aspect-ratio 16/9)
   ============================================================================= */

.wv-card--landscape {
  grid-column: span 8;
}

.wv-card--landscape .wv-card__image-wrap {
  /* aspect-ratio: inline style vom Bild */
}


/* =============================================================================
   WV-CARD MODIFIER: PORTRAIT (span 4, aspect-ratio 9/16)
   ============================================================================= */

.wv-card--portrait {
  grid-column: span 4;
}

.wv-card--portrait .wv-card__image-wrap {
  /* aspect-ratio: inline style vom Bild */
}


/* =============================================================================
   SENTINEL — Infinite Scroll Trigger
   ============================================================================= */

.wv-sentinel {
  grid-column:    1 / -1;
  height:         var(--space-xl);
  pointer-events: none;
}


/* =============================================================================
   PAGE CURTAIN (Page-Transition)
   ============================================================================= */

.page-curtain {
  position:       fixed;
  inset:          0;
  z-index:        var(--z-curtain);
  pointer-events: none;
  will-change:    clip-path;
}


/* =============================================================================
   FOOTER
   ============================================================================= */

.site-footer {
  padding-inline: var(--page-margin);
  padding-block:  var(--space-lg);
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  gap:            var(--space-md);
  border-top:     var(--border-hairline) solid var(--color-border);
  margin-top:     var(--section-gap);
}

.site-footer__left {
  display:     flex;
  align-items: center;
  gap:         var(--space-md);
}

.site-footer__nav {
  display:    flex;
  gap:        var(--space-md);
  list-style: none;
}


/* =============================================================================
   RESPONSIVE OVERRIDES (Desktop-First)
   Breakpoints: >1024px Desktop / 768–1024px Tablet / <768px Mobile
   ============================================================================= */

/* Tablet: 768px–1024px — 8 Spalten Grid */
@media (max-width: 1024px) {
  /* Landscape: span 8 bleibt — füllt alle 8 Tablet-Spalten */
  .wv-card--landscape {
    grid-column: span 8;
  }

  /* Portrait: span 4 bleibt — 2 Portraits nebeneinander auf 8 Spalten */
  .wv-card--portrait {
    grid-column: span 4;
  }

  /* Nav-Links Gap reduzieren */
}

/* Mobile: <768px — 4 Spalten Grid */
@media (max-width: 768px) {
  /* Landscape: volle 4 Spalten */
  .wv-card--landscape {
    grid-column: span 4;
  }

  /* Portrait: 2 Spalten — 2 Portraits nebeneinander */
  .wv-card--portrait {
    grid-column: span 2;
  }

  .site-footer {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-sm);
  }

  /* Nav compact */
  .nav {
    padding-block: var(--space-sm);
  }
  .nav__logo,
  .nav__logo svg {
    height: 2rem;
  }
  .nav__lang {
    display: none; /* Lang-Switcher ins Fullscreen-Menu verschoben */
  }
  .wv-index {
    padding-top: calc(2rem + 2 * var(--space-sm));
  }

  /* Hero subhead: Stack statt Space-Between */
  .wv-hero__subhead {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-xs);
    padding-top:    var(--space-md);
  }

  /* Hero padding oben reduzieren */
  .wv-hero {
    padding-top: var(--space-md);
  }

  /* Nav-Menu: Single-Column auf Mobile */
  .nav-menu__body {
    flex-direction: column;
    gap:            var(--space-md);
    padding-top:    var(--space-lg);
  }

  /* Footer-Links: nie trennen */
  .site-footer__nav a,
  .site-footer a {
    hyphens:    none;
    word-break: keep-all;
  }
}

/* Sehr kleines Mobile: <480px */
@media (max-width: 480px) {
  /* Portrait: volle 4 Spalten — 1 pro Reihe */
  .wv-card--portrait {
    grid-column: span 4;
  }

  /* Landscape: volle 4 Spalten */
  .wv-card--landscape {
    grid-column: span 4;
  }
}