/*
  Responsive layer for the whole site. The original export had zero @media
  queries anywhere, so this file only adds breakpoint behavior on top of the
  existing inline-styled layout, it does not touch page copy or assets.
*/

/* ---- safety nets ---- */
html, body { overflow-x: hidden; }
img, video, svg, image-slot { max-width: 100%; }

/* ---- mobile nav toggle (index.html, About.dc.html) ---- */
.nav-toggle-input { display: none; }
.nav-toggle-label { display: none; }

@media (max-width: 760px) {
  .nav-toggle-label {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    background: #fff;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-default);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.22s ease, opacity 0.18s ease;
  }

  .nav-toggle-input:checked ~ .nav-links {
    max-height: 320px;
    opacity: 1;
    padding: 8px 20px 20px;
  }

  .nav-links a,
  .nav-links > span {
    padding: 12px 0;
    width: 100%;
  }
}

/* ---- collapse every fixed multi-column grid to one column below tablet width ----
   Every grid-template-columns in this site is set inline (repeat(N,1fr), fixed px
   sidebars, before/after comparison columns, etc). None of them adapt on their own,
   so this single rule stacks all of them on small/medium screens. */
@media (max-width: 860px) {
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---- reduce oversized horizontal section padding on mobile ---- */
@media (max-width: 640px) {
  [style*="padding:20px 48px"],
  [style*="padding:32px 48px"],
  [style*="padding:64px 48px"],
  [style*="padding:80px 48px"],
  [style*="padding:96px 48px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}