/* ==========================================================================
   Section: hero-slider (Figma 1:1605, frame 1440×600)
   Pink panel + photo/video with a wavy left edge (SVG mask).
   ========================================================================== */

.sec-hero-slider {
    position: relative;
    background: #ebd6d3; /* fallback; per-slide color set inline + synced in JS */
    overflow: hidden;
    transition: background 0.4s ease;
}

.hero-slide {
    position: relative;
    background: #ebd6d3;
    overflow: hidden;
}

/* Media: right side, wavy left edge via mask */
.hero-slide__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 58%;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M135 0 C122 45 118 85 121 130 C124 180 152 210 154 255 C156 305 124 335 122 385 C120 435 150 465 152 510 C153 545 143 575 138 600 L1000 600 L1000 0 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M135 0 C122 45 118 85 121 130 C124 180 152 210 154 255 C156 305 124 335 122 385 C120 435 150 465 152 510 C153 545 143 575 138 600 L1000 600 L1000 0 Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.hero-slide__media img,
.hero-slide__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Anchor the crop to the top: on wide viewports the panel grows wider
       at a fixed height and a centered crop would cut heads off. */
    object-position: 50% 0;
}

/* Content on the page grid */
.hero-slide__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 600px;
    max-width: var(--content-max);
    margin-inline: auto;
    padding: 90px var(--pad-x) 128px;
}

.hero-slide__col {
    max-width: 560px;
}

.hero-slide__logo {
    display: block;
    width: auto;
    max-width: 240px;
    height: auto;
    margin: 0 0 24px;
}

.hero-slide__tagline {
    margin: 0 0 12px;
    font-family: 'Roboto', var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-primary);
}

.hero-slide__title {
    margin: 0 0 24px;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(34px, 3.9vw, 56px);
    line-height: 1.1;
    color: var(--c-heading);
}

.hero-slide__text {
    margin: 0 0 32px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--c-text);
}

/* Controls bar: dots left, arrows right, on the page grid */
.hero-slider__bar {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--content-max);
    padding-inline: var(--pad-x);
    pointer-events: none;
}

.hero-slider__dots,
.hero-slider__nav {
    pointer-events: auto;
}

.hero-slider__dots {
    display: flex;
    gap: 8px;
}

.hero-slider__dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 50%;
    background: #000;
    opacity: 0.2;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.hero-slider__dots .swiper-pagination-bullet-active {
    opacity: 1;
}

.hero-slider__nav {
    display: flex;
    gap: 16px;
}

.hero-slider__arrow {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    background: var(--c-white);
    border: 1px solid var(--c-black);
    border-radius: 50%;
    color: var(--c-black);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.hero-slider__arrow:hover,
.hero-slider__arrow:focus-visible {
    background: var(--c-black);
    color: var(--c-white);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
    .hero-slide__inner {
        min-height: 520px;
    }
}

@media (max-width: 767px) {
    .hero-slide {
        display: flex;
        flex-direction: column;
        /* height:auto lets the wrapper's stretch equalize slide heights
           (swiper sets height:100%, which blocks stretching) */
        height: auto;
    }

    /* The photo grows to the slide's bottom edge — slides with shorter
       copy would otherwise show a background strip under a fixed-height
       photo. */
    /* Same wave, rotated: on mobile the panel flows into the photo along
       its TOP edge (the desktop path transposed, amplitude doubled so it
       reads at the short photo height). */
    .hero-slide__media {
        position: relative;
        order: 2;
        width: 100%;
        flex: 1 0 auto;
        min-height: 64vw;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 133 C45 107 85 99 130 105 C180 111 210 167 255 171 C305 175 335 111 385 107 C435 103 465 163 510 167 C545 169 575 149 600 139 L600 1000 L0 1000 Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 133 C45 107 85 99 130 105 C180 111 210 167 255 171 C305 175 335 111 385 107 C435 103 465 163 510 167 C545 169 575 149 600 139 L600 1000 L0 1000 Z'/%3E%3C/svg%3E");
    }

    /* Absolute fill so the image's natural height cannot inflate the
       flex row — the media box is sized purely by min-height + grow. */
    .hero-slide__media img,
    .hero-slide__media video {
        position: absolute;
        inset: 0;
    }

    .hero-slide__inner {
        order: 1;
        min-height: 0;
        align-items: flex-start;
        padding: 48px var(--pad-x) 32px;
    }

    .hero-slide__text {
        font-size: 16px;
    }

    /* Keep the bar overlaid on the photo's bottom edge — as a static
       block it would push the photo up, leaving a background strip
       below it (photo must end the section). */
    .hero-slider__bar {
        bottom: 16px;
    }
}