/**
 * foundation-mobile.css — mobile (<640px) overrides for all foundation pages.
 * Loaded after inline <style> trong: foundation.php, foundation-member.php,
 * study.php, grammar.php, phonics.php.
 *
 * Rules:
 *  - Touch target ≥ 44×44px
 *  - Body/input font ≥ 14px (≥16px input để chặn iOS auto-zoom)
 *  - Bottom-sheet pattern cho modal
 *  - No horizontal overflow ở 320px viewport
 *  - safe-area-inset-bottom cho sticky elements
 *  - Brand tokens only — no hardcoded hex
 */

/* ============================================================================
   GLOBAL — input zoom guard
   ============================================================================ */
@media (max-width: 640px) {
    .fd-cont input[type], .fd-cont select, .fd-cont textarea,
    .fm__wrap input[type], .fm__wrap select, .fm__wrap textarea,
    .st input[type], .st select, .st textarea,
    .gr input[type], .gr select, .gr textarea,
    .phon input[type], .phon select, .phon textarea {
        font-size: 16px !important;
    }
}

/* ============================================================================
   /foundation — Landing (foundation.php + foundation.css)
   ============================================================================ */
@media (max-width: 540px) {
    .fd-cont { padding: 0 16px }
    .fd-hero { padding: 28px 0 24px }
    .fd-h1 { font-size: clamp(28px, 7vw, 36px) !important; line-height: 1.15 }
    .fd-lead { font-size: 15px }
    .fd-cta-row { flex-direction: column; gap: 10px }
    .fd-cta-row > .fd-btn, .fd-cta-row > a {
        width: 100%; justify-content: center; min-height: 48px;
    }
    .fd-preview-banner__inner,
    .fd-preview-banner > div {
        flex-direction: column !important; gap: 10px !important; align-items: stretch !important;
    }
    .fd-preview-banner .btn, .fd-preview-banner a {
        width: 100%; justify-content: center; min-height: 44px;
    }
}

@media (max-width: 480px) {
    .fd-stats__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px }
    .fd-pillars,
    .fd-rmf__grid,
    .fd-pricing,
    .fd-pcards,
    .fd-quotes { grid-template-columns: 1fr !important; gap: 12px }

    /* CEFR ladder — stack rungs vertical (rail ngang vốn overflow) */
    .fd-ladder__rail { flex-direction: column !important; gap: 6px }
    .fd-rung {
        width: 100%; min-height: 52px;
        justify-content: flex-start; padding: 10px 14px;
    }
    .fd-panel__metrics { grid-template-columns: repeat(3, 1fr); gap: 8px }

    /* Sticky bottom CTA cho non-member */
    .fd-sticky-cta {
        position: fixed; left: 12px; right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 50;
        padding: 14px 18px;
        background: var(--color-primary);
        color: #fff;
        border-radius: 12px;
        text-align: center;
        font-weight: 700;
        font-size: 14px;
        text-decoration: none;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
        display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .fd-sticky-cta:hover { background: var(--color-primary-hover) }
}

/* ============================================================================
   /foundation — Member hub (foundation-member.php)
   ============================================================================ */
@media (max-width: 900px) {
    .fm__body { grid-template-columns: 1fr !important }
    .fm__side {
        display: flex; flex-direction: column; gap: 12px;
        margin-top: 8px;
    }
}

@media (max-width: 540px) {
    .fm__wrap { padding: 12px }
    .fm__header-greeting { font-size: 20px }
    .fm__rm-hero { padding: 16px }
    .fm__rm-hero__title { font-size: 18px }
    .fm__rm-hero__cta {
        flex-direction: column !important; gap: 8px !important;
    }
    .fm__rm-hero__cta > .btn,
    .fm__rm-hero__cta > a {
        width: 100%; justify-content: center; min-height: 46px;
    }

    .fm__plan { padding: 14px }
    .fm__plan__title { font-size: 16px }
    .fm__plan__cta {
        flex-direction: column !important; gap: 8px !important;
    }
    .fm__plan__btn, .fm__plan__cta > a {
        width: 100%; justify-content: center; min-height: 46px;
    }

    .fm__preview {
        flex-direction: column; align-items: stretch; gap: 10px;
    }
    .fm__preview .btn, .fm__preview a {
        width: 100%; justify-content: center; min-height: 44px;
    }
}

@media (max-width: 480px) {
    .fm__paths { grid-template-columns: 1fr !important; gap: 10px }
    .fm__path {
        padding: 14px;
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: 12px;
        align-items: center;
    }
    .fm__path__icon { width: 44px; height: 44px; font-size: 18px; margin: 0 }
    .fm__path__title { font-size: 14.5px; grid-column: 2 }
    .fm__path__desc { grid-column: 1 / -1; font-size: 12.5px; margin: 4px 0 0 }
    .fm__path__cta { grid-column: 1 / -1; font-size: 12.5px }

    .fm__stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px }
    .fm__stat-num { font-size: 22px }
    .fm__stat-lbl { font-size: 11px }

    /* Heatmap shrink — cell tự co theo width */
    .fm__heatmap-grid { gap: 3px }
    .fm__hm-cell { aspect-ratio: 1; min-width: 0 }

    /* Notebook tabs ≥44 */
    .fm__nb__tabs { gap: 4px }
    .fm__nb__tab {
        min-height: 44px; padding: 8px 10px;
        font-size: 12.5px; flex: 1;
        justify-content: center; align-items: center;
    }
    .fm__nb__tab .fm__nb__count { font-size: 11px }

    /* Roadmap lesson item */
    .fm__rm-item { min-height: 56px; padding: 12px }

    /* Forecast bars compact */
    .fm__forecast__bars { gap: 4px }
    .fm__forecast__bar-day { font-size: 9.5px }
}

/* ============================================================================
   /foundation/study — Focus session (study.php inline styles)
   ============================================================================ */
@media (max-width: 540px) {
    .st { padding: 12px 12px 32px }

    /* Header */
    .st-head { padding: 8px 10px; gap: 8px }
    .st-back {
        width: 44px !important; height: 44px !important;
        font-size: 14px !important;
    }
    .st-head__title { font-size: 14px }
    .st-head__sub { font-size: 11.5px }

    /* Progress — sticky top */
    .st-progress {
        position: sticky; top: 0; z-index: 10;
        height: 5px; margin: 0 -12px 12px; border-radius: 0;
    }

    /* Picker stage */
    .st-picker { padding: 16px }
    .st-summary { padding: 12px; gap: 12px }
    .st-summary__num { font-size: 24px }
    .st-picker__h { font-size: 16px }

    .st-modes { grid-template-columns: 1fr !important; gap: 8px }
    .st-mode {
        padding: 14px; min-height: 76px;
        flex-direction: row !important; align-items: center; gap: 12px;
    }
    .st-mode__ic {
        font-size: 20px; margin: 0 !important;
        flex-shrink: 0; width: 36px; text-align: center;
    }
    .st-mode__name { font-size: 14.5px }
    .st-mode__desc { font-size: 12px }
    .st-mode__hint { display: none }

    /* Mode switch in-session — sticky */
    .st-mode-switch {
        position: sticky; top: 5px; z-index: 9;
        padding: 4px;
        flex-wrap: nowrap; overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--color-surface, #fff);
    }
    .st-ms {
        min-height: 44px !important; min-width: 64px;
        font-size: 12.5px !important; padding: 0 12px !important;
        height: auto !important;
        flex-shrink: 0;
    }
    .st-ms i { font-size: 12px }

    /* Stage */
    .st-stage { padding: 18px 14px; min-height: 280px }

    /* Flashcard — touch surface có cursor:grab cho swipe */
    .fc-card {
        padding: 22px 16px; min-height: 200px;
        touch-action: pan-y; /* cho phép scroll dọc + horizontal swipe captured by JS */
        user-select: none;
    }
    .fc-card.is-swiping { transition: transform .12s ease-out }
    .fc-card.swipe-left { transform: translateX(-30px) rotate(-3deg); opacity: .85 }
    .fc-card.swipe-right { transform: translateX(30px) rotate(3deg); opacity: .85 }

    .fc-word {
        font-size: clamp(26px, 8vw, 34px) !important;
        word-break: break-word; line-height: 1.2;
    }
    .fc-meaning { font-size: 18px !important }
    .fc-tts {
        width: 48px !important; height: 48px !important;
        font-size: 15px !important;
    }
    .fc-ipa { font-size: 14px }

    /* Quality buttons — 2x2 mobile */
    .fc-quality {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .fc-q {
        padding: 14px 10px !important;
        min-height: 56px !important;
        justify-content: center;
    }
    .fc-q__lbl { font-size: 14px }
    .fc-q__sub { font-size: 11px }
    .fc-q__key { display: none }

    /* Swipe hint */
    .fc-swipe-hint {
        text-align: center; margin-top: 8px;
        font-size: 11.5px; color: var(--color-muted, #64748b);
    }
    .fc-swipe-hint kbd {
        font-family: inherit; font-size: 11px;
        background: var(--color-soft, #f1f5f9);
        padding: 2px 7px; border-radius: 4px;
    }

    /* Spelling */
    .sp-card { padding: 22px 14px }
    .sp-meaning { font-size: 24px }
    .sp-row { flex-direction: column !important; gap: 10px }
    .sp-input {
        width: 100% !important; max-width: 100% !important;
        height: 52px !important;
        font-size: 18px !important;
    }
    .sp-check {
        width: 100%; height: 50px;
        justify-content: center; min-height: 50px !important;
    }
    .sp-pill {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    .sp-actions { gap: 8px }

    /* Quiz / Listening */
    .qz-main { font-size: 20px }
    .qz-tts-big {
        width: 56px !important; height: 56px !important;
        font-size: 22px !important;
    }
    .qz-opt {
        padding: 14px 14px !important;
        min-height: 50px !important;
        font-size: 14px !important;
    }

    /* All action buttons */
    .st-btn {
        min-height: 44px !important; height: auto !important;
        padding: 10px 16px !important;
    }

    /* Done overlay */
    .st-done { padding: 12px }
    .st-done__inner { padding: 22px 18px }
    .st-done__actions {
        flex-direction: column-reverse !important;
        align-items: stretch; gap: 8px;
    }
    .st-done__actions .st-btn, .st-done__actions a {
        width: 100%; justify-content: center;
    }
}

/* ============================================================================
   /foundation/grammar (grammar.php inline)
   ============================================================================ */
@media (max-width: 640px) {
    .gr-search {
        font-size: 16px !important;
        padding: 11px 14px 11px 36px !important;
        min-height: 44px;
    }
    .gr-search-wrap i { left: 13px; font-size: 13px }

    .gr-level-tabs {
        gap: 6px; flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px 14px;
        padding: 0 16px 4px;
        scroll-snap-type: x mandatory;
    }
    .gr-level-tab {
        flex-shrink: 0; scroll-snap-align: start;
        min-height: 36px !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        display: inline-flex; align-items: center;
    }

    /* Sticky search */
    .gr-search-wrap {
        position: sticky; top: 0; z-index: 8;
        background: var(--color-bg, #f8fafc);
        padding-top: 8px; margin-top: -8px;
    }
}

@media (max-width: 540px) {
    .gr-stats-bar { padding: 10px 12px; gap: 8px }
    .gr-prog-wrap { display: none }

    .gr-rm-banner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px;
    }
    .gr-rm-banner .btn, .gr-rm-banner a {
        width: 100%; justify-content: center; min-height: 42px;
    }

    .gr-section-hd { padding: 8px 12px }
    .gr-section-bar { display: none }

    .gr-card {
        padding: 12px !important; gap: 10px;
        min-height: 60px;
    }
    .gr-card-title { font-size: 14px; white-space: normal }
    .gr-bm {
        width: 40px !important; height: 40px !important;
        font-size: 13px !important;
    }
    .gr-status { width: 28px; height: 28px }
    .gr-card.is-in-roadmap::after {
        position: static !important;
        display: inline-block;
        margin-left: 6px; font-size: 9px;
    }
}

/* ============================================================================
   /foundation/phonics (phonics.php inline + Bootstrap modal override)
   ============================================================================ */
@media (max-width: 540px) {
    .phon-cat-filter { gap: 6px; flex-wrap: wrap }
    .phon-filter-pill {
        min-height: 44px !important;
        padding: 11px 16px !important;
        font-size: 13px !important;
        display: inline-flex; align-items: center;
    }

    .phon-grid {
        gap: 10px;
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .phon-card { padding: 16px 10px }
    .phon-symbol { font-size: clamp(34px, 9vw, 42px) !important }
    .phon-cat-tag { font-size: 10px !important; padding: 3px 9px }
    .phon-words { font-size: 12px }

    /* Bootstrap modal → bottom-sheet */
    #phonModal .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        min-height: 100%;
        align-items: flex-end !important;
        display: flex !important;
    }
    #phonModal .modal-content {
        border-radius: 16px 16px 0 0 !important;
        max-height: 92vh; overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom);
        width: 100%;
    }
    #phonModal .modal-header { padding: 14px 16px }
    #phonModal .btn-close { padding: 12px !important; margin: -4px -4px -4px auto }
    #phonModal #modSymbol { font-size: 56px !important }
    #phonModal .audio-trigger {
        min-height: 48px;
        padding: 13px 22px !important;
        font-size: 15px !important;
    }
    #phonModal #modWords .audio-trigger,
    #phonModal #modWords button[onclick*="audio"] {
        min-width: 40px; min-height: 40px;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    #phonModal #modWords > div {
        display: flex; align-items: center;
        justify-content: space-between;
        gap: 8px; padding: 10px 0;
        border-bottom: 1px solid var(--color-line, #f1f5f9);
    }
}

/* Audio playing visual feedback (cả mobile + desktop OK) */
.audio-trigger.is-playing,
button.is-playing[data-audio] {
    animation: phonPulse .9s ease-in-out infinite;
}
@keyframes phonPulse {
    0%, 100% { transform: scale(1); opacity: 1 }
    50% { transform: scale(1.06); opacity: .85 }
}