/* =========================================================
   TWSS LABS — Responsive refinements
   main.css is fluid (clamp) by default; this file handles
   structural changes at specific breakpoints rather than
   scaling, per breakpoints: 320/375/390/430/768/1024/1280/1440/1920
   ========================================================= */

/* Small phones: tighten gutters and stack hero meta */
@media (max-width: 380px){
  :root{ --gutter: 1.1rem; }
  .hero-meta{ flex-direction: column; gap: 0.9rem; }
  .btn{ padding: 0.85rem 1.3rem; font-size: 0.78rem; }
  .index-item{ grid-template-columns: 2.6rem 1fr; gap: 1rem; }
}

/* Phones -> small tablets: index list collapses body under title */
@media (max-width: 759px){
  .index-body{ margin-top: 0.4rem; }
  .footer-top{ gap: 2.2rem; }
}

/* Tablet portrait */
@media (min-width: 768px) and (max-width: 1023px){
  .hero-grid{ grid-template-columns: 1fr; }
  .diagram-wrap{ max-width: 640px; margin-inline: auto; }
  .split{ grid-template-columns: 1fr; }
  .figure-frame{ aspect-ratio: 16/9; }
}

/* Small laptop */
@media (min-width: 1024px) and (max-width: 1279px){
  :root{ --container-max: 1120px; }
}

/* Large desktop */
@media (min-width: 1440px){
  :root{ --container-max: 1360px; }
}
@media (min-width: 1920px){
  :root{ --container-max: 1480px; --gutter: clamp(2rem, 6vw, 5rem); }
}

/* Prevent any accidental horizontal overflow from long content */
html,body{ overflow-x: hidden; }
img{ max-width: 100%; height: auto; }
table{ display: block; overflow-x: auto; max-width: 100%; }

/* Touch target floor on coarse pointers */
@media (pointer: coarse){
  .main-nav a, .footer-col a, .btn{ min-height: 44px; }
  .menu-toggle{ width: 46px; height: 46px; }
}