/*
 * Object-page facts box (§2).
 * Self-contained styles: the project's Tailwind build does not scan
 * ContentBlocks templates, so this element ships its own CSS asset
 * (same pattern as the chatbot-booking block). Colours mirror the brand
 * palette defined in tailwind.config.js.
 *
 * This element renders ONLY the facts box; headline, description text and
 * link lists live in the existing ls_object_description CE placed below it,
 * which styles.css narrows to the same centered band on every object page.
 *
 * Layout is mobile-first: the facts stack on narrow viewports and switch to
 * the Figma row layout from 768px upward (Figma frame 881:31361 only
 * specifies desktop — see PR "Mobile derivation").
 */

/*
 * LZS-252 — Objektseiten MIT diesem Intro-Element blenden das mitscrollende
 * Preis-Fenster aus (`ls_object_info`). Ohne das überlagert es Headline und
 * dritte Fakten-Spalte, auf Desktop wie auf Mobile.
 *
 * Warum hier und nicht in der Sass-Pipeline: diese Datei wird per
 * `f:asset.css` aus dem Template des Content Blocks geladen, also NUR auf
 * Seiten, die das Intro-Element tragen. Objektseiten ohne das Element
 * behalten ihr Preis-Fenster unverändert — kein globaler Eingriff, kein
 * gulp-Build (styles.css bleibt unberührt).
 *
 * Beide Ausprägungen desselben CE:
 *  - `.c-object-info__wrapper`  Desktop, rechts, wird per `--fixed`
 *    (position: fixed, top 120px) mitgescrollt.
 *  - `.c-object-info--mobile`   fixierte Buchen-Leiste am unteren Rand.
 * Gleiches Muster wie im Einheitenelement, siehe
 * ContentElements/property-units/assets/units.css.
 *
 * `!important` ist hier Pflicht, nicht Bequemlichkeit: `general.js` schaltet die
 * mobile Leiste unter 768px per jQuery `.show()`/`.hide()`. `.show()` schreibt
 * ein INLINE `style="display: block;"`, das jede normale Autoren-Regel schlägt —
 * ohne `!important` blieb die Leiste auf Mobil trotz dieser Datei sichtbar und
 * überdeckte weiterhin den unteren Seiteninhalt. An die Regel im Quell-JS kommen
 * wir hier nicht heran: ausgeliefert wird `general.min.js`, ein uglify-Concat aus
 * ~30 Dateien der Legacy-gulp-Pipeline (Node 8.17). Zentral gefixt in PR #121.
 */
.c-object-info__wrapper,
.c-object-info--mobile {
    display: none !important;
}

.ls-intro {
    padding-block: 48px;
    background: #ffffff;
}

/* `.ls-intro__inner` (the centered 780px band) lives in the globally compiled
 * styles.css (Sass/components/_components.object-detail.scss) — the object-detail
 * headline uses it outside this conditionally loaded file, so it must always be
 * present. */

/* Headline — two-line serif display type, left aligned inside the centered column */
.ls-intro__headline {
    margin: 0 0 28px;
    font-family: 'crete_roundregular', Georgia, serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 44px;
    color: #2d2c2c;
}

.ls-intro__headline--centered {
    text-align: center;
}

/* Facts box ---------------------------------------------------------------- */
.ls-intro__facts {
    display: flex;
    flex-direction: column;
    background: #edf4f7;
    padding: 20px 30px;
}

.ls-intro__fact {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

/*
 * The `.ls-intro` prefix is load-bearing, not cosmetic: styles.css ships a
 * global `img, img[height], img[width] { max-width: 100%; height: 100% }`.
 * Its attribute selectors outweigh a single class, so an unprefixed
 * `.ls-intro__fact-icon` loses and the icon stretches to the full height of
 * the facts box. Two classes win the specificity comparison.
 *
 * Colour stays as the SVGs ship it: Lakes2 and Rules are real Figma exports
 * (assets/icons/, brand accent #0097D9 baked in per Figma "text/brand-accent");
 * the remaining select values still fall back to the mixed-colour wizard
 * placeholders until the Figma fact-icon set is complete. Only size is fixed here.
 */
.ls-intro .ls-intro__fact-icon {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.ls-intro__fact-label {
    font-family: 'Lato', Arial, sans-serif;
    /* default body copy size (16px/24px) instead of the Figma 12px — the
       smaller size was an unwanted cut in the design (review 2026-08-18) */
    font-size: 16px;
    line-height: 24px;
    color: #555555;
}

.ls-intro__facts-divider {
    background: #d5d5d5;
    align-self: stretch;
    /* mobile: horizontal rule between stacked facts */
    width: 100%;
    height: 1px;
    margin-block: 16px;
}

/* Desktop layout (Figma reference) ---------------------------------------- */
@media (min-width: 768px) {
    .ls-intro__facts {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        min-height: 90px;
    }

    .ls-intro__facts-divider {
        width: 1px;
        height: auto;
        margin-block: 0;
    }
}

/* The lake fact links to its lake's subpage under /die-seen; it falls back
   to a plain span when the target page is gone (typolink drops the <a>).
   Rest color is Figma "text/brand" (#005a81), no underline in any state;
   hover mirrors the RTE links (a:hover -> $global-color-green #aea900) with
   the 0.4s color ease transition from _elements.links.scss. The color must
   sit on the inner label span: it carries its own color rule, which would
   beat anything inherited from the <a>. */
.ls-intro__fact-link {
    text-decoration: none;
}
.ls-intro__fact-link .ls-intro__fact-label {
    color: #005a81;
}
.ls-intro__fact-link:hover .ls-intro__fact-label,
.ls-intro__fact-link:focus-visible .ls-intro__fact-label {
    color: #aea900;
}