/**
 * @file hero.css
 * Hero-Block der Startseite (SN8 2026).
 *
 * Markup wird als HTML-Block in die Region "Hero" eingefügt; page.html.twig
 * umschließt die Region mit <section class="hero">. Drupal schiebt dazwischen
 * Region-/Block-/Feld-Wrapper – diese werden per display:contents aufgelöst,
 * sodass .hero-media, .bubble und .hero-inner direkte Layout-Kinder von .hero
 * werden (sonst greift weder das Flex-Bottom-Alignment noch die absolute
 * Positionierung zuverlässig).
 *
 * Der Header ist fixiert und teiltransparent; der Hero liegt bewusst darunter
 * (page--has-hero ohne Top-Offset). Das große padding-top der .hero-inner
 * sorgt dafür, dass der Inhalt nicht unter dem Header verschwindet.
 */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;          /* Inhalt unten ausrichten */
  min-height: 74vh;
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-pure-white);
}

/* Drupal-Wrapper (Region/Block/Feld) auflösen, damit die Hero-Teile direkte
   Kinder von .hero werden. */
.hero .region,
.hero .block,
.hero .block__content,
.hero .field,
.hero .field__item {
  display: contents;
}

/* --- Hintergrundbild --- */
.hero-media {
  position: absolute;
  inset: 0;
  background-image: url("../images/hero.webp");
  background-size: cover;
  background-position: center;
}

/* Dezente Abdunklung links für die Lesbarkeit der Schrift. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 10, 30, 0.45) 0%,
    rgba(8, 10, 30, 0.15) 45%,
    transparent 70%
  );
}

/* --- Inhaltsraster --- */
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--layout-width);
  margin-inline: auto;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  /* Inhalt nach unten und etwas nach rechts gerückt, Platz unter dem Header. */
  padding-top: clamp(5rem, 16vw, 12rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  padding-inline: clamp(1rem, 6vw, 6rem);
}

@media (min-width: 760px) {
  .hero-inner {
    grid-template-columns: minmax(0, auto) minmax(0, 1.35fr);
    align-items: end;
  }
}

/* --- "Safe · Night · Live"-Schriftzug mit Anaglyph-/RGB-Split --- */
.snl-stack {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.04em;
  color: var(--color-pure-white);
  /* Blau links, Grün rechts (+ leichtes Glühen). Werte entsprechen
     --color-blue (#2b35e8) und --color-green (#2ee636). */
  text-shadow:
    -0.05em 0 0 rgba(43, 53, 232, 0.95),
     0.05em 0 0 rgba(46, 230, 54, 0.95),
     0 0 0.4em rgba(46, 230, 54, 0.3);
  animation: snl-anaglyph 6s ease-in-out infinite;
}

.snl-stack span {
  display: block;
}

.snl-stack .dot {
  font-size: 0.5em;
  opacity: 0.8;
}

/* Leichtes „3D-Signal"-Zucken des Blau/Grün-Versatzes. */
@keyframes snl-anaglyph {
  0%, 100% {
    text-shadow: -0.05em 0 0 rgba(43, 53, 232, 0.95), 0.05em 0 0 rgba(46, 230, 54, 0.95), 0 0 0.4em rgba(46, 230, 54, 0.3);
  }
  20% {
    text-shadow: -0.065em -0.008em 0 rgba(43, 53, 232, 0.95), 0.055em 0.008em 0 rgba(46, 230, 54, 0.95), 0 0 0.45em rgba(46, 230, 54, 0.3);
  }
  40% {
    text-shadow: -0.04em 0.006em 0 rgba(43, 53, 232, 0.95), 0.075em -0.006em 0 rgba(46, 230, 54, 0.95), 0 0 0.35em rgba(46, 230, 54, 0.3);
  }
  55% {
    text-shadow: -0.075em 0 0 rgba(43, 53, 232, 0.95), 0.045em 0 0 rgba(46, 230, 54, 0.95), 0 0 0.5em rgba(46, 230, 54, 0.3);
  }
  75% {
    text-shadow: -0.05em 0.008em 0 rgba(43, 53, 232, 0.95), 0.06em -0.008em 0 rgba(46, 230, 54, 0.95), 0 0 0.4em rgba(46, 230, 54, 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .snl-stack {
    animation: none;
  }
}

/* --- Fließtext + CTA --- */
.hero-copy p {
  max-width: 34ch;
  font-size: clamp(1.15rem, 1.9vw, 1.65rem);
  line-height: 1.4;
  margin-bottom: 1.4rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

/* --- green_bubble.svg: Kapsel über dem Hero-Bild (color-dodge) ---
   Die .bubble-Basis (Position/Größe) steht global in css/sections.css. */
.bubble-hero {
  bottom: -100px;
  left: clamp(1rem, 4vw, 4rem);
  z-index: 2;
  mix-blend-mode: color-dodge;
}