/* Hero slideshow — full-width crossfade banner. Theme-agnostic structure
   with CSS variables for visual customisation.

   Custom properties (set on .cms-slideshow or any ancestor):
     --cms-slideshow-fade               crossfade duration       (default 700ms)
     --cms-slideshow-overlay-bg         dim layer over each slide (default rgba(0,0,0,0.25))
     --cms-slideshow-overlay-fg         text/icon colour on slides (default #fff)
     --cms-slideshow-heading-size       font-size of the heading  (default clamp(1.75rem, 4vw, 3.25rem))
     --cms-slideshow-heading-weight     font-weight of the heading (default 500)
     --cms-slideshow-cta-bg             CTA button background    (default #111)
     --cms-slideshow-cta-fg             CTA button colour        (default #fff)
     --cms-slideshow-arrow-bg           arrow button background  (default rgba(0,0,0,0.4))
     --cms-slideshow-arrow-fg           arrow icon colour        (default #fff)
     --cms-slideshow-dot-color          inactive dot colour      (default rgba(255,255,255,0.5))
     --cms-slideshow-dot-active         active dot colour        (default #fff)

   Heights are themed via [data-height]:
     small  → 40vh   medium → 60vh   large → 80vh   full → 100vh
*/
.cms-slideshow {
    --cms-slideshow-fade: 700ms;
    --cms-slideshow-overlay-bg: rgba(0, 0, 0, 0.25);
    --cms-slideshow-overlay-fg: #fff;
    --cms-slideshow-heading-size: clamp(1.75rem, 4vw, 3.25rem);
    --cms-slideshow-heading-weight: 500;
    --cms-slideshow-cta-bg: #111;
    --cms-slideshow-cta-fg: #fff;
    --cms-slideshow-arrow-bg: rgba(0, 0, 0, 0.4);
    --cms-slideshow-arrow-fg: #fff;
    --cms-slideshow-dot-color: rgba(255, 255, 255, 0.5);
    --cms-slideshow-dot-active: #fff;

    position: relative;
    overflow: hidden;
    width: 100%;
    color: var(--cms-slideshow-overlay-fg);
}

.cms-slideshow[data-height="small"]  { height: 40vh; }
.cms-slideshow[data-height="medium"] { height: 60vh; }
.cms-slideshow[data-height="large"]  { height: 80vh; }
.cms-slideshow[data-height="full"]   { height: 100vh; }

.cms-slideshow__track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Slides are stacked; only the active one is visible. Fade via opacity.
   Background-image-based slides keep the <img> positioned for SEO/accessibility
   while the visual is rendered as a normal img stretched to cover. */
.cms-slideshow__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--cms-slideshow-fade) ease-in-out;
    pointer-events: none;
}
.cms-slideshow__slide--active {
    opacity: 1;
    pointer-events: auto;
}

.cms-slideshow__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay dim + content. The overlay covers the image with a tint so
   text remains readable regardless of the underlying photo. */
.cms-slideshow__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--cms-slideshow-overlay-bg);
    text-align: center;
    gap: 1.25rem;
}

.cms-slideshow__heading {
    margin: 0;
    color: var(--cms-slideshow-overlay-fg);
    font-size: var(--cms-slideshow-heading-size);
    font-weight: var(--cms-slideshow-heading-weight);
    line-height: 1.15;
    max-width: 22ch;
    text-wrap: balance;
}

.cms-slideshow__cta {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: var(--cms-slideshow-cta-bg);
    color: var(--cms-slideshow-cta-fg);
    text-decoration: none;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: filter 0.15s ease;
}
.cms-slideshow__cta:hover {
    filter: brightness(1.15);
}

/* Arrows + dots — overlaid on the active slide. */
.cms-slideshow__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 0;
    background: var(--cms-slideshow-arrow-bg);
    color: var(--cms-slideshow-arrow-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.cms-slideshow__arrow:hover { transform: translateY(-50%) scale(1.05); }
.cms-slideshow__arrow svg   { width: 50%; height: 50%; }
.cms-slideshow__arrow--prev { left:  1.25rem; }
.cms-slideshow__arrow--next { right: 1.25rem; }

.cms-slideshow__dots {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}
.cms-slideshow__dot {
    width: 0.5rem;
    height: 0.5rem;
    border: 0;
    padding: 0;
    border-radius: 999px;
    background: var(--cms-slideshow-dot-color);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.cms-slideshow__dot:hover { transform: scale(1.2); }
.cms-slideshow__dot--active {
    background: var(--cms-slideshow-dot-active);
    transform: scale(1.2);
}

/* Reduced motion: snap (no fade), and the JS won't auto-rotate either. */
@media (prefers-reduced-motion: reduce) {
    .cms-slideshow__slide { transition: none; }
}