/* ============================================================================
   .ac-rotator — the home page media rotator
   ----------------------------------------------------------------------------
   Loaded by Pages/Index.cshtml only when a rotator is actually on the page.

   Every colour is an --ac-* token. The one exception is --ac-scrim, which is
   deliberately not theme-tinted: the media underneath is arbitrary church
   photography or video, so only a dark wash keeps a caption readable. A
   brand-tinted scrim would fail over a bright photo. Same rule as the hero on
   the built-in template.
   ============================================================================ */

.ac-rotator {
    position: relative;
    overflow: hidden;
    border-radius: var(--ac-radius-lg);
    background: var(--ac-surface-sunken);

    /* The box owns its shape so the media can scale inside it without the
       layout moving. Consumers override --ac-rotator-ratio to change it; the
       Section 5 hero uses a square to match the space its logo occupied. */
    aspect-ratio: var(--ac-rotator-ratio, 16 / 9);
}

.ac-rotator__viewport {
    position: absolute;
    inset: 0;
}

/* ── Slides ────────────────────────────────────────────────────────────────
   All slides are stacked and only the active one is visible. Opacity rather
   than display:none, because a <video> that is display:none is not guaranteed
   to keep decoding and will stutter when it comes back. */
.ac-rotator__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    /* Keeps an inactive slide out of the tab order and off the a11y tree
       without display:none. */
    visibility: hidden;
    transition: opacity var(--ac-rotator-fade, 700ms) ease,
                visibility var(--ac-rotator-fade, 700ms) ease;
}

.ac-rotator__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.ac-rotator--none .ac-rotator__slide { transition: none; }

/* Slide transition: the outgoing slide steps aside rather than fading. */
.ac-rotator--slide .ac-rotator__slide {
    transform: translateX(8%);
    transition: opacity var(--ac-rotator-fade, 700ms) ease,
                transform var(--ac-rotator-fade, 700ms) ease,
                visibility var(--ac-rotator-fade, 700ms) ease;
}

.ac-rotator--slide .ac-rotator__slide.is-active { transform: translateX(0); }

/* ── Media ─────────────────────────────────────────────────────────────── */

.ac-rotator__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No background-position here on purpose: the slide's own focal point is set
   inline by the partial, and a `center` in this file would be overridden per
   slide anyway. The static fallback below does declare one, because it has no
   focal point of its own. */
.ac-rotator__media--image {
    background-size: cover;
    background-repeat: no-repeat;
}

/* How the media fills the frame.

   `cover` (the default) crops to fill, and is what makes the per-slide focal
   point meaningful - FocusX/FocusY choose which part of the crop survives.
   `contain` shows the whole thing letterboxed, which a logo or any art with its
   own margins needs, and which makes the focal point a no-op because nothing is
   cropped away.

   --ac-rotator-fallback-fit is separate so the two cases can differ: a church
   can crop its slides to fill the frame while its single fallback hero image -
   often a logo - is still shown whole. It inherits the slide value unless set. */
.ac-rotator__media--image { background-size: var(--ac-rotator-fit, cover); }
.ac-rotator__media { object-fit: var(--ac-rotator-fit, cover); }

/* ── Ken Burns ─────────────────────────────────────────────────────────────
   Only on still images, only on the active slide, and only when the visitor
   has not asked for reduced motion (see the media query at the bottom). */
.ac-rotator--kenburns .ac-rotator__slide.is-active .ac-rotator__media--image {
    animation: ac-rotator-kb 18s ease-out both;
}

@keyframes ac-rotator-kb {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

/* ── Caption ───────────────────────────────────────────────────────────── */

.ac-rotator__scrim {
    position: absolute;
    inset: 0;
    background: var(--ac-scrim);
    z-index: 1;
}

.ac-rotator__caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    padding: clamp(1rem, 4%, 2.5rem);
    /* Ink is set on the container, never on a heading — a colour declared on
       the element itself beats inheritance and breaks every heading inside a
       coloured box. */
    color: var(--ac-text-on-scrim);
    text-align: left;
}

.ac-rotator__headline {
    font-family: var(--ac-font-heading);
    font-weight: var(--ac-weight-heading);
    font-size: clamp(1.15rem, 2.4vw, 1.9rem);
    line-height: var(--ac-leading-tight);
    margin: 0;
    text-wrap: balance;
}

.ac-rotator__text {
    font-size: var(--ac-text-sm);
    line-height: var(--ac-leading-normal);
    margin: .4rem 0 0;
    opacity: .92;
    max-width: 52ch;
}

.ac-rotator__cta {
    display: inline-flex;
    align-items: center;
    margin-top: .85rem;
    padding: .5rem 1.1rem;
    border-radius: var(--ac-radius-pill);
    background: var(--ac-brand);
    color: var(--ac-brand-contrast);
    font-size: var(--ac-text-sm);
    font-weight: var(--ac-weight-semibold);
    text-decoration: none;
    transition: var(--ac-transition-fast);
}

.ac-rotator__cta:hover,
.ac-rotator__cta:focus-visible {
    background: var(--ac-brand-hover);
    color: var(--ac-brand-contrast);
}

/* A link with no caption: the slide itself is the hit area. */
.ac-rotator__blanket {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* ── Controls ──────────────────────────────────────────────────────────────
   All four controls share one look. They sit over arbitrary imagery, so they
   carry their own scrim-backed chip rather than relying on the media beneath
   being dark enough. */
.ac-rotator__nav,
.ac-rotator__sound,
.ac-rotator__playpause {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: var(--ac-scrim-solid);
    color: var(--ac-text-on-scrim);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--ac-transition-fast), background var(--ac-transition-fast);
}

/* Hidden until the pointer arrives — but always visible to the keyboard, and
   always visible on touch, where there is no hover to reveal them. */
.ac-rotator:hover .ac-rotator__nav,
.ac-rotator:hover .ac-rotator__sound,
.ac-rotator:hover .ac-rotator__playpause,
.ac-rotator__nav:focus-visible,
.ac-rotator__sound:focus-visible,
.ac-rotator__playpause:focus-visible { opacity: 1; }

@media (hover: none) {
    .ac-rotator__nav,
    .ac-rotator__sound,
    .ac-rotator__playpause { opacity: 1; }
}

.ac-rotator__nav:hover,
.ac-rotator__sound:hover,
.ac-rotator__playpause:hover { background: var(--ac-brand); color: var(--ac-brand-contrast); }

.ac-rotator__nav--prev { inset-inline-start: .75rem; top: calc(50% - 1.25rem); }
.ac-rotator__nav--next { inset-inline-end: .75rem; top: calc(50% - 1.25rem); }
.ac-rotator__sound     { inset-inline-end: .75rem; top: .75rem; }
.ac-rotator__playpause { inset-inline-start: .75rem; top: .75rem; }

/* ── Dots ──────────────────────────────────────────────────────────────── */

.ac-rotator__dots {
    position: absolute;
    z-index: 3;
    inset-inline: 0;
    bottom: .6rem;
    display: flex;
    justify-content: center;
    gap: .4rem;
}

.ac-rotator__dot {
    width: .5rem;
    height: .5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ac-text-on-scrim);
    opacity: .45;
    cursor: pointer;
    transition: var(--ac-transition-fast);
}

.ac-rotator__dot.is-active {
    opacity: 1;
    /* Widened as well as brightened: state must never be carried by colour or
       opacity alone (WCAG 1.4.1). */
    width: 1.4rem;
    border-radius: var(--ac-radius-pill);
}

/* ── Progress bar ──────────────────────────────────────────────────────────
   The visible read-out of the timer. Width is driven from script rather than a
   CSS animation, because the same bar has to track an image's fixed dwell AND a
   video's real playback position, which no keyframe knows. */
.ac-rotator__progress {
    position: absolute;
    z-index: 3;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    background: rgba(var(--ac-brand-rgb), .25);
}

.ac-rotator__progress > span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--ac-brand);
}

/* ── Static fallback ──────────────────────────────────────────────────────
   No slides: one still image, no controls, no chrome. */
.ac-rotator--static .ac-rotator__slide {
    opacity: 1;
    visibility: visible;
    background-size: var(--ac-rotator-fallback-fit, var(--ac-rotator-fit, cover));
    /* Centred, not focal-pointed: the fallback is the church's single hero
       image and has no focal point of its own to honour. */
    background-position: center;
    background-repeat: no-repeat;
}

/* ── Reduced motion ───────────────────────────────────────────────────────
   No Ken Burns, no crossfade, no slide movement. The rotator also STARTS
   PAUSED for these visitors — see ac-rotator.js — so nothing moves until they
   ask it to. */
@media (prefers-reduced-motion: reduce) {
    .ac-rotator--kenburns .ac-rotator__slide.is-active .ac-rotator__media--image { animation: none; }

    .ac-rotator__slide {
        transition: none;
        transform: none;
    }
}