/* ================================================================
   MOBILE.CSS - PHONE LAYOUT FOR EVERY SCREEN
   ================================================================
   The kiosk is designed for a 1920x1080 touch screen, where every
   screen is a fixed-height card that fits without scrolling. On a
   phone that design clips content and pushes buttons off the bottom.

   Everything here applies only to phone-sized screens (600px wide or
   less; the general, detail and pop-up rules also cover a phone turned
   sideways, 500px tall or less) and is loaded LAST, so the kiosk
   itself is untouched. General rules come first, then one section
   per screen.

   The missionary carousels have their own phone rules in
   missionary-carousel.css (upright wheel); the home screen's circle
   grid is in SECTION 2 here.
   ================================================================ */


/* ================================================================
   SECTION 1: GENERAL (all screens)
   ================================================================
   - Screens scroll instead of clipping
   - Cards use the full width with slimmer padding
   - The Back button sticks to the bottom so it's always reachable
   ================================================================ */

@media screen and (max-width: 600px), screen and (max-height: 500px) and (orientation: landscape) {
    .view-container {
        padding: var(--spacing-md) var(--spacing-sm) var(--spacing-md);
        align-items: flex-start;
        overflow-y: auto;
        overflow-x: hidden;             /* carousels bleed past the edges on purpose */
        -webkit-overflow-scrolling: touch;
    }

    .view-card {
        padding: var(--spacing-lg) var(--spacing-md);
        border-radius: var(--radius-lg);
        margin: auto 0;                 /* centred when short, scrolls when long */
    }

    .view-title {
        font-size: var(--text-3xl);
        line-height: 1.15;
        /* keep clear of the Ward Bulletin button (top right) */
        padding: 0 44px;
    }

    .view-description {
        font-size: var(--text-base);
        line-height: 1.5;
    }

    .back-button {
        position: sticky;
        bottom: var(--spacing-sm);
        z-index: 5;
        align-self: center;
        max-width: calc(100% - var(--spacing-md));
        padding: var(--spacing-sm) var(--spacing-xl);
        min-height: 52px;
        font-size: var(--text-base);
        white-space: normal;
    }

    /* The carousel screens already fit the screen exactly; a sticky
       button there would sit on top of the carousel controls */
    .missionaries-card--carousel .back-button {
        position: relative;
        bottom: auto;
    }
}


/* ================================================================
   SECTION 2: FLOATING BUTTONS (Ward Bulletin QR, Temples of the World)
   ================================================================
   A QR code is no use on the phone you'd scan it with. On phones the
   bulletin QR becomes a small "Ward Bulletin" button on the home
   screen only (tapping it opens the bulletin, see floatingQR.js);
   on other screens it's hidden so it can't cover titles.
   ================================================================ */

@media screen and (max-width: 600px), screen and (max-height: 500px) and (orientation: landscape) {
    .floating-qr-container {
        top: max(var(--spacing-sm), env(safe-area-inset-top));
        right: var(--spacing-sm);
        opacity: 1;
    }

    .floating-qr-code {
        display: none;
    }

    .floating-qr-label {
        background: rgba(255, 255, 255, 0.9);
        color: var(--color-text-primary);
        border: 1px solid rgba(201, 162, 39, 0.5);
        box-shadow: var(--shadow-soft);
        padding: 8px 14px;
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
    }

    body:not([data-screen="HOME"]) .floating-qr-container {
        display: none;
    }

    .temple-gallery-button {
        top: max(var(--spacing-sm), env(safe-area-inset-top));
        left: var(--spacing-sm);
        transform: scale(0.8);
        transform-origin: top left;
    }
}


/* ================================================================
   SECTION 3: SCREENSAVER
   ================================================================ */

@media screen and (max-width: 600px) {
    .prompt-card {
        max-width: calc(100% - var(--spacing-xl));
        padding: var(--spacing-lg);
    }

    .prompt-text {
        font-size: var(--text-3xl);
    }
}


/* ================================================================
   SECTION 4: HOME
   ================================================================
   The four circle buttons become a 2x2 grid whose circles shrink
   with BOTH the width and the height of the screen, so all four
   always fit without scrolling. The bubble-notification overlay
   (styles.css) is a copy of the button layout drawn on top; it gets
   the same grid and slot sizes so each bubble sits over its button.
   ================================================================ */

@media screen and (max-width: 600px) {
    .home-content {
        --circle-size: min(36vw, 21vh);
        --circle-gap: clamp(14px, 4vw, 24px);
        --label-h: 2.6em;
        padding: var(--spacing-md);
    }

    /* Below the two corner buttons instead of behind them */
    .home-header {
        top: calc(max(var(--spacing-sm), env(safe-area-inset-top)) + 84px);
    }

    .ward-title {
        font-size: var(--text-4xl);
        padding: 0 var(--spacing-md);
    }

    .circle-buttons-container,
    .bubble-notifications-overlay {
        display: grid;
        grid-template-columns: repeat(2, var(--circle-size));
        justify-content: center;
        align-content: center;
        gap: var(--circle-gap) calc(var(--circle-gap) * 1.4);
        padding: var(--spacing-sm);
        padding-top: 110px;             /* room for the corner buttons and title */
    }

    .circle-button {
        gap: var(--spacing-xs);
        width: var(--circle-size);
    }

    .circle-button-inner {
        width: var(--circle-size);
        height: var(--circle-size);
    }

    .button-icon {
        width: 38%;
        height: 38%;
    }

    .button-label {
        min-height: var(--label-h);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        font-size: clamp(11px, 3.4vw, 14px);
        letter-spacing: 0.08em;
        line-height: 1.3;
        text-align: center;
    }

    .bubble-notification {
        width: var(--circle-size);
        height: calc(var(--circle-size) + var(--label-h));
    }

    .notification-text {
        padding: 5px 10px;
        font-size: var(--text-xs);
    }
}

/* Phone turned sideways: one row of four */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .home-content {
        --circle-size: min(19vw, 46vh);
        --circle-gap: clamp(12px, 3vw, 28px);
        --label-h: 2.6em;
        padding: var(--spacing-sm);
    }

    .home-header {
        top: var(--spacing-sm);
    }

    .ward-title {
        font-size: var(--text-3xl);
    }

    .circle-buttons-container,
    .bubble-notifications-overlay {
        display: grid;
        grid-template-columns: repeat(4, var(--circle-size));
        justify-content: center;
        align-content: center;
        gap: var(--circle-gap);
        padding: var(--spacing-sm);
        padding-top: var(--spacing-2xl);
    }

    .circle-button {
        gap: var(--spacing-xs);
        width: var(--circle-size);
    }

    .circle-button-inner {
        width: var(--circle-size);
        height: var(--circle-size);
    }

    .button-icon {
        width: 38%;
        height: 38%;
    }

    .button-label {
        min-height: var(--label-h);
        font-size: clamp(10px, 2vw, 13px);
        letter-spacing: 0.08em;
        line-height: 1.3;
        text-align: center;
    }

    .bubble-notification {
        width: var(--circle-size);
        height: calc(var(--circle-size) + var(--label-h));
    }
}


/* ================================================================
   SECTION 5: TEMPLE 365
   ================================================================
   Kiosk: text sidebar on the left, Temple 365 app on the right.
   Phone: stacked — the Temple 365 app first (progress squares, then
   the selfie mosaic), then the intro text and the video; the whole
   screen scrolls.
   ================================================================ */

@media screen and (max-width: 600px), screen and (max-height: 500px) and (orientation: landscape) {
    #temple365-screen .temple365-fullscreen {
        padding: var(--spacing-md) var(--spacing-sm);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }

    .temple365-layout {
        flex-direction: column;
        flex: none;
        gap: var(--spacing-lg);
    }

    .temple365-sidebar {
        width: 100%;
        min-width: 0;
        max-width: none;
        padding: 0 var(--spacing-sm);
    }

    /* The tracker comes first on a phone: progress squares, then the
       selfie mosaic (both inside the Temple 365 app), then the intro
       text and video below. Sized to fill the screen above the sticky
       Back button so nothing overlaps it at the top of the page. */
    .temple365-iframe-wrapper {
        order: -1;
        flex: none;
        width: 100%;
        height: calc(100dvh - 130px);
        min-height: 360px;
        border-radius: var(--radius-lg);
    }

    /* The President Nelson video card floats in the kiosk's bottom-left
       corner; on a phone it sits in the page under the intro text */
    .temple365-video-card {
        position: static;
        width: 100%;
        z-index: auto;                  /* don't sit over the sticky Back button */
    }

    /* Playing: centred over the page instead of the kiosk's 700px spot */
    .temple365-video-card.expanded {
        position: fixed;
        left: var(--spacing-sm);
        right: var(--spacing-sm);
        top: 50%;
        bottom: auto;
        width: auto;
        transform: translateY(-50%);
    }

    /* The floating demo button is placed for the kiosk layout; on a
       phone the ⓘ button beside the title opens the same demo */
    .mosaic-cta-btn {
        display: none !important;
    }

    #temple365-screen .back-button {
        margin: var(--spacing-sm) auto 0;
    }
}


/* ================================================================
   SECTION 6: TAKE A SELFIE
   ================================================================
   Selfies are taken at the kiosk or in the Temple 365 app, not on the
   website. On a phone this screen explains the mosaic and says where
   to add a selfie; the camera, its buttons and the "scan with your
   phone" QR are hidden (app.js doesn't start the camera on phones).

   The kiosk version is a fixed 100vh card that can't scroll. On iPhone
   Safari 100vh reaches behind the browser toolbars, which put the Back
   button out of reach — the screen was inescapable. Here it scrolls
   and the Back button stays pinned to the visible bottom.
   ================================================================ */

@media screen and (max-width: 600px), screen and (max-height: 500px) and (orientation: landscape) {
    .selfie-view-container {
        height: 100%;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        align-items: flex-start;
    }

    .selfie-card {
        max-height: none;
        overflow: visible;
        margin-bottom: 0;
    }

    .selfie-card > .back-button {
        margin-top: var(--spacing-md);
    }

    .selfie-card-wide {
        height: auto;
    }

    .selfie-three-column-layout {
        overflow: visible;
        flex: none;
    }

    .selfie-col-instructions {
        min-width: 0;
    }

    .mosaic-video-container {
        width: min(70vw, 280px);
        height: min(70vw, 280px);
    }

    .selfie-col-camera,
    .selfie-instructions-large {
        display: none;
    }

    .selfie-phone-note {
        display: block;
        margin-top: var(--spacing-md);
        padding: var(--spacing-md);
        border-radius: var(--radius-lg);
        background: var(--color-bg-cream);
        border: 1px solid rgba(201, 162, 39, 0.35);
        font-size: var(--text-base);
        line-height: 1.5;
        text-align: center;
        color: var(--color-text-primary);
    }
}


/* ================================================================
   SECTION 7: WARD BULLETIN
   ================================================================ */

@media screen and (max-width: 600px) {
    .url-text {
        font-size: var(--text-lg);
        overflow-wrap: anywhere;
    }
}


/* ================================================================
   SECTION 8: MISSIONARY DETAIL
   ================================================================
   The name badge, info and buttons were sized for the kiosk (42px
   badge name, 280px-wide buttons in a 900px row). On a phone: a
   smaller badge, full-width buttons, and the page scrolls with the
   Back button stuck to the bottom.
   ================================================================ */

@media screen and (max-width: 600px), screen and (max-height: 500px) and (orientation: landscape) {
    .missionary-detail-card {
        width: 100%;
        max-width: none;
        display: flex;
        flex-direction: column;
    }

    /* missionaryDetail.js sets a kiosk-sized scroll box inline; on a
       phone the whole screen scrolls instead */
    #missionary-detail-content {
        max-height: none !important;
        overflow: visible !important;
        padding-bottom: var(--spacing-md) !important;
    }

    .missionary-detail {
        width: 100% !important;
    }

    .missionary-name-badge {
        padding: 16px 18px;
        margin-bottom: 16px;
    }

    .badge-name {
        font-size: clamp(20px, 6.4vw, 28px);
        letter-spacing: 0.05em;
        margin-bottom: 10px;
        overflow-wrap: anywhere;
    }

    .badge-church-small {
        font-size: 10px;
    }

    .badge-church-large {
        font-size: 18px;
    }

    .missionary-detail-body {
        gap: var(--spacing-md);
    }

    .missionary-info-section {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }

    .info-value {
        font-size: var(--text-lg);
        line-height: 1.3;
    }

    /* Action buttons: full width, one per row */
    .missionary-detail-body .btn-view-gallery {
        min-width: 0 !important;
        flex: 1 1 100% !important;
        justify-content: center;
        padding: var(--spacing-sm) var(--spacing-lg);
        min-height: 52px;
        font-size: var(--text-base);
    }

    .missionary-detail-body > div[style] {
        gap: 10px !important;
        margin: 8px auto !important;
    }

    .missionary-features-section {
        padding: var(--spacing-md);
    }
}


/* ================================================================
   SECTION 9: WARD AUXILIARIES ("Coming Soon") AND AUXILIARY PAGES
   ================================================================ */

@media screen and (max-width: 600px) {
    .auxiliary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-sm);
        padding: 0;
        margin: var(--spacing-md) 0;
    }

    .auxiliary-card {
        min-height: 150px;
        margin-bottom: 0;
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-sm);
    }

    .feature-item {
        padding: var(--spacing-sm);
    }
}


/* ================================================================
   SECTION 10: POP-UPS
   ================================================================ */

@media screen and (max-width: 600px), screen and (max-height: 500px) and (orientation: landscape) {
    /* Missionary photo viewer: the tablet rule squeezes "Close" into a
       40px circle; give it room for the word */
    .gallery-close-btn {
        width: auto;
        height: auto;
        padding: 10px 28px;
        font-size: var(--text-base);
        bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
    }

    /* Mosaic demo pop-up: taller than a phone, so let it scroll */
    .mosaic-info-modal {
        max-width: calc(100vw - var(--spacing-md));
        max-height: 88dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: var(--spacing-md);
    }

    .mosaic-info-content {
        flex-direction: column;
        gap: var(--spacing-md);
        height: auto;
    }

    .mosaic-info-video,
    .mosaic-info-video video {
        width: 100%;
        max-width: 100%;
    }
}


/* ================================================================
   SECTION 11: MISSIONARY CAROUSELS ON A PHONE TURNED SIDEWAYS
   ================================================================
   Only ~390px of height: let the ring shrink to fit between the
   title and the Back button instead of keeping its 240px minimum.
   ================================================================ */

@media screen and (max-height: 500px) and (orientation: landscape) {
    .missionaries-card--carousel .view-title {
        font-size: var(--text-2xl);
        margin-bottom: 0;
    }

    .missionaries-card--carousel .mv-carousel__viewport {
        min-height: 0;
    }

    .missionaries-card--carousel .mv-carousel__controls {
        padding-top: 2px;
    }

    .missionaries-card--carousel .back-button {
        min-height: 44px;
        margin-top: 4px;
        padding: 6px var(--spacing-xl);
    }
}