/* ============================================================
   Section: Parallax-Banner
   Seitenbreites (full-bleed) Bild mit optionalem Text-Overlay.
   Markup: Frontend\View\Section\Parallax
   'fixed'-Variante: reines CSS (background-attachment: fixed).
   'parallax'-Variante: Bild-Ebene wird von assets/js/global/parallax.js bewegt.
   ============================================================ */

.parallax {
  position: relative;
  display: grid;
  align-items: center;
  /* Full-bleed ueber die full-Spur des main-Grids (siehe 03-layout.css) —
     kein 100vw/margin-Breakout mehr. Der Inhalt wird vom .parallax-overlay
     auf content-width zentriert. */
  grid-column: full;
  /* Eigenes Padding/Border — überschreibt den generischen section+section-Divider
     (02-base.css), damit das Banner randlos bleibt. */
  padding: 0;
  border: none;
  /* Oversize-Bild-Ebene (Parallax-Variante) wird hier beschnitten. */
  overflow: clip;
}

/* --- Höhe (config.size) --- höher = Effekt länger im Fokus beim Scrollen --- */
.parallax[data-size="s"] { min-height: clamp(18rem, 42vh, 26rem); }
.parallax[data-size="m"] { min-height: clamp(26rem, 70vh, 40rem); }
.parallax[data-size="l"] { min-height: clamp(34rem, 92vh, 56rem); }

/* --- Bild-Ebene (von parallax.js transformierbar) --- */
.parallax-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--parallax-img);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--color-bg-alt);
}

/* --- Variante 'fixed': Bild steht, Content scrollt darüber (reines CSS) --- */
.parallax[data-variant="fixed"] .parallax-bg {
  background-attachment: fixed;
}

/* --- Variante 'parallax': Bild wird via JS (parallax.js) vertikal verschoben.
   Bild-Ebene oben/unten überdimensioniert, damit beim Verschieben keine Kanten
   sichtbar werden. Ohne JS / reduced-motion bleibt sie statisch und zentriert. --- */
.parallax[data-variant="parallax"] .parallax-bg {
  inset: -25% 0;
  will-change: transform;
}

/* --- Scrim (Lesbarkeit des Overlays über dem Foto) --- */
.parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.parallax[data-theme="dark"]::before {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35));
}

.parallax[data-theme="light"]::before {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
}

/* --- Overlay --- */
.parallax-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--gap-section) var(--padding-page);
  display: flex;
}

.parallax-content {
  max-width: 40rem;
}

.parallax-content header { margin: 0; }

/* Eyebrow (optional) */
.parallax-content header span {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-block-end: var(--space-3);
}

.parallax-content h2 {
  margin: 0;
}

.parallax-content p {
  margin-block-start: var(--space-3);
  margin-block-end: 0;
}

.parallax-content .btn {
  margin-block-start: var(--gap-block);
}

/* --- Ausrichtung (config.align) --- */
.parallax[data-align="center"] .parallax-overlay { justify-content: center; }
.parallax[data-align="center"] .parallax-content { text-align: center; }

.parallax[data-align="left"]  .parallax-overlay { justify-content: flex-start; }
.parallax[data-align="left"]  .parallax-content { text-align: start; }

.parallax[data-align="right"] .parallax-overlay { justify-content: flex-end; }
.parallax[data-align="right"] .parallax-content { text-align: end; }

/* --- Theme-Textfarben --- */
.parallax[data-theme="dark"] .parallax-content,
.parallax[data-theme="dark"] .parallax-content :is(h1, h2, h3, h4, p) {
  color: #fff;
}
.parallax[data-theme="dark"] .parallax-content header span {
  color: rgba(255, 255, 255, 0.85);
}

.parallax[data-theme="light"] .parallax-content,
.parallax[data-theme="light"] .parallax-content :is(h1, h2, h3, h4, p) {
  color: var(--color-text);
}
.parallax[data-theme="light"] .parallax-content header span {
  color: var(--color-primary);
}

/* --- Mobile --- */
@media (max-width: 44.999rem) {
  /* iOS Safari rendert background-attachment: fixed nicht zuverlässig → normal scrollen. */
  .parallax[data-variant="fixed"] .parallax-bg {
    background-attachment: scroll;
  }

  .parallax[data-size="l"] { min-height: clamp(24rem, 72vh, 38rem); }
}