/*
 * Cross-cutting responsive overrides for the original style.css
 * components (hero grid, post grid, primary nav, picks list, stats
 * strip). Extracted verbatim as ONE consolidated file rather than
 * fragmented into a per-component @media block in each of the files
 * above — a deliberate, documented choice (see DESIGN_SYSTEM.md): these
 * two breakpoints originally lived together specifically because they
 * touch many selectors across many components at once, and splitting
 * them apart would trade one clear "here's everything that changes at
 * 680px" view for a dozen scattered three-line @media blocks with no
 * net maintainability win. Loaded LAST in the enqueue chain so its
 * specificity/source-order position relative to every component above
 * is unchanged from the original single-file style.css.
 *
 * @package TFGadgets
 */

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .post-grid{ grid-template-columns:repeat(2,1fr); }
  .archive-loop .post-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 680px){
  .primary-nav{
    position:fixed; inset:64px 0 0 0; background:var(--bg); border-top:1px solid var(--line);
    padding:24px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
  }
  .primary-nav.is-open{ opacity:1; pointer-events:auto; transform:translateY(0); overflow-y:auto; }
  .primary-nav ul{ flex-direction:column; gap:4px; }
  .primary-nav a{ display:block; padding:14px 0; border-bottom:1px solid var(--line); }
  .primary-nav .sub-menu{
    display:flex; position:static; flex-direction:column; border:0; background:none;
    margin:0 0 0 14px; padding:0;
  }
  .primary-nav .sub-menu a{ padding:10px 0; font-size:11px; color:var(--text-faint); }
  .menu-toggle{ display:block; }
  .post-grid, .archive-loop .post-grid{ grid-template-columns:1fr; }
  .picks-list li{ grid-template-columns:44px 1fr; }
  .picks-list .pick-meta{ display:none; }
  .stat-num{ font-size:22px; }
  .stats-grid{ padding:20px 16px; }
}