/* ==========================================================================
   PsychoDynamic Diagnosis — responsive.css
   Breakpoints (PRD section 31): Mobile <640px, Tablet 640–1023px,
   Desktop >=1024px, Large >=1280px. Mobile-first base styles live in
   main.css/components.css; this file layers on adjustments upward, plus the
   mobile-specific table -> card conversion.
   ========================================================================== */

/* ---------- Base (mobile, <640px) ---------- */
.primary-nav { display: none; }
.nav-toggle { display: inline-flex; }
.site-header__bar .search-box { display: none; }
.brand__parent { display: none; }
.mobile-menu .search-box { display: block; margin-bottom: var(--space-5); max-width: none; }

.mobile-menu {
  display: none;
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: var(--color-bg);
  z-index: 90;
  overflow-y: auto;
  padding: var(--space-6) var(--space-5);
}
.mobile-menu.is-open { display: block; }
.mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.mobile-menu a {
  display: block;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  border: 1px solid var(--color-border);
}
.mobile-menu a[aria-current="page"] { border-color: var(--color-accent); color: var(--color-accent); }

/* Comparison table -> stacked cards on mobile */
.compare-table-wrap { display: none; }
.compare-cards { display: block; }

.field { grid-template-columns: 1fr; gap: var(--space-2); }
.field dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-faint); }

.site-footer__grid { grid-template-columns: 1fr; gap: var(--space-5); }

.framework-branch { flex-direction: column; align-items: center; }
.framework-node { min-width: 0; width: 100%; max-width: 280px; }

h1 { font-size: var(--fs-2xl); }
.hero h1 { font-size: var(--fs-2xl); }

html, body { overflow-x: hidden; max-width: 100%; }

/* ---------- Tablet and up (>=640px) ---------- */
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .launch-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
  h1 { font-size: var(--fs-3xl); }
  .hero h1 { font-size: var(--fs-3xl); }
  .site-header__bar .search-box { display: block; max-width: 220px; }
  .mobile-menu .search-box { display: none; }
  .brand__parent { display: inline; }
}

/* ---------- Desktop and up (>=1024px) ---------- */
@media (min-width: 1024px) {
  .primary-nav { display: block; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none !important; }

  .compare-table-wrap { display: block; }
  .compare-cards { display: none; }

  .field { grid-template-columns: 200px 1fr; gap: var(--space-4); }
  .field dt { font-size: var(--fs-sm); text-transform: none; letter-spacing: normal; color: var(--color-primary-dark); }

  .launch-grid { grid-template-columns: repeat(4, 1fr); }
  .site-header__bar .search-box { max-width: 320px; }
}

/* ---------- Large desktop (>=1280px) ---------- */
@media (min-width: 1280px) {
  .container { padding-left: var(--space-6); padding-right: var(--space-6); }
}

/* ---------- Touch target safety net (any pointer: coarse) ---------- */
@media (pointer: coarse) {
  .btn, .accordion-trigger, .nav-toggle, .framework-node, select, input {
    min-height: 44px;
  }
}