/* ==========================================================================
   responsive.css — Breakpoint layer
   Mobile-first: style.css holds the small-screen baseline; this file scales up.
   Load last so these overrides win at equal specificity.
   Breakpoints: 560 (sm) / 768 (md) / 1024 (lg) / 1280 (xl)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Baseline (< 560px) — collapse multi-column grids
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__about { grid-column: 1 / -1; max-width: none; }

  .section-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 559px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .grid--auto { grid-template-columns: 1fr; }
  .hero__meta { flex-direction: column; align-items: center; gap: var(--sp-2); }
  .btn--block-sm { width: 100%; }
  .site-footer__bar { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Below 900px — mobile navigation mode
   Desktop nav and header search hide; hamburger + drawer take over.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .site-nav { display: none; }
  .header-actions .search { display: none; }
  .nav-toggle { display: grid; }
}

@media (min-width: 900px) {
  .mobile-nav { display: none !important; }
}

/* --------------------------------------------------------------------------
   >= 560px (sm)
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
  :root { --gutter: var(--sp-5); }
  .grid { gap: var(--sp-5); }
}

/* --------------------------------------------------------------------------
   >= 768px (md)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --gutter: var(--sp-6);
    --header-h: 68px;
  }

  .section { padding-block: var(--sp-9); }
  .section--tight { padding-block: var(--sp-7); }
  .hero { padding-block: var(--sp-10) var(--sp-9); }

  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   >= 1024px (lg)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .site-footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   >= 1280px (xl)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  :root { --gutter: var(--sp-7); }
  .section { padding-block: var(--sp-10); }
  /* Must be re-declared alongside .section at every breakpoint: both selectors
     have specificity (0,1,0), so omitting it here lets .section win on source
     order and a "tight" section renders taller than a normal one. */
  .section--tight { padding-block: var(--sp-8); }
}

/* --------------------------------------------------------------------------
   Phase 2 sections
   -------------------------------------------------------------------------- */

/* Hero: single column until there is room for the graphic beside the copy. */
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
}

/* Below that, the graphic sits under the copy and shrinks. */
@media (max-width: 899px) {
  .hero__graphic { max-width: 240px; }
  .hero--split { text-align: left; }
}

/* On the smallest screens the decorative graphic earns its space least. */
@media (max-width: 559px) {
  .hero__graphic { display: none; }
  .hero__actions .btn { width: 100%; }
}

/* Stats: 2-up on mobile, 4-up once there is room. */
@media (min-width: 768px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
    padding-block: var(--sp-7);
  }
}

/* Keep the four stat values from crowding at mid widths. */
@media (min-width: 560px) and (max-width: 767px) {
  .stats__grid { gap: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   Phase 3 — tool workspace
   -------------------------------------------------------------------------- */

/* Workspace: controls above result on narrow screens, side by side when there
   is room for both to stay readable. */
@media (min-width: 900px) {
  .workspace {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--sp-6);
  }
  /* The result stays visible while the user edits the controls beside it. */
  .workspace__result {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-4));
  }
}

/* Two-up controls once the panel is wide enough to avoid cramped inputs. */
@media (min-width: 1280px) {
  .workspace__controls { padding: var(--sp-6); }
}

/* Term and example definition lists stack rather than squeeze on mobile. */
@media (max-width: 559px) {
  .term-list,
  .example__rows { grid-template-columns: 1fr; gap: var(--sp-1); }
  .term-list__meaning,
  .example__rows dd { margin-bottom: var(--sp-2); }
  .result-secondary__row { flex-direction: column; gap: var(--sp-1); }
  .result-secondary__value { text-align: left; }
}

/* --------------------------------------------------------------------------
   Coarse pointer — enlarge tap targets to 44px minimum
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn { min-height: 46px; }
  .icon-btn { width: 44px; height: 44px; }
  .site-nav__link,
  .mobile-nav__link { padding-block: var(--sp-3); }
  .search__option { padding-block: var(--sp-3); }
}

/* --------------------------------------------------------------------------
   Forced colors / high contrast
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .card,
  .tool-card,
  .category-card,
  .faq__item,
  .result-panel,
  .icon-btn { border: 1px solid CanvasText; }

  .btn { border: 1px solid ButtonText; }

  :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid Highlight;
  }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .ad-slot,
  .search,
  .mobile-nav,
  .skip-link { display: none !important; }

  body { background: #fff; color: #000; }
  .shell { max-width: none; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* ==========================================================================
   Category 3 (Phase 6) — responsive adjustments
   ========================================================================== */
@media (max-width: 767px) {
  /* Stack the label/value/copy columns so long values never overflow. */
  .case-row {
    grid-template-columns: 1fr auto;
  }
  .case-row__meta {
    grid-column: 1 / -1;
  }
  .hash-row {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }
  .hash-row .btn {
    justify-self: start;
  }
  .notepad__footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .notepad__stats {
    gap: var(--sp-3);
  }
}

@media (max-width: 559px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .notepad__toolbar {
    /* Let the toolbar scroll horizontally rather than wrap into many rows. */
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .notepad__toolbar .btn {
    flex: 0 0 auto;
  }
}

@media (forced-colors: active) {
  /* Ensure diff colour cues survive high-contrast mode with a border marker. */
  .diff-row--add { border-left: 3px solid Highlight; }
  .diff-row--remove { border-left: 3px solid GrayText; }
}

/* Phase 7 — lifestyle result components on small screens. */
@media (max-width: 559px) {
  .result-headline__value { font-size: var(--fs-2xl); }
  .equiv-table th { width: 50%; }
  .equiv-table th,
  .equiv-table td { padding: var(--sp-2); }
  .ref-table th,
  .ref-table td { padding: var(--sp-1) var(--sp-2); }
}