/*
 * LZS-243 start page hero: full-bleed image, headline bottom left, chat panel
 * on the right. Shipped as a content-block asset rather than Tailwind
 * utilities because tailwind.config.js only scans Resources/Private/**, so
 * classes used in ContentBlocks templates are never generated. Loads only on
 * pages that render the variant.
 *
 * Mobile is the base case: image first, panel pulled up over its lower edge.
 */
.ls-hero {
    position: relative;
}

.ls-hero__image {
    display: block;
    width: 100%;
    height: auto;
    /* LZS-321 / Figma 2054:44685: the mobile hero photo is taller than square
       (390×451 in the mockup, ratio 390/451). The headline pair now sits on
       the photo above the chat panel, and the panel overlaps its lower edge —
       a 1:1 crop (the older LZS-244 value) is too short for the family motif,
       the headline block and the dark ramp to coexist. The editor still
       uploads one landscape image for both breakpoints; the crop happens here.
       Desktop releases this to `aspect-ratio: auto` in the ≥1024 block. */
    aspect-ratio: 390 / 451;
    object-fit: cover;
}

.ls-hero__panel {
    position: relative;
    z-index: 2;
    /* LZS-321 Figma fidelity pass (frame 2054:44685): the designer's mockup
       has the chat panel starting 36px above the photo's bottom edge (photo
       ends y=522, panel starts y=486). Was -156px pre-pass — that value came
       from an earlier Figma revision (1468:67563) with the headline pair
       still hidden on mobile; now that the headline pair renders above the
       chat (see `.ls-hero__text` below), the deep overlap is no longer
       needed and reads as too much of the photo lost. Offset is against
       `.ls-hero__media` (the previous sibling), not the image directly, but
       the two are the same height — `.ls-hero__media` has no other in-flow
       content. */
    margin: -36px auto 0;
    padding: 0 30px;
    max-width: 560px;
}

/* The widget's own floor is 31rem. That fits the desktop pill row but not the
   mobile one: at 330px the nine chips wrap to FIVE rows, the taller footer eats
   into the panel, and the Conversation collapses far enough to clip the AI-Act
   disclosure under the title — the empty state is `absolute inset-0` inside a
   scroll container the user cannot reach, so whatever does not fit is simply
   gone.

   35.5rem (568px) rather than Figma's 540px (1468:67566): 540 leaves the
   Conversation 14px short of the disclosure's second line at BOTH 390 and 360,
   measured against staging. 560px is the exact minimum; 568 keeps ~14px of
   slack so a font fallback or a longer translation does not silently truncate a
   legally required sentence.

   The only `max-width` query in this mobile-first file, and deliberately so:
   the floor is a fix for the FIVE-ROW pill wrap, which only happens on the
   narrow panel. Desktop wraps to two rows and keeps the widget's own 31rem
   (496px) — raising it there just opens a void between the disclosure and the
   pills. Resetting inside the 1024 block instead would mean pasting the
   widget's default here, where it would silently drift out of sync. */
@media (max-width: 1023.98px) {
    .ls-hero__panel .lzs-hero-embedded {
        --lzs-chat-min-height-hero-embedded: 35.5rem;
    }

    /* LZS-321: the headline pair now renders above the chat window instead of
       hiding (superseding LZS-278's hide-on-mobile rule). `.ls-hero__media` is
       the positioning context so the headline sits a fixed distance from the
       image's own bottom edge, not the section's — the section's height grows
       with the chat panel as a conversation gets longer (LZS-296), and a
       bottom-anchored-to-the-section headline would drift with it. */
    .ls-hero__media {
        position: relative;
    }

    /* LZS-321 Figma fidelity pass (frame 2054:44685): the mockup's dark
       overlay only covers the lower 55% of the photo (rectangle y=272–522 of
       the 71–522 image band), not the lower 75% the old `25% 0 0` inset drew.
       The ramp also reaches full opacity earlier (65% instead of 97%) so the
       navy reads noticeably stronger under the headline pair, matching the
       Figma contrast instead of the paler wash this replaced. */
    .ls-hero__media::after {
        content: "";
        position: absolute;
        inset: 45% 0 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(0, 45, 64, 0) 0%, #002d40 65%);
        pointer-events: none;
    }

    .ls-hero__text {
        position: absolute;
        left: 16px;
        right: 16px;
        /* LZS-321 Figma fidelity pass: motto starts at ~59% of the photo's
           height in the mockup (y=338 of the 71–522 band), clear of the
           family in the upper two-thirds. Kept as the same
           overlap-plus-gutter shape as before — 36px (new panel overlap,
           see `.ls-hero__panel`) + 16px breathing room — which lands the
           text block in the photo's lower half without sitting under the
           panel. Was 156 + 16 = 172px pre-pass. */
        bottom: 52px;
        z-index: 2;
        padding: 0;
        color: #fff;
        /* Figma: both the motto and the h1 subline are centered on mobile
           (was left-aligned to match the desktop column). */
        text-align: center;
    }

    /* Figma: the mobile crop favors the left side of the photo where the
       family sits (source image is 931px wide inside a 390px frame, offset
       x=-130 → 130 / (931-390) = 24%). Mobile-only: desktop's full-bleed
       crop is unrelated and must not shift. */
    .ls-hero__image {
        object-position: 24% center;
    }

    /* Figma 2054:44685: on the 390px mobile frame the motto is 26px/36 and the
       h1 subline 16px/20 (Crete Round). The base `clamp()` floors land at
       28px/17px here, one notch too large — it tips the motto's line break
       ("Wunderschöne Tage und /" instead of the mockup's "Wunderschöne Tage /
       und …"). Pin the mobile sizes to the Figma values; desktop keeps the
       base clamp. */
    .ls-hero__headline {
        font-size: 26px;
        line-height: 1.38;
    }

    .ls-hero__subline {
        font-size: 16px;
        line-height: 1.25;
    }
}

.ls-hero__text {
    padding: 24px 16px;
}

.ls-hero__headline {
    margin: 0;
    font-family: crete_roundregular, serif;
    font-size: clamp(28px, 3.35vw, 48px);
    line-height: 1.25;
}

.ls-hero__subline {
    margin: 20px 0 0;
    font-size: clamp(17px, 2.1vw, 30px);
    line-height: 1.2;
    /* LZS-321: promoted from `<p>` to `<h1>` (page's only h1, SEO). Browsers
       bold h1 by default; reset back to the original `<p>` weight so the
       swap is semantic only, not visual. */
    font-weight: normal;
}

@media (min-width: 1024px) {
    /* LZS-321: on mobile `.ls-hero__media` is the headline's positioning
       context (see the max-width query above). At this breakpoint it has to
       disappear from the box tree entirely rather than just resetting its
       own properties — `display: contents` does that, so `.ls-hero__image`
       and `.ls-hero__text` fall back to being positioned against `.ls-hero`
       itself, exactly as before this change. */
    .ls-hero__media {
        display: contents;
    }

    .ls-hero {
        display: flex;
        /* LZS-278: `center` put the panel on the row's own vertical midpoint,
           independent of `.ls-hero__text`'s `bottom` offset. Whenever the
           panel's height differs from the text block's, that left the panel
           floating well above the text's last line instead of anchored to
           `.ls-hero`'s own bottom edge (Figma 1467:64843). `flex-end` anchors
           both to that edge, and each block's own bottom margin below then
           sets its offset from it — 112px for the text, 80px for the panel,
           so the chat sits 32px lower than the text. */
        align-items: flex-end;
        /* LZS-296: `.c-header` is position:fixed at 120px from the `large`
           (1024px) breakpoint up, and `.c-content` offsets the hero by a
           matching padding-top:120px, so the hero starts flush below the
           header. A hard `min-height: 900px` therefore pushes the bottom-
           anchored panel 172px below the fold on a 1366x768 desktop
           (120 + 900 - 80 = 940 > 768). Cap the height to the space actually
           left under the header so the whole hero (headline + chat panel)
           stays above the fold on short viewports, while 900px stays the upper
           bound on tall ones (1920x1080: min(900, 1080-120=960) = 900,
           unchanged). `dvh` tracks mobile browser chrome; the `vh` line above
           is the fallback for engines without `dvh`. This also resolves the
           LZS-295 short-viewport caveat (headline 2nd line below the fold). */
        --ls-hero-header-offset: 120px;
        min-height: min(900px, calc(100vh - var(--ls-hero-header-offset)));
        min-height: min(900px, calc(100dvh - var(--ls-hero-header-offset)));
        overflow: hidden;
        /* o-wrapper is max-width 1270px with 50px padding, so its inner edge
           sits 585px from centre - hero text and panel line up with the content
           column. Both live here so the text column can be derived from the
           panel instead of repeating its width. */
        --ls-hero-gutter: max(24px, calc(50% - 585px));
        --ls-hero-panel: 592px;
    }

    .ls-hero__image {
        position: absolute;
        inset: 0;
        height: 100%;
        /* Desktop is full-bleed behind the panel, so the mobile 1:1 crop has to
           be released explicitly — inset + height:100% alone lose against it. */
        aspect-ratio: auto;
    }

    /* Figma 1468:64942 darkens the lower half so white text stays legible over
       any image. Sits above the image (which has no z-index) and below text and
       panel (z-index 2); .ls-hero clips it via overflow: hidden. */
    .ls-hero::after {
        content: "";
        position: absolute;
        inset: 52% 0 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(0, 45, 64, 0) 2%, #002d40 97%);
        backdrop-filter: blur(17px);
        /* The color gradient fades, but backdrop-filter is binary — without a
           mask the photo snaps from sharp to blurred in a hard horizontal seam
           at the 52% line. The mask fades gradient AND blur in together. */
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
        mask-image: linear-gradient(180deg, transparent, #000 45%);
        pointer-events: none;
    }

    /* 592, not Figma's 570: the booking card stacks into one column below a
       480px container (widget styles.css:145-153). */
    .ls-hero__panel {
        /* LZS-278: chat bottom sits 32px below the text bottom (text bottom
           112px, panel bottom 80px) — `align-items: flex-end` lands both on
           `.ls-hero`'s bottom edge, and the two margins below then set each
           block's own offset from it. */
        margin: 0 var(--ls-hero-gutter) 80px auto;
        padding: 0;
        max-width: none;
        width: var(--ls-hero-panel);
        /* LZS-296: keep breathing room below the panel when the auto-scroll
           safety net (hero-scroll.js) has to bring a grown panel back into
           view. Fix 1 above does the heavy lifting; this + the observer are
           the belt-and-suspenders for the rare case the widget still grows
           past the fold after an interaction on an edge viewport. */
        scroll-margin-block-end: 16px;
    }

    /* Bounded on the right by the panel rather than capped at a fixed width:
       the headline is editorial, and any max-width wide enough for the Figma
       column also runs the text box under the panel, which then swallows
       clicks on the chat input row. */
    .ls-hero__text {
        position: absolute;
        left: var(--ls-hero-gutter);
        right: calc(var(--ls-hero-gutter) + var(--ls-hero-panel) + 24px);
        bottom: 112px;
        z-index: 2;
        padding: 0;
        color: #fff;
    }
}