/*
 * STM Featured Slider (mod_stmfeaturedslider). Every rule is scoped to .stm-fs; nothing
 * global. Each instance carries its own settings as custom properties on its root (style
 * attribute, from the module settings): --stm-fs-ratio, -max-h, -radius, -count,
 * -interval, colours (-panel, -bar, -active, -text, -meta, -accent, -media) and the
 * caption shade (-shade-0/1/2). A site template may set the fonts:
 *   --stm-fs-font-head, --stm-fs-font-head-stretch (list titles), --stm-fs-font-text.
 * Without them the slider uses the page's own fonts; the caption title is a heading of
 * the page and keeps the template's heading font.
 *
 * Layout (approved Concept C, variant 1): photo about 70 %, navy panel about 30 %, flush
 * in one container. Breakpoints: the viewport (1000px, 600px, as approved) and the
 * slider's own width (900px, 520px), so a narrow position works too. Images never stretch: cover crops only as needed (focal point), contain shows
 * the whole photo on the media colour.
 */

/* ===================================================================== Frame */

/* The slider's own width counts too (container queries below): in a narrow position on a
   wide screen it uses the tablet or phone layout, so the list rows never get too low. */
.stm-fs-wrap { display: block; container: stm-fs / inline-size; }

.stm-fs {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    overflow: hidden;
    border-radius: var(--stm-fs-radius, 12px);
    background: var(--stm-fs-panel, #0F2937);
    color: var(--stm-fs-text, #E8EEF2);
    --stm-fs-sep: rgb(255 255 255 / .12);
    --stm-fs-bar-h: 3.25rem;
    --stm-fs-target: 44px;
}

.stm-fs *,
.stm-fs *::before,
.stm-fs *::after { box-sizing: border-box; }

.stm-fs__main { position: relative; min-width: 0; }

/* Exactly one slide: no list and no controls; the photo takes the full width. */
.stm-fs[data-state="single"] { grid-template-columns: minmax(0, 1fr); }

.stm-fs__track { display: grid; grid-template-areas: "slide"; }

.stm-fs__slide {
    position: relative;
    grid-area: slide;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s .35s;
}

.stm-fs__slide.is-active { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }

/* The image area: the instance's ratio (16:9 or 3:2), optionally capped in height. */
.stm-fs__media {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;    /* definite: a maximum height lowers the area, never narrows it */
    aspect-ratio: var(--stm-fs-ratio, 16 / 9);
    max-height: var(--stm-fs-max-h, none);
    background: var(--stm-fs-media, #1D3442);
}

.stm-fs__media > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: var(--stm-fs-focus, 50% 50%);
}

.stm-fs__media--contain > img { object-fit: contain; }

/* The caption: date, title and the button at the bottom left of the photo, on a dark
   gradient behind the text only. */
.stm-fs__text {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    padding: 5rem clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 2vw, 1.4rem);
    background: linear-gradient(to top, var(--stm-fs-shade-1, rgb(11 31 42 / .88)) 0%, var(--stm-fs-shade-2, rgb(11 31 42 / .7)) 45%, var(--stm-fs-shade-0, rgb(11 31 42 / 0)) 100%);
    text-shadow: 0 1px 2px rgb(0 0 0 / .45);
}

.stm-fs__meta {
    grid-column: 1;
    margin: 0;
    overflow: hidden;
    color: var(--stm-fs-meta, #A9C6D8);
    font-size: .8rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.stm-fs__title {
    grid-column: 1;
    margin: .1rem 0 0;
    padding: 0;
    overflow: hidden;
    color: #FFFFFF;
    font-size: clamp(1.3rem, 2vw, 1.85rem);
    font-weight: 700;
    line-height: 1.15;
    max-width: 36ch;
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.stm-fs__title a { color: #FFFFFF; text-decoration: none; }
.stm-fs__title a:hover { color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 2px; }

.stm-fs__summary {
    grid-column: 1;
    margin: .2rem 0 0;
    overflow: hidden;
    color: var(--stm-fs-text, #E8EEF2);
    font-size: .9rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.stm-fs__cta {
    grid-column: 1;
    justify-self: start;
    margin-top: .8rem;
    text-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: var(--stm-fs-target);
    padding: 0 1rem;
    border-radius: 8px;
    background: #FFFFFF;
    color: #0F2937;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.stm-fs__cta:hover { background: #DDF1FC; color: #0F2937; text-decoration: none; }
.stm-fs--cta-accent .stm-fs__cta { background: var(--stm-fs-active, #0A6FA8); color: #FFFFFF; }
.stm-fs--cta-accent .stm-fs__cta:hover { background: var(--stm-fs-panel, #0F2937); color: #FFFFFF; }
.stm-fs--cta-outline .stm-fs__cta { background: transparent; box-shadow: inset 0 0 0 2px #FFFFFF; color: #FFFFFF; }
.stm-fs--cta-outline .stm-fs__cta:hover { background: rgb(255 255 255 / .15); color: #FFFFFF; }

.stm-fs :focus-visible { outline: 3px solid var(--stm-fs-accent, #7CC7F0); outline-offset: -3px; }

/* ===================================================================== Panel */

/* The panel: list plus control bar, absolutely positioned in its column, so it is
   exactly as tall as the photo and never taller. */
.stm-fs__side { position: relative; min-width: 0; border-left: 1px solid var(--stm-fs-sep); }
.stm-fs__panel { position: absolute; inset: 0; display: flex; flex-direction: column; }

.stm-fs__list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.stm-fs__list li { flex: 0 0 calc(100% / var(--stm-fs-count, 3)); min-height: 0; display: flex; margin: 0; padding: 0; }   /* at most a third each: one or two rows never fill the panel */
.stm-fs__list li + li { border-top: 1px solid var(--stm-fs-sep); }
.stm-fs__list li::before,
.stm-fs__list li::marker { content: none; }

.stm-fs__item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: .45rem 1rem .45rem 1.25rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--stm-fs-text, #E8EEF2);
    font: inherit;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
}

.stm-fs__item:hover { background: rgb(255 255 255 / .06); color: var(--stm-fs-text, #E8EEF2); }
.stm-fs__item[aria-current="true"] { background: var(--stm-fs-active, #0A6FA8); color: #FFFFFF; box-shadow: -1px 0 0 var(--stm-fs-active, #0A6FA8); }

/* The pointer towards the photo: starts 1px inside the row, which also covers the
   panel's 1px line, so there is no seam. */
.stm-fs__item[aria-current="true"]::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: -11px;
    top: 50%;
    width: 0;
    height: 0;
    translate: 0 -50%;
    border-block: 10px solid transparent;
    border-right: 12px solid var(--stm-fs-active, #0A6FA8);
    pointer-events: none;
}

.stm-fs__item-meta { color: var(--stm-fs-meta, #A9C6D8); font-family: var(--stm-fs-font-text, inherit); font-size: .74rem; font-weight: 600; line-height: 1.3; }
.stm-fs__item[aria-current="true"] .stm-fs__item-meta { color: #DDF1FC; }

.stm-fs__item-title {
    display: -webkit-box;
    overflow: hidden;
    font-family: var(--stm-fs-font-head, inherit);
    font-size: 1rem;
    font-stretch: var(--stm-fs-font-head-stretch, normal);
    font-weight: 700;
    line-height: 1.22;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Progress of the interval on the active row; pauses with the slider. */
.stm-fs__progress { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--stm-fs-accent, #7CC7F0); }
.stm-fs[data-ready] .stm-fs__item.is-active .stm-fs__progress { animation: stm-fs-progress var(--stm-fs-interval, 7s) linear forwards; }
.stm-fs[data-playing="false"] .stm-fs__progress { animation-play-state: paused; }
@keyframes stm-fs-progress { to { width: 100%; } }

/* Control bar: previous, next, counter, pause/play. Hidden until slider.js runs. */
.stm-fs__controls {
    flex: none;
    display: flex;
    align-items: stretch;
    height: var(--stm-fs-bar-h);
    background: var(--stm-fs-bar, #0B1F2A);
    border-top: 1px solid var(--stm-fs-sep);
}

.stm-fs:not([data-ready]) .stm-fs__controls { visibility: hidden; }
.stm-fs:not([data-ready]) .stm-fs__item { cursor: default; }

/* A chosen slide whose image is still loading (after 300 ms): a progress cursor and a
   thin moving bar at the top of the photo; the current photo stays. */
.stm-fs[data-loading],
.stm-fs[data-loading] * { cursor: progress; }

.stm-fs[data-loading] .stm-fs__main::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 30%;
    height: 3px;
    background: var(--stm-fs-accent, #7CC7F0);
    animation: stm-fs-loading 1.1s ease-in-out infinite;
    pointer-events: none;
}

@keyframes stm-fs-loading {
    from { translate: -100% 0; }
    to { translate: 340% 0; }
}

.stm-fs__btn {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-width: var(--stm-fs-target);
    min-height: var(--stm-fs-target);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #FFFFFF;
    box-shadow: none;
    cursor: pointer;
}

.stm-fs__btn:hover { background: rgb(255 255 255 / .08); color: #FFFFFF; }
.stm-fs__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stm-fs__prev svg,
.stm-fs__next svg { rotate: 90deg; }    /* the list is vertical: previous and next point up and down */
.stm-fs__prev { order: 1; }
.stm-fs__next { order: 2; border-left: 1px solid var(--stm-fs-sep); }

.stm-fs__counter {
    order: 3;
    display: grid;
    flex: 1;
    place-items: center;
    border-left: 1px solid var(--stm-fs-sep);
    color: var(--stm-fs-meta, #A9C6D8);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.stm-fs__toggle { order: 4; border-left: 1px solid var(--stm-fs-sep); }

/* Icon only: pause while rotating, play while paused, in a fixed 16 x 16 box. */
.stm-fs__toggle-icon { position: relative; flex: none; width: 16px; height: 16px; }
.stm-fs__toggle-icon::before { content: ""; position: absolute; left: 3px; top: 2px; width: 10px; height: 12px; border-inline: 3.5px solid currentColor; }
.stm-fs__toggle[data-paused="true"] .stm-fs__toggle-icon::before { left: 4px; width: 0; height: 0; border-inline: 0; border-left: 11px solid currentColor; border-block: 6px solid transparent; }

/* Numbered indicators: phones only. */
.stm-fs__dots { order: 5; display: none; }

.stm-fs__dot {
    display: grid;
    flex: 1;
    place-items: center;
    min-width: 32px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--stm-fs-sep);
    border-radius: 0;
    background: none;
    color: var(--stm-fs-meta, #A9C6D8);
    font-family: var(--stm-fs-font-text, inherit);
    font-size: .9rem;
    font-weight: 700;
    line-height: normal;
    box-shadow: none;
    cursor: pointer;
}

.stm-fs__dot[aria-current="true"] { background: var(--stm-fs-active, #0A6FA8); color: #FFFFFF; }

/* Narrow desktops, or a slider narrower than 1200 px: the rows beside a smaller photo have
   room for one line of title. */
@media (min-width: 1000px) and (max-width: 1279.98px) {
    .stm-fs__item-title { -webkit-line-clamp: 1; }
}

@container stm-fs (max-width: 1199.98px) {
    .stm-fs__item-title { -webkit-line-clamp: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .stm-fs__progress { display: none; }
    .stm-fs__slide,
    .stm-fs__slide.is-active { transition: none; }
    .stm-fs[data-loading] .stm-fs__main::after { width: 100%; animation: none; opacity: .7; }
}

/* Tablet (viewport below 1000 px, or a slider narrower than 900 px): photo with its caption
   full width, then the rows in two columns and the control bar, all in the same container. */
@media (max-width: 999.98px) {
    .stm-fs { grid-template-columns: minmax(0, 1fr); }
    .stm-fs__side { border-left: 0; border-top: 1px solid var(--stm-fs-sep); }
    .stm-fs__panel { position: static; }
    .stm-fs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stm-fs__list li { border-top: 1px solid var(--stm-fs-sep); }
    .stm-fs__list li + li { border-top: 1px solid var(--stm-fs-sep); }
    .stm-fs__list li:nth-child(-n+2) { border-top: 0; }
    .stm-fs__list li:nth-child(even) { border-left: 1px solid var(--stm-fs-sep); }
    .stm-fs__list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .stm-fs__item { height: 4.5rem; }
    .stm-fs .stm-fs__item-title { -webkit-line-clamp: 2; }
    .stm-fs__item[aria-current="true"]::before { display: none; }
}

@container stm-fs (max-width: 899.98px) {
    .stm-fs { grid-template-columns: minmax(0, 1fr); }
    .stm-fs__side { border-left: 0; border-top: 1px solid var(--stm-fs-sep); }
    .stm-fs__panel { position: static; }
    .stm-fs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stm-fs__list li { border-top: 1px solid var(--stm-fs-sep); }
    .stm-fs__list li + li { border-top: 1px solid var(--stm-fs-sep); }
    .stm-fs__list li:nth-child(-n+2) { border-top: 0; }
    .stm-fs__list li:nth-child(even) { border-left: 1px solid var(--stm-fs-sep); }
    .stm-fs__list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .stm-fs__item { height: 4.5rem; }
    .stm-fs .stm-fs__item-title { -webkit-line-clamp: 2; }
    .stm-fs__item[aria-current="true"]::before { display: none; }
}

/* Phones (viewport below 600 px, or a slider narrower than 520 px): photo, compact caption
   beneath it (a band would cover too much of a small photo), then previous, numbers, next
   and pause. No list. */
@media (max-width: 599.98px) {
    .stm-fs { --stm-fs-bar-h: 3rem; }
    .stm-fs__list { display: none; }
    .stm-fs__side { border-top: 0; }
    .stm-fs__text { position: static; grid-template-columns: minmax(0, 1fr); padding: .7rem .9rem .8rem; background: var(--stm-fs-panel, #0F2937); }
    .stm-fs__title {
        display: -webkit-box;
        font-size: 1.2rem;
        white-space: normal;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .stm-fs__cta { grid-column: 1; grid-row: auto; justify-self: start; min-height: 40px; margin-top: .55rem; padding: 0 .85rem; }
    .stm-fs__controls { border-top: 1px solid var(--stm-fs-sep); }
    .stm-fs__counter { display: none; }
    .stm-fs__dots { display: flex; flex: 5; order: 2; }
    .stm-fs__prev { order: 1; flex: none; width: var(--stm-fs-target); }
    .stm-fs__next { order: 3; flex: none; width: var(--stm-fs-target); }
    .stm-fs__toggle { order: 4; flex: none; width: 48px; }
    .stm-fs__prev svg,
    .stm-fs__next svg { rotate: 0deg; }
}

@container stm-fs (max-width: 519.98px) {
    .stm-fs { --stm-fs-bar-h: 3rem; }
    .stm-fs__list { display: none; }
    .stm-fs__side { border-top: 0; }
    .stm-fs__text { position: static; grid-template-columns: minmax(0, 1fr); padding: .7rem .9rem .8rem; background: var(--stm-fs-panel, #0F2937); }
    .stm-fs__title {
        display: -webkit-box;
        font-size: 1.2rem;
        white-space: normal;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .stm-fs__cta { grid-column: 1; grid-row: auto; justify-self: start; min-height: 40px; margin-top: .55rem; padding: 0 .85rem; }
    .stm-fs__controls { border-top: 1px solid var(--stm-fs-sep); }
    .stm-fs__counter { display: none; }
    .stm-fs__dots { display: flex; flex: 5; order: 2; }
    .stm-fs__prev { order: 1; flex: none; width: var(--stm-fs-target); }
    .stm-fs__next { order: 3; flex: none; width: var(--stm-fs-target); }
    .stm-fs__toggle { order: 4; flex: none; width: 48px; }
    .stm-fs__prev svg,
    .stm-fs__next svg { rotate: 0deg; }
}