/**
 * Block: Hero Home
 *
 * Layout:
 *   Mobile: Content oben → Bild → gelber Latest-Post-Teaser gestapelt.
 *   Desktop (≥1024): 2-Spalten-Grid, Content links, Bild + Teaser rechts.
 *
 * Linien-System:
 *   data-line="L-top-left L-bottom-right"
 *   Größen: --line-tl-w/--line-tl-h (obere linke Ecke),
 *           --line-br-w/--line-br-h (untere rechte Ecke).
 *
 * Typography-Overrides per Custom Property am Block:
 *   --hero-eyebrow-size, --hero-heading-size, --hero-intro-size
 *
 * Modifier-Klassen:
 *   .block--bg-{beige|dunkelbeige|white|navy}
 *   .block--pad-{none|normal|lg}
 *   .block--ratio-{4-3|3-2|16-9|1-1}
 */

/* ── Block-Wrapper ─────────────────────────────── */

.block--hero-home {
    position: relative;
    overflow: hidden;

    /* L-Formen: grob so groß, dass sie die Bild+Teaser-Säule umschließen. */
    --line-tl-w: 55%;
    --line-tl-h: 50%;
    --line-br-w: 50%;
    --line-br-h: 55%;
}

/* Hero-Home-Linien-Override: das SVG füllt die ganze Section (top: 0,
 * height: 100%), damit die Y-Positionen der drei horizontalen Stufen
 * direkt in die Polyline-Punkte codiert werden können — siehe
 * assets/js/modules/hero-home-line.js. Der Universal-Default
 * (--line-start-y-px-Offset) gilt weiter für alle anderen Hero-Blöcke. */
.block--hero-home .block__line-svg {
    top: 0;
    height: 100%;
}

/* Bewusst langsamere Strich-Animation NUR für Hero-Home — die globale
 * --duration-line (siehe global.css) bleibt für alle anderen Heros
 * unverändert, sodass Page-Hero / Archive-Hero / Single-Post etc. ihr
 * gewohntes Tempo behalten. */
.block--hero-home .block__line-path {
    transition-duration: 4500ms;
}

.block--hero-home .block__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: start;
}

/* ── Background-Varianten ──────────────────────── */

.block--bg-beige       { background-color: var(--color-beige); }
.block--bg-dunkelbeige { background-color: var(--color-dunkelbeige); }
.block--bg-white       { background-color: var(--color-white); }

.block--bg-navy {
    background-color: var(--color-navy);
    color: var(--color-text-on-navy);
}

.block--bg-navy .hero-home__eyebrow,
.block--bg-navy .hero-home__heading,
.block--bg-navy .hero-home__intro {
    color: var(--color-text-on-navy);
}

.block--bg-navy .hero-home__heading strong,
.block--bg-navy .hero-home__heading b {
    color: var(--color-electric-blue);
}

/* ── Padding-Varianten ─────────────────────────── */

.block--pad-none   { padding-block: 0; }
.block--pad-normal { padding-block: var(--space-16) 0; }
.block--pad-lg     { padding-block: var(--space-24) 0; }

/* ── Content-Spalte ────────────────────────────── */

.hero-home__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.hero-home__eyebrow {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--hero-eyebrow-size, var(--text-sm));
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-meta);
}

.hero-home__heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--hero-heading-size);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.hero-home__heading strong,
.hero-home__heading b {
    color: var(--color-navy);
    font-weight: inherit;
}

.hero-home__intro {
    max-width: 46ch;
    font-size: var(--hero-intro-size, var(--text-lg));
    line-height: var(--lh-relaxed);
    color: var(--color-text);
}

.hero-home__intro > *:first-child { margin-top: 0; }
.hero-home__intro > *:last-child  { margin-bottom: 0; }

/* Auf Tablet + Mobile (<1024 px) etwas Atem nach rechts —
 * optischer Rhythmus wie beim gelben Latest-Post-Teaser. */
@media (max-width: 1024px) {
    .hero-home__intro {
        padding-right: var(--space-8);
    }

    /* Content-Spalte schmaler als die Grid-Cell, damit rechts genug
     * Platz für den Linien-Knick + sichtbaren Strich + 15 px Endabstand
     * zum Block-Right (= Viewport-Right bei alignfull-Section) bleibt.
     * Die Stacked-Linie (siehe hero-home-line.js) ankert ihren Knick an
     * .hero-home__content right + 15 px. */
    .hero-home__content {
        max-width: calc(100% - 60px);
    }
}

.hero-home__cta-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

/* ── Media-Spalte (Bild + gelber Teaser) ────── */

.hero-home__media {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hero-home__image-wrap {
    position: relative;
}

.hero-home__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0;
}

/* Video-Variante nutzt dieselben Aspect-Ratio-Klassen — braucht aber
 * explizite Height, damit Safari/Firefox das object-fit respektieren.
 * background: transparent verhindert die dunkle Default-Video-Fläche,
 * die sonst bei Sub-Pixel-Rounding als Hairline an den Rändern
 * durchschimmert. */
.hero-home__video {
    height: 100%;
    background: transparent;
}

.block--ratio-4-3  .hero-home__image,
.block--ratio-4-3  .hero-home__image-placeholder { aspect-ratio: 4 / 3; }
.block--ratio-3-2  .hero-home__image,
.block--ratio-3-2  .hero-home__image-placeholder { aspect-ratio: 3 / 2; }
.block--ratio-16-9 .hero-home__image,
.block--ratio-16-9 .hero-home__image-placeholder { aspect-ratio: 16 / 9; }
.block--ratio-1-1  .hero-home__image,
.block--ratio-1-1  .hero-home__image-placeholder { aspect-ratio: 1 / 1; }

.hero-home__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-dunkelbeige);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    width: 100%;
}

/* ── Gelber Latest-Post-Teaser ───────────────── */

.hero-home__latest-post {
    display: block;
    background-color: var(--color-neongelb);
    color: var(--color-text-on-yellow);
    /* Rechtes Padding bewusst groß: die 2. vertikale Hero-Linie sitzt
     * 15 px (sichtbar) innerhalb der gelben Box (siehe hero-home-line.js),
     * mit --line-stroke: 20 px reicht die linke Linien-Kante bis
     * ~35 px vom rechten Box-Rand. --space-12 (48 px) lässt ~13 px Luft
     * zwischen Text und Linie. Das Mobile-Override unten setzt für
     * gestapelte Layouts ein engeres Padding zurück. */
    padding: var(--space-6) var(--space-12) var(--space-12) var(--space-8);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-default);
}

.hero-home__latest-post:hover,
.hero-home__latest-post:focus-visible {
    background-color: var(--color-cta-hover);
    color: var(--color-text-on-yellow);
}

.hero-home__latest-meta {
    display: block;
    margin: 0 0 var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text-on-yellow);
}

.hero-home__latest-title {
    display: block;
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--color-text-on-yellow);
}

.hero-home__latest-subtitle {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--color-text-on-yellow);
}

.hero-home__latest-excerpt {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-style: italic;
    line-height: var(--lh-relaxed);
    color: var(--color-text-on-yellow);
}

/* Inline-Chevron direkt hinter dem letzten Satz des Excerpts. */
.hero-home__latest-chevron {
    display: inline-block;
    width: 0.6em;
    height: 0.9em;
    margin-left: 0.35em;
    vertical-align: -0.08em;
}

.hero-home__latest-fallback {
    padding: var(--space-4) var(--space-6);
    background-color: var(--color-dunkelbeige);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ── Breakpoints ──────────────────────────────── */

/* Mobile (≤ 768 px): Bild + gelber Teaser bis an die Viewport-Ränder.
 * Die Media-Säule bricht aus dem Container-Padding aus. */
@media (max-width: 768px) {
    .block--hero-home .hero-home__media {
        margin-inline: calc(var(--container-padding) * -1);
    }

    .hero-home__latest-post {
        padding: var(--space-6) var(--space-4) var(--space-8);
    }
}

/* Hero-Home überschreibt das globale --hero-heading-size lokal mit
 * seiner eigenen, größeren Skala. ACF-Inline-Override (style="...")
 * am Block selbst gewinnt weiterhin gegen diese lokalen Defaults. */
.block--hero-home {
    --hero-heading-size: var(--text-hero);
}

@media (min-width: 769px) {
    .block--hero-home {
        --hero-heading-size: clamp(2.75rem, 6vw, 5.5rem);
    }
}

/* Mobile: H1 ~20 % kleiner. WICHTIG: direkt auf der Headline skalieren, NICHT
 * die Variable überschreiben — ein per-Block gesetzter ACF-Größenwert hängt
 * inline als style="--hero-heading-size: …" am Block und schlägt jede
 * Variablen-Regel im Stylesheet (auch in Media Queries). calc(… * 0.8) greift
 * daher auf BEIDE Fälle: Default (--text-hero → 2.5rem → 2rem) UND Inline-
 * Override (z. B. --text-5xl = 3rem → 2.4rem). */
@media (max-width: 768px) {
    .hero-home__heading {
        font-size: calc(var(--hero-heading-size) * 0.8);
    }
}

@media (min-width: 1025px) {
    .block--hero-home .block__inner {
        grid-template-columns: 42fr 58fr;
        gap: var(--space-12);
    }

    .hero-home__content {
        /* Kein padding-left mehr: Text-Linkskante soll bündig zur
         * Header-Logo-Position liegen — beide nutzen denselben
         * .container-Padding, also kein zusätzliches Einrücken. */
        /* Lesbreite begrenzen, damit Headline + Intro auf breiten Viewports
         * nicht in die erste vertikale Linie (15 px links vom Bild) laufen. */
        max-width: 32rem;
    }

    /* Content im gelben Teaser etwas nach unten schieben, damit die Hero-Linie
     * UNTER dem Bild (in der gelben Box-Oberzone) Platz hat, ohne den Text zu
     * kreuzen. Bild & Box bleiben gestapelt — das „Überragen" des Bildes auf
     * die Box bleibt also erhalten. */
    .hero-home__latest-post {
        padding-top: var(--space-12);
    }
}