@charset "UTF-8";
/*
 * Estrel Tower — Guests & Stories (Testimonials)
 * Pixel-perfect Figma implementation (1920 design frame).
 *
 * Layout (within 1815 container):
 *   Header row:
 *     Title "Guests\n& Stories"  546×216  left 90, top 0
 *       Söhne 400 124/105 #FEF5EC + Alpina 250i
 *     Body text   586×136  left 686, top 28, Söhne 400 24/34 #FED3CD
 *     Arrow btns  70×30    left ~1534, top 193, radius 41.5
 *
 *   Cards row at top 287:
 *     3 cards, each 588×271, bg #FEF5EC, radius 2, gap 7
 *     Cards overflow right (peek effect), starting at left 329
 *     Category pill: outline #14172D, Alpina 250 16/22, radius 41.5
 *     Quote: Söhne 400 19/22 #14172D
 *     Author: Alpina 250 16/22 #14172D
 *
 * Scaling: --u = 100cqi / 1815.
 */

.estrel-testimonials {
    container-type: inline-size;
    margin-top: calc(209 * 100vw / 1920) !important;   /* Figma gap: Sustainability → Testimonials = 209px */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    background: transparent;
    overflow: visible;
}

.estrel-testimonials__inner {
    --u: calc(100cqi / 1920);
    position: relative;
    height: calc(558 * var(--u));
}


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

.estrel-testimonials__heading {
    position: absolute;
    left: calc(90 * var(--u));
    top: 0;
    margin: 0;
    color: #FEF5EC;
    font-size: calc(124 * var(--u));
    line-height: calc(105 * var(--u));
    letter-spacing: 0;
}

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

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

.estrel-testimonials__intro {
    position: absolute;
    left: calc(686 * var(--u));
    top: calc(28 * var(--u));
    width: calc(586 * var(--u));
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(24 * var(--u));
    line-height: calc(34 * var(--u));
    letter-spacing: 0;
    color: #FED3CD;
    margin: 0;
}

/* Arrow nav buttons */
.estrel-testimonials__nav {
    position: absolute;
    right: calc(90 * var(--u));
    top: calc(193 * var(--u));
    display: flex;
    gap: calc(16 * var(--u));
    z-index: 5;
}

.estrel-testimonials__prev,
.estrel-testimonials__next {
    width: calc(70 * var(--u));
    height: calc(30 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #FED3CD;
    border-radius: calc(41.5 * var(--u));
    cursor: pointer;
    padding: 0;
    transition: opacity 0.3s;
}

.estrel-testimonials__prev:hover,
.estrel-testimonials__next:hover {
    opacity: 0.7;
}

.estrel-testimonials__prev svg,
.estrel-testimonials__next svg {
    width: calc(25 * var(--u));
    height: calc(8 * var(--u));
    display: block;
}

.estrel-testimonials__prev {
    background: #FED3CD;
}

.estrel-testimonials__prev svg { color: #14172D; }
.estrel-testimonials__next svg { color: #FEF5EC; }


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

.estrel-testimonials__slider {
    position: absolute;
    top: calc(287 * var(--u));
    left: calc(329 * var(--u));
    width: calc(100cqw - 329 * var(--u));
    overflow: hidden;
}

.estrel-testimonials__slider .swiper-slide {
    width: calc(588 * var(--u)) !important;
    flex-shrink: 0;
    margin-right: calc(7 * var(--u));
}


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

.estrel-testimonials__card {
    width: calc(588 * var(--u));
    height: calc(271 * var(--u));
    background: #FEF5EC;
    border-radius: 3px;
    padding: calc(21 * var(--u)) calc(25 * var(--u)) calc(25 * var(--u));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Category pill */
.estrel-testimonials__category {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    height: calc(30 * var(--u));
    padding: 0 calc(20 * var(--u));
    background: transparent;
    border: 1px solid #14172D;
    border-radius: calc(41.5 * var(--u));
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
    font-size: calc(16 * var(--u));
    line-height: calc(22 * var(--u));
    letter-spacing: 0;
    color: #14172D;
    text-transform: none;
    margin-bottom: calc(57 * var(--u));
}

/* Quote */
.estrel-testimonials__quote {
    font-family: var(--font-soehne);
    font-weight: 400;
    font-size: calc(19 * var(--u));
    line-height: calc(22 * var(--u));
    letter-spacing: 0;
    color: #14172D;
    margin: 0;
    flex-grow: 1;
}

.estrel-testimonials__quote::before,
.estrel-testimonials__quote::after {
    content: none;
}

/* Author */
.estrel-testimonials__author {
    font-family: var(--font-alpina);
    font-weight: 250;
    font-style: italic;
    font-size: calc(16 * var(--u));
    line-height: calc(22 * var(--u));
    letter-spacing: 0;
    color: #14172D;
    margin-top: calc(12 * var(--u));
}


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

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

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

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

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

/* Card background: Figma Day = #FED3CD (salmon pink) */
body.sunrise .estrel-testimonials__card {
    background: #FED3CD;
}

/* Intro text visible in Day, same color as Night (#FED3CD) */
body.sunrise .estrel-testimonials__intro {
    color: #14172D;
}


/* ============================
   MOBILE (<768)
   ============================ */

@media (max-width: 1024px) {
    .estrel-testimonials__inner {
        height: auto;
        padding: 50px var(--container-padding);
    }

    .estrel-testimonials__heading {
        position: relative;
        left: auto;
        top: auto;
        margin: 0 0 1rem;
    }

    .estrel-testimonials__heading .estrel-section-title__main,
    .estrel-testimonials__heading .estrel-section-title__sub {
        font-size: clamp(3rem, 8vw, 5rem);
        line-height: 0.85;
    }

    .estrel-testimonials__intro {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        font-size: 1.125rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    .estrel-testimonials__nav {
        position: relative;
        right: auto;
        top: auto;
        margin-bottom: 1.5rem;
    }

    .estrel-testimonials__cards,
    .estrel-testimonials .swiper {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        overflow-x: auto;
    }

    .estrel-testimonials__card,
    .estrel-testimonials .swiper-slide {
        width: 45vw !important;
        height: auto;
        min-height: 220px;
    }
}

@media (max-width: 767px) {
    .estrel-testimonials__inner {
        padding: 40px 20px;
    }

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

    .estrel-testimonials__intro {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    .estrel-testimonials__nav {
        position: relative;
        right: auto;
        top: auto;
        margin-bottom: 1.5rem;
    }

    .estrel-testimonials__prev,
    .estrel-testimonials__next {
        width: 50px;
        height: 30px;
    }

    .estrel-testimonials__cards,
    .estrel-testimonials .swiper {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        overflow-x: auto;
    }

    .estrel-testimonials__card,
    .estrel-testimonials .swiper-slide {
        width: 85vw !important;
        height: auto;
        min-height: 200px;
    }

    .estrel-testimonials__card {
        border-radius: 6px;
    }

    .estrel-testimonials__category {
        height: auto;
        padding: 0.3rem 0.85rem;
        font-size: 0.75rem;
        margin-bottom: 1rem;
    }

    .estrel-testimonials__quote {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .estrel-testimonials__author {
        font-size: 0.8rem;
    }
}