/* Slider and Logos: front styles. Colours and spacing come only from the theme tokens. */
.sl-wrap { padding-block: calc(var(--space) * 3) 0; }
.sl { position: relative; --sl-ctl: 2.75rem; }
.sl-viewport {
    position: relative; overflow: hidden; width: 100%;
    aspect-ratio: var(--sl-ar-d, 2.5); min-height: 15rem;
    border-radius: var(--radius-lg); border: var(--bw) solid var(--c-border); background: var(--c-surface2);
    touch-action: pan-y;
}
@media (max-width: 640px) { .sl-viewport { aspect-ratio: var(--sl-ar-m, 1.5); min-height: 10rem; } }

.sl-track { position: absolute; inset: 0; display: grid; grid-template: 100% / 100%; }
.sl-slide { position: relative; grid-area: 1 / 1; min-width: 0; height: 100%; overflow: hidden; }

/* fade: slides are stacked and cross-fade */
.sl-mode-fade .sl-slide { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.sl-mode-fade .sl-slide.is-current { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; z-index: 1; }

/* slide: slides sit side by side and the track moves (JS sets the transform and honours RTL) */
.sl-mode-slide .sl-track { display: flex; transition: transform .5s ease; }
.sl-mode-slide .sl-slide { flex: 0 0 100%; }

.sl-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-position: center; }
.sl-fit-cover { object-fit: cover; }
.sl-fit-contain { object-fit: contain; background: var(--c-surface2); }
.sl-overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--c-overlay) calc(var(--sl-overlay, 45) * 1%), transparent); pointer-events: none; }

.sl-caption {
    position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--space) * 1.25);
    padding-block: calc(var(--space) * 2); padding-inline: calc(var(--sl-ctl) + var(--space) * 2);
    color: var(--c-surface); text-shadow: 0 1px 4px color-mix(in srgb, var(--c-overlay) 70%, transparent); overflow: hidden;
}
html[data-eff="night"] .sl-caption { color: var(--c-text); }
.sl-caption > * { max-inline-size: min(40rem, 100%); margin: 0; }
.sl-align-start { align-items: flex-start; text-align: start; }
.sl-align-center { align-items: center; text-align: center; }
.sl-align-end { align-items: flex-end; text-align: end; }
.sl-title { font-size: clamp(1.3rem, 1rem + 1.8vw, 2.4rem); line-height: 1.25; font-weight: var(--hw, 700); color: inherit; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sl-sub { font-size: clamp(.95rem, .85rem + .4vw, 1.2rem); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sl-btn { text-shadow: none; }

.sl-arrow, .sl-pp {
    display: inline-grid; place-items: center; width: var(--sl-ctl); height: var(--sl-ctl); padding: 0; cursor: pointer;
    border-radius: 50%; border: var(--bw) solid var(--c-border); color: var(--c-text);
    background: color-mix(in srgb, var(--c-surface) 88%, transparent);
}
.sl-arrow[hidden], .sl-bar[hidden] { display: none; }
.sl-arrow:hover, .sl-pp:hover { background: var(--c-surface); }
.sl-arrow svg, .sl-pp svg { width: 1.2rem; height: 1.2rem; }
.sl-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.sl-prev { inset-inline-start: var(--space); }
.sl-next { inset-inline-end: var(--space); }

.sl-bar { display: flex; align-items: center; justify-content: center; gap: calc(var(--space) * 1.5); padding-block: calc(var(--space) * 1.5) 0; }
.sl-pp { --sl-ctl: 2.25rem; }
.sl-pp .sl-i-play { display: none; }
.sl-pp.is-paused .sl-i-play { display: inline-grid; }
.sl-pp.is-paused .sl-i-pause { display: none; }
.sl-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.sl-dot { width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-grid; place-items: center; border-radius: 50%; }
.sl-dot::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; border: var(--bw) solid var(--c-accent); background: transparent; transition: background .2s, transform .2s; box-sizing: border-box; }
.sl-dot:hover::before { background: color-mix(in srgb, var(--c-accent) 45%, transparent); }
.sl-dot.is-current::before { background: var(--c-accent); transform: scale(1.25); }

@media (max-width: 640px) {
    .sl { --sl-ctl: 2.25rem; }
    .sl-caption { padding-inline: calc(var(--sl-ctl) + var(--space) * 1.5); gap: var(--space); }
    .sl-title { -webkit-line-clamp: 2; }
    .sl-sub { -webkit-line-clamp: 2; }
    .sl-btn { padding: .45rem .9rem; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sl-mode-fade .sl-slide, .sl-mode-fade .sl-slide.is-current, .sl-mode-slide .sl-track, .sl-dot::before { transition: none; }
}

/* logo strip */
.sl-logos { padding-block: calc(var(--space) * 4); }
.sl-logos-title { text-align: center; font-size: 1.15rem; color: var(--c-muted); margin: 0 0 calc(var(--space) * 2.5); font-weight: var(--hw, 700); }
.sl-logos-list { --sl-gap: calc(var(--space) * 2); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sl-gap); }
.sl-logo-item { flex: 0 0 calc((100% - var(--sl-gap) * (var(--sl-per-row, 5) - 1)) / var(--sl-per-row, 5)); min-width: 0; }
.sl-logo {
    display: grid; place-items: center; aspect-ratio: 3 / 2; padding: calc(var(--space) * 1.5); text-decoration: none;
    background: var(--c-surface); border: var(--bw) solid var(--c-border); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s;
}
a.sl-logo:hover { border-color: var(--c-accent); box-shadow: var(--shadow); }
.sl-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
@media (max-width: 900px) { .sl-logo-item { flex-basis: calc((100% - var(--sl-gap) * 2) / 3); } }
@media (max-width: 480px) { .sl-logo-item { flex-basis: calc((100% - var(--sl-gap)) / 2); } .sl-logos-list { --sl-gap: calc(var(--space) * 1.5); } }