/* ═══════════════════════════════════════════════════════════════════
   MYISSUES LEARN — MOBILE RESPONSIVE CSS
   ═════════════════════════════════════════════════════════════════
   Strategy: CSS-First Override (same approach as Charity mobile)
   
   This file is loaded AFTER the inline <style> blocks, so it can 
   override them. Uses !important where needed to beat specificity.
   
   Breakpoints:
   - 1024px: Tablets / small desktops
   - 768px:  Phones + small tablets (primary mobile breakpoint)
   - 480px:  Small phones (iPhone SE, etc.)
   
   Created: June 24, 2026
   Author: Antigravity AI — MyIssues Ecosystem
═══════════════════════════════════════════════════════════════════ */

/* iOS zoom prevention on form focus */
@supports (-webkit-touch-callout: none) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ── Desktop: Hide mobile-only injected elements ───────────── */
.mobile-nav-actions {
  display: none !important;
}
.mobile-menu-btn {
  display: none !important;
}
.mobile-nav-overlay {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   BREAKPOINT: 1024px — TABLET / SMALL DESKTOP
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  
  /* ── Layout ─────────────────────────────────────────── */
  .wrap {
    padding: 0 24px !important;
  }
  .section {
    padding: 64px 0 !important;
  }

  /* ── Header ─────────────────────────────────────────── */
  .header-main-inner {
    gap: 20px !important;
  }
  .main-nav a {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
  .nav-end .btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* ── Hero ────────────────────────────────────────────── */
  .hero {
    padding: 56px 0 0 !important;
  }
  .hero-inner {
    gap: 40px !important;
  }

  /* ── Mission grid ───────────────────────────────────── */
  .mission-grid {
    gap: 48px !important;
  }

  /* ── Subjects grid → 3 columns ──────────────────────── */
  .subjects-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* ── Stats grid ─────────────────────────────────────── */
  .mission-stat-panel {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Trust bar ──────────────────────────────────────── */
  .trust-items {
    gap: 16px !important;
  }
  .trust-badge {
    font-size: 11px !important;
  }

  /* ── Testimonial / Feature grids ────────────────────── */
  .features-grid,
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Community cards ────────────────────────────────── */
  .community-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Programs / Course grids ────────────────────────── */
  .programs-grid,
  .course-grid,
  .path-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Food / Service grids ───────────────────────────── */
  .food-grid,
  .service-grid,
  .benefit-grid,
  .impact-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Dashboard sidebar ──────────────────────────────── */
  .dash-layout {
    grid-template-columns: 240px 1fr !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   BREAKPOINT: 768px — MOBILE PRIMARY
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  
  /* ── Foundation overrides ───────────────────────────── */
  .wrap {
    padding: 0 16px !important;
  }
  .section {
    padding: 48px 0 !important;
  }
  h1 {
    font-size: 32px !important;
  }
  h2 {
    font-size: 24px !important;
  }
  h3 {
    font-size: 18px !important;
  }

  /* ── Announcement ticker ────────────────────────────── */
  .announce-bar {
    height: 28px !important;
  }
  .announce-item {
    font-size: 10px !important;
    padding: 0 20px !important;
  }
  .announce-live {
    display: none !important;
  }

  /* ── Utility bar — HIDE on mobile ───────────────────── */
  .header-util {
    display: none !important;
  }

  /* ── Main header — Mobile hamburger mode ─────────── */
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
  }
  .header-main-inner {
    height: 56px !important;
    gap: 12px !important;
  }

  /* Canada flag — smaller on mobile */
  .canada-flag svg {
    width: 24px !important;
    height: 16px !important;
  }

  /* Logo */
  .logo-icon {
    width: 32px !important;
    height: 32px !important;
  }
  .logo-text {
    font-size: 16px !important;
  }

  /* HIDE desktop nav + nav-end */
  .main-nav {
    display: none !important;
  }
  .nav-end {
    display: none !important;
  }

  /* SHOW hamburger button */
  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    margin-left: auto;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-menu-btn svg {
    width: 24px;
    height: 24px;
    stroke: var(--navy, #0D2340);
    stroke-width: 2;
    fill: none;
  }

  /* ── Mobile nav overlay ─────────────────────────────── */
  .mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .mobile-nav-overlay.active {
    display: block !important;
    opacity: 1;
  }

  .mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px, 85vw);
    height: 100vh;
    height: 100dvh;
    background: #fff;
    z-index: 1000;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  }
  .mobile-nav-drawer.active {
    right: 0;
  }

  .mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #E4E9F2;
  }
  .mobile-nav-header .logo-text {
    font-size: 16px;
    font-weight: 800;
  }
  .mobile-nav-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #E4E9F2;
    background: #F8F9FA;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-close svg {
    width: 18px;
    height: 18px;
    stroke: #374151;
    stroke-width: 2;
  }

  .mobile-nav-links {
    padding: 12px 0;
    list-style: none;
  }
  .mobile-nav-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    border-bottom: 1px solid #F1F4F8;
    transition: background 0.2s;
  }
  .mobile-nav-links a:hover,
  .mobile-nav-links a:active {
    background: #F1F4F8;
    color: #0D2340;
  }
  .mobile-nav-links a .nav-icon {
    font-size: 18px;
    width: 28px;
    text-align: center;
  }

  .mobile-nav-actions {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid #E4E9F2;
  }
  .mobile-nav-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 15px;
    border-radius: 10px;
  }

  /* ── Trust bar — Compact ────────────────────────────── */
  .live-trust-bar {
    height: auto !important;
    padding: 8px 0 !important;
  }
  .live-trust-inner {
    flex-direction: column !important;
    gap: 4px !important;
  }
  .trust-items {
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .trust-badge {
    font-size: 10px !important;
  }
  .trust-enroll-live {
    display: none !important;
  }

  /* ── Hero — Single column ───────────────────────────── */
  .hero {
    padding: 40px 0 0 !important;
  }
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .hero-content {
    padding: 0 0 16px !important;
    text-align: center !important;
  }
  .hero-badge {
    margin-bottom: 20px !important;
  }
  .hero-description {
    font-size: 15px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-actions {
    justify-content: center !important;
    margin-bottom: 36px !important;
  }
  .hero-metrics {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
  }
  .hero-metric {
    flex: 0 0 50% !important;
    padding: 12px 16px !important;
    margin-right: 0 !important;
    border-right: none !important;
    text-align: center !important;
  }
  .hero-metric-value {
    font-size: 22px !important;
  }

  /* Hero panel — hide on small screens or shrink */
  .hero-panel {
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .hero-panel-window {
    border-radius: 8px !important;
  }
  .panel-toolbar {
    padding: 6px 10px !important;
  }
  .panel-url {
    font-size: 9px !important;
  }

  /* ── Trust strip ────────────────────────────────────── */
  .trust-strip-inner {
    gap: 16px !important;
  }
  .trust-item {
    font-size: 11px !important;
  }

  /* ── Mission grid — Stack ───────────────────────────── */
  .mission-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .mission-stat-panel {
    grid-template-columns: 1fr 1fr !important;
  }
  .mission-stat {
    padding: 20px 16px !important;
  }
  .mission-stat-num {
    font-size: 28px !important;
  }

  /* ── Pathways grid — Single column ──────────────────── */
  .pathways-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .pathway-head {
    padding: 20px 20px 18px !important;
  }
  .pathway-body {
    padding: 18px 20px 22px !important;
  }

  /* ── Subjects grid — 2 columns ──────────────────────── */
  .subjects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .subject-card {
    padding: 16px 14px !important;
  }
  .subject-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }
  .subject-name {
    font-size: 13px !important;
  }
  .subject-desc {
    font-size: 11px !important;
  }

  /* ── How it works — Stack ────────────────────────────── */
  .how-grid {
    grid-template-columns: 1fr !important;
  }
  .how-step {
    padding: 24px 20px !important;
  }

  /* ── Language strip ─────────────────────────────────── */
  .lang-strip-label {
    display: none !important;
  }
  .lang-strip {
    padding: 14px 0 !important;
  }
  .lang-chip {
    padding: 4px 10px !important;
  }
  .lang-chip-name {
    font-size: 11px !important;
  }
  .lang-chip-native {
    display: none !important;
  }

  /* ── Live classroom section ─────────────────────────── */
  .classroom-grid,
  .classroom-preview-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ── Instructor grid ────────────────────────────────── */
  .instructor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* ── Testimonials ───────────────────────────────────── */
  .testimonials-grid,
  .testimonial-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── Features grid ──────────────────────────────────── */
  .features-grid,
  .feature-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── Community grid ─────────────────────────────────── */
  .community-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── CTA Section ────────────────────────────────────── */
  .cta-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  .cta-actions {
    justify-content: center !important;
  }

  /* ── Programs / Course / Path grids ─────────────────── */
  .programs-grid,
  .course-grid,
  .path-grid,
  .program-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── Food / Service grids ───────────────────────────── */
  .food-grid,
  .service-grid,
  .benefit-grid,
  .impact-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── Dashboard layout — Stack sidebar ───────────────── */
  .dash-layout {
    grid-template-columns: 1fr !important;
  }
  .dash-sidebar {
    display: none !important;
  }

  /* ── Footer ─────────────────────────────────────────── */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .footer-bottom-inner {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }

  /* ── Stats / metrics rows ───────────────────────────── */
  .stats-row,
  .stats-grid,
  .metric-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* ── Buttons — Full width on mobile ─────────────────── */
  .btn--xl {
    padding: 14px 24px !important;
    font-size: 15px !important;
    width: 100% !important;
    justify-content: center !important;
  }
  .btn--lg {
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  /* ── Tables — Horizontal scroll ─────────────────────── */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Modals — Full screen on mobile ─────────────────── */
  .modal-content,
  .dialog-content {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    border-radius: 12px 12px 0 0 !important;
  }

  /* ── Page headers with breadcrumbs ──────────────────── */
  .page-header {
    padding: 32px 0 !important;
  }
  .page-header h1 {
    font-size: 28px !important;
  }
  .breadcrumb {
    font-size: 12px !important;
  }

  /* ── Two-column content layouts ─────────────────────── */
  .content-grid,
  .split-grid,
  .two-col {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ── Tab navigation ─────────────────────────────────── */
  .tab-nav,
  .tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    scrollbar-width: none !important;
  }
  .tab-nav::-webkit-scrollbar,
  .tabs::-webkit-scrollbar {
    display: none !important;
  }

  /* ── Form layouts ───────────────────────────────────── */
  .form-row,
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── Card improvements ──────────────────────────────── */
  .card {
    border-radius: 12px !important;
  }

  /* ── Scholarship / Funding sections ─────────────────── */
  .scholarship-grid,
  .funding-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── World map section ──────────────────────────────── */
  .map-container {
    height: 300px !important;
  }

  /* ── Senior Access Badge ────────────────────────────── */
  .btn[href*="senior"],
  [class*="senior-btn"] {
    font-size: 14px !important;
    padding: 10px 16px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   BREAKPOINT: 480px — SMALL PHONES (iPhone SE, etc.)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .wrap {
    padding: 0 12px !important;
  }
  .section {
    padding: 36px 0 !important;
  }
  h1 {
    font-size: 26px !important;
  }
  h2 {
    font-size: 22px !important;
  }

  /* Hero — extra compact */
  .hero {
    padding: 28px 0 0 !important;
  }
  .hero-description {
    font-size: 14px !important;
  }
  .hero-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .hero-metric {
    flex: 0 0 50% !important;
    padding: 8px 8px !important;
  }
  .hero-metric-value {
    font-size: 18px !important;
  }

  /* Hide panel preview on very small screens */
  .hero-panel {
    display: none !important;
  }

  /* Subjects — single column */
  .subjects-grid {
    grid-template-columns: 1fr !important;
  }

  /* Stats — single column */
  .stats-row,
  .stats-grid,
  .metric-grid {
    grid-template-columns: 1fr !important;
  }

  /* Mission stats — single column */
  .mission-stat-panel {
    grid-template-columns: 1fr !important;
  }

  /* Instructor grid — single column */
  .instructor-grid {
    grid-template-columns: 1fr !important;
  }

  /* Trust strip — stack */
  .trust-strip-inner {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Footer links smaller */
  .footer-grid {
    gap: 24px !important;
  }

  /* Announcement bar — even more compact */
  .announce-bar {
    height: 24px !important;
  }
  .announce-item {
    font-size: 9px !important;
    padding: 0 12px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   LIVE CLASSROOM — CRITICAL MOBILE LAYOUT
   Students on phones MUST be able to attend class comfortably.
   ══════════════════════════════════════════════════════════════ */

/* Tablet: Classroom - hide right panel, go full-width stage */
@media (max-width: 1024px) {
  .classroom-shell {
    grid-template-columns: 1fr !important;
  }
  .cr-panel {
    display: none !important;
  }
  /* Show panel toggle button */
  .cr-panel-toggle {
    display: flex !important;
  }
}

@media (max-width: 768px) {
  /* ── Classroom shell → Single column, full viewport ────── */
  .classroom-shell {
    grid-template-columns: 1fr !important;
    grid-template-rows: 44px 1fr 56px !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  /* ── Top bar — Compact ─────────────────────────────────── */
  .cr-topbar {
    padding: 0 10px !important;
    gap: 8px !important;
  }
  .cr-logo {
    margin-right: 8px !important;
  }
  .cr-logo-word {
    display: none !important;
  }
  .cr-class-info {
    min-width: 0 !important;
  }
  .cr-class-name {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 120px !important;
  }
  .cr-class-meta {
    display: none !important;
  }
  .cr-center {
    gap: 5px !important;
  }
  .rec-badge {
    display: none !important;
  }
  .session-timer {
    font-size: 12px !important;
  }
  .cr-top-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  .leave-btn {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }
  .leave-btn span {
    display: none !important;
  }

  /* ── Stage area — Fill screen ──────────────────────────── */
  .cr-stage {
    grid-column: 1 !important;
  }

  /* Stage tabs — Centered, compact */
  .stage-tabs {
    top: 8px !important;
    padding: 2px !important;
  }
  .stage-tab {
    padding: 4px 10px !important;
    font-size: 10px !important;
  }

  /* Teacher video — Full width */
  .tv-avatar-ring {
    width: 80px !important;
    height: 80px !important;
    font-size: 36px !important;
  }
  .tv-name-tag {
    font-size: 11px !important;
    padding: 4px 12px !important;
  }

  /* Slide view — Compact on mobile */
  .slide-view {
    padding: 10px !important;
  }
  .slide-frame {
    padding: 20px 16px !important;
    border-radius: 8px !important;
  }
  .slide-title {
    font-size: 18px !important;
  }
  .slide-sub {
    font-size: 12px !important;
  }
  .slide-point {
    padding: 8px 10px !important;
  }
  .slide-point-title {
    font-size: 12px !important;
  }
  .slide-point-desc {
    font-size: 11px !important;
  }

  /* PIP teacher — Smaller on mobile */
  .pip-teacher {
    width: 90px !important;
    height: 64px !important;
    top: 10px !important;
    right: 10px !important;
    border-radius: 8px !important;
  }
  .pip-teacher-av {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  /* Captions bar — Compact */
  .captions-bar {
    padding: 6px 12px !important;
    min-height: 36px !important;
  }
  .captions-text {
    font-size: 12px !important;
  }
  .captions-lang {
    font-size: 8px !important;
  }

  /* Student strip — Scrollable, smaller tiles */
  .student-strip {
    padding: 6px 8px !important;
    gap: 5px !important;
  }
  .student-tile {
    width: 60px !important;
    height: 44px !important;
    border-radius: 6px !important;
  }
  .student-tile-av {
    width: 20px !important;
    height: 20px !important;
    font-size: 8px !important;
  }
  .student-tile-name {
    font-size: 7px !important;
  }
  .student-tiles-more {
    width: 60px !important;
    height: 44px !important;
    font-size: 9px !important;
  }

  /* ── Right panel — Hidden by default, swipeable overlay ── */
  .cr-panel {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 85vw !important;
    max-width: 320px !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 500 !important;
    grid-column: unset !important;
    grid-row: unset !important;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: -4px 0 24px rgba(0,0,0,0.3) !important;
  }
  .cr-panel.mobile-open {
    right: 0 !important;
  }

  /* Panel tabs — Compact */
  .panel-tabs {
    padding: 0 !important;
  }
  .panel-tab {
    padding: 8px 4px !important;
    font-size: 10px !important;
  }
  .panel-tab-icon {
    font-size: 12px !important;
  }

  /* Larissa face panel — Smaller */
  #larissa-face-panel {
    padding: 12px 10px 10px !important;
  }
  #larissa-face-wrap {
    width: 80px !important;
    height: 80px !important;
  }
  #larissa-face-img,
  #larissa-face-video {
    width: 80px !important;
    height: 80px !important;
  }

  /* ── Bottom controls — Compact, touch-friendly ─────────── */
  .cr-controls {
    padding: 0 8px !important;
    gap: 4px !important;
  }
  .ctrl-group {
    gap: 3px !important;
  }
  .ctrl-sep {
    margin: 0 3px !important;
  }
  .ctrl-btn {
    padding: 4px 6px !important;
    min-width: 42px !important;
    border-radius: 7px !important;
  }
  .ctrl-icon {
    font-size: 16px !important;
  }
  .ctrl-label {
    font-size: 7px !important;
    letter-spacing: 0.04em !important;
  }
  .ctrl-leave {
    padding: 4px 8px !important;
    min-width: 42px !important;
  }
  .ctrl-center-right {
    gap: 4px !important;
  }
  .ctrl-center-left {
    gap: 4px !important;
  }
  .captions-active-pill {
    font-size: 8px !important;
    padding: 2px 6px !important;
  }

  /* Reactions menu — Centered on mobile */
  .reactions-menu {
    left: 50% !important;
    bottom: 60px !important;
  }

  /* Toast */
  .toast {
    top: 50px !important;
    font-size: 11px !important;
    padding: 8px 14px !important;
  }

  /* Floating Larissa widget — Repositioned */
  #larissa-widget {
    bottom: 64px !important;
    left: 10px !important;
  }
  .lw-mini {
    padding: 4px 10px 4px 6px !important;
  }

  /* Class engagement metrics — Compact overlay */
  .engagement-panel {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    transform: none !important;
    background: rgba(0,0,0,0.7) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 480px) {
  .classroom-shell {
    grid-template-rows: 40px 1fr 50px !important;
  }
  .cr-topbar {
    padding: 0 6px !important;
  }
  .live-badge {
    font-size: 8px !important;
    padding: 2px 6px !important;
  }
  .session-timer {
    font-size: 10px !important;
  }
  .cr-top-right {
    gap: 4px !important;
  }

  /* Hide student strip on very small phones to save space */
  .student-strip {
    max-height: 48px !important;
  }

  /* Controls — Icon only */
  .ctrl-label {
    display: none !important;
  }
  .ctrl-btn {
    min-width: 36px !important;
    padding: 6px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   DASHBOARD — 3-COLUMN GRID → MOBILE STACK
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* Hide companion panel on tablet */
  .dashboard-shell {
    grid-template-columns: var(--sidebar-w, 220px) 1fr !important;
  }
  .companion-panel,
  .dash-companion {
    display: none !important;
  }
}

@media (max-width: 768px) {
  /* ── Dashboard → Full single column ────────────────────── */
  .dashboard-shell {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
  }

  /* ── Sidebar → Hidden, slide-in ────────────────────────── */
  .dash-sidebar {
    position: fixed !important;
    left: -100% !important;
    top: 0 !important;
    width: min(280px, 85vw) !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 600 !important;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.3) !important;
    grid-row: unset !important;
    grid-column: unset !important;
  }
  .dash-sidebar.mobile-open {
    left: 0 !important;
  }

  /* ── Topbar → Full width ───────────────────────────────── */
  .dash-topbar {
    grid-column: 1 !important;
  }

  /* ── Main content → Full width ─────────────────────────── */
  .dash-main {
    grid-column: 1 !important;
    padding: 16px !important;
  }

  /* ── Stats row → 2 columns ─────────────────────────────── */
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .stat-card {
    padding: 16px 12px !important;
  }
  .stat-card-value {
    font-size: 24px !important;
  }

  /* ── Classes grid → 1 column ───────────────────────────── */
  .classes-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── Companion panel → Hidden ──────────────────────────── */
  .companion-panel,
  .dash-companion {
    display: none !important;
  }

  /* ── Sidebar navigation items — Touch friendly ─────────── */
  .nav-item {
    padding: 12px 12px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 480px) {
  .stats-row {
    grid-template-columns: 1fr !important;
  }
  .dash-main {
    padding: 12px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   PROGRAMS PAGE — SIDEBAR + GRID LAYOUT
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── Programs layout → Stack ───────────────────────────── */
  .page-layout {
    grid-template-columns: 1fr !important;
  }

  /* ── Sidebar → Hidden ──────────────────────────────────── */
  .sidebar {
    display: none !important;
  }

  /* ── Programs grid → Single column ─────────────────────── */
  .programs-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .program-card {
    border-radius: 12px !important;
  }

  /* ── Hero search → Full width ──────────────────────────── */
  .hero-search {
    max-width: 100% !important;
  }
  .hero-search input {
    font-size: 14px !important;
  }

  /* ── Tab strip → Horizontal scroll ─────────────────────── */
  .school-tab-strip {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .school-tab-strip::-webkit-scrollbar {
    display: none !important;
  }
  .school-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* ── Page hero → Compact ───────────────────────────────── */
  .page-hero {
    padding: 24px 0 16px !important;
  }
  .page-hero h1 {
    font-size: 24px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ABOUT PAGE — SPECIFIC OVERRIDES
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── Team grid → 2 columns ─────────────────────────────── */
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .team-card {
    padding: 16px 12px !important;
  }

  /* ── Mission language grid → 2 columns ─────────────────── */
  .mission-lang-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* ── Hero — Compact ────────────────────────────────────── */
  .hero-badges {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }

  /* ── Section padding (about-specific) ──────────────────── */
  section {
    padding: 40px 16px !important;
  }
  .section-inner {
    padding: 0 !important;
  }
}

@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr !important;
  }
  .mission-lang-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   FOOD ACCESS PAGE — FORM + REGISTRATION LAYOUTS
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── Page header → Stack ───────────────────────────────── */
  .page-header-inner {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* ── Eligibility → Stack ───────────────────────────────── */
  .eligibility-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* ── Registration form → Stack ─────────────────────────── */
  .register-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── Member layout → Stack ─────────────────────────────── */
  .member-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .id-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Queue layout → Stack ──────────────────────────────── */
  .queue-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── Form rows → Stack ─────────────────────────────────── */
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* ── Dietary grid → 2 columns ──────────────────────────── */
  .dietary-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* ── Header stats → Wrap ───────────────────────────────── */
  .header-stats-inner {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .h-stat {
    font-size: 12px !important;
  }

  /* ── Nav dropdown grid → Stack ─────────────────────────── */
  .nav-dropdown-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Form inputs — Touch friendly ──────────────────────── */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  select,
  textarea {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   CLASSROOM LOBBY — WAITING ROOM
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .lobby-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .lobby-card {
    padding: 20px 16px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   INSTRUCTOR PAGES
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .instructor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .instructor-card {
    padding: 16px !important;
  }
}

@media (max-width: 480px) {
  .instructor-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   SCHOLARSHIP / DONATION / CERTIFICATE PAGES
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .scholarship-grid,
  .funding-grid,
  .donation-grid,
  .cert-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .donation-amounts {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   CAMPUS MAP / WORLD MAP
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .map-container,
  .campus-map {
    height: 280px !important;
    min-height: 280px !important;
  }
  .map-sidebar {
    display: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   STUDENT STORIES / COMMUNITY EVENTS
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .story-grid,
  .event-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   STUDY GROUPS / OFFICE HOURS
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .group-grid,
  .office-grid,
  .assessment-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   SCHEDULE / ASSIGNMENTS / NOTIFICATIONS
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .schedule-grid {
    grid-template-columns: 1fr !important;
  }
  .calendar-grid {
    font-size: 12px !important;
  }
  .assignment-list {
    gap: 10px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITY IMPROVEMENTS
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* All interactive elements — 44px minimum touch target */
  a,
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Exception: inline text links */
  p a,
  li a,
  .footer a {
    min-height: unset !important;
    min-width: unset !important;
  }

  /* Focus visibility */
  :focus-visible {
    outline: 3px solid var(--blue, #1A6CC8) !important;
    outline-offset: 2px !important;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   UTILITY: Safe area insets (iPhone notch/dynamic island)
   ══════════════════════════════════════════════════════════════ */
@supports (padding-top: env(safe-area-inset-top)) {
  .site-header {
    padding-top: env(safe-area-inset-top);
  }
  .mobile-nav-drawer {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}


/* ══════════════════════════════════════════════════════════════
   UTILITY: Print styles
   ══════════════════════════════════════════════════════════════ */
@media print {
  .announce-bar,
  .header-util,
  .mobile-menu-btn,
  .mobile-nav-overlay,
  .mobile-nav-drawer,
  .larissa-fab {
    display: none !important;
  }
}