/**
 * WebCreator - slider / hero carousel (markup: docs/page-editor-blocks.md)
 *
 * Loaded only on pages that contain a slider (.wc-slider). Colours and fonts come from the theme variables
 * (--color-primary, --wc-on-primary, --font-family-heading), with fallbacks.
 *
 * States: with JavaScript, slider.js adds .is-ready and shows one slide at a time. Without JavaScript the first slide is
 * shown; where the browser reports that scripting is off, all slides are shown under each other, so no text is lost.
 */
.wc-slider {
    --wc-slider-min: 22rem;
    position: relative;
    margin: 1.5rem 0;
    overflow: hidden;
    border-radius: var(--radius-md, 0);
    background: #1f2937;
    color: #fff;
    isolation: isolate;
}
.wc-slider[data-wc-height="60"] { --wc-slider-min: max(60vh, 24rem); }
.wc-slider[data-wc-height="80"] { --wc-slider-min: max(80vh, 28rem); }
@supports (height: 1svh) {
    .wc-slider[data-wc-height="60"] { --wc-slider-min: max(60svh, 24rem); }
    .wc-slider[data-wc-height="80"] { --wc-slider-min: max(80svh, 28rem); }
}

/* All slides lie on top of each other in one grid cell: the slider is as high as its highest slide */
.wc-slider .wc-slider-track { display: grid; }
.wc-slider .wc-slide {
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--wc-slider-min);
    min-width: 0;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.wc-slider .wc-slide:first-child,
.wc-slider .wc-slide.is-active {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease, visibility 0s;
}
.wc-slider.is-ready .wc-slide:first-child:not(.is-active) {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
/* No scripting: every slide is shown, one under the other */
@media (scripting: none) {
    .wc-slider .wc-slider-track { display: block; }
    .wc-slider .wc-slide { visibility: visible; opacity: 1; }
    .wc-slider .wc-slide + .wc-slide { border-top: 2px solid rgba(255, 255, 255, 0.5); }
}

.wc-slider .wc-slide-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    z-index: -2;
}
/* The scrim makes the text readable on any photo */
.wc-slider .wc-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(17, 24, 39, 0.65);   /* white text stays above 4.5:1 even on a pure white photo */
}
.wc-slider[data-wc-overlay="light"] .wc-slide::before { background: rgba(255, 255, 255, 0.72); }
.wc-slider[data-wc-overlay="card"] .wc-slide::before { background: rgba(0, 0, 0, 0.12); }

.wc-slider .wc-slide-content {
    box-sizing: border-box;
    width: 100%;
    max-width: 44rem;
    padding: 3.5rem 4.5rem 4.5rem;
    text-align: left;
}
.wc-slider[data-wc-align="center"] .wc-slide-content { margin-inline: auto; text-align: center; }
.wc-slider[data-wc-align="right"] .wc-slide-content { margin-inline-start: auto; text-align: right; }
.wc-slider .wc-slide-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-family-heading, inherit);
    font-size: clamp(1.75rem, 4.5vw, 3rem);
    line-height: 1.15;
    color: inherit;
}
.wc-slider .wc-slide-text {
    margin: 0 0 1.25rem;
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.5;
    color: inherit;
}
.wc-slider .wc-slide-title:last-child,
.wc-slider .wc-slide-text:last-child { margin-bottom: 0; }
.wc-slider[data-wc-overlay="light"] .wc-slide { color: #111827; }
.wc-slider[data-wc-overlay="card"] .wc-slide-content {
    max-width: 38rem;
    margin-inline: 4.5rem;
    padding: 1.75rem 2rem;
    width: auto;
    background: var(--color-primary, #27ae60);
    color: var(--wc-on-primary, #111);
    border-radius: var(--radius-md, 4px);
}
.wc-slider[data-wc-overlay="card"][data-wc-align="center"] .wc-slide-content { margin-inline: auto; }
.wc-slider[data-wc-overlay="card"][data-wc-align="right"] .wc-slide-content { margin-inline: auto 4.5rem; }

.wc-slider a.wc-slide-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--wc-btn-radius, var(--radius-md, 4px));
    background: var(--color-primary, #27ae60);
    color: var(--wc-on-primary, #111);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
}
.wc-slider a.wc-slide-button:hover { background: var(--color-primary-dark, var(--color-primary, #1e8449)); color: var(--wc-on-primary-hover, var(--wc-on-primary, #111)); }
.wc-slider[data-wc-overlay="card"] a.wc-slide-button {
    background: var(--wc-on-primary, #111);
    color: var(--color-primary, #fff);
}
.wc-slider a:focus-visible,
.wc-slider button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #111827;
}

/* ---------- controls (built by slider.js) ---------- */
.wc-slider .wc-slider-prev,
.wc-slider .wc-slider-next {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: -1.375rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 24, 39, 0.65);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}
.wc-slider .wc-slider-prev { left: 0.75rem; }
.wc-slider .wc-slider-next { right: 0.75rem; }
.wc-slider .wc-slider-prev:hover,
.wc-slider .wc-slider-next:hover { background: rgba(17, 24, 39, 0.9); }
.wc-slider .wc-slider-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.75rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    pointer-events: none;
}
.wc-slider .wc-slider-bar > * { pointer-events: auto; }
.wc-slider .wc-slider-dots { display: flex; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 1rem; background: rgba(17, 24, 39, 0.55); }
/* The dot is small, the button around it is 24 px: a comfortable target */
.wc-slider .wc-slider-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.wc-slider .wc-slider-dot::after {
    content: "";
    position: absolute;
    inset: 0.4rem;
    border-radius: 50%;
    border: 2px solid #fff;
    background: transparent;
}
.wc-slider .wc-slider-dot[aria-current="true"]::after { background: #fff; }
.wc-slider .wc-slider-pause {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 24, 39, 0.65);
    color: #fff;
    position: relative;
    cursor: pointer;
}
/* The icon is drawn with borders (no font needed): two bars = pause, a triangle = play */
.wc-slider .wc-slider-pause::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.4rem;
    height: 0.75rem;
    margin: -0.375rem 0 0 -0.4rem;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    box-sizing: content-box;
}
.wc-slider .wc-slider-pause.is-paused::before {
    width: 0;
    height: 0;
    margin: -0.4rem 0 0 -0.25rem;
    border: 0.4rem solid transparent;
    border-left: 0.65rem solid #fff;
    border-right: 0;
}
@media (max-width: 40rem) {
    .wc-slider .wc-slide-content { padding: 2.5rem 1.25rem 4rem; }
    .wc-slider[data-wc-overlay="card"] .wc-slide-content,
    .wc-slider[data-wc-overlay="card"][data-wc-align="right"] .wc-slide-content { margin-inline: 1rem; padding: 1.25rem; }
    .wc-slider .wc-slider-prev,
    .wc-slider .wc-slider-next { top: auto; bottom: 0.75rem; margin: 0; width: 2.5rem; height: 2.5rem; }
    .wc-slider .wc-slider-prev { left: 0.5rem; }
    .wc-slider .wc-slider-next { right: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .wc-slider .wc-slide,
    .wc-slider .wc-slide:first-child,
    .wc-slider .wc-slide.is-active,
    .wc-slider.is-ready .wc-slide:first-child:not(.is-active) { transition: none; }
}

/* ---------- photo mode: data-wc-fit="contain" ----------
 * The whole photo is shown (no cropping), centred on the dark background of the slider. A slide without text gets no scrim,
 * so the photo keeps its colours; a slide with text keeps the scrim and stays readable. The height is the one of
 * data-wc-height (also "auto": the 22rem minimum above, so a slide never collapses). Browsers without :has() keep the scrim. */
.wc-slider[data-wc-fit="contain"] .wc-slide-image {
    object-fit: contain;
    object-position: center;
}
.wc-slider[data-wc-fit="contain"] .wc-slide:not(:has(.wc-slide-content > *))::before { display: none; }
/* The arrows sit on any photo: a light ring next to the dark disc keeps them visible on dark and on light pictures */
.wc-slider[data-wc-fit="contain"] .wc-slider-prev,
.wc-slider[data-wc-fit="contain"] .wc-slider-next,
.wc-slider[data-wc-fit="contain"] .wc-slider-pause { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }
.wc-slider[data-wc-fit="contain"] .wc-slider-dots { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }