@charset "UTF-8";
/*
 * Estrel Tower — Intro Section ("From Sunrise to Sunset")
 * Pixel-perfect Figma implementation (1920 design frame)
 *
 * Figma reference (page-relative):
 *   Container       860 × 505    top 1318  left 898
 *   Title block     860 × 210    top 1318  left 898
 *     Line 1 "From Sunrise"   — Söhne 400 Buch     124 / 105
 *     Line 2 "to Sunset"      — GT Alpina Thin Italic 124 / 105
 *     Color #FEF5EC (Butter Yellow)
 *   Body            859 × 192    top 1559  left 898
 *     Söhne 400 24 / 32  color #FEF5EC
 *   Link            127 × 26     top 1797  left 898
 *     "Zusatzinfos" — GT Alpina Thin Italic 26 / 26  color #FED3CD (Watermelon)
 *     Followed by arrow.svg (25 × 8)
 *
 * Vertical position: hero ends at body-y 1078, intro top at body-y 1197 → 119 gap.
 * Horizontal position: section is 1815 wide centered, content offset 846 from
 * section-left (Figma left 898 − section-left 52).
 */

.estrel-intro {
    container-type: inline-size;
    position: relative;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent;
    overflow: visible;
}

/* Sunset gradient is now handled by .estrel-sunset-bg wrapper (see design-system.css)
   which spans hero → intro as one continuous gradient. */

/* --u defined on a DESCENDANT so cqi resolves to .estrel-intro's inline-size.
   (cqi on the container element itself falls back to the viewport.) */
.estrel-intro__content {
    --u: calc(100cqi / 1920);
    position: relative;
    width: calc(860 * var(--u));
    margin-top: calc(119 * var(--u));     /* gap from hero bottom */
    margin-left: calc(846 * var(--u));    /* Figma 898 − 52 (section left) */
}

/* Title — 2 lines, 124px, 105 line-height
   Line 1 "From Sunrise" is indented; line 2 "to Sunset" sits at the
   container left edge (Figma shows "to" hanging slightly into the gutter). */
.estrel-intro__title {
    margin: 0;
    color: #FEF5EC;
    font-size: calc(124 * var(--u));
    line-height: calc(105 * var(--u));
    letter-spacing: 0;
    /* Both theme variants ("From Sunset/to Sunrise" and "From Sunrise/to
       Sunset") render on exactly 2 lines in Figma 75:833 — title height
       is 2 × lh = 210u. Previously 315u reserved a phantom 3rd line and
       blew out the gap to the paragraph below (105u extra). */
    min-height: calc(210 * var(--u));
}

.estrel-intro__title-line1,
.estrel-intro__title-line2 {
    display: block;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.estrel-intro__title-line1 {
    margin-left: calc(155 * var(--u));   /* indent — visually aligns "F" with "Sunset" below */
    font-family: var(--font-soehne);
    font-weight: 400;
    font-style: normal;
    white-space: nowrap;
}

.estrel-intro__title-line2 {
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
}

/* Body text — Söhne 24 / 32, 859 wide, starts 1559 − 1318 = 241 below title top */
.estrel-intro__text {
    width: calc(859 * var(--u));
    margin-top: calc(31 * var(--u));   /* 241 (text top from container top) − 210 (title height) */
    color: #FED3CD;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-style: normal;
    font-size: calc(24 * var(--u));
    line-height: calc(32 * var(--u));
    letter-spacing: 0;
}

.estrel-intro__text p {
    margin: 0;
}

.estrel-intro__text p + p {
    margin-top: calc(32 * var(--u));   /* one line of vertical rhythm between paragraphs */
}

/* Link "Zusatzinfos →" — Alpina italic 26, Watermelon, 1797 − 1559 + 192 = 46 below text */
.estrel-intro__link {
    display: inline-flex;
    align-items: center;
    gap: calc(14 * var(--u));
    margin-top: calc(46 * var(--u));   /* 1797 − (1559 + 192) = 46 below body */
    color: #FED3CD;
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
    font-size: calc(26 * var(--u));
    line-height: 1;
    text-decoration: none;
    transition: opacity var(--hover-transition);
}

.estrel-intro__link:hover {
    opacity: 0.85;
    text-decoration: none;
}

.estrel-intro__link-label {
    line-height: 1;
}

.estrel-intro__link-arrow {
    display: inline-flex;
    align-items: center;
    width: calc(25 * var(--u));
    height: calc(8 * var(--u));
}

.estrel-intro__link-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}


/* ============================
   SUNRISE THEME
   ============================ */

body.sunrise .estrel-intro__title {
    color: #14172D;
}

/* Body text stays #FED3CD (Watermelon) in both Night and Day per Figma */

body.sunrise .estrel-intro__link {
    color: #14172D;
}


/* ============================
   TABLET (768–1024)
   ============================ */
@media (max-width: 1024px) {
    .estrel-intro__content {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-top: calc(80 * var(--u));
    }

    .estrel-intro__title {
        min-height: 0;
    }

    .estrel-intro__title-line1 {
        margin-left: 0;
        white-space: nowrap;
    }

    .estrel-intro__title-line1,
    .estrel-intro__title-line2 {
        font-size: clamp(2.5rem, 8vw, 5rem);
        line-height: 0.92;
    }
}


/* ============================
   MOBILE (<768)
   ============================ */
@media (max-width: 767px) {
    .estrel-intro {
        padding: 24px 20px 40px !important;
    }

    .estrel-intro__content {
        position: relative;
        width: 100%;
        margin-left: 0;
        padding: 24px;
        border-radius: 12px;
        background: rgba(20, 23, 45, 0.35);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    body.sunrise .estrel-intro__content {
        background: rgba(254, 245, 236, 0.4);
    }

    .estrel-intro__title {
        min-height: 0;
    }

    .estrel-intro__title-line1,
    .estrel-intro__title-line2 {
        font-size: clamp(2.25rem, 9vw, 3.5rem);
        line-height: 0.92;
        white-space: nowrap;
    }

    .estrel-intro__text {
        width: 100%;
        font-size: 1rem;
        line-height: 1.5;
        margin-top: 1.5rem;
    }

    .estrel-intro__link {
        font-size: 1rem;
        margin-top: 1.5rem;
    }

    .estrel-intro__link-arrow {
        width: 25px;
        height: 8px;
    }
}