/* ═══════════════════════════════════════════════════════════════
   UJIYARI — Responsive Breakpoints
   Mobile-first. Breakpoints: sm=640, md=768, lg=1024, xl=1280
═══════════════════════════════════════════════════════════════ */

/* Homepage two-column grid (Editorials/Magazines, Build Your Knowledge) */
.home-duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: stretch;
}

@media (max-width: 640px) {
  .home-duo-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  /* Prelims quiz card — reduce padding on mobile */
  .prelims-quiz-card {
    padding: var(--space-5) var(--space-4);
  }
  .prelims-quiz-question,
  .prelims-quiz-question .prelims-stmt-intro {
    font-size: var(--text-base);
  }
  .prelims-quiz-opt {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }
}

@media (max-width: 1023px) {
  .layout-with-sidebar {
    grid-template-columns: 1fr;
  }

  .layout-sidebar {
    position: static;
  }

  /* Monthly sidebar TOC is useless when sidebar stacks below content — hide it.
     The accordion controls bar (Expand All / Collapse All) handles mobile nav. */
  [data-monthly-toc-widget] {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* Monthly subnav: allow buttons to wrap and be full-width on very small screens */
  .monthly-subnav {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
  }

  .monthly-subnav__btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Accordion controls: stack label above button on mobile */
  .accordion-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }

  .btn--accordion-toggle {
    align-self: stretch;
    text-align: center;
    padding: var(--space-2) var(--space-4);
  }
}

@media (max-width: 767px) {
  .quick-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  :root {
    --space-6: 1.25rem;
    --space-8: 1.75rem;
  }

  .container { padding: 0 var(--space-4); }

  /* Hide desktop nav, show mobile toggle */
  .primary-nav { display: none; }
  .mobile-menu-toggle { display: flex; }
  .search-trigger span { display: none; }

  .page-header__title { font-size: var(--text-2xl); }

  .content-grid,
  .content-grid--3 {
    grid-template-columns: 1fr;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Footer nav columns: 2×2 grid on mobile */
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) var(--space-6);
  }

  .footer-tagline {
    max-width: none;
  }

  .footer-copy {
    font-size: 11px;
  }

  .date-nav__btn span { display: none; }
}

@media (max-width: 479px) {
  .tab-nav__item span { display: none; }
  .tab-nav__item { padding: var(--space-3) var(--space-4); }

  .card { padding: var(--space-4); }
}

/* Print styles */
@media print {
  .site-header,
  .site-footer,
  .date-nav,
  .tab-nav,
  .subject-filter,
  .btn { display: none !important; }

  .article-body {
    font-size: 12pt;
    line-height: 1.6;
  }

  .page-header {
    background: none;
    padding: 0;
  }

  .page-header__title,
  .page-header__eyebrow,
  .page-header__meta {
    color: #000 !important;
  }
}