@charset "UTF-8";
/*
 * Estrel Tower — News Section
 * Pixel-perfect Figma implementation (1920 design frame).
 *
 * Layout (Figma absolute → relative to section top):
 *   Section          1936 × 680   full-bleed (extends 8px beyond viewport)
 *   Title "News\nTower"  462 × 216   top 0, left 155
 *     "News"  — Söhne 400  124 / 105  #FEF5EC
 *     "Tower" — Alpina 250i 124 / 105  #FEF5EC
 *   Body text        813 × 96    top 36, left 962
 *     Söhne 400  24 / 32  #FEF5EC
 *   Link "Alle Termine →"  178 × 26   top 161, left 962
 *
 *   Cards row at top 288:
 *     Inactive card  378 × 392
 *     Expanded card  1215 × 392  (image 378 + cream panel 847)
 *
 * Scaling: --u = 100cqw / 1920.
 */

.estrel-news {
    container-type: inline-size;
    width: 100%;
    max-width: none !important;
    padding: 0 !important;
    background: transparent;
}

.estrel-news__inner {
    --u: calc(100cqw / 1920);
    position: relative;
    height: calc(800 * var(--u));   /* 680 content + 120 top gap */
}


/* ============================
   HEADER
   ============================ */

.estrel-news__header {
    position: absolute;
    top: calc(120 * var(--u));      /* 120 top gap */
    left: 0;
    right: 0;
    height: calc(288 * var(--u));
}

/* Title "News / Tower" — two lines */
.estrel-news__heading {
    position: absolute;
    left: calc(155 * var(--u));
    top: 0;
    width: calc(462 * var(--u));
    margin: 0;
    color: #FEF5EC;
    font-size: calc(124 * var(--u));
    line-height: calc(105 * var(--u));
    letter-spacing: 0;
}

.estrel-news__heading-line1 {
    display: block;
    margin-left: calc(155 * var(--u));
    font-family: var(--font-soehne);
    font-weight: 400;
    font-style: normal;
}

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

/* Right side: description text + link */
.estrel-news__header-right {
    position: absolute;
    left: calc(962 * var(--u));
    top: calc(36 * var(--u));
    width: calc(813 * var(--u));
}

.estrel-news__intro {
    margin: 0;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(24 * var(--u));
    line-height: calc(32 * var(--u));
    letter-spacing: 0;
    color: #FEF5EC;
}

.estrel-news__all-link {
    display: none;
    align-items: center;
    gap: calc(14 * var(--u));
    margin-top: calc(29 * var(--u));
    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 0.3s;
}

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

.estrel-news__all-link-arrow {
    display: inline-flex;
    width: calc(25 * var(--u));
    height: calc(8 * var(--u));
}

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


/* ============================
   CARDS ROW
   ============================ */

.estrel-news__cards {
    position: absolute;
    top: calc(408 * var(--u));      /* 288 + 120 top gap */
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    display: flex;
    height: calc(392 * var(--u));
}

.estrel-news__card {
    position: relative;
    flex: 0 0 calc(378 * var(--u));
    height: 100%;
    overflow: hidden;
    border-radius: calc(3 * var(--u));
    cursor: pointer;
    min-width: 0;
    transition: flex-grow 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Active card fills ALL remaining row space, regardless of how many siblings
   are in the row. Animating flex-grow (instead of flex-basis) keeps the sum
   of grow factors at 1 across the transition, so widths interpolate cleanly
   between the previously-active and newly-active card. */
.estrel-news__card.is-active {
    flex-grow: 1;
    cursor: default;
}


/* ============================
   CARD IMAGE
   ============================ */

.estrel-news__card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(378 * var(--u));
    height: 100%;
}

.estrel-news__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ============================
   INACTIVE CARD — dark overlay + label
   ============================ */

.estrel-news__card-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #14172D;
    opacity: 0.4;
    mix-blend-mode: darken;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.estrel-news__card.is-active .estrel-news__card-overlay {
    opacity: 0;
}

/* Label (title + date on inactive cards) */
.estrel-news__card-label {
    position: absolute;
    left: calc(37 * var(--u));
    top: calc(27 * var(--u));
    z-index: 3;
    opacity: 0.6;
    color: #FEF5EC;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.estrel-news__card.is-active .estrel-news__card-label {
    opacity: 0;
}

.estrel-news__card-label-title {
    display: block;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(47 * var(--u));
    line-height: calc(53 * var(--u));
    letter-spacing: 0;
    color: inherit;
    margin: 0;
}

.estrel-news__card-label-sub {
    display: block;
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
    font-size: calc(47 * var(--u));
    line-height: calc(53 * var(--u));
    letter-spacing: 0;
    color: inherit;
}

.estrel-news__card-label-date {
    display: block;
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
    font-size: calc(24 * var(--u));
    line-height: calc(63 * var(--u));
    letter-spacing: 0;
    color: inherit;
}


/* ============================
   ACTIVE CARD — cream content panel
   ============================ */

.estrel-news__card-content {
    position: absolute;
    top: 0;
    left: calc(368 * var(--u));
    width: calc(847 * var(--u));
    height: 100%;
    z-index: 4;
    background: #FEF5EC;
    opacity: 0;
    transform: translateX(calc(20 * var(--u)));
    transition: opacity 0.4s ease 0.1s, transform 0.5s ease 0.1s;
    pointer-events: none;
}

.estrel-news__card.is-active .estrel-news__card-content {
    width: auto;
    right: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* Title block inside cream panel */
.estrel-news__title {
    position: absolute;
    left: calc(67 * var(--u));
    top: calc(34 * var(--u));
    margin: 0;
    color: #14172D;
}

.estrel-news__title-line1 {
    display: block;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(47 * var(--u));
    line-height: calc(57 * var(--u));
    letter-spacing: 0;
}

.estrel-news__title-line2 {
    display: block;
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
    font-size: calc(47 * var(--u));
    line-height: calc(53 * var(--u));
    letter-spacing: 0;
}

/* Date */
.estrel-news__date {
    position: absolute;
    left: calc(66 * var(--u));
    top: calc(137 * var(--u));
    margin: 0;
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
    font-size: calc(24 * var(--u));
    line-height: calc(63 * var(--u));
    letter-spacing: 0;
    color: #14172D;
}

/* Body text */
.estrel-news__text {
    position: absolute;
    left: calc(66 * var(--u));
    top: calc(219 * var(--u));
    width: calc(646 * var(--u));
    margin: 0;
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(19 * var(--u));
    line-height: calc(27 * var(--u));
    letter-spacing: 0;
    color: #14172D;
}

.estrel-news__text p {
    margin: 0;
}

/* "Mehr erfahren →" link */
.estrel-news__more {
    position: absolute;
    left: calc(67 * var(--u));
    top: calc(315 * var(--u));
    display: inline-flex;
    align-items: center;
    gap: calc(14 * var(--u));
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
    font-size: calc(20 * var(--u));
    line-height: calc(26 * var(--u));
    color: #14172D;
    text-decoration: none;
    transition: opacity 0.3s;
}

.estrel-news__more:hover {
    opacity: 0.7;
    text-decoration: none;
}

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

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

/* Estrel logo in cream panel */
.estrel-news__logo {
    position: absolute;
    right: calc((847 - 668 - 89) * var(--u));
    top: calc(48 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.estrel-news__logo-mark {
    display: block;
    width: calc(89 * var(--u));
    height: calc(35 * var(--u));
    -webkit-mask: url('/theme/estrel/img/logo.svg') no-repeat center / contain;
    mask: url('/theme/estrel/img/logo.svg') no-repeat center / contain;
    background-color: #14172D;
}

.estrel-news__logo-sub {
    font-family: var(--font-soehne);
    font-size: calc(5 * var(--u));
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #14172D;
}


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

body.sunrise .estrel-news__heading,
body.sunrise .estrel-news__heading .estrel-section-title__main,
body.sunrise .estrel-news__heading .estrel-section-title__sub {
    color: #14172D;
}

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

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

/* Inactive card overlay: Figma Day = #FEF5EC 40% lighten */
body.sunrise .estrel-news__card-overlay {
    background: #FEF5EC;
    mix-blend-mode: lighten;
}

/* Expanded card panel: Figma Day = #FED3CD (pink) */
body.sunrise .estrel-news__card-content {
    background: #FED3CD;
}


/* ============================
   MOBILE + TABLET (<1024)
   Desktop absolute layout needs >=1024 viewport; smaller breakpoints
   otherwise overlap "Alle Termine" link with the cards row.
   ============================ */

@media (max-width: 1024px) {
    .estrel-news {
        overflow: visible;
    }

    .estrel-news__inner {
        height: auto;
    }

    .estrel-news__header {
        position: relative;
        top: auto;
        height: auto;
        padding: 40px 20px 30px;
    }

    .estrel-news__heading {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        font-size: clamp(2.5rem, 11vw, 4rem);
        line-height: 0.85;
        margin-bottom: 1.5rem;
    }

    .estrel-news__header-right {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
    }

    .estrel-news__intro {
        font-size: 1rem;
        line-height: 1.5;
    }

    .estrel-news__all-link {
        font-size: 1rem;
        margin-top: 1rem;
    }

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

    /* Cards: horizontal swipe carousel */
    .estrel-news__cards {
        position: relative;
        top: auto;
        flex-direction: row;
        height: auto;
        gap: 12px;
        padding: 0 20px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .estrel-news__cards::-webkit-scrollbar {
        display: none;
    }

    .estrel-news__card,
    .estrel-news__card.is-active {
        flex: 0 0 75vw;
        width: 75vw;
        height: 65vh;
        min-height: 350px;
        max-height: 480px;
        scroll-snap-align: center;
        border-radius: 3px;
        overflow: hidden;
    }

    /* Image fills the card */
    .estrel-news__card-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Dark gradient via card ::after (overlay element unreliable) */
    .estrel-news__card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(20,23,45,0) 35%, rgba(20,23,45,0.8) 100%);
        pointer-events: none;
        z-index: 1;
    }

    .estrel-news__card-label,
    .estrel-news__card-overlay {
        display: none !important;
    }

    /* Compact content at bottom of card */
    .estrel-news__card-content {
        position: absolute !important;
        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        background: none !important;
        z-index: 2;
    }

    .estrel-news__title,
    .estrel-news__date,
    .estrel-news__more {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        width: auto !important;
        color: #FEF5EC !important;
    }

    .estrel-news__title-line1,
    .estrel-news__title-line2 {
        font-size: 1.25rem !important;
        line-height: 1.15 !important;
        color: #FEF5EC !important;
    }

    .estrel-news__date {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        margin-top: 4px !important;
        opacity: 0.7;
    }

    .estrel-news__text {
        display: none !important;
    }

    .estrel-news__more {
        font-size: 0.85rem !important;
        margin-top: 8px !important;
        color: #FED3CD !important;
    }

    .estrel-news__more-arrow {
        width: 18px;
        height: 6px;
    }

    .estrel-news__logo {
        display: none !important;
    }
}