/* htt-mobile.css · one breakpoint file for the archive, taxonomy and single listing templates.
   Enqueue LAST, after kent-rayo-theme.css, htt-theme.css and htt-data-language.css.
   Two breakpoints only: 900px (tablet down, layout collapses) and 600px (phone, density changes).
   Nothing here targets inline styles: every rule keys off the classes the shortcodes emit. */

/* ---------- shared ---------- */
@media (max-width: 900px) {
  .htt-wrap { padding-left: 16px; padding-right: 16px; }
  .htt-h1 { font-size: clamp(26px, 7vw, 34px); line-height: 1.1; }
  .sec { padding-top: 26px; padding-bottom: 26px; }
  .sec h2 { font-size: clamp(20px, 5.4vw, 26px); line-height: 1.15; }

  /* every two and three column split becomes one column */
  .htt-hero-split, .htt-grid--2, .htt-side, .about, .duel, .ibody, .cost-wrap, .skinbody { grid-template-columns: 1fr !important; display: grid; gap: 18px; }

  /* sidebars stop sticking and stack under the content */
  .htt-side aside, .rayo-aside, [class*="sticky"] { position: static !important; top: auto !important; }
  .rayo-aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 40px; padding-top: 24px; border-top: 1.5px solid #E9A93A; }

  /* horizontal scrollers bleed to the screen edge, scrollbar hidden */
  .htt-typenav, .htt-crumb, .htt-flt, .lbfilters, .fchips, .tool-picks { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .htt-typenav::-webkit-scrollbar, .htt-flt::-webkit-scrollbar, .lbfilters::-webkit-scrollbar, .fchips::-webkit-scrollbar { display: none; }
  .htt-typenav > *, .htt-flt > *, .fchips > * { flex: 0 0 auto; }

  /* tables never squash: they scroll inside their own box, first column pinned */
  .fa-wrap, .htt-rt__scroll, .appcompare, .cscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fa-grid, .ac, .htt-rt__t { min-width: 560px; }
  .fa-grid td.num, .ac td.m, .htt-rt__t td:first-child { position: sticky; left: 0; background: #FDF8EC; z-index: 1; }

  /* every tap target clears 44px */
  .htt-btn, .fa-btn, .htt-chip, .lbf, .fchip, .dpk, .tool__form button, .tool__form input, details > summary { min-height: 44px; display: inline-flex; align-items: center; }
  details > summary { padding: 12px 0; }

  /* card grids */
  .cards3, .deal-grid, .ecoblocks, .watchouts, .things, .tools { grid-template-columns: 1fr 1fr !important; display: grid; gap: 12px; }
  .spec { grid-template-columns: 1fr !important; display: grid; gap: 14px; }
  .ataglance { grid-template-columns: 1fr !important; display: grid; gap: 18px; }

  /* media */
  .htt-listing__media, .htt-listing img, .bt.b-photo { aspect-ratio: 1 / 1; }
  .htt-map, #htt-map { height: 260px !important; }
}

/* ---------- phone ---------- */
@media (max-width: 600px) {
  .htt-wrap { padding-left: 14px; padding-right: 14px; }
  .cards3, .deal-grid, .ecoblocks, .watchouts, .things, .tools, .htt-grid--4, .htt-grid--3 { grid-template-columns: 1fr !important; }
  .htt-listing-grid { grid-template-columns: 1fr 1fr !important; }   /* 4-up and 3-up both land on 2 */

  /* the numbers row becomes a snap slider rather than four cramped tiles */
  .statrow { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -14px; padding: 0 14px; scrollbar-width: none; }
  .statrow::-webkit-scrollbar { display: none; }
  .statrow > * { flex: 0 0 84%; max-width: 84%; scroll-snap-align: start; }

  /* big display numbers step down but never below the readable floor */
  .bnum, .tool-res > b, .ebig { font-size: 38px !important; }
  .htt-score { font-size: 13px; }
  body, .htt-body { font-size: 16px; }          /* never below 16px, iOS zooms inputs under it */
  .kv, .fa-grid, .ac, .htt-rt__t, .fine, .n { font-size: 12px; }   /* data text floor is 11px */

  /* tool results wrap instead of overflowing */
  .tool-res { flex-wrap: wrap !important; gap: 10px; }
  .tool-res > *, .tool-meter { flex: 1 1 100%; width: 100% !important; }
  .tool__form { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .tool__form input { font-size: 16px; }

  /* section table of contents: chips pinned under the header, not a list */
  .htt-toc { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; overflow-x: auto; background: #FDF8EC; border-bottom: 1px solid #EAD9C4; margin: 0 -14px; padding: 10px 14px; scrollbar-width: none; }
  .htt-toc a { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border: 1.5px solid #4A342C; border-radius: 8px; font-size: 12px; }
  .htt-toc a.is-current { background: #E9A93A; }

  /* the paywall overlay must not sit on top of a scrolled table on a phone */
  .gateover, .over-lock { position: static !important; margin-top: 12px; }
  .gatewrap .grows, .locked-zone .blurrows { filter: blur(4px); }

  /* desktop nav is replaced by logo, search, heart, avatar, burger */
  .htt-nav--desktop { display: none !important; }
  .htt-nav--mobile { display: flex !important; align-items: center; gap: 12px; }
  .htt-accnav { flex-direction: row !important; overflow-x: auto; gap: 14px; border-bottom: 1px solid #EAD9C4; }
  .htt-accnav .is-current { border-bottom: 2px solid #C13B2A; }
}

/* print: the single listing prints as the record, not the page */
@media print {
  .htt-nav--desktop, .htt-nav--mobile, .htt-toc, .gateover, .over-lock, .tools, .deal-grid, .htt-btn { display: none !important; }
  .fa-grid, .ac, .htt-rt__t { min-width: 0; }
  .sec { break-inside: avoid; }
}