/* Global responsive overrides — applied site-wide on top of per-page CSS.
   Goal: make every public/static landing page usable on tablet & mobile
   without hand-editing each page's bespoke CSS. */

/* TABLET — collapse desktop padding & 2-col layouts */
@media (max-width: 1024px) {
  .topbar, .top-bar, header.topbar { padding-left: 28px !important; padding-right: 28px !important; }
  .main { padding-left: 28px !important; padding-right: 28px !important; gap: 36px !important; }
  .main, .two-col, .split { grid-template-columns: 1fr !important; }
  .right { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--border, rgba(255,255,255,.1)); padding-top: 28px !important; }
  .spine { display: none !important; }
  .wrap, .container { padding-left: 24px !important; padding-right: 24px !important; }
}

/* MOBILE — tighten padding, force single-column for nearly all grids */
@media (max-width: 720px) {
  html, body { overflow-x: hidden !important; }
  body { font-size: 14px; }

  /* Top / page chrome */
  .topbar, .top-bar, header.topbar, header { padding: 16px 18px !important; flex-wrap: wrap; gap: 10px; }
  .topbar-pill { font-size: 8px !important; }

  /* Main grids */
  .main { padding: 20px 18px 48px !important; gap: 32px !important; }
  .main, .two-col, .split, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }

  /* Right column / divider columns */
  .right, .right-col { border-left: 0 !important; padding-left: 0 !important; padding-top: 24px !important; border-top: 1px solid rgba(255,255,255,0.08); }
  .left, .left-col { padding-right: 0 !important; border-right: 0 !important; }
  .spine { display: none !important; }

  /* Generic wrappers */
  .wrap, .container, .page { padding-left: 18px !important; padding-right: 18px !important; }

  /* Typography clamps — kill oversized desktop headlines on mobile */
  .headline, h1 { font-size: clamp(32px, 9vw, 48px) !important; line-height: 1.05 !important; word-break: break-word; }
  h2 { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.15 !important; }
  h3 { font-size: clamp(17px, 5vw, 22px) !important; }
  .hero { padding: 20px 0 16px !important; }
  .sub, .hero-sub, p { max-width: 100% !important; }

  /* Common 2/3/4-col attribute selectors (covers inline `style="grid-template-columns: 1fr 1fr"` etc.) */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* Specific known panels from coraa/algoray/lopus/etc */
  .score-panel { grid-template-columns: 1fr !important; gap: 12px !important; padding: 16px !important; }
  .raise-card { grid-template-columns: 1fr 1fr !important; }
  .check-item, .dr-row, .rf-row { grid-template-columns: 28px 1fr 44px !important; }
  .pli-header { grid-template-columns: 28px 1fr auto !important; }
  .pli-row { grid-template-columns: 1fr !important; }
  .sec-row-hdr { grid-template-columns: 28px 1fr 36px !important; }
  .check-pts { padding: 6px !important; }

  /* Forms — let inputs + buttons stack so nothing overflows */
  .form-row { flex-direction: column !important; border-radius: 7px !important; }
  .form-btn { width: 100% !important; padding: 14px !important; }

  /* Footer */
  .footer, footer { flex-direction: column !important; gap: 8px !important; text-align: center; padding: 24px 18px !important; }

  /* Score / number displays */
  .sc-num, .d-score { font-size: 42px !important; }

  /* Background fixed glows scale down so they don't dominate */
  .ga, .gb { width: 360px !important; height: 360px !important; }

  /* Tables — make horizontally scrollable rather than overflow viewport */
  table { display: block; overflow-x: auto; max-width: 100%; }

  /* Images & media */
  img, video, svg, canvas { max-width: 100% !important; height: auto !important; }
}

/* SMALL MOBILE */
@media (max-width: 420px) {
  .topbar, .top-bar, header { padding: 14px 14px !important; }
  .main, .wrap, .container, .page { padding-left: 14px !important; padding-right: 14px !important; }
  .headline, h1 { font-size: clamp(28px, 8.5vw, 40px) !important; }
  .raise-card { grid-template-columns: 1fr !important; }
}