/* ================================================================
   MISSIONARY-CAROUSEL.CSS - 3D ORBITAL MISSIONARY CAROUSEL
   ================================================================
   Styles for the "Our Missionaries" screen carousel:
   - Screen layout (the carousel takes most of the screen)
   - The stage, the invisible ring and its soft floor
   - Missionary cards (photo, name, mission, bell)
   - Small prev/next buttons and the "Swipe to explore" hint

   Motion lives in js/missionaryCarousel.js. JavaScript sets these
   variables on the stage from its size:
     --mv-card-w, --mv-card-h   size of the front card
   Everything else is sized from those, so the design scales from a
   phone up to the 4K kiosk.

   Uses the kiosk's existing tokens from css/styles.css
   (colors, fonts, spacing, radii).
   ================================================================ */


/* ================================================================
   SECTION 1: SCREEN LAYOUT
   ================================================================
   The old grid screen had big margins around a scrolling box.
   The carousel instead fills the space between the title and the
   Back button, edge to edge.
   ================================================================ */

.view-card.missionaries-card--carousel {
    --mv-side-pad: 45px;         /* the card's own side padding */
    max-width: none;             /* full width, also on the 4K kiosk */
    padding: 10px var(--mv-side-pad) var(--spacing-lg);
    gap: 0;
}

.missionaries-card--carousel .view-title {
    margin-bottom: var(--spacing-xs);
}

.missionaries-card--carousel .view-description {
    margin-bottom: 0;
    font-size: var(--text-lg);
}

.missionaries-card--carousel .view-content {
    overflow: visible;           /* let side cards and shadows reach the screen edges */
}

.missionaries-card--carousel .back-button {
    margin-top: var(--spacing-sm);
    position: relative;
    z-index: 2;
}


/* ================================================================
   SECTION 2: STAGE & VIEWPORT
   ================================================================ */

.missionary-carousel-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* Reach past the side padding so the ring spans the whole screen */
    margin: 0 calc(-1 * (var(--mv-side-pad, 45px) + var(--spacing-2xl)));
}

.mv-carousel__viewport {
    position: relative;
    flex: 1;
    min-height: 240px;
    overflow: visible;           /* the screen itself clips; shadows stay soft */

    /* Sideways swipes spin the ring; up/down swipes still scroll a page */
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    cursor: grab;
    outline: none;
}

.mv-carousel__viewport.is-dragging {
    cursor: grabbing;
}

.mv-carousel__ring {
    position: absolute;
    inset: 0;
    z-index: 0;                  /* keeps card stacking inside the ring */
}

/* Soft pool of light on the "floor" of the ring (static — never animates) */
.mv-carousel__floor {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--mv-card-w) * 3.4);
    height: calc(var(--mv-card-h) * 0.56);
    transform: translate(-50%, calc(var(--mv-card-h) * 0.02));
    border-radius: 50%;
    background: radial-gradient(
        closest-side,
        rgba(30, 58, 138, 0.13) 0%,
        rgba(30, 58, 138, 0.06) 55%,
        rgba(30, 58, 138, 0) 100%
    );
    pointer-events: none;
}


/* ================================================================
   SECTION 3: SLOTS (the moving positions on the ring)
   ================================================================
   JavaScript moves each slot with translate3d + scale and sets its
   opacity and z-index. Slots are never rotated, so cards always
   face the viewer.
   ================================================================ */

.mv-slot {
    --mv-radius: calc(var(--mv-card-w) * 0.075);

    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--mv-card-w);
    height: var(--mv-card-h);
    margin-left: calc(var(--mv-card-w) / -2);
    margin-top: calc(var(--mv-card-h) / -2);
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Shadow under each card — its strength follows depth (opacity only) */
.mv-slot__shadow {
    position: absolute;
    inset: 3% 5% 0 5%;
    border-radius: var(--mv-radius);
    box-shadow:
        0 calc(var(--mv-card-h) * 0.06) calc(var(--mv-card-h) * 0.10) calc(var(--mv-card-h) * -0.02) rgba(22, 32, 60, 0.42),
        0 calc(var(--mv-card-h) * 0.015) calc(var(--mv-card-h) * 0.03) rgba(22, 32, 60, 0.20);
    pointer-events: none;
    will-change: opacity;
}

/* Dims cards as they travel toward the back (opacity only) */
.mv-slot__veil {
    position: absolute;
    inset: 0;
    border-radius: var(--mv-radius);
    background: #4a4236;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}


/* ================================================================
   SECTION 4: THE MISSIONARY CARD
   ================================================================
   A full-bleed portrait with the name and mission set on a deep
   blue fade at the bottom (the same missionary blue as the old
   name label and the Back button).
   ================================================================ */

.mv-card {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--mv-radius);
    overflow: hidden;
    background: linear-gradient(160deg, #f4efe3 0%, #e7decb 100%);
    color: #ffffff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow var(--transition-normal);
}

/* Fine light edge, like the rim of a printed photograph */
.mv-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

/* Keyboard focus ring (only on the front card, which is the only tab stop) */
.mv-card:focus {
    outline: none;
}

.mv-card:focus-visible {
    outline: 3px solid var(--color-accent-gold);
    outline-offset: 5px;
}

/* ----------------------------------------------------------
   4a. Photo
   ---------------------------------------------------------- */

.mv-card__photo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mv-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;     /* keep faces in frame */
    display: block;
    -webkit-user-drag: none;
    pointer-events: none;
}

.mv-card__silhouette {
    width: 62%;
    height: 62%;
    margin-bottom: 22%;
}

/* No photo: a quieter card so the silhouette doesn't look like a missing image */
.mv-card:has(.mv-card__silhouette) {
    background: linear-gradient(160deg, #ebe4d4 0%, #d8cdb6 100%);
}

/* ----------------------------------------------------------
   4b. Name & mission
   ---------------------------------------------------------- */

.mv-card__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--mv-card-w) * 0.018);
    padding:
        calc(var(--mv-card-h) * 0.16)
        calc(var(--mv-card-w) * 0.075)
        calc(var(--mv-card-w) * 0.075);
    background: linear-gradient(
        to top,
        rgba(14, 24, 48, 0.94) 0%,
        rgba(18, 34, 70, 0.80) 38%,
        rgba(24, 44, 88, 0.38) 70%,
        rgba(24, 44, 88, 0) 100%
    );
    pointer-events: none;
}

.mv-card__rule {
    width: calc(var(--mv-card-w) * 0.09);
    height: 2px;
    border-radius: 1px;
    background: var(--color-accent-gold);
    margin-bottom: calc(var(--mv-card-w) * 0.012);
}

.mv-card__name {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: clamp(20px, calc(var(--mv-card-w) * 0.098), 64px);
    line-height: 1.04;
    letter-spacing: 0.005em;
    color: #ffffff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
    overflow-wrap: anywhere;
}

.mv-card__mission {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: clamp(10px, calc(var(--mv-card-w) * 0.031), 17px);
    line-height: 1.35;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(247, 243, 232, 0.9);    /* --color-text-light */
}

/* ----------------------------------------------------------
   4c. New-content bell (existing .missionary-card-bell animation)
   ---------------------------------------------------------- */

.mv-card__bell {
    top: calc(var(--mv-card-w) * 0.05);
    right: calc(var(--mv-card-w) * 0.05);
    font-size: clamp(18px, calc(var(--mv-card-w) * 0.07), 34px);
    line-height: 1;
}

/* ----------------------------------------------------------
   4d. Front card
   ---------------------------------------------------------- */

.mv-slot.is-active .mv-card {
    cursor: pointer;
}

.mv-slot:not(.is-active) .mv-card {
    cursor: inherit;              /* side cards: the whole ring is "grab" */
}

@media (hover: hover) and (pointer: fine) {
    .mv-slot.is-active .mv-card:hover {
        box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.55);
    }
}


/* ================================================================
   SECTION 5: CONTROLS (prev / hint / next)
   ================================================================
   Deliberately quiet: the ring itself is the main control.
   ================================================================ */

.mv-carousel__controls {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    padding-top: var(--spacing-sm);
    position: relative;
    z-index: 2;
}

.mv-carousel__nav {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(44, 36, 22, 0.16);
    background: rgba(255, 255, 255, 0.7);
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(30, 58, 138, 0.10);
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.mv-carousel__nav svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mv-carousel__nav:hover {
    background: #ffffff;
}

.mv-carousel__nav:active {
    transform: scale(0.94);
}

.mv-carousel__hint {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 11em;
    justify-content: center;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    transition: opacity var(--transition-slow);
}

.mv-carousel__hint-icon {
    width: 30px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: mvHintSway 2.4s ease-in-out infinite;
}

.mv-carousel__hint.is-dismissed {
    opacity: 0;
}

@keyframes mvHintSway {
    0%, 100% { transform: translateX(-3px); }
    50%      { transform: translateX(3px); }
}

/* One missionary: nothing to spin */
.mv-carousel.is-single .mv-carousel__controls {
    visibility: hidden;
}

.mv-carousel.is-single .mv-carousel__viewport {
    cursor: default;
}

/* Screen-reader-only announcements */
.mv-carousel__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ================================================================
   SECTION 6: REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .mv-carousel__hint-icon {
        animation: none;
    }

    .mv-card,
    .mv-carousel__nav,
    .mv-carousel__hint {
        transition: none;
    }
}


/* ================================================================
   SECTION 6a: UPRIGHT WHEEL (phones held upright)
   ================================================================
   missionaryCarousel.js adds .is-vertical when the carousel is narrow
   and taller than it is wide: cards ride up and down a vertical
   circle, the front card in the middle with the next ones peeking
   out above and below, and up/down swipes turn it.
   ================================================================ */

/* Up/down swipes belong to the wheel; sideways ones still scroll */
.mv-carousel.is-vertical .mv-carousel__viewport {
    touch-action: pan-x;
}

/* The flat ring's floor becomes a soft halo behind the stack */
.mv-carousel.is-vertical .mv-carousel__floor {
    width: calc(var(--mv-card-w) * 1.9);
    height: calc(var(--mv-card-h) * 2.1);
    transform: translate(-50%, -50%);
    background: radial-gradient(
        closest-side,
        rgba(201, 162, 39, 0.16) 0%,
        rgba(30, 58, 138, 0.07) 55%,
        rgba(30, 58, 138, 0) 100%
    );
}

/* Arrows and hint point up/down */
.mv-carousel.is-vertical .mv-carousel__nav svg,
.mv-carousel.is-vertical .mv-carousel__hint-icon {
    transform: rotate(90deg);
}

.mv-carousel.is-vertical .mv-carousel__hint-icon {
    animation-name: mvHintSwayVertical;
}

@keyframes mvHintSwayVertical {
    0%, 100% { transform: rotate(90deg) translateX(-3px); }
    50%      { transform: rotate(90deg) translateX(3px); }
}

.mv-carousel.is-vertical .mv-carousel__controls {
    gap: var(--spacing-md);
    padding-top: var(--spacing-xs);
}

.mv-carousel.is-vertical .mv-carousel__hint {
    min-width: 0;
    letter-spacing: 0.08em;
}


/* ================================================================
   SECTION 6b: "FORMER MISSIONARIES" BOX
   ================================================================
   Small box in the top-left of the "Our Missionaries" screen that
   opens the former-missionaries carousel. Hidden (via the `hidden`
   attribute) until someone has "Mission complete" ticked in admin.
   Top-left because the floating bulletin QR code owns the top-right
   on every screen; the top-left Temples button only shows on Home.
   ================================================================ */

.view-card.missionaries-card--carousel {
    position: relative;
}

.former-box {
    position: absolute;
    top: 14px;
    left: var(--mv-side-pad, 45px);
    z-index: 3;                   /* above the ring's side cards */
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;             /* comfortable touch target */
    padding: 8px 14px 8px 10px;
    border: 1px solid rgba(201, 162, 39, 0.55);
    border-radius: var(--radius-lg);
    background: var(--color-bg-cream);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    text-align: left;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.former-box[hidden] {
    display: none;
}

.former-box:active {
    transform: scale(0.97);
}

.former-box__faces {
    display: flex;
}

.former-box__face {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 2px solid #ffffff;
    background: linear-gradient(160deg, #f4efe3 0%, #e7decb 100%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.former-box__face + .former-box__face {
    margin-left: -14px;           /* overlap the faces */
}

.former-box__img,
.former-box__face svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.former-box__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.former-box__title {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-xl);
}

.former-box__count {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.former-box__arrow {
    font-size: 28px;
    line-height: 1;
    color: var(--color-accent-warm);
}


/* ================================================================
   SECTION 7: RESPONSIVE ADJUSTMENTS
   ================================================================
   Card size and ring width are calculated in JavaScript from the
   stage size; these only adjust the surrounding layout.
   ================================================================ */

/* Phones: slimmer margins on this screen so the front card can use
   most of the width */
@media screen and (max-width: 767px) {
    #missionaries-screen .view-container,
    #former-missionaries-screen .view-container {
        padding: var(--spacing-md) 0 var(--spacing-md);
    }

    /* No room beside the title on a phone: sit under the carousel */
    .former-box {
        position: static;
        align-self: center;
        margin-top: var(--spacing-sm);
    }

    .view-card.missionaries-card--carousel {
        --mv-side-pad: var(--spacing-md);
        padding: var(--spacing-sm) var(--mv-side-pad) var(--spacing-sm);
    }

    .missionary-carousel-stage {
        margin: 0 calc(-1 * var(--mv-side-pad));
    }

    .missionaries-card--carousel .view-title {
        font-size: var(--text-3xl);
    }

    /* The title says it all on a phone; give the height to the wheel */
    .missionaries-card--carousel .view-description {
        display: none;
    }

    .mv-carousel__hint {
        min-width: 0;
        font-size: var(--text-xs);
    }

    .missionaries-card--carousel .back-button {
        padding: var(--spacing-sm) var(--spacing-xl);
        font-size: var(--text-base);
    }
}

/* Short screens (landscape phones): tighten the header */
@media screen and (max-height: 520px) {
    .missionaries-card--carousel .view-description {
        display: none;
    }

    .missionaries-card--carousel .view-title {
        font-size: var(--text-3xl);
    }
}

/* 4K Newline kiosk at 200% scaling: the header grows in kiosk-layout.css;
   keep the description modest so the carousel keeps most of the height */
@media screen and (min-width: 1800px) and (min-resolution: 1.5dppx) {
    .missionaries-card--carousel .view-description {
        font-size: var(--text-xl);
    }

    .view-card.missionaries-card--carousel {
        padding: 10px var(--mv-side-pad) var(--spacing-md);
    }

    .missionaries-card--carousel .back-button {
        margin-top: var(--spacing-sm);
        margin-bottom: 0;
    }

    .mv-carousel__nav {
        width: 52px;
        height: 52px;
    }
}