/* AV-Tech Tube Industry — responsive layer.
   The design is authored with inline styles, which cannot carry media queries,
   so viewport-conditional rules live here.

   IMPORTANT: selectors match the SERIALIZED style attribute, not the authored
   text. The browser normalises inline values when it re-serializes them, so
   `minmax(0,1fr)` is read back as `minmax(0px, 1fr)`, `0` becomes `0px`, and a
   space follows every comma. Display type is not handled here at all — those
   sizes use clamp() in the authored declarations, which works inline.

   Breakpoints: 1024px tablet, 900px stacking, 640px phone. */

/* ---------- container gutters ---------- */
@media (max-width: 640px) {
  [style*="max-width: 1240px"] { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ---------- 4-up and 5-up card grids ---------- */
@media (max-width: 1024px) {
  [style*="repeat(4, minmax(0px, 1fr))"],
  [style*="repeat(5, minmax(0px, 1fr))"] {
    grid-template-columns: repeat(2, minmax(0px, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  [style*="repeat(4, minmax(0px, 1fr))"],
  [style*="repeat(5, minmax(0px, 1fr))"],
  [style*="repeat(3, minmax(0px, 1fr))"] {
    grid-template-columns: minmax(0px, 1fr) !important;
  }
}

/* ---------- 3-up grids ---------- */
@media (max-width: 900px) {
  [style*="repeat(3, minmax(0px, 1fr))"],
  [style*="minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr)"] {
    grid-template-columns: minmax(0px, 1fr) !important;
  }
}

/* ---------- two-column editorial splits ----------
   The 1fr/1fr pair is also the prefix of the three-column form, so the 3-up
   rule above (same breakpoint, later in the file) settles that overlap. */
@media (max-width: 900px) {
  [style*="minmax(0px, 1fr) minmax(0px, 1fr)"],
  [style*="minmax(0px, 0.9fr) minmax(0px, 1.1fr)"],
  [style*="minmax(0px, 1.1fr) minmax(0px, 0.9fr)"],
  [style*="minmax(0px, 1fr) minmax(0px, 1.05fr)"],
  [style*="minmax(0px, 1.05fr) minmax(0px, 0.95fr)"],
  [style*="minmax(0px, 1.05fr) minmax(0px, 1fr)"],
  [style*="minmax(0px, 1fr) minmax(0px, 1.1fr)"],
  [style*="minmax(0px, 0.82fr) minmax(0px, 1.18fr)"],
  [style*="minmax(0px, 0.85fr) minmax(0px, 1.15fr)"],
  [style*="minmax(0px, 0.8fr) minmax(0px, 1.2fr)"],
  [style*="minmax(0px, 1.7fr)"] {
    grid-template-columns: minmax(0px, 1fr) !important;
  }
  /* gaps authored for wide side-by-side become dead space once stacked */
  [style*="gap: 72px"] { gap: 40px !important; }
  [style*="gap: 68px"] { gap: 40px !important; }
  [style*="gap: 64px"] { gap: 36px !important; }
  [style*="gap: 56px"] { gap: 32px !important; }
  [style*="gap: 0px 56px"] { gap: 0px !important; }
}

/* ---------- subgrid card rows (why-partner cards) ---------- */
@media (max-width: 1024px) {
  [style*="grid-template-rows: auto auto auto"] { grid-template-rows: none !important; }
  [style*="grid-row-start: span 3"] {
    grid-row: auto !important;
    grid-template-rows: none !important;
    display: block !important;
  }
}

/* ---------- label / value specification rows ---------- */
@media (max-width: 640px) {
  [style*="minmax(0px, 210px) minmax(0px, 1fr)"],
  [style*="minmax(0px, 190px) minmax(0px, 1fr)"],
  [style*="minmax(0px, 150px) minmax(0px, 1fr)"],
  [style*="minmax(0px, 130px) minmax(0px, 1fr)"],
  [style*="minmax(0px, 120px) minmax(0px, 1fr)"] {
    grid-template-columns: minmax(0px, 1fr) !important;
    gap: 6px !important;
  }
}

/* ---------- auto-fit tiles ---------- */
@media (max-width: 640px) {
  [style*="repeat(auto-fit, minmax(190px, 1fr))"] {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
}

/* ---------- section rhythm ---------- */
@media (max-width: 640px) {
  [style*="padding: 104px 0px"], [style*="padding: 96px 0px"],
  [style*="padding: 92px 0px"], [style*="padding: 88px 0px"], [style*="padding: 84px 0px"] {
    padding-top: 52px !important; padding-bottom: 52px !important;
  }
  [style*="padding: 84px 0px 78px"] { padding-top: 48px !important; padding-bottom: 44px !important; }
  [style*="padding: 88px 0px 92px"] { padding-top: 52px !important; padding-bottom: 52px !important; }
  [style*="padding: 110px 32px"] { padding-top: 60px !important; padding-bottom: 60px !important; }
}

/* ---------- header ----------
   Under 900px the inline nav is replaced by a burger + full-width drawer.
   The drawer and burger carry data hooks rather than style substrings so the
   swap survives inline-style serialization. */
@media (max-width: 1024px) {
  header nav[data-navdesktop] { gap: 2px !important; padding: 8px 14px !important; }
  header nav[data-navdesktop] > a { padding-left: 11px !important; padding-right: 11px !important; }
}
@media (max-width: 900px) {
  header { position: relative !important; flex-wrap: nowrap !important; align-items: stretch !important; }
  header > a[href] { padding: 12px 34px 12px 20px !important; }
  header > a[href] img { height: 34px !important; }
  header nav[data-navdesktop] { display: none !important; }
  header [data-navburger] { display: flex !important; }
  header [data-navdrawer] { display: block !important; }
  /* collapsed by default; the burger sets aria-expanded on open */
  header [data-navburger][aria-expanded="false"] ~ [data-navdrawer] { display: none !important; }
}
@media (min-width: 901px) {
  header [data-navdrawer] { display: none !important; }
}

/* ---------- forms and tables ---------- */
@media (max-width: 640px) {
  input, select, textarea, button { max-width: 100% !important; }
  table { min-width: 520px !important; }
}

/* ---------- long words in narrow columns ---------- */
@media (max-width: 640px) {
  h1, h2, h3, p, div, td, th { overflow-wrap: break-word; }
}

/* ---------- accessibility: distinguish in-text links without relying on colour ----------
   Footer legal links and any links inside paragraph copy get an underline so they
   are perceivable to users who cannot distinguish the link colour (WCAG 1.4.1). */
a[href*="/terms-of-use"],
a[href*="/privacy-policy"],
a[href*="#cookies"],
p a { text-decoration: underline; }
p a:hover { text-decoration: underline; }

/* ---------- accessibility: skip-to-content link (visible on keyboard focus) ---------- */
.skip-to-content {
  position: absolute; left: 8px; top: -60px; z-index: 1000;
  background: #1d2024; color: #fff !important; text-decoration: none;
  padding: 12px 18px; font: 600 14px/1 Poppins, Helvetica, Arial, sans-serif;
  transition: top .15s ease;
}
.skip-to-content:focus { top: 8px; outline: 3px solid #EB5A62; }

/* ---------- anti-bot security card responsive stacking on narrow mobile ---------- */
@media (max-width: 440px) {
  .avt-security-card > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .avt-security-card > div > div:last-child {
    width: 100% !important;
  }
  .avt-security-card altcha-widget {
    width: 100% !important;
  }
}