/* ============================================================
   NERVEUX — mobile.css
   Only applies on phones (≤ 768px).

   Root pages:   <link rel="stylesheet" href="Css/mobile.css">
   Lesson pages: <link rel="stylesheet" href="Css/mobile.css">
   ============================================================ */

@media (max-width: 768px) {

  /* ── GLOBAL ── */
  html, body { overflow-x: hidden !important; }

  /* ══════════════════════════════════
     LESSON PAGES — banner fix
  ══════════════════════════════════ */

  .banner {
    height: auto !important;
    min-height: 60px !important;
    padding: 10px 16px 10px 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Logo — small, pinned left, no overflow */
  .logo {
    height: 36px !important;
    width: 36px !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    object-fit: contain !important;
  }

  /* Module title — fits in remaining space */
  .module-title {
    font-size: 13px !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: calc(100% - 60px) !important;
  }

  /* Page content */
  .page-wrapper {
    padding: 0 14px 48px !important;
    max-width: 100% !important;
  }

  .lesson-title {
    font-size: 19px !important;
    margin-top: 18px !important;
    margin-bottom: 20px !important;
    line-height: 1.4 !important;
  }

  h3 { font-size: 15.5px !important; margin-top: 28px !important; }
  h4 { font-size: 13px !important; }
  p  { font-size: 14px !important; text-indent: 0 !important; line-height: 1.72 !important; }

  .formula-box {
    padding: 14px 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    margin: 16px 0 !important;
  }

  .info-box { padding: 12px 13px !important; font-size: 13.5px !important; }

  /* Two-column info grid → single column */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Mascot block */
  .mascot-block {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px !important;
    margin: 24px 0 !important;
    text-align: left !important;
    background: #fffbf0 !important;
    border: 2px solid #d4a017 !important;
    border-radius: 16px !important;
  }
  .mascot-block img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    min-width: 80px !important;
    padding: 0 !important;
    background: none !important;
    transform: none !important;
  }
  body .recap-icon img {
    width: 430% !important;
    height: 130% !important;
    transform: translateX(35px) !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    position: static !important;
    margin: 0 !important;
    display: block !important;
    min-width: unset !important;
  }
  .mascot-speech { font-size: 13.5px !important; line-height: 1.65 !important; }

  /* Ensemble rows — scrollable */
  .ens-stack { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .ens-row   { grid-template-columns: 50px 130px 1fr !important; min-width: 320px !important; }
  .ens-symbol { font-size: 18px !important; padding: 10px 6px !important; }
  .ens-name   { padding: 10px 8px !important; font-size: 11.5px !important; }
  .ens-examples { padding: 10px 8px !important; font-size: 11px !important; }

  /* Inclusion SVG */
  .inclusion-wrapper { overflow-x: auto !important; }
  .inclusion-wrapper svg { min-width: 320px !important; }

  /* Operations table — scrollable */
  .ops-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .ops-table th, .ops-table td { padding: 8px 9px !important; }

  /* Worked examples */
  .worked-example { padding: 14px 12px !important; border-radius: 12px !important; }
  .we-question    { font-size: 13.5px !important; }
  .we-step        { font-size: 13px !important; padding-left: 10px !important; }
  .we-step.hl     { padding: 7px 10px !important; }
  .we-result      { font-size: 13px !important; padding: 8px 12px !important; }

  /* Exercises */
  .exercise-section { padding: 18px 13px !important; border-radius: 12px !important; margin-top: 28px !important; }
  .exercise         { padding: 13px !important; font-size: 13.5px !important; }
  .exercise ul      { padding-left: 14px !important; }
  .toggle-btn       { width: 100% !important; padding: 10px 14px !important; font-size: 12.5px !important; margin-top: 10px !important; }
  .correction       { font-size: 13px !important; padding: 12px !important; }

  /* Recap */
  .recap    { padding: 42px 14px 18px !important; margin-top: 52px !important; }
  .recap h3 { font-size: 15px !important; }
  .recap li { font-size: 13px !important; }

  /* Videos */
  .video-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Lesson nav */
  .lesson-nav {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }
  .nav-btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 13px !important;
    padding: 13px 14px !important;
  }

  .return-link a { font-size: 13px !important; }

  /* ══════════════════════════════════
     DASHBOARD
  ══════════════════════════════════ */

  /* Topbar — keep sign out button visible but as icon only */
  .topbar       { padding: 0 12px !important; height: 56px !important; }
  .topbar-brand { font-size: 14px !important; }
  .topbar-logo  { height: 28px !important; }

  /* Show sign out but make it compact */
  .sign-out-btn {
    display: block !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  /* Shrink the avatar button text */
  .topbar-name { font-size: 11.5px !important; }
  .topbar-av   { width: 28px !important; height: 28px !important; }

  /* Page */
  .page { padding: 14px 12px 48px !important; }

  /* Announcement */
  .announcement { padding: 10px 12px !important; gap: 8px !important; margin-bottom: 14px !important; }
  .ann-title    { font-size: 12px !important; }
  .ann-body     { font-size: 11px !important; }

  /* Greeting banner */
  .greeting-banner  { padding: 16px 14px !important; border-radius: 14px !important; gap: 10px !important; margin-bottom: 12px !important; }
  .greeting-name    { font-size: 20px !important; }
  .greeting-hello   { font-size: 11px !important; }
  .greeting-meta    { gap: 6px !important; }
  .greeting-meta span { padding: 3px 8px !important; font-size: 10.5px !important; }
  .greeting-avatar  { width: 60px !important; height: 60px !important; flex-shrink: 0 !important; }
  .streak-badge     { font-size: 11px !important; padding: 3px 8px !important; }

  /* BAC countdown */
  .bac-countdown { padding: 12px 14px !important; margin-bottom: 12px !important; }
  .bac-progress  { display: none !important; }
  .bac-days      { font-size: 18px !important; }

  /* Stats row — keep 3 cols */
  .stats-row          { grid-template-columns: repeat(3,1fr) !important; gap: 8px !important; margin-bottom: 12px !important; }
  .stat-card          { padding: 11px 6px !important; border-radius: 10px !important; }
  .stat-card .st-num  { font-size: 18px !important; }
  .stat-card .st-lbl  { font-size: 8px !important; letter-spacing: 0 !important; }

  /* XP banner */
  .xp-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px !important;
    gap: 8px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }
  .xp-num   { font-size: 24px !important; }
  .xp-track { max-width: 100% !important; }

  /* Module progress */
  .mod-progress-item { padding: 12px 12px !important; }
  .mp-name           { font-size: 12px !important; }

  /* Section headers */
  .section-head h2 { font-size: 15px !important; }
  .section-head a  { font-size: 11px !important; }

  /* Continue list */
  .continue-list { gap: 8px !important; margin-bottom: 18px !important; }
  .continue-item { padding: 11px 12px !important; gap: 10px !important; }
  .ci-icon       { width: 38px !important; height: 38px !important; font-size: 16px !important; }
  .ci-title      { font-size: 13px !important; }
  .ci-sub        { font-size: 10.5px !important; }
  .ci-status     { font-size: 10px !important; padding: 2px 6px !important; }

  /* Quick grid */
  .quick-grid { grid-template-columns: 1fr !important; gap: 10px !important; margin-bottom: 18px !important; }
  .quick-card { padding: 14px !important; }
  .qc-title   { font-size: 13px !important; }
  .qc-desc    { font-size: 12px !important; }

  /* Motivation */
  /* Motivation card — full layout restructure for mobile */
  .motivation-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px 18px !important;
    gap: 0 !important;
    position: relative !important;
  }

  /* Top row: mascot + title side by side */
  .motivation-card .mc-mascot {
    height: 52px !important;
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;
  }

  .motivation-card .mc-text {
    width: 100% !important;
    padding-left: 64px !important; /* space for mascot */
    margin-bottom: 12px !important;
  }

  .motivation-card .mc-text h3 {
    font-size: 15px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }

  .motivation-card .mc-text p {
    font-size: 13px !important;
    line-height: 1.65 !important;
    padding-left: 0 !important; /* full width for body text */
    /* override the padding-left trick — body text goes full width below the header row */
    margin-top: 44px !important; /* push below mascot height */
  }

  /* Restructure: after mascot/title row, body text goes full width */
  .motivation-card .mc-text {
    display: flex !important;
    flex-direction: column !important;
    padding-left: 0 !important;
  }

  .motivation-card .mc-text h3 {
    padding-left: 64px !important; /* align title next to mascot */
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  .motivation-card .mc-text p {
    margin-top: 0 !important;
    padding-left: 0 !important;
    font-size: 13px !important;
  }

  /* Refresh button — top right corner */
  .motivation-card .mc-refresh {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    align-self: unset !important;
    padding: 5px 9px !important;
    font-size: 14px !important;
  }

  /* Recently completed */
  .recent-item  { padding: 10px 12px !important; }
  .recent-title { font-size: 12.5px !important; }
  .recent-sub   { font-size: 10.5px !important; }

  /* ══════════════════════════════════
     INDEX.HTML
  ══════════════════════════════════ */

  /* Navbar — keep all links but smaller */
  header.navbar { padding: 0 12px !important; height: 56px !important; }

  /* Hide text nav links, keep only CTA button */
  header.navbar > div:last-child > a[href="math.html"],
  header.navbar > div:last-child > a[href="exercises.html"],
  header.navbar > div:last-child > a[href="about.html"],
  header.navbar > div:last-child > a[href="login.html"] {
    display: none !important;
  }

  /* CTA button compact */
  header.navbar > div:last-child > a[href="register.html"] {
    font-size: 12px !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
  }

  /* Hero */
  .hero { padding: 28px 16px 24px !important; }
  .hero h1 { font-size: 24px !important; line-height: 1.3 !important; }
  .hero-desc { font-size: 14px !important; line-height: 1.65 !important; }

  /* Keep mascot visible but smaller and repositioned */
  .hero-visuals { display: block !important; }
  .hero-mascot {
    width: 80px !important;
    height: 80px !important;
    top: 16px !important;
    right: 12px !important;
    opacity: 0.6 !important;
  }
  .hero-math { display: none !important; }

  /* CTA buttons — stack */
  .hero-cta {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }
  .hero-cta a {
    text-align: center !important;
    padding: 13px 20px !important;
    font-size: 14px !important;
    display: block !important;
  }

  /* Hero stats — fix alignment */
  .hero-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 16px 24px !important;
    margin-top: 24px !important;
  }
  .stat { min-width: 80px !important; }
  .stat-number { font-size: 26px !important; }
  .stat-label  { font-size: 11px !important; line-height: 1.3 !important; }

  /* Why section */
  .why-section  { padding: 36px 16px !important; }
  .section-title { font-size: 19px !important; }
  .why-grid     { grid-template-columns: 1fr !important; gap: 14px !important; }
  .why-card     { padding: 18px 16px !important; }

  /* Subjects section */
  .subjects-section { padding: 36px 16px !important; }
  .subjects-inner   { flex-direction: column !important; gap: 20px !important; }
  .subjects-cards   { flex-direction: column !important; gap: 10px !important; width: 100% !important; }
  .subject-card     { width: 100% !important; min-width: unset !important; }

  /* Closing */
  .closing    { padding: 36px 16px !important; text-align: center !important; }
  .closing h2 { font-size: 19px !important; }
  .closing p  { font-size: 13.5px !important; }

  /* Footer */
  .footer {
    flex-direction: column !important;
    text-align: center !important;
    padding: 20px 16px !important;
    gap: 8px !important;
    font-size: 12px !important;
  }
}

/* ── VERY SMALL PHONES ≤ 380px ── */
@media (max-width: 380px) {
  .module-title  { font-size: 12px !important; }
  .lesson-title  { font-size: 16px !important; }
  h3             { font-size: 14px !important; }
  .greeting-name { font-size: 17px !important; }
  .greeting-avatar { width: 50px !important; height: 50px !important; }
  .stats-row     { grid-template-columns: 1fr 1fr !important; }
  .hero h1       { font-size: 21px !important; }
  .sign-out-btn  { font-size: 10px !important; padding: 5px 8px !important; }
}