/* Home page hero slider, mirroring the `.new-hero-slides` block on clario.com.
   Slides are stacked and cross-faded; only the `.is-active` one is visible. */

/* Trims the full-bleed slider below, so its overhang cannot add a horizontal
   scrollbar to the page. `clip` rather than `hidden`: `hidden` would force
   `overflow-y` to `auto` on the banner, which is enough to raise a scrollbar
   inside it and shrink the hero by that width. */
.home .page-banner {
    overflow-x: clip;
    /* The 60px the bundles give this banner assumed nothing sat below the slider.
       The switches occupy that band now, so trim it to the gap wanted under them. */
    padding-bottom: 20px;
}

/* All slides share one grid cell, so the track keeps the height of the tallest
   slide instead of resizing the header on every rotation. */
.clario-slider__list {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

.clario-slider__slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* `visibility` is held until the fade ends, otherwise the outgoing slide
       vanishes on the first frame and the two slides never cross-fade. */
    transition: opacity 1200ms ease-in-out, visibility 0s linear 1200ms;
}

.clario-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 1200ms ease-in-out, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .clario-slider__slide,
    .clario-slider__slide.is-active {
        transition: none;
    }
}

/* Pagination — the square switches under the slider. */
.new-hero-slides .clario-slider__pagination {
    /* In flow, so the banner's height accounts for the switches. Positioned
       absolutely they hung past its bottom edge and straddled the section below
       at every width under 1200px, where the slider takes a negative margin. */
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 15px 0 0;
}

.new-hero-slides .clario-slider__pagination .clario-slider__dot {
    cursor: pointer;
    width: 17px;
    height: 17px;
    /* The UA button padding is `1px 6px`, which is wider than the small switch and
       would floor its width at 12px, leaving it 12x11 instead of square. */
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: #e9e9e9;
}

.new-hero-slides .clario-slider__pagination .clario-slider__dot.is-active {
    background-color: #ff006f;
}

/* Slide 1 — full-bleed image with the text overlaid on its blank left half. */
.new-hero-slides .image-overlay-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

.new-hero-slides .image-overlay-slide .home-header-image-wrapper {
    padding-right: unset;
}

/* The <img> carries no dimensions of its own, so without a ratio here nothing
   reserves the artwork's box: the cell takes the other slide's height and then
   jumps when the image header lands — 94px at 390px wide, and more as the phone
   artwork grows. Each source's own ratio is declared instead, so the box is right
   from the first paint. */
.new-hero-slides .image-overlay-slide .home-header-image-wrapper img {
    width: 100%;
    aspect-ratio: 1150 / 544;
    object-fit: cover;
}

.new-hero-slides .image-overlay-slide .slide-content {
    position: absolute;
    top: 50%;
    left: 85px;
    width: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.new-hero-slides .image-overlay-slide .slide-content .hero-slide-button .hero-slide-button-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
    font-size: 23px;
    font-weight: 400;
    letter-spacing: normal;
    text-decoration: none;
}

.new-hero-slides .image-overlay-slide .slide-content .hero-slide-button .hero-slide-button-link:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("CTA-before.png") no-repeat center;
    background-size: contain;
}

/* Slide 2 — the original two column banner. Slides share one grid cell, so the
   cell is as tall as the taller of the two. `height` makes this slide fill it
   rather than sit at its top, and centring then splits the slack above and below
   instead of pooling it under the content. */
.new-hero-slides .two-column-slide {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 30px;
    min-height: 300px;
}

.new-hero-slides .two-column-slide .home-header-image-wrapper {
    padding-right: unset;
}

/* Holds the animation's shape while it is still being fetched, so deferring it
   cannot shift the layout. 547x474 is the animation's own frame size. */
.new-hero-slides .two-column-slide .hero-animation {
    width: 100%;
    aspect-ratio: 547 / 474;
}

.new-hero-slides .two-column-slide .hero-animation lottie-player {
    display: block;
    width: 100%;
    height: 100%;
}

.new-hero-slides .two-column-slide .page-banner-content {
    padding-bottom: 20px;
}

@media (max-width: 1199.98px) {
    /* Full bleed while `.container` is still centred at a capped width: `50%`
       resolves against its content box and `50vw` against the window, so this
       lines up at every width — a fixed offset only works at one of them. */
    .new-hero-slides {
        margin: -30px calc(50% - 50vw) 0;
    }
}

@media (max-width: 991.98px) {
    /* `.container` is full width here, so cancelling its padding is exact and
       avoids the half-a-scrollbar overhang `50vw` leaves behind. */
    .new-hero-slides {
        margin: -30px -15px 0;
    }

    .new-hero-slides .clario-slider__pagination .clario-slider__dot {
        width: 11px;
        height: 11px;
    }
}

@media (max-width: 767.98px) {
    /* The phone artwork is a 910x1568 portrait whose top band carries the Thermo
       Fisher lockup and whose foot carries the photograph. Filling the shared cell
       with it meant cropping ~110px at 390px and ~530px at 767px, taken half from
       each edge, which cut the lockup in half and then off entirely. It runs at its
       own aspect instead, as clario.com does, and sets the slide's height — the
       base rules already do this, so the mobile overrides that cropped it are gone.
       The slide below is centred in what is then the taller cell (see above), so
       the difference reads as padding rather than a void under its content. */

    /* The <picture> swaps to the 910x1568 portrait here, so the reserved box has
       to swap with it. */
    .new-hero-slides .image-overlay-slide .home-header-image-wrapper img {
        aspect-ratio: 910 / 1568;
    }

    .new-hero-slides .image-overlay-slide .slide-content {
        top: 33%;
        left: auto;
        right: auto;
        width: auto;
        padding: 20px;
    }

    .new-hero-slides .image-overlay-slide .slide-content .hero-slide-button .hero-slide-button-link {
        font-size: 16px;
    }

    .new-hero-slides .two-column-slide {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .new-hero-slides .two-column-slide .page-banner-image {
        padding: 0;
        order: -1;
    }

    .new-hero-slides .two-column-slide .page-banner-content {
        padding: 0;
        order: 1;
    }

    /* Keeps the spacing the vendored `.home .page-banner h1` rule gave this headline
       before it became an <h2> — the page <h1> now sits outside the slider, because
       both slide headlines are hidden whenever their slide is inactive. */
    .new-hero-slides .two-column-slide .page-banner-content .h1 {
        margin-bottom: 20px;
    }
}