/*
 * Sliders on the public site. A slider is sized by its own width (a container query), not by the screen's, so it is right in a sidebar,
 * a column or across the page; under 640px of its own width it takes its narrow shape. Colours are the theme's tokens with fallbacks.
 *
 * A slider often stands in a page's text, where the theme styles every h2, p, ul and li (`.prose h2` and the like). So every rule
 * for what is inside a slider starts from `.okslider`: one class more than such a rule, and the theme's text styles stay outside.
 */
.okslider {
    --oks-accent: var(--accent, #1d4ed8);
    --oks-accent-ink: var(--accent-ink, #ffffff);
    --oks-radius: var(--radius, 10px);
    --oks-ratio: 21 / 9;
    /* The controls: where they stand and how big they are; the words keep clear of them. */
    --oks-edge: clamp(0.5rem, 2cqi, 1.25rem);
    --oks-arrow: clamp(2.25rem, 6cqi, 3rem);
    --oks-bar: 1.75rem;
    --oks-bar-at: clamp(0.5rem, 2.5cqi, 1.25rem);
    --oks-pad-block: clamp(1rem, 6cqi, 4.5rem);
    /* On a slider wider than the site's column (across the page) the words line up with that column, not with the screen's edge. */
    --oks-pad-inline: max(clamp(1rem, 7cqi, 6rem), calc((100cqi - var(--wrap, 72rem)) / 2));
    container-type: inline-size;
    position: relative;
    width: 100%;
    margin-block: 0 1.5rem;
    overflow: hidden;
    border-radius: var(--oks-radius);
    background: #0b0f19;
    color: #ffffff;
    isolation: isolate;
}
.okslider:last-child { margin-block-end: 0; }
/* Straight in a template's region (not in a section) it runs from edge to edge of the page: square corners. */
.tpl-region > .blk-slider > .okslider { border-radius: 0; }

/* The row of slides: scrolls and snaps, so it swipes and scrolls without any script. */
.okslider .okslider__track {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.okslider .okslider__track::-webkit-scrollbar { display: none; }
.okslider .okslider__track:focus-visible { outline: 3px solid var(--oks-accent); outline-offset: -3px; }

.okslider .okslider__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: var(--oks-ratio);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
}

/* The shapes, wide … */
.okslider--r-21x9 { --oks-ratio: 21 / 9; }
.okslider--r-16x9 { --oks-ratio: 16 / 9; }
.okslider--r-3x1 { --oks-ratio: 3 / 1; }
.okslider--r-4x3 { --oks-ratio: 4 / 3; }
.okslider--r-1x1 { --oks-ratio: 1 / 1; }

/* … and narrow: by the slider's own width. (A container query styles what is inside the container, never the container itself:
   so the narrow shape is set on the slides.) */
@container (max-width: 640px) {
    .okslider--m-4x5 .okslider__slide { --oks-ratio: 4 / 5; }
    .okslider--m-1x1 .okslider__slide { --oks-ratio: 1 / 1; }
    .okslider--m-4x3 .okslider__slide { --oks-ratio: 4 / 3; }
    .okslider--m-16x9 .okslider__slide { --oks-ratio: 16 / 9; }
    .okslider--m-9x16 .okslider__slide { --oks-ratio: 9 / 16; }
}

/* Never more of the screen's height than it was told (a tall shape on a short laptop screen would push the page away). */
.okslider--max-60 .okslider__slide { max-height: 60vh; max-height: 60svh; }
.okslider--max-80 .okslider__slide { max-height: 80vh; max-height: 80svh; }
.okslider--max-100 .okslider__slide { max-height: 100vh; max-height: 100svh; }

.okslider picture { position: absolute; inset: 0; display: block; margin: 0; }
.okslider .okslider__image { display: block; width: 100%; max-width: none; height: 100%; margin: 0; border-radius: 0; object-fit: cover; object-position: center; }
.okslider--fit-contain .okslider__image { object-fit: contain; }
.okslider--focus-top .okslider__image { object-position: center top; }
.okslider--focus-bottom .okslider__image { object-position: center bottom; }

/* The darkening under the words, so they read on any picture. */
.okslider .okslider__shade { position: absolute; inset: 0; background: #000000; pointer-events: none; }
.okslider .okslider__shade--10 { opacity: 0.1; } .okslider .okslider__shade--20 { opacity: 0.2; } .okslider .okslider__shade--30 { opacity: 0.3; } .okslider .okslider__shade--40 { opacity: 0.4; }
.okslider .okslider__shade--50 { opacity: 0.5; } .okslider .okslider__shade--60 { opacity: 0.6; } .okslider .okslider__shade--70 { opacity: 0.7; } .okslider .okslider__shade--80 { opacity: 0.8; }

.okslider .okslider__content {
    position: absolute;
    inset: 0;
    display: flex;
    padding: var(--oks-pad-block) var(--oks-pad-inline);
    pointer-events: none;
}
/* Clear of the arrows at the sides and of the dots below. */
.okslider.has-arrows .okslider__content { padding-inline: max(var(--oks-pad-inline), calc(var(--oks-edge) + var(--oks-arrow) + 0.75rem)); }
.okslider.has-bar .okslider__content { padding-block-end: max(var(--oks-pad-block), calc(var(--oks-bar-at) + var(--oks-bar) + 0.75rem)); }

.okslider .okslider__content--start { justify-content: flex-start; text-align: start; }
.okslider .okslider__content--center { justify-content: center; text-align: center; }
.okslider .okslider__content--end { justify-content: flex-end; text-align: end; }
.okslider .okslider__content--top { align-items: flex-start; }
.okslider .okslider__content--middle { align-items: center; }
.okslider .okslider__content--bottom { align-items: flex-end; }

.okslider .okslider__words { max-width: min(42rem, 100%); pointer-events: auto; text-shadow: 0 1px 12px rgb(0 0 0 / 0.35); }
.okslider .okslider__title {
    margin: 0 0 0.4em;
    color: inherit;
    font-size: clamp(1.25rem, 0.75rem + 3.2cqi, 3.25rem);
    line-height: 1.15;
    letter-spacing: normal;
    text-wrap: balance;
}
.okslider .okslider__text {
    display: -webkit-box;
    max-width: none;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    color: inherit;
    font-size: clamp(0.95rem, 0.85rem + 1.2cqi, 1.3rem);
    line-height: 1.5;
}
.okslider .okslider__actions { max-width: none; margin: clamp(0.75rem, 2.5cqi, 1.5rem) 0 0; }
.okslider .okslider__button {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.6rem 1.35rem;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: var(--oks-accent);
    color: var(--oks-accent-ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-shadow: none;
}
.okslider .okslider__button:hover { filter: brightness(1.08); color: var(--oks-accent-ink); text-decoration: none; }
.okslider .okslider__button:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

/* ---- what slider.js adds --------------------------------------------------------------------------------- */

.okslider .okslider__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: var(--oks-arrow);
    height: var(--oks-arrow);
    min-height: 0;
    margin: calc(var(--oks-arrow) / -2) 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.85);
    color: #111827;
    cursor: pointer;
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.2);
}
.okslider .okslider__nav:hover { background: #ffffff; filter: none; }
.okslider .okslider__nav:focus-visible { outline: 3px solid var(--oks-accent); outline-offset: 2px; }
.okslider .okslider__nav[disabled] { opacity: 0.35; cursor: default; }
.okslider .okslider__nav--prev { inset-inline-start: var(--oks-edge); }
.okslider .okslider__nav--next { inset-inline-end: var(--oks-edge); }
.okslider .okslider__nav svg { width: 45%; height: 45%; }
/* Pointing the way the page reads. */
.okslider:dir(rtl) .okslider__nav svg { transform: scaleX(-1); }

.okslider .okslider__bar {
    position: absolute;
    inset-inline: 0;
    bottom: var(--oks-bar-at);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: var(--oks-bar);
    pointer-events: none;
}
.okslider .okslider__dots { display: flex; align-items: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; pointer-events: auto; }
.okslider .okslider__dots li { display: block; margin: 0; padding: 0; }
.okslider .okslider__dots li::marker { content: none; }
.okslider .okslider__dot { display: grid; place-items: center; width: var(--oks-bar); height: var(--oks-bar); min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; }
.okslider .okslider__dot::before { content: ""; width: 0.6rem; height: 0.6rem; border: 2px solid #ffffff; border-radius: 50%; background: transparent; box-shadow: 0 0 4px rgb(0 0 0 / 0.4); transition: width 160ms ease-out, background 160ms ease-out; }
.okslider .okslider__dot[aria-current="true"]::before { width: 1.4rem; border-radius: 999px; background: #ffffff; }
.okslider .okslider__dot:hover { background: transparent; filter: none; }
.okslider .okslider__dot:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; border-radius: 50%; }
.okslider .okslider__pause { display: grid; place-items: center; width: var(--oks-bar); height: var(--oks-bar); min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / 0.45); color: #ffffff; cursor: pointer; pointer-events: auto; }
.okslider .okslider__pause:hover { background: rgb(0 0 0 / 0.65); filter: none; }
.okslider .okslider__pause svg { width: 0.9rem; height: 0.9rem; }
.okslider .okslider__pause:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* A narrow slider: the arrows go down beside the dots (in the middle they would sit on the words), and the words take the width.
   (The selectors may name the slider itself, as long as what they style is inside it.) */
@container (max-width: 640px) {
    .okslider .okslider__content { padding: 1.25rem 1rem; }
    .okslider.has-arrows .okslider__content { padding-inline: 1rem; }
    .okslider.has-arrows .okslider__content, .okslider.has-bar .okslider__content { padding-block-end: calc(var(--oks-bar-at) + 2.25rem + 0.75rem); }
    .okslider .okslider__content--start, .okslider .okslider__content--end { justify-content: center; text-align: center; }
    .okslider .okslider__text { -webkit-line-clamp: 3; }
    .okslider .okslider__nav { top: auto; bottom: var(--oks-bar-at); width: 2.25rem; height: 2.25rem; margin: 0; }
    .okslider .okslider__bar { bottom: calc(var(--oks-bar-at) + (2.25rem - var(--oks-bar)) / 2); padding-inline: calc(var(--oks-edge) + 2.75rem); }
}

/* Fade: with the script the slides lie on one another and the current one shows. */
.okslider--fade.is-ready .okslider__track { display: grid; overflow: hidden; scroll-snap-type: none; }
.okslider--fade.is-ready .okslider__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 600ms ease, visibility 0s linear 600ms; }
.okslider--fade.is-ready .okslider__slide.is-active { opacity: 1; visibility: visible; transition: opacity 600ms ease, visibility 0s; }

@media (prefers-reduced-motion: reduce) {
    .okslider .okslider__track { scroll-behavior: auto; }
    .okslider--fade.is-ready .okslider__slide { transition: none; }
    .okslider .okslider__dot::before { transition: none; }
}

@media print {
    .okslider .okslider__track { display: block; overflow: visible; }
    .okslider .okslider__slide:not(:first-child), .okslider .okslider__nav, .okslider .okslider__bar { display: none; }
}