/* ==========================================================================
   MRCOG Academy — Responsive recomposition
   Layouts are re-composed for tablet and mobile, not merely scaled down.
   Load this file LAST.
   ========================================================================== */

/* ==========================================================================
   Large desktop refinement (≤ 1200px)
   ========================================================================== */
@media (max-width: 1200px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .checkout-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .question-layout { grid-template-columns: minmax(0, 1fr) 252px; }
  .bank-layout { grid-template-columns: 234px minmax(0, 1fr); }
  .footer-top { grid-template-columns: 1.5fr repeat(3, 1fr); }
  .footer-top .footer-col:last-child { grid-column: span 3; }
  .footer-top .footer-col:last-child ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-6);
  }
  .footer-top .footer-col:last-child li { margin-bottom: 0; }
}

/* ==========================================================================
   Tablet landscape (≤ 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --header-h: 66px; }

  /* Header switches to the composed mobile menu */
  .primary-nav { display: none; }
  .header-actions .btn--secondary { display: none; }
  .mobile-nav-toggle { display: inline-flex; }
  .header-inner { gap: var(--sp-4); }
  .header-actions { margin-left: auto; }
  .header-actions + .mobile-nav-toggle { margin-left: var(--sp-2); }

  /* Hero recomposed to a single column with the preview beneath */
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .hero-copy h1 { max-width: 22ch; }
  .hero-lede { max-width: 62ch; }
  .app-preview { transform: none; max-width: 620px; margin-inline: auto; }
  .hero-float--bl { left: var(--sp-4); bottom: -16px; }

  /* Marketing grids */
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .plan-card--featured { order: -1; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); }
  .premium-promo { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .split--reverse .split-visual { order: 0; }
  .grid-sidebar,
  .grid-sidebar-left { grid-template-columns: minmax(0, 1fr); }

  /* Auth pages: visual panel becomes a compact banner above the form */
  .auth-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth-panel {
    padding: var(--sp-7) var(--gutter);
    gap: var(--sp-6);
  }
  .auth-panel .auth-quote { display: none; }
  .auth-form-side { padding-block: var(--sp-8); }

  /* Checkout stacks with the summary first so price is visible immediately */
  .checkout-layout { grid-template-columns: minmax(0, 1fr); }
  .order-summary { position: static; order: -1; }

  /* Student area */
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .welcome-inner { grid-template-columns: minmax(0, 1fr); }
  .sub-status { min-width: 0; }
  .bank-layout { grid-template-columns: minmax(0, 1fr); }
  .bank-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }
  .session-builder { grid-column: 1 / -1; }
  .player-layout { grid-template-columns: minmax(0, 1fr); }
  .player-sidebar { position: static; max-height: none; order: 1; }
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-nav {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border-subtle);
  }
  .settings-nav a[aria-current="page"],
  .settings-nav a.is-active { box-shadow: inset 0 -2px 0 var(--plum-700); }

  /* Question interface: navigator becomes a horizontal strip above the stem */
  .question-layout { grid-template-columns: minmax(0, 1fr); }
  .navigator { position: static; order: -1; }
  .navigator-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .navigator-legend { grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--sp-4); overflow-x: auto; }

  .summary-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .summary-hero .summary-stats { text-align: center; width: 100%; }

  /* Footer */
  .footer-newsletter { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}

/* ==========================================================================
   Tablet portrait / large phone (≤ 768px)
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --fs-md: 1rem;
    --section-y: 3rem;
    --section-y-tight: 2.25rem;
  }

  h1 { font-size: clamp(1.9rem, 7vw, 2.5rem); }
  h2 { font-size: clamp(1.55rem, 5.6vw, 2rem); }

  .grid-2,
  .grid-3,
  .grid-4,
  .field-row,
  .outcome-grid,
  .compare-columns,
  .category-grid,
  .mock-grid { grid-template-columns: minmax(0, 1fr); }

  .pricing-grid { grid-template-columns: minmax(0, 1fr); }
  .plan-card--featured { order: 0; }

  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .app-preview-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .app-preview-metric { padding: var(--sp-2); }

  .section-head { margin-bottom: var(--sp-6); }
  .hero-actions .btn { flex: 1; min-width: 160px; }

  .bank-sidebar { grid-template-columns: minmax(0, 1fr); }

  .continue-card { grid-template-columns: 76px minmax(0, 1fr); gap: var(--sp-4); }

  .card--pad-lg { padding: var(--sp-5); }
  .card-head,
  .card-body { padding: var(--sp-5); }
  .card-foot { padding: var(--sp-4) var(--sp-5); }

  .faq-item > summary { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); }
  .faq-answer { padding: 0 var(--sp-5) var(--sp-5); }

  .module > summary { padding: var(--sp-4) var(--sp-5); gap: var(--sp-3); }
  .lesson-row { padding: var(--sp-3) var(--sp-5); gap: var(--sp-3); }

  .question-body { padding: var(--sp-5); }
  .question-card-head,
  .question-foot { padding: var(--sp-4) var(--sp-5); }
  .question-foot { flex-direction: column-reverse; align-items: stretch; }
  .question-foot .cluster { justify-content: space-between; }
  .question-foot .btn { flex: 1; }
  .question-media { grid-template-columns: minmax(0, 1fr); }
  .navigator-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }

  .exam-bar-inner { gap: var(--sp-3); padding-block: var(--sp-3); }
  .exam-progress-wrap { order: 3; flex-basis: 100%; max-width: none; }

  .verdict { flex-direction: column; align-items: flex-start; text-align: left; }

  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-5); }
  .footer-brand-block { grid-column: 1 / -1; }
  .footer-top .footer-col:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .trust-strip { gap: var(--sp-4); }
  .numbered-steps li { gap: var(--sp-4); }

  .summary-item { gap: var(--sp-3); }
  .faculty-card { flex-direction: column; gap: var(--sp-4); }
}

/* ==========================================================================
   Phone (≤ 560px)
   ========================================================================== */
@media (max-width: 560px) {
  :root { --gutter: 1.125rem; }

  .brand-sub { display: none; }
  .header-actions .btn { padding: 0.6rem 0.95rem; font-size: var(--fs-2xs); }

  .announce-inner { font-size: var(--fs-3xs); gap: var(--sp-2); padding: 0.5rem 0; }

  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
  .stat-cell strong { font-size: 1.65rem; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-float { display: none; }

  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }

  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; }

  .navigator-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .score-ring { width: 112px; height: 112px; }
  .score-ring::before { inset: 9px; }

  .bar-chart { height: 150px; gap: var(--sp-2); }
  .bar-label { font-size: 9px; }

  .table { min-width: 480px; }

  .plan-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .owned-product { flex-direction: column; align-items: flex-start; }

  .access-legend { gap: var(--sp-3); }

  .mobile-nav-links a { font-size: var(--fs-lg); padding: var(--sp-3) var(--sp-1); }

  .option-card-face,
  .answer-face { padding: var(--sp-3) var(--sp-4); }

  .summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .continue-card { grid-template-columns: minmax(0, 1fr); }
  .continue-thumb { aspect-ratio: 16 / 6; }

  .card-foot .cluster,
  .course-card-foot { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .course-card-foot .btn { width: 100%; }
}

/* ==========================================================================
   Wide screens (≥ 1440px)
   ========================================================================== */
@media (min-width: 1440px) {
  :root { --container-max: 1240px; }
}