/* ============================================================
   ExamBuddy Nigeria — responsive.css
   Breakpoints:
     1200px  — Large tablet / small laptop
     1024px  — Tablet landscape
     768px   — Mobile
     480px   — Small mobile
     360px   — Tiny mobile (older Tecno/Itel/Infinix)
   ============================================================ */


/* ============================================================
   1200px
   ============================================================ */
@media (max-width: 1200px) {
  :root { --container: 100%; }

  .container { padding-left: var(--space-xl); padding-right: var(--space-xl); }
  .hero__inner { gap: var(--space-2xl); }
  .cards-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-xl); }
}


/* ============================================================
   1024px — Tablet
   ============================================================ */
@media (max-width: 1024px) {

  /* Hero */
  .hero__inner        { grid-template-columns: 1fr; text-align: center; }
  .hero__visual       { display: none; }
  .hero__content      { max-width: 640px; margin: 0 auto; }
  .hero__btns         { justify-content: center; }
  .hero__stats        { grid-template-columns: repeat(2, 1fr); }

  /* Grids */
  .cards-grid         { grid-template-columns: repeat(2, 1fr); }
  .cards-grid--2      { grid-template-columns: 1fr; }
  .cards-grid--4      { grid-template-columns: repeat(2, 1fr); }
  .why-grid           { grid-template-columns: 1fr; }
  .stat-boxes         { grid-template-columns: repeat(2, 1fr); }
  .packing-grid       { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer__grid       { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }

  /* Page hero */
  .page-hero          { padding: var(--space-3xl) 0; }
  .page-hero__inner h1{ font-size: 2rem; }

  /* Section */
  .section            { padding: var(--space-3xl) 0; }

  /* Portals */
  .portal-card__head  { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
}


/* ============================================================
   768px — Mobile
   ============================================================ */
@media (max-width: 768px) {

  /* Base */
  :root {
    --space-4xl: 56px;
    --space-3xl: 36px;
    --space-2xl: 28px;
  }

  h1 { font-size: 2rem; line-height: 1.2; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.2rem; }

  .container { padding-left: var(--space-lg); padding-right: var(--space-lg); }

  /* Topbar */
  .topbar {
    font-size: .78rem;
    padding: 8px var(--space-lg);
    flex-wrap: wrap;
    gap: 4px;
    text-align: center;
    justify-content: center;
  }

  /* Navbar */
  .navbar__links      { display: none; }
  .navbar__cta        { display: none; }
  .navbar__hamburger  { display: flex; margin-left: auto; }
  .navbar__inner      { height: 60px; }

  /* Mobile nav */
  .mobile-nav         { padding: var(--space-md) var(--space-lg) var(--space-lg); }
  .mobile-nav a       { padding: 11px var(--space-md); font-size: .95rem; }

  /* Hero */
  .hero               { padding: var(--space-3xl) 0 var(--space-2xl); }
  .hero__inner        { grid-template-columns: 1fr; text-align: center; }
  .hero__content h1   { font-size: 2.1rem; }
  .hero__btns         { flex-direction: column; align-items: center; gap: var(--space-sm); }
  .hero__btns .btn    { width: 100%; max-width: 320px; justify-content: center; }
  .hero__stats        { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }

  /* Page hero */
  .page-hero          { padding: var(--space-2xl) 0; }
  .page-hero__inner h1{ font-size: 1.75rem; }
  .page-hero__inner p { font-size: .95rem; }
  .badge-row          { gap: var(--space-xs); justify-content: center; }
  .badge              { font-size: .76rem; padding: 5px 10px; }

  /* Sections */
  .section            { padding: var(--space-2xl) 0; }
  .section-title      { font-size: 1.5rem; }
  .section-sub        { font-size: .9rem; }

  /* Cards */
  .cards-grid         { grid-template-columns: 1fr; gap: var(--space-md); }
  .cards-grid--2      { grid-template-columns: 1fr; }
  .cards-grid--4      { grid-template-columns: 1fr; }
  .exam-card          { padding: var(--space-lg); }
  .tip-card           { padding: var(--space-lg); }
  .team-card          { padding: var(--space-lg); }
  .stat-box           { padding: var(--space-lg); }
  .stat-box__num      { font-size: 2rem; }

  /* Blog */
  .blog-card__thumb   { height: 160px; }

  /* Stat boxes */
  .stat-boxes         { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }

  /* Packing / why */
  .packing-grid       { grid-template-columns: 1fr; }
  .why-grid           { grid-template-columns: 1fr; }

  /* Step list */
  .step-list          { gap: var(--space-md); }
  .step               { flex-direction: column; gap: var(--space-sm); }

  /* Checklist — always single column on mobile */
  .checklist          { grid-template-columns: 1fr !important; }

  /* Resource rows */
  .resource-row       { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .resource-row .btn  { width: 100%; justify-content: center; }

  /* Portal cards */
  .portal-card        { padding: var(--space-lg); }
  .portal-card__head  { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .portal-emblem      { width: 44px; height: 44px; font-size: 1.3rem; }
  .portal-features    { grid-template-columns: 1fr; }

  /* Tables */
  .table-wrap         { font-size: .8rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td              { padding: 9px 10px; }

  /* Forms */
  .form-row           { grid-template-columns: 1fr; gap: var(--space-md); }
  .form-group         { margin-bottom: var(--space-md); }

  /* Newsletter */
  .newsletter__inner  { grid-template-columns: 1fr; gap: var(--space-xl); text-align: center; }
  .newsletter-form    { flex-direction: column; gap: var(--space-sm); }
  .newsletter-form input { width: 100%; }
  .newsletter-form .btn  { width: 100%; justify-content: center; }

  /* CTA strip */
  .cta-strip__inner   { padding: var(--space-2xl) var(--space-lg); }
  .cta-strip__inner h2{ font-size: 1.5rem; }
  .cta-strip__btns    { flex-direction: column; align-items: center; gap: var(--space-sm); }
  .cta-strip__btns .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* Footer */
  .footer__grid       { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer__col h5     { margin-top: 0; }
  .footer__bottom     { flex-direction: column; gap: var(--space-md); text-align: center; }
  .footer__bottom-links { flex-wrap: wrap; justify-content: center; }

  /* Breadcrumb */
  .breadcrumb__inner  { font-size: .8rem; flex-wrap: wrap; }

  /* Accordion */
  .accordion__head    { padding: var(--space-md) var(--space-lg); font-size: .95rem; }

  /* Alerts */
  .alert              { font-size: .88rem; padding: var(--space-md); }
  .disclaimer         { padding: var(--space-lg); }

  /* Testimonials */
  .testimonial        { padding: var(--space-lg); }

  /* Toast */
  .toast              { right: var(--space-md); left: var(--space-md); max-width: none; text-align: center; }

  /* Team */
  .team-avatar        { width: 56px; height: 56px; font-size: 1.4rem; }

  /* Past questions quiz */
  .quiz-shell         { grid-template-columns: 1fr !important; }
  .quiz-sidebar       { position: static !important; }
  .year-grid, .yg     { grid-template-columns: repeat(4, 1fr) !important; }
  .question-card, .qcard { padding: var(--space-lg); }
  .option-btn, .ob    { font-size: .88rem; padding: 11px 14px; }

  /* Past questions hub */
  .exam-tab-grid      { grid-template-columns: 1fr !important; }
  .stats-strip        { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ============================================================
   480px — Small mobile
   ============================================================ */
@media (max-width: 480px) {

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }

  .container { padding-left: var(--space-md); padding-right: var(--space-md); }

  /* Hero */
  .hero__content h1   { font-size: 1.75rem; }
  .hero__stats        { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }

  /* Stat boxes */
  .stat-boxes         { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
  .stat-box__num      { font-size: 1.6rem; }

  /* Buttons */
  .btn--lg            { padding: 13px 20px; font-size: .88rem; }
  .btn                { padding: 10px 18px; font-size: .88rem; }

  /* Badge */
  .badge-row          { gap: 6px; }
  .badge              { font-size: .72rem; padding: 4px 8px; }
  .label              { font-size: .72rem; }

  /* Navbar */
  .navbar__inner      { height: 56px; padding: 0 var(--space-md); }
  .navbar__logo       { font-size: 1rem; }
  .navbar__logo-mark  { width: 28px; height: 28px; font-size: .8rem; }

  /* Page hero */
  .page-hero          { padding: var(--space-xl) 0; }
  .page-hero__inner h1{ font-size: 1.5rem; }

  /* Tables */
  th, td              { padding: 8px 8px; font-size: .78rem; }

  /* Forms */
  .form-group input,
  .form-group select,
  .form-textarea      { font-size: .9rem; padding: 10px 12px; }

  /* Accordion */
  .accordion__head    { font-size: .9rem; padding: var(--space-md); }

  /* Blog */
  .blog-card__meta    { font-size: .75rem; gap: 6px; flex-wrap: wrap; }

  /* Portal */
  .portal-features li { font-size: .85rem; }
  .portal-tip         { font-size: .82rem; }

  /* Quiz year grid */
  .year-grid, .yg     { grid-template-columns: repeat(3, 1fr) !important; }

  /* Score box */
  .score-box .s-num, .sc .sn { font-size: 1.8rem; }

  /* Toast */
  .toast { bottom: var(--space-md); right: var(--space-md); left: var(--space-md); font-size: .85rem; padding: 12px 16px; }

  /* CTA */
  .cta-strip__inner h2{ font-size: 1.3rem; }
  .cta-strip__inner p { font-size: .9rem; }
  .section-title      { font-size: 1.3rem; }
}


/* ============================================================
   360px — Tiny mobile (older Tecno / Itel / Infinix)
   ============================================================ */
@media (max-width: 360px) {

  h1 { font-size: 1.55rem; }
  h2 { font-size: 1.25rem; }

  .container          { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  .navbar__inner      { padding: 0 var(--space-sm); }

  .hero__stats        { grid-template-columns: 1fr 1fr; }
  .stat-boxes         { grid-template-columns: 1fr 1fr; }

  .year-grid, .yg     { grid-template-columns: repeat(3, 1fr) !important; }

  /* Hide badge row to prevent horizontal overflow */
  .badge-row          { flex-wrap: wrap; }

  .btn--lg            { padding: 11px 16px; font-size: .85rem; }
  .page-hero__inner h1{ font-size: 1.35rem; }
  .page-hero__inner p { font-size: .88rem; }

  th, td              { padding: 6px; font-size: .75rem; }
}


/* ============================================================
   Print
   ============================================================ */
@media print {
  .navbar, .topbar, .mobile-nav, .cta-strip,
  .newsletter, .toast, .ad-unit, .footer,
  .breadcrumb, .accordion__icon,
  .quiz-sidebar, .btn        { display: none !important; }

  body                { color: #000; font-size: 12pt; }
  a                   { color: #000; text-decoration: underline; }
  a::after            { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .container          { max-width: 100%; padding: 0; }
  .section            { padding: 16pt 0; }
  .table-wrap         { overflow: visible; }
  .question-card,
  .qcard              { break-inside: avoid; border: 1pt solid #ccc; margin-bottom: 12pt; }
}


/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal             { opacity: 1 !important; transform: none !important; }
  .mobile-nav         { transition: none !important; }
}