/**
 * SmartHint showcase widget (Cassol_SmartHint) — look & responsiveness of the sliders.
 *
 * 1. Visual parity with the Page Builder product carousels of the store (Glider):
 *    the showcase reuses the theme's product card but renders it with the theme's
 *    Alpine slider (Magento_Catalog::product/slider/product-slider-container.phtml),
 *    whose chrome differs from the CMS carousels. The rules below, scoped to the
 *    widget wrapper, align title, slide gap, arrows, dots and vertical rhythm with
 *    `components/slider.css` / `theme/pages/home.css` of the theme. Plain CSS on
 *    purpose: it is not part of the theme's Tailwind build.
 * 2. Container-responsive slides: the theme sizes slides by VIEWPORT breakpoints;
 *    `container-type: inline-size` on the wrapper makes it a size container (and
 *    gives it a zero intrinsic width, so a shrink-to-fit parent such as the order
 *    confirmation card is never stretched), and the @container rules pick 2/3/4/5
 *    slides per page from the widget's own width. The theme's Alpine slider derives
 *    pages and dots from the slide width, so pagination follows automatically.
 */

/* ---------- 1. CMS carousel look (all browsers) ---------- */

.cassol-smarthint-showcase {
    --sh-gap: 0.5rem;          /* Glider track gap of the CMS carousels (gap-2) */
    --sh-primary: #003D7C;     /* theme `primary` */
}
@media (min-width: 1280px) {   /* theme 2xl */
    .cassol-smarthint-showcase {
        --sh-gap: 1.25rem;     /* 2xl:gap-5 */
    }
}

/* Title: bold primary h2, like the home CMS rows */
.cassol-smarthint-showcase h2,
.cassol-smarthint-showcase h3 {
    color: var(--sh-primary);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.75rem;
}
@media (min-width: 1024px) {
    .cassol-smarthint-showcase h2,
    .cassol-smarthint-showcase h3 {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

/* Vertical rhythm. The slider's own section margins (my-12 / mt-8 mb-10) move to the
   widget wrapper: 2rem on small screens, 3rem from lg, so the showcase never touches the
   block above it (PDP details card, no-results illustration, cart message). The wrapper
   is display:none while the answer is empty, so no blank space is left in that case.
   Inside a Page Builder row (home CMS content) the row's py-6 already spaces it, and a
   widget placed directly in the home `content` gets its padding from the gutter rule
   below, so both keep margin 0. */
.cassol-smarthint-showcase {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
@media (min-width: 1024px) {
    .cassol-smarthint-showcase {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
}
[data-content-type="row"] .cassol-smarthint-showcase,
.cms-index-index .column.main > .cassol-smarthint-showcase {
    margin-top: 0;
    margin-bottom: 0;
}
/* the theme slider's <section> is the direct child of each showcase item */
.cassol-smarthint-showcase__item > section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.cassol-smarthint-showcase__item + .cassol-smarthint-showcase__item {
    margin-top: 1.5rem;
}

/* Slide gap like the Glider track; slide spacing classes of the theme (mr-1 p-1) off */
.cassol-smarthint-showcase .js_slides {
    gap: var(--sh-gap);
}
.cassol-smarthint-showcase .js_slide,
.cassol-smarthint-showcase .js_dummy_slide {
    margin-right: 0 !important;
    padding: 0 !important;
}

/* Arrows: 32px round white buttons with a soft shadow (theme .glider-prev/.glider-next) */
.cassol-smarthint-showcase .carousel-nav {
    gap: 0.5rem;
}
.cassol-smarthint-showcase .carousel-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    transition: background-color 150ms ease, box-shadow 150ms ease;
}
.cassol-smarthint-showcase .carousel-nav button:hover {
    background: #fff;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
}
.cassol-smarthint-showcase .carousel-nav button svg {
    width: 1.25rem;
    height: 1.25rem;
}
.cassol-smarthint-showcase .carousel-nav button svg circle {
    display: none;
}
.cassol-smarthint-showcase .carousel-nav button svg path {
    fill: #000;
}

/* Dots: 24x4 light grey, active primary (theme .glider-dot) */
.cassol-smarthint-showcase .glider-dots button > span {
    width: 1.5rem !important;
    height: 0.25rem !important;
    background-color: #C8CFD6 !important;
    opacity: 1 !important;
    box-shadow: none !important;
}
.cassol-smarthint-showcase .glider-dots button > span.bg-primary {
    background-color: var(--sh-primary) !important;
}
.cassol-smarthint-showcase .glider-dots-container {
    margin-top: 1rem !important;
}

/* Home page: the theme zeroes the padding of .columns and gives each Page Builder row
   py-6 px-4 md:px-6 + a 1536px inner max width. A widget placed in `content` is not
   inside a row, so it gets the same gutters here. Other pages keep the regular
   .columns padding, hence the body-class scope. */
.cms-index-index .column.main > .cassol-smarthint-showcase {
    padding: 1.5rem 1rem;
}
@media (min-width: 768px) {
    .cms-index-index .column.main > .cassol-smarthint-showcase {
        padding: 1.5rem 1.5rem;
    }
}
@media (min-width: 1024px) {
    .cms-index-index .column.main > .cassol-smarthint-showcase > * {
        max-width: 1536px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- 2. Container-responsive slides (browsers with container queries) ---------- */

@supports (container-type: inline-size) {
    .cassol-smarthint-showcase {
        container-type: inline-size;
        width: 100%;
    }

    /* < 36rem (576px): 2 per page */
    .cassol-smarthint-showcase .js_slide,
    .cassol-smarthint-showcase .js_dummy_slide {
        width: calc((100% - var(--sh-gap)) / 2) !important;
        max-width: none !important;
    }
    .cassol-smarthint-showcase .js_slides.gap-\[12px\] .js_slide,
    .cassol-smarthint-showcase .js_slides.gap-\[12px\] .js_dummy_slide {
        width: calc(100% / 2 - 10px) !important;
    }

    /* >= 36rem: 3 per page */
    @container (min-width: 36rem) {
        .cassol-smarthint-showcase .js_slide,
        .cassol-smarthint-showcase .js_dummy_slide {
            width: calc((100% - 2 * var(--sh-gap)) / 3) !important;
        }
        .cassol-smarthint-showcase .js_slides.gap-\[12px\] .js_slide,
        .cassol-smarthint-showcase .js_slides.gap-\[12px\] .js_dummy_slide {
            width: calc(100% / 3 - 10px) !important;
        }
    }

    /* >= 48rem (768px): 4 per page */
    @container (min-width: 48rem) {
        .cassol-smarthint-showcase .js_slide,
        .cassol-smarthint-showcase .js_dummy_slide {
            width: calc((100% - 3 * var(--sh-gap)) / 4) !important;
        }
        .cassol-smarthint-showcase .js_slides.gap-\[12px\] .js_slide,
        .cassol-smarthint-showcase .js_slides.gap-\[12px\] .js_dummy_slide {
            width: calc(100% / 4 - 10px) !important;
        }
    }

    /* >= 64rem (1024px): 5 per page (full-width home/category sliders) */
    @container (min-width: 64rem) {
        .cassol-smarthint-showcase .js_slide,
        .cassol-smarthint-showcase .js_dummy_slide {
            width: calc((100% - 4 * var(--sh-gap)) / 5) !important;
        }
        .cassol-smarthint-showcase .js_slides.gap-\[12px\] .js_slide,
        .cassol-smarthint-showcase .js_slides.gap-\[12px\] .js_dummy_slide {
            width: calc(100% / 5 - 10px) !important;
        }
    }
}