/* ============================================================
   LinguaBoost Lab · MOBILE FIX
   Universal mobile-overrides — loaded AFTER inline lesson CSS
   so these rules win the cascade. Do not edit lesson markup.
   Breakpoints: tablet ≤980px · mobile ≤640px · tiny ≤380px
   ============================================================ */

/* ---------- 0. Universal hardening ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
img, video, iframe, svg, canvas, picture, source {
  max-width: 100%;
}
img, video {
  height: auto;
}

/* Long English words / hashes / URLs must wrap on tiny screens */
@media (max-width: 640px) {
  h1, h2, h3, h4, p, li, td, th, dt, dd,
  .lead, .hero-lead, .lesson-hero-lead,
  .module-title, .section-copy, .section-head h2 {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }
}

/* ---------- 1. Touch targets ≥44px ---------- */
@media (max-width: 980px) {
  a.module-link, a.hero-link, button.btn-tool, button.theme-toggle,
  .lbs-lang-btn, .lang-btn, .level, .top-link,
  .activity .btn, .activity button, .quick-link,
  .nav-btn, .next-btn, .prev-btn, .check-btn, .reset-btn,
  .module-card .module-link, .hero-actions a, .hero-actions button {
    min-height: 44px !important;
  }
}

/* ============================================================
   2. TOPBAR — collapses gracefully
   ============================================================ */
@media (max-width: 980px) {
  .topbar {
    padding: 10px 14px !important;
    gap: 10px !important;
    min-height: 56px !important;
    flex-wrap: wrap !important;
  }
  .topbar-nav, .topbar-links {
    flex-wrap: nowrap !important;
    gap: 14px !important;
    margin-left: 4px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    min-width: 0;
    flex: 1 1 auto;
  }
  .topbar-nav::-webkit-scrollbar,
  .topbar-links::-webkit-scrollbar { display: none; }
  .topbar-tools { margin-left: auto !important; }
  .top-link {
    white-space: nowrap !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }
  .brand-tag, .brand small { display: none !important; }
  .brand-name, .brand-title { font-size: 13px !important; }
}
@media (max-width: 640px) {
  .topbar {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .brand-mark { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; }
  .brand-logo { height: 30px !important; max-width: 130px !important; }
  .top-link { font-size: 9px !important; letter-spacing: 0.10em !important; }
  .topbar-nav, .topbar-links { gap: 10px !important; }
}

/* ============================================================
   3. HERO — stacks, image hidden / shrunk on small screens
   ============================================================ */
@media (max-width: 980px) {
  .hero,
  [data-theme] .hero,
  body.light .hero {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: clamp(40px, 8vw, 80px) !important;
    padding-bottom: 24px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    min-height: auto !important;
  }
  .hero-banner {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    grid-column: 1 / -1 !important;
  }
  .hero-banner img,
  .hero-banner img.hero-bg,
  [data-theme] .hero-banner img.hero-bg,
  body.light .hero-banner img.hero-bg {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 220px !important;
    object-fit: cover !important;
    object-position: center !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    opacity: 1 !important;
  }
  .hero-copy,
  [data-theme] .hero-copy,
  body.light .hero-copy {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin: 0 !important;
    padding: clamp(20px, 5vw, 40px) clamp(16px, 4vw, 24px) !important;
  }
  .hero-copy h1,
  .hero-copy .lead,
  [data-theme] .hero-copy h1,
  [data-theme] .hero-copy .lead,
  body.light .hero-copy h1,
  body.light .hero-copy .lead {
    max-width: 100% !important;
  }
  .hero-actions {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .hero-actions a, .hero-actions button {
    flex: 1 1 auto !important;
    justify-content: center !important;
  }
  .hero-inner { aspect-ratio: auto !important; min-height: 0 !important; }
  .hero-text {
    width: 100% !important;
    position: static !important;
    background: none !important;
    padding: 16px !important;
  }
}

@media (max-width: 640px) {
  .hero h1,
  .hero-copy h1,
  .hero-title,
  .lesson-hero-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
  }
  .hero p, .hero .lead, .hero-lead, .lesson-hero-lead {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .hero-actions { flex-direction: column !important; }
  .hero-actions a, .hero-actions button { width: 100% !important; }
}

/* ============================================================
   3b. HERO container padding — many lessons use 40-56px
   ============================================================ */
@media (max-width: 820px) {
  .hero {
    padding: clamp(20px, 5vw, 36px) clamp(16px, 4vw, 28px) !important;
    border-radius: 18px !important;
  }
  .hero-card {
    border-radius: 18px !important;
  }
}
@media (max-width: 480px) {
  .hero {
    padding: 18px 14px !important;
    border-radius: 14px !important;
  }
}

/* ============================================================
   4. WRAP / SECTION padding (kill cm/mm units)
   ============================================================ */
@media (max-width: 980px) {
  .wrap, main.wrap {
    padding-left: clamp(14px, 3vw, 24px) !important;
    padding-right: clamp(14px, 3vw, 24px) !important;
  }
}
@media (max-width: 640px) {
  .wrap, main.wrap {
    padding: 22px 12px 56px !important;
  }
  section, .section, .activity, .round, .block, .card, .panel {
    padding-left: clamp(12px, 4vw, 18px) !important;
    padding-right: clamp(12px, 4vw, 18px) !important;
  }
}

/* ============================================================
   5. CATALOG (index.html) — module grid, level sections
   ============================================================ */
@media (max-width: 980px) {
  .level-grid,
  [data-theme] .level-grid,
  body.light .level-grid {
    padding-left: clamp(14px, 3vw, 24px) !important;
    padding-right: clamp(14px, 3vw, 24px) !important;
  }
  .module-grid,
  #a1 .module-grid, #a2 .module-grid,
  #b1 .module-grid, #b2 .module-grid,
  #c1 .module-grid, #c2 .module-grid,
  #interactive-lessons .module-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)) !important;
    gap: 12px !important;
  }
  .level-section { padding: 28px 18px 24px !important; }
  .section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding-right: 0 !important;
  }
  .section-head h2 { font-size: clamp(48px, 12vw, 88px) !important; max-width: 100% !important; }
  .level-count {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
    align-self: stretch !important;
  }
  .level-section::after { font-size: clamp(60px, 18vw, 120px) !important; }
}
@media (max-width: 640px) {
  .module-grid,
  #a1 .module-grid, #a2 .module-grid,
  #b1 .module-grid, #b2 .module-grid,
  #c1 .module-grid, #c2 .module-grid,
  #interactive-lessons .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .level-section { padding: 22px 14px 20px !important; }
  .level-grid,
  [data-theme] .level-grid,
  body.light .level-grid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .module-card { padding: 14px 12px !important; min-height: 0 !important; }
  .module-title { font-size: 14px !important; }
  .module-link {
    width: 100% !important;
    justify-content: center !important;
    font-size: 11px !important;
  }
}
@media (max-width: 380px) {
  .module-grid,
  #a1 .module-grid, #a2 .module-grid,
  #b1 .module-grid, #b2 .module-grid,
  #c1 .module-grid, #c2 .module-grid,
  #interactive-lessons .module-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   6. COMMON LESSON GRIDS — auto-fit fallback
   ============================================================ */
@media (max-width: 820px) {
  .flip-grid, .picture-grid, .jokes-wrap,
  .cards-grid, .grid-2, .grid-3, .grid-4,
  .practice-grid, .quiz-grid, .vocab-grid, .word-grid,
  .timeline, .stations, .lessons-grid, .blocks {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
    gap: 12px !important;
  }
}
@media (max-width: 480px) {
  .flip-grid, .picture-grid, .jokes-wrap,
  .cards-grid, .practice-grid, .quiz-grid, .vocab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .grid-3, .grid-4, .stations, .lessons-grid, .blocks {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   7. DRAG-AND-DROP — fingertip-friendly
   ============================================================ */
@media (max-width: 820px) {
  .draggable, [draggable="true"] {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    min-height: 44px;
  }
  .dropzone {
    min-height: 64px !important;
    padding: 14px !important;
  }
}
/* Visual feedback during touch-drag (added by touch-dnd.js) */
.dnd-touch-dragging {
  position: fixed !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  opacity: 0.86 !important;
  transform: translate(-50%, -50%) scale(1.04) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,0.28) !important;
  transition: none !important;
}
.dnd-drop-target {
  outline: 2px dashed currentColor !important;
  outline-offset: 4px !important;
}

/* ============================================================
   8. STEP TRACKERS / PROGRESS BARS
   ============================================================ */
@media (max-width: 640px) {
  .step-tracker, .mission-tracker, .progress-tracker,
  .booster-mission, .speaking-mission {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .step-tracker .step, .mission-tracker .step {
    flex: 1 0 calc(33.333% - 8px) !important;
    min-width: 0 !important;
  }
}

/* ============================================================
   9. TABLES — horizontal-scroll wrapper instead of squeezed
   ============================================================ */
@media (max-width: 640px) {
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  table thead, table tbody, table tr { display: table-row-group; }
  table tr { display: table-row; }
  table td, table th { white-space: nowrap; }
}

/* ============================================================
   10. FLASH-CARDS / FLIP-CARDS
   ============================================================ */
@media (max-width: 640px) {
  .flip-card, .flash-card, .vocab-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .flip-card-inner { min-height: 140px !important; }
}

/* ============================================================
   11. KILL HORIZONTAL SCROLL from cm/mm/100vw absolute layouts
   ============================================================ */
@media (max-width: 980px) {
  [style*="margin-left:"][style*="cm"],
  [style*="margin-right:"][style*="cm"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   12. FINAL SAFETY — never let anything overflow viewport
   ============================================================ */
@media (max-width: 980px) {
  .hero, .level-section, .module-card, .activity, .round,
  .section, .panel, .card, .block, .wrap {
    min-width: 0 !important;
  }
}

/* ============================================================
   13. FIXED-COLUMN LAYOUTS — collapse to 1 column
   Patterns observed: 1fr 148px, 1fr 390px, minmax(390px, ...) 1.18fr
   ============================================================ */
@media (max-width: 820px) {
  /* Two-column desktop hero/learn/legend layouts */
  .friendly-hero-inner,
  .learn-panel,
  .legend-row,
  .hero-grid,
  .lesson-hero-grid,
  .info-row,
  .lesson-grid,
  .text-image-row {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    gap: 16px !important;
  }
  /* Anything with leftovers from .friendly-meta etc. */
  .friendly-meta {
    grid-template-columns: 1fr 1fr !important;
    max-width: 100% !important;
  }
}
@media (max-width: 480px) {
  .friendly-meta {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   14. RESTAURANT MENU LAB — chef hero pocket fix
   ============================================================ */
@media (max-width: 820px) {
  .hero-inner > div:first-child,
  .hero-inner > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 24px 16px !important;
  }
  .hero-visual {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 12px !important;
  }
  .hero-visual img {
    width: 100% !important;
    height: auto !important;
    max-height: 240px !important;
    object-fit: contain !important;
  }
  /* Decorative absolutely-positioned images escaping the frame */
  .chef-tip [class*="img"][style*="top:"],
  [class*="dish"][style*="position: absolute"],
  [class*="garnish"][style*="position: absolute"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }
  .rubric-scoreboard {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   15. CORE TRAINER — bubble grids / cube-2048
   ============================================================ */
@media (max-width: 820px) {
  .bubble-grid, .flash-grid-clean {
    grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)) !important;
  }
}
@media (max-width: 480px) {
  .cube-2048 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .bubble-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   16. ARTICLES (b2-plus) — speak/rules grids
   ============================================================ */
@media (max-width: 600px) {
  .rules-grid, .speak-grid {
    grid-template-columns: 1fr !important;
  }
  .flip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   17. INLINE-STYLE WIDTH OVERRIDES via attribute selectors
   ============================================================ */
@media (max-width: 640px) {
  [style*="width: 460px"],
  [style*="width: 420px"],
  [style*="width: 390px"],
  [style*="width: 360px"],
  [style*="width:460px"],
  [style*="width:420px"],
  [style*="width:390px"],
  [style*="width:360px"],
  [style*="max-width: 460px"],
  [style*="max-width: 420px"],
  [style*="max-width: 390px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  [style*="margin-left: 2cm"],
  [style*="margin-left:2cm"],
  [style*="margin-left: 1cm"],
  [style*="margin-left:1cm"],
  [style*="margin-right: 2cm"],
  [style*="margin-right:2cm"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   17b. FRIENDLY-HERO + a1 a1-0X common pattern
   .friendly-hero{min-height:480px} + grid-template:minmax(390px,...)
   ============================================================ */
@media (max-width: 820px) {
  .friendly-hero, .friendly-hero-inner,
  .friendly-photo, .friendly-photo .hero-img,
  .hero-photo, .hero-inner, .hero-img {
    min-height: 0 !important;
  }
  .friendly-hero-inner {
    grid-template-columns: 1fr !important;
  }
  .friendly-photo, .hero-photo {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    max-height: 280px !important;
  }
  .friendly-photo .hero-img, .hero-img {
    width: 100% !important;
    height: 100% !important;
    max-height: 280px !important;
    object-fit: cover !important;
  }
  /* a1-08 final mission hero */
  .hero { min-height: 0 !important; }
  /* certificate (a1-08) */
  .certificate { min-height: 0 !important; padding: 24px !important; }
}

/* C1 Stars hero-visual */
@media (max-width: 820px) {
  .hero-visual {
    min-height: 0 !important;
  }
}

/* ============================================================
   17c. LEARN-PANEL with `1fr 390px` (a1-02, a1-04, a1-07)
   ============================================================ */
@media (max-width: 820px) {
  .learn-panel,
  [style*="grid-template-columns: 1fr 390px"],
  [style*="grid-template-columns:1fr 390px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   18. SAFE-AREA INSETS for iPhone notch/home-bar
   ============================================================ */
@supports (padding: max(0px)) {
  .topbar {
    padding-left: max(env(safe-area-inset-left), 12px) !important;
    padding-right: max(env(safe-area-inset-right), 12px) !important;
  }
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ============================================================
   19. DISABLE iOS double-tap zoom on buttons / cards
   ============================================================ */
button, a.btn, a.module-link, a.hero-link, .draggable, .dropzone,
[role="button"], [draggable="true"], .card.flip-card, .flash-card {
  touch-action: manipulation;
}

/* ============================================================
   20. RESPECT REDUCED MOTION (iPad accessibility)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* 2026-05-27 iPhone QA: keep the Lab eyebrow below the LinguaBoost topbar. */
@media (max-width: 640px) {
  .hero,
  [data-theme] .hero,
  body.light .hero {
    margin-top: 16px !important;
    padding-top: 0 !important;
  }

  .hero-copy,
  [data-theme] .hero-copy,
  body.light .hero-copy {
    padding-top: 28px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .hero-badge,
  [data-theme] .hero-badge,
  body.light .hero-badge {
    margin-top: 0 !important;
    margin-left: 2px !important;
    margin-bottom: 18px !important;
    letter-spacing: 0.2em !important;
    white-space: nowrap !important;
  }

  .hero-badge::before {
    margin-right: 0.55em !important;
  }

  .hero-badge .level-word {
    margin-left: 0.18em !important;
  }

  .section-head,
  [data-theme] .section-head,
  body.light .section-head {
    gap: 18px !important;
  }

  .level-count,
  [data-theme] .level-count,
  body.light .level-count {
    margin-top: 5mm !important;
    transform: none !important;
    letter-spacing: 0.08em !important;
  }

  .level-count .p {
    margin-right: 0.65em !important;
  }

  .level-count .level-word {
    margin-left: 0.16em !important;
  }
}