/* IISCC Mobile Overrides (non-destructive)
   Drop this AFTER your current styles (as a separate file or final <style> block).
   It does not change content or structure—only responsive behavior.
*/

/* 0) Fluid media */
img, video, svg { max-width: 100%; height: auto; }

/* 1) Header & brand */
@media (max-width: 1024px) {
  .brand { gap: 10px; padding: 10px 0; }
  .brand h1 { font-size: clamp(16px, 2.2vw + 0.4rem, 22px); line-height: 1.25; }
}

/* Override the inline cm sizing on the logo for small screens */
@media (max-width: 768px) {
  header.topnav .brand img { width: 48px !important; height: 48px !important; }
  .wrap { padding: 0 14px; }
}

/* 2) Navigation: make it mobile-friendly via horizontal scroll (no markup changes) */
nav {
  align-items: center;
}
@media (max-width: 768px) {
  nav {
    overflow-x: auto;
    white-space: nowrap;
    gap: 8px 12px;
    padding: 8px 0 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  nav a {
    font-size: 13px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e6eef7;
    display: inline-block;
  }
}

/* 3) Hero text scaling & spacing */
.hero h2 { font-size: clamp(24px, 3.5vw + 0.6rem, 36px); }
.lead-hero { font-size: clamp(15px, 1.5vw + 0.6rem, 20px); }
@media (max-width: 768px) {
  .hero { padding: 46px 0 28px; }
  .pill { font-size: 11px; }
}

/* 4) Cards, grids, sections */
section { padding: clamp(22px, 4vw, 36px) 0; }
.card { padding: clamp(14px, 3vw, 18px); margin: 10px 0; }

/* Force single column on narrow screens without changing HTML */
@media (max-width: 768px) {
  .grid { gap: 12px; }
  .cols-2, .cols-3 { grid-template-columns: 1fr !important; }
}

/* 5) Tables: make them scrollable on small screens (no wrapper needed) */
@media (max-width: 768px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-collapse: collapse;
  }
  th, td { padding: 8px; }
}

/* 6) Chair avatars: override inline pixel sizes to fit mobile */
@media (max-width: 768px) {
  /* target any inline styles with 180px size */
  #chairs .grid [style*="width:180px"] {
    width: min(42vw, 140px) !important;
    height: min(42vw, 140px) !important;
  }
}

/* 7) Footer: ensure good wrapping */
footer .wrap { text-align: center; }