@charset "UTF-8";
/*
 * Estrel Tower — Hero Section
 * Pixel-perfect Figma implementation (1920 design frame)
 *
 * Figma reference (page-relative):
 *   Hero outer box     1815 × 1078  top 121  left 52
 *   Image frame        1815 ×  889  top 121  left 52   radius 3px
 *   Title block         935 ×  382  top 817  left 58
 *     Line 1 "Estrel Tower."        — Söhne Buch 144 / 125
 *     Line 2 "Der Höhepunkt Berlins." — GT Alpina Thin Italic 144 / 125
 *     Color #FED3CD (Watermelon)
 *
 * The base CSS sets section[class^="estrel-"] { max-width: 1815px; margin: 0 auto; }
 * so the section is already centered at the frame width on wide viewports.
 *
 * Scaling: --u is "1px at 1815-wide section" via container-query-inline (cqi).
 * Everything inside the section scales linearly with the section's actual width.
 */

.estrel-hero {
    container-type: inline-size;
    --u: calc(100cqi / 1920);
    position: relative;
    /* Override base section[class^="estrel-"] { max-width: 1815px } so the hero
       can span the full viewport; the side margin comes from padding instead. */
    max-width: none !important;
    margin: 0 auto !important;
    /* Figma: hero frame 1815 wide in 1920 design = 52.5u margins each side.
       Scales proportionally at every viewport. */
    padding: 0 calc(52.5 * 100vw / 1920) !important;
    background: transparent;
    overflow: visible;
}

.estrel-hero__inner {
    position: relative;
    width: 100%;
    height: calc(1078 * var(--u));   /* 889 frame + 189 overflow for title */
}

/* Image frame (Rectangle 269 — 1815 × 889) */
.estrel-hero__frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(889 * var(--u));
    border-radius: calc(3 * var(--u));
    overflow: hidden;
    background: #D9D9D9;
    z-index: 1;
}

.estrel-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Booking pill — bottom-right of the image frame */
.estrel-hero__booking {
    position: absolute;
    right: calc(30 * var(--u));
    bottom: calc(30 * var(--u));
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
    height: calc(28 * var(--u));
    padding: 0 calc(20 * var(--u));
    box-sizing: border-box;
    border-radius: calc(41.5 * var(--u));
    border: 1px solid #FED3CD;
    background: #FED3CD;
    color: #14172D;
    font-family: var(--font-alpina);
    font-style: italic;
    font-weight: 250;
    font-size: calc(14 * var(--u));
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--hover-transition);
}

.estrel-hero__booking:hover {
    opacity: 0.9;
    text-decoration: none;
}

.estrel-hero__booking-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(14 * var(--u));
    height: calc(14 * var(--u));
}

.estrel-hero__booking-icon svg {
    width: 100%;
    height: 100%;
}

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

/* Title — overflows the frame's bottom edge into the section below.
   Positioned 6px from inner left (Figma: title left 58, frame left 52 → 6px inset). */
.estrel-hero__title {
    position: absolute;
    top: calc(696 * var(--u));    /* Figma 817 − 121 (frame top) */
    left: calc(6 * var(--u));     /* Figma 58 − 52 (inset from frame left) */
    width: calc(935 * var(--u));
    margin: 0;
    color: #FED3CD;
    z-index: 3;
    pointer-events: none;
}

.estrel-hero__title-line1,
.estrel-hero__title-line2 {
    display: block;
    font-size: calc(144 * var(--u));
    line-height: calc(125 * var(--u));
    letter-spacing: 0;
    color: #FED3CD;
}

.estrel-hero__title-line1 {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-style: normal;
}

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


/* Gradient overlay for scroll-based sunset transition (Night mode only)
   Very subtle warm wash — main effect comes from body background gradient */
.estrel-hero__gradient-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;           /* above image, below booking (z:2) */
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 45%,
        rgba(232, 183, 181, 0.12) 65%,
        rgba(228, 175, 180, 0.22) 85%,
        rgba(220, 165, 180, 0.3) 100%
    );
}

body.sunrise .estrel-hero__gradient-overlay {
    display: none;
}


/* ============================
   MOBILE (<768)
   ============================ */
@media (max-width: 767px) {
    .estrel-hero__inner {
        height: auto;
        padding: 40px 0 60px;           /* horizontal spacing comes from section padding */
        position: relative;
    }

    .estrel-hero__frame {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        aspect-ratio: 1815 / 889;
        height: auto;
    }

    .estrel-hero__title {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin-top: -3rem;
        padding: 0 4px;
    }

    .estrel-hero__title-line1,
    .estrel-hero__title-line2 {
        font-size: clamp(2.25rem, 11vw, 4rem);
        line-height: 0.92;
    }

    .estrel-hero__booking {
        right: 16px;
        bottom: 16px;
        height: 28px;
        padding: 0 16px;
        font-size: 12px;
    }
}