/*
 * styles.css — Basis & Layout der AGM Scrollpage
 * Creative-Giants-Stil: Negativraum, Switzer Light, full-bleed Fotografie.
 * Abhängig von tokens.css (Variablen). Komponenten → components.css.
 */

/* ---- Typo-Basis ---- */
.eyebrow {
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-graphite);
  line-height: var(--leading-relaxed);
}

.display {
  font-size: var(--text-display);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}

.heading {
  font-size: var(--text-heading);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-tight);
}

.heading-sm {
  font-size: var(--text-heading-sm);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-heading-sm);
  line-height: var(--leading-snug);
}

.lede {
  font-size: var(--text-subheading);
  font-weight: var(--weight-light);
  max-width: 52ch;
  color: var(--color-ink-black);
}

.body-graphite {
  color: var(--color-graphite);
  max-width: 60ch;
}

/* ---- Layout-Hüllen ---- */
.bleed {
  width: 100%;
  padding-inline: var(--page-pad);
}

.section {
  padding-block: var(--section-gap);
}

/* ============ Header ============ */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-24);
  padding-block: var(--space-16);
}

.header-eyebrow {
  max-width: 38ch;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-caption);
  color: var(--color-ink-black);
}

.logo-mark {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-ink-black);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
}

/* ============ Hero ============ */
.hero {
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-32);
  padding-block: clamp(3rem, 9vw, 7rem);
}

.hero .display {
  max-width: 16ch;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24);
  align-items: baseline;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-top: var(--space-8);
}

/* ============ Full-Bleed Bildband ============ */
.image-band {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-charcoal);
}

.image-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-band__overlay {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 40ch;
}

.image-band__overlay .eyebrow,
.image-band__overlay .heading-sm {
  color: var(--color-bone-white);
}

.image-band::after {
  /* zarter Verlauf, damit Overlay-Text lesbar bleibt */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(16, 23, 49, 0.55) 0%,
    rgba(16, 23, 49, 0) 45%
  );
  pointer-events: none;
}

/* ============ Statement-Sektion ============ */
.statement {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: 24ch;
}

.statement.full {
  max-width: 22ch;
}

.statement + .statement-body {
  margin-top: var(--space-32);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  margin-bottom: var(--space-48);
}

/* ============ Responsiv ============ */
@media (max-width: 768px) {
  .site-header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "eyebrow menu"
      "logo logo";
    row-gap: var(--space-16);
  }
  .header-eyebrow {
    grid-area: eyebrow;
  }
  .logo-mark {
    grid-area: logo;
  }
  .header-menu {
    grid-area: menu;
  }
  .image-band {
    aspect-ratio: 4 / 5;
  }
  .image-band__overlay {
    padding: var(--space-24);
  }
}