/* =====================================================================
   Blue Oasis Academy / dashboards / community — mobile-first layer.
   Loaded after bo-ui.css by lms/includes/ui-head.php. Phones get compact
   type and spacing (Tailwind utilities included), swipeable card rows and
   no sideways scrolling. Desktop is untouched.
   ===================================================================== */
@media (max-width: 767px) {
    html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
    body { font-size: 14px; }
    img, video, iframe, canvas { max-width: 100%; }
    input, select, textarea { font-size: 16px !important; } /* no iOS zoom */

    /* Layout shell */
    /* keep the top offset for the fixed top bar; only tighten the sides and bottom */
    .bo-main { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 28px !important; }
    .bo-main > .py-6, .bo-main > .p-6, .bo-main > div > .py-6, .bo-main > .px-4, .bo-main > div > .px-4 { padding-top: 16px !important; }
    .bo-main .max-w-7xl, .bo-main .container { padding-left: 14px !important; padding-right: 14px !important; }
    .bo-topbar { padding-left: 10px !important; padding-right: 10px !important; min-height: 56px; }
    .bo-page-head { margin-bottom: 14px !important; gap: 10px !important; }
    .bo-page-head h1, .bo-main h1 { font-size: 1.45rem !important; line-height: 1.2 !important; }
    .bo-main h2 { font-size: 1.2rem !important; line-height: 1.25 !important; }
    .bo-main h3 { font-size: 1.02rem !important; }
    .bo-section-head { margin: 18px 0 10px !important; }

    /* Cards, tiles, stats */
    .bo-card, .bo-tile, .bo-hero-card, .bo-plan-card, .bo-auth-card, .bo-empty { padding: 14px !important; border-radius: 14px !important; }
    .bo-stat { padding: 12px !important; }
    .bo-stat [class*="value"], .bo-stat strong, .bo-stat .num { font-size: 1.35rem !important; }
    .bo-btn { padding: 0.6rem 1rem !important; font-size: 0.82rem !important; }
    .bo-tabs, .bo-utabs { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
    .bo-tabs::-webkit-scrollbar, .bo-utabs::-webkit-scrollbar { display: none; }
    .bo-tab { white-space: nowrap; }

    /* Tailwind spacing and type, scaled for phones */
    .p-10, .p-12 { padding: 1.25rem !important; }
    .p-8 { padding: 1rem !important; }
    .p-6 { padding: 0.9rem !important; }
    .px-8, .px-10, .px-12 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .py-16, .py-20, .py-24, .py-32 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
    .py-12 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
    .py-10, .py-8 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
    .mb-12, .mb-16 { margin-bottom: 1.5rem !important; }
    .mb-8, .mb-10 { margin-bottom: 1.1rem !important; }
    .mt-12, .mt-16 { margin-top: 1.5rem !important; }
    .mt-8, .mt-10 { margin-top: 1.1rem !important; }
    .gap-8, .gap-10, .gap-12 { gap: 0.9rem !important; }
    .gap-6 { gap: 0.75rem !important; }
    .text-6xl, .text-7xl { font-size: 2rem !important; line-height: 1.12 !important; }
    .text-5xl { font-size: 1.75rem !important; line-height: 1.15 !important; }
    .text-4xl { font-size: 1.5rem !important; line-height: 1.2 !important; }
    .text-3xl { font-size: 1.3rem !important; line-height: 1.25 !important; }
    .text-2xl { font-size: 1.12rem !important; }
    .text-xl { font-size: 1.02rem !important; }
    .text-lg { font-size: 0.95rem !important; }
    .rounded-3xl { border-radius: 1.1rem !important; }

    /* Course / card grids: swipeable rows instead of one long column */
    .bo-main .grid.bo-swipe, .bo-main [class*="grid-cols"].md\:grid-cols-3:has(> :nth-child(3)),
    .bo-main [class*="grid-cols"].lg\:grid-cols-3:has(> :nth-child(3)), .bo-main [class*="grid-cols"].lg\:grid-cols-4:has(> :nth-child(3)) {
        display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory;
        margin-left: -12px; margin-right: -12px; padding: 2px 12px 10px; scrollbar-width: none;
    }
    .bo-main [class*="grid-cols"].md\:grid-cols-3:has(> :nth-child(3)) > *,
    .bo-main [class*="grid-cols"].lg\:grid-cols-3:has(> :nth-child(3)) > *,
    .bo-main [class*="grid-cols"].lg\:grid-cols-4:has(> :nth-child(3)) > * { flex: 0 0 80%; max-width: 80%; scroll-snap-align: start; }

    /* Stat rows: two per row */
    .bo-main .grid.grid-cols-1.md\:grid-cols-4, .bo-main .grid.grid-cols-1.lg\:grid-cols-4:not(:has(img)) { display: grid !important; grid-template-columns: 1fr 1fr !important; overflow: visible; margin: 0; padding: 0; }
    .bo-main .grid.grid-cols-1.md\:grid-cols-4 > *, .bo-main .grid.grid-cols-1.lg\:grid-cols-4:not(:has(img)) > * { max-width: none; }

    /* Stat cards: three in one row, stacked icon + number */
    .bo-main .grid.grid-cols-1.sm\:grid-cols-3:has(> .bo-stat), .bo-main .grid:has(> .bo-stat:nth-child(3)) {
        display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important;
    }
    .bo-main .bo-stat { flex-direction: column; align-items: flex-start !important; gap: 6px !important; padding: 10px !important; max-width: none !important; }
    .bo-main .bo-stat > i, .bo-main .bo-stat::after { display: none; }
    .bo-main .bo-stat .bo-tile { width: 30px !important; height: 30px !important; font-size: 15px !important; border-radius: 9px !important; }
    .bo-main .bo-stat .bo-stat-label { font-size: 10.5px !important; line-height: 1.25; }
    .bo-main .bo-stat .bo-stat-value { font-size: 1.15rem !important; }

    /* Section heads: title and link on one line */
    .bo-section-head { display: flex !important; align-items: center !important; justify-content: space-between; gap: 10px; flex-wrap: nowrap !important; }
    .bo-section-head h2 { font-size: 1.02rem !important; white-space: nowrap; display: flex; align-items: center; gap: 6px; margin: 0 !important; }
    .bo-section-head .bo-link { font-size: .78rem !important; white-space: nowrap; flex-shrink: 0; }

    /* Lesson reading text */
    .bo-lesson, .prose, .lesson-content { font-size: 15px !important; }
    .prose p, .prose li, .lesson-content p, .lesson-content li { font-size: 15px !important; line-height: 1.65 !important; }

    /* Tables scroll inside their card instead of widening the page */
    .bo-main table { display: block; overflow-x: auto; white-space: nowrap; font-size: 0.82rem; }

    /* Chat teaser bubble stays out of the way on phones */
    .boai-teaser { display: none !important; }
}