/**
 * Step 3 Batch 6 — Mobile navigation & user journeys.
 * Recompose layouts at canonical breakpoints (768 / 430 / 390 / 360 / 320).
 * Requires design-system tokens (--fd-bp-*, --fd-touch-min).
 */

/* ── Global overflow guard ── */
.fd-page,
.fi-main,
.fi-home-scroll {
    overflow-x: clip;
    max-width: 100%;
}

.fi-main {
    min-width: 0;
}

/* ── Touch targets on shared controls ── */
.fd-btn,
.fi-btn,
.fi-input,
select.fi-input,
.fi-dd-toolbar__filter select,
.fi-reg-form .fd-btn {
    min-height: var(--fd-touch-min, 44px);
}

.fi-dd-segment__btn,
.fi-dd-mode-tabs a {
    min-height: var(--fd-touch-min, 44px);
    display: inline-flex;
    align-items: center;
}

/* ── Fixed chrome clearance (header + FAB + drawer) ── */
@media (max-width: 1023px) {
    .fi-dd-page,
    .fi-dd-detail.fd-page,
    .fi-dd-community {
        padding-bottom: calc(var(--fd-touch-min, 44px) + var(--fd-space-6, 24px) + env(safe-area-inset-bottom, 0px));
    }

    .fi-dd-discussion-toggle,
    .fi-dd-detail-discussion-toggle {
        bottom: max(var(--fd-space-4, 16px), env(safe-area-inset-bottom, 0px));
    }
}

/* ── Homepage S01 Hero — copy-first stack; full-width CTAs on small screens ── */
@media (max-width: 767px) {
    .fi-hero__grid {
        gap: var(--fd-space-5, 20px);
    }

    .fi-hero__copy {
        order: 1;
        text-align: left;
    }

    .fi-hero__visual-wrap {
        order: 2;
    }

    .fi-hero__actions .fd-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── S02 Program status — single column cards ── */
@media (max-width: 767px) {
    .fi-program-status__grid {
        grid-template-columns: 1fr;
        gap: var(--fd-space-4, 16px);
    }

    .fi-program-status__module {
        padding: var(--fd-space-4, 16px);
    }
}

/* ── S03 Learning paths — vertical stack ── */
@media (max-width: 767px) {
    .fi-grow-paths__grid {
        grid-template-columns: 1fr;
    }

    .fi-grow-paths__tile {
        width: 100%;
    }
}

@media (max-width: 320px) {
    .fi-grow-paths__title {
        font-size: var(--fd-text-h3);
    }
}

/* ── S04 Data Dare feature — card + actions stack ── */
@media (max-width: 767px) {
    .fi-home-dd__layout {
        grid-template-columns: 1fr;
        gap: var(--fd-space-4, 16px);
    }

    .fi-home-dd__card {
        grid-template-columns: minmax(var(--fd-slot-card-thumb, 64px), 80px) minmax(0, 1fr);
    }
}

@media (max-width: 430px) {
    .fi-home-dd__card {
        grid-template-columns: 1fr;
    }

    .fi-home-dd__card-media {
        width: min(100%, var(--fd-slot-card-thumb, 88px));
        max-width: 120px;
    }
}

/* ── S05 Learning in Action — editorial single column ── */
@media (max-width: 639px) {
    .fi-lia__grid,
    .fi-lia__grid--editorial {
        grid-template-columns: 1fr;
    }

    .fi-lia__block {
        padding: var(--fd-space-4, 16px);
    }
}

/* ── S06 Finance + Tech — grid via --fd-grid-fintech (Batch 6) ── */
/* ── S07 Community — stack copy + visual; 2-col signals preserved @390/320 ── */
@media (max-width: 767px) {
    .fi-home-community__layout {
        grid-template-columns: 1fr;
        gap: var(--fd-space-5, 20px);
    }

    .fi-home-community__cta .fd-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── S08 Corporate — stack; service chips + full-width CTA ── */
@media (max-width: 767px) {
    .fi-home-corp__layout {
        grid-template-columns: 1fr;
        gap: var(--fd-space-5, 20px);
        align-items: start;
    }

    .fi-home-corp__cta,
    .fi-home-corp__cta.fd-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── S09 Final CTA — copy-first stack; slot size from DS tokens (Batch 6/7) ── */
@media (max-width: 767px) {
    .fi-final-cta__layout {
        grid-template-columns: 1fr;
        text-align: left;
        gap: var(--fd-space-4, 16px);
    }
}

@media (max-width: 320px) {
    .fi-final-cta__title {
        font-size: var(--fd-text-h2);
    }
}

/* ── Data Dare DD-UX-11 discovery mobile (dataset-first) ── */
@media (max-width: 960px) {
    .fi-dd-layout {
        grid-template-columns: 1fr;
    }

    .fi-dd-discussion:not(.is-open) {
        display: none;
    }

    .fi-dd-results-head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--fd-space-2, 8px);
    }

    .fi-dd-pathways__grid {
        grid-template-columns: 1fr;
    }

    .fi-dd-pathway {
        min-height: var(--fd-touch-min, 44px);
    }
}

@media (max-width: 767px) {
    .fi-dd-dataset-card__explore-hint {
        display: none;
    }
}

@media (max-width: 390px) {
    .fi-dd-intro__title {
        font-size: var(--fd-text-h2);
    }
}

@media (max-width: 320px) {
    .fi-dd-dataset-card__title {
        font-size: 1rem;
    }
}

/* ── Data Dare DD-UX-12 detail + drawer (dataset primary) ── */
.fi-dd-question-filters .fd-chip,
.fi-dd-board-filters .fd-chip {
    min-width: var(--fd-touch-min, 44px);
    justify-content: center;
}

@media (max-width: 960px) {
    .fi-dd-detail-header {
        grid-template-columns: 1fr;
    }

    .fi-dd-detail-header__media {
        width: 100%;
        max-width: min(280px, 100%);
        margin-inline: auto;
    }

    .fi-dd-detail-header__thumb {
        max-width: 100%;
    }
}

/* ── Registration journey ── */
@media (max-width: 767px) {
    .fi-reg-split,
    .fi-reg-featured {
        grid-template-columns: 1fr;
    }

    .fi-reg-featured__art {
        order: -1;
    }

    .fi-reg-cta-row {
        flex-direction: column;
    }

    .fi-reg-cta-row .fd-btn,
    .fi-reg-cta-row .fi-btn {
        width: 100%;
        justify-content: center;
    }

    .fi-reg-form .fi-input,
    .fi-reg-form select {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .fi-reg-grid {
        grid-template-columns: 1fr;
    }

    .fi-reg-banner {
        width: 100%;
        height: auto;
    }
}

/* ── Courses catalog ── */
@media (max-width: 900px) {
    .fi-courses-layout {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 34%) minmax(0, 1fr);
    }

    .fi-courses-list-panel {
        border-right: 0;
        border-bottom: 1px solid var(--fd-soft-border);
    }

    .fi-courses-list {
        max-height: none;
        overflow: visible;
    }

    .fi-courses-detail-panel {
        border-top: 0;
        padding-top: 0;
    }

    .fi-courses-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .fi-courses-search,
    .fi-courses-filter {
        width: 100%;
        flex: 1 1 auto;
    }
}

/* ── Learning ecosystem (recordings, resources, LMS) ── */
@media (max-width: 640px) {
    .fi-learn-resource-row {
        grid-template-columns: 1fr;
        gap: var(--fd-space-3, 12px);
    }

    .fi-learn-resource-row .fd-btn {
        width: 100%;
        justify-content: center;
    }

    .fi-cert-verify-form {
        flex-direction: column;
    }

    .fi-cert-verify-form .fi-input {
        min-width: 0;
        width: 100%;
    }
}

/* ── Auth & account forms ── */
@media (max-width: 639px) {
    .fi-auth-page {
        padding-inline: 0;
    }

    .fi-auth-card {
        width: 100%;
    }

    .fi-auth-gate-actions .fd-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .fi-account-form .fd-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 320px) {
    .fi-auth-card .fi-heading-lg {
        font-size: var(--fd-text-h3);
    }
}

/* ── Data Dare community — discussion + activity recompose ── */
@media (max-width: 960px) {
    .fi-dd-board-aside .fi-dd-compose {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 767px) {
    .fi-dd-board-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .fi-dd-board-hero__actions .fd-btn,
    .fi-dd-board-hero__actions .fi-btn {
        width: 100%;
        justify-content: center;
    }

    .fi-dd-activity-item__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .fi-learn-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .fi-learn-hero__actions .fd-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 430px) {
    .fi-dd-reply--nested {
        margin-left: var(--fd-space-3, 12px);
        padding-left: var(--fd-space-3, 12px);
    }
}

/* ── Admin operational views ── */
@media (max-width: 1023px) {
    .fi-admin-shell {
        flex-direction: column;
    }

    .fi-admin-sidebar {
        width: 100%;
        max-width: none;
    }

    .fd-admin-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fi-admin-main .fi-btn {
        min-height: var(--fd-touch-min, 44px);
    }
}

@media (max-width: 767px) {
    .fd-admin-nav {
        flex-wrap: wrap;
    }
}

/* ── Sticker / ribbon rails ── */
@media (max-width: 767px) {
    .fi-sticker-rail-wrap,
    .fi-ribbon-rail {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-topbar__nav,
    .fi-dd-discussion,
    .fi-dd-detail-discussion-drawer.fi-dd-discussion {
        transition: none;
    }
}