/* ============================================================
   responsive.css — shared mobile / tablet adaptation layer
   Loaded LAST on every page so its media queries win the cascade.
   Inline-styled React chrome is overridden with !important where
   it must be (inline styles otherwise beat external CSS).
   Breakpoints: tablet ≤1024px · phone ≤640px
   ============================================================ */

/* ---------- Global guards ---------- */
img, video, canvas, svg, iframe { max-width: 100%; }
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; }
}

/* Reusable horizontal-scroll wrapper for wide tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   HEADER — hamburger toggle (inline-styled chrome in ChromeCN.jsx)
   ============================================================ */
.cn-burger { display: none !important; }
@media (max-width: 1024px) {
  .cn-desktop-nav,
  .cn-desktop-right { display: none !important; }
  .cn-burger { display: flex !important; }
}
@media (max-width: 420px) {
  .cn-brand-name { max-width: 160px !important; }
}

/* ============================================================
   FOOTER — stack columns on tablet → phone
   (both class-based footers: .cn-footer and .site-footer)
   ============================================================ */
@media (max-width: 1024px) {
  .cn-footer .top,
  .site-footer .top { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}
@media (max-width: 640px) {
  .cn-footer .top,
  .site-footer .top { grid-template-columns: 1fr !important; gap: 26px !important; }
  .cn-footer .brand-intro p,
  .cn-footer .brand p,
  .site-footer .brand p { max-width: none !important; }
  .site-footer .legal,
  .cn-footer .legal { flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-footer { padding-top: 48px !important; }
}

/* ============================================================
   CONTAINER — tighten gutters on phones
   ============================================================ */
@media (max-width: 640px) {
  .container { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ============================================================
   HOMEPAGE — inline-styled sections (index.html)
   Hooks added in JSX: .home-split (2-col→1) · .home-4col (3→2→1)
   ============================================================ */
@media (max-width: 920px) {
  .home-split { grid-template-columns: 1fr !important; gap: 40px !important; }
  /* the sticky intro column becomes static when stacked */
  .home-split > div:first-child { position: static !important; top: auto !important; }
}
@media (max-width: 1024px) {
  .home-4col { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .home-4col { grid-template-columns: 1fr !important; }
}

/* Regulation rows stack on phones */
@media (max-width: 700px) {
  .reg-row { grid-template-columns: 1fr !important; gap: 8px !important; padding-right: 0 !important; }
}

/* Cookie banner */
@media (max-width: 720px) {
  .cookie-banner { grid-template-columns: 1fr !important; gap: 16px !important; }
  .cookie-banner > div:last-child { flex-wrap: wrap !important; }
  .cookie-banner > div:last-child button { flex: 1 1 auto !important; }
}
@media (max-width: 560px) {
  .cookie-banner { left: 12px !important; right: 12px !important; bottom: 12px !important; padding: 18px !important; }
}

/* ============================================================
   SUB-HEADERS / PAGE TITLES — scale down on phones
   ============================================================ */
@media (max-width: 640px) {
  .uc-subhead h1,
  .dr-subhead h1,
  .dd-subhead h1,
  .rt-subhead h1,
  .mb-subhead h1,
  .page-title-area h1 { font-size: 26px !important; }
  .uc-subhead,
  .dr-subhead,
  .dd-subhead,
  .rt-subhead,
  .mb-subhead { padding-top: calc(var(--header-h) + 20px) !important; }
}

/* ============================================================
   GENERIC TABLE OVERFLOW — keep tables intact, scroll sideways
   ============================================================ */
@media (max-width: 760px) {
  .table-scroll .uc-table,
  .table-scroll .mb-table { min-width: 680px; }
}

/* ============================================================
   MY VEHICLES — L2 (vehicle list) & L3 (vehicle detail)
   Inline-styled React screens; hooks added in mv-screens.jsx
   ============================================================ */
@media (max-width: 1024px) {
  /* archive + sharing columns stack */
  .mv-detail-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .mv-main { padding-left: 20px !important; padding-right: 20px !important; }
  .mv-brand-panel { padding: 28px 20px 32px !important; }
  .mv-pagetitle-row { flex-wrap: wrap; align-items: flex-start; gap: 20px; }
  .mv-pagetitle-row > div:last-child { flex-shrink: 1 !important; }
  .mv-pagetitle-h1 { font-size: 34px !important; }
}
@media (max-width: 640px) {
  .mv-pagetitle-h1 { font-size: 28px !important; }

  /* L2 vehicle row: stack info above actions */
  .mv-vrow { grid-template-columns: 1fr !important; }
  .mv-vrow-actions {
    border-left: 0 !important;
    border-top: 1px solid rgba(0,0,0, .08) !important;
  }

  /* L3 sharing recipient row: stack content + actions */
  .mv-recipient { grid-template-columns: 1fr !important; gap: 16px !important; }
  .mv-recipient-actions {
    flex-direction: row !important;
    align-items: stretch !important;
    flex-wrap: wrap;
  }
  .mv-recipient-actions > * { flex: 1 1 auto; }
  .mv-recipient-meta { grid-template-columns: auto 1fr !important; }
}
/* sharing status counts must never wrap mid-label */
.mv-share-counts span { white-space: nowrap; }