/*
 * overrides.css — Superdose. HAND-WRITTEN. Loaded after brand.css.
 *
 * brand.css next door is machine-generated: download-assets.cjs concatenates the
 * 27 stylesheets the capture pulled down into one 750KB file and rewrites every
 * url() to a local asset. Re-capturing the brand rewrites it wholesale, so an
 * edit made there does not survive. This file is what the generators do not
 * touch, and it is wired in via BrandDemo.overrides so scaffold.cjs re-emits the
 * reference every time it regenerates index.ts.
 *
 * Two things live here, and both exist because the capture is a still photograph
 * of a page that was being driven by JavaScript at the moment it was taken.
 */

/* ---------------------------------------------------------------------------
 * 1. The hero carousel, full width.
 *
 * Swiper laid the slideshow out in the capture browser and wrote the result into
 * inline styles: every slide carries `width: 1440px` (the capture viewport) and a
 * `translate3d(-i * 1440px, 0, 0)` that pulls slide i back on top of slide 0 —
 * that is how swiper's fade mode stacks a flex row. Sanitising strips the script
 * that would recompute those numbers on resize, so the hero stayed frozen at
 * 1440px and left a white gutter on any wider display.
 *
 * Rather than restate the arithmetic in CSS, drop the flex row for a single grid
 * cell: every slide is placed in the same cell, so they stack with no transform
 * to compute and no width to know. `!important` is not decoration here — it is
 * beating an inline style, which nothing else can.
 *
 * Scoped to .m-slideshow-section, which is the hero alone. The product rails
 * further down the page are real horizontal carousels whose frozen offsets are
 * what makes them look mid-scroll rather than broken.
 * ------------------------------------------------------------------------ */

.m-slideshow-section .swiper-wrapper {
    display: grid;
}

.m-slideshow-section .swiper-wrapper > .swiper-slide {
    grid-area: 1 / 1;
    width: 100% !important;
    transform: none !important;
}

/*
 * Stacked slides all still occupy the cell, and the inactive ones are only
 * `opacity: 0` — they would sit on top of the visible slide and swallow every
 * click, including the search box below. visibility:hidden takes them out of hit
 * testing while they keep sizing the cell.
 */
.m-slideshow-section .swiper-slide:not(.swiper-slide-active) {
    visibility: hidden;
}

/* ---------------------------------------------------------------------------
 * 2. <pyfoi-search>, over the hero, bottom right.
 *
 * The element is injected as the last child of <m-slideshow> — see `slot` in
 * app/brands/superdose/demo.config.json — so it is a sibling of the whole
 * carousel rather than a child of one slide. That is deliberate: only one slide
 * is ever visible in the frozen capture, and which one that is changes every time
 * the site is re-captured. Anchored to the slideshow, the box stays put.
 *
 * Centred on the slideshow box, which above 768px IS the image: the slide fills
 * it edge to edge and the headline and CTA are absolutes on top. So the middle of
 * this box is the middle of the picture.
 * ------------------------------------------------------------------------ */

.m-slideshow-section m-slideshow {
    position: relative;
}

.m-slideshow-section m-slideshow > pyfoi-search {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: min(560px, 46vw);
    /* Above the slide's own <a class="m-hidden-link"> overlay, which covers the
       whole slide and would otherwise take the click meant for the input. */
    pointer-events: auto;
}

/*
 * Under 768px the slide switches to m-slider--content-stack: the portrait hero art
 * stops filling the block and the headline and CTA stack underneath it on the page
 * background, so the slideshow box is much taller than the picture and its middle
 * is no longer the picture's middle — a centred box would land on the copy. Anchor
 * to the bottom of the stack instead, full width to the margins, where it reads as
 * the last step rather than as something dropped on the headline.
 */
@media screen and (max-width: 767px) {
    .m-slideshow-section m-slideshow > pyfoi-search {
        top: auto;
        left: 16px;
        right: 16px;
        bottom: 20px;
        transform: none;
        width: auto;
    }
}