/* ==========================================================================
   Keith Self Claude Redesign v3 — responsive layer
   --------------------------------------------------------------------------
   Every rule in this file lives inside a max-width media query, so the
   client-approved v2 desktop presentation is inherited untouched at
   desktop widths. Inline styles in the page templates are authoritative on
   desktop; these rules override them only on tablet and phone.
   Breakpoints: 1200 (safety) · 1024 (tablet) · 900 (stack) · 640 (phone) · 420 (small phone)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Safety layer — prevents any element from exceeding the viewport.
      The structural fixes below are what actually make content fit; this
      only stops incidental overflow from long strings and oversized media.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, iframe, svg { max-width: 100%; }
  .ks-split > *, .ks-grid-3 > *, .ks-tier-grid > *, .ks-autofit > *,
  .ks-header-inner > *, .ks-footer-top > * { min-width: 0; }
  input, select, textarea, button { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   2. Tablet — tighten the header and oversized fixed type before stacking.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ks-header-inner { gap: 16px !important; padding-left: 20px !important; padding-right: 20px !important; }
  .ks-nav { gap: 26px !important; }
  .ks-nav a { font-size: 18px !important; }
  .ks-nav a[style*="background:#be1e2d"] { padding: 10px 20px !important; }
  .ks-header-logo { height: 96px !important; }

  .ks-endorse-bar { padding: 10px 20px !important; gap: 10px !important; }
  .ks-endorse-bar > span:last-child { font-size: 20px !important; letter-spacing: .1em !important; }

  .ks-kicker { font-size: 22px !important; letter-spacing: .18em !important; }
}

/* --------------------------------------------------------------------------
   3. Stacking breakpoint — two-column desktop layouts become single column.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* every desktop 2-up (letter + photo, issue rows, endorsement rows, CTA) */
  .ks-split { grid-template-columns: 1fr !important; }
  .ks-split > * { max-width: 100% !important; }

  /* text keeps a comfortable full-width measure once the photo moves away */
  .ks-split > div[style*="max-width:620px"] { max-width: 100% !important; }

  /* three-up content grids and auto-fit galleries */
  .ks-grid-3 { grid-template-columns: 1fr !important; }
  .ks-autofit { grid-template-columns: 1fr !important; }

  /* Trump endorsement split: portrait sits under the Truth Social post */
  .ks-tall-split { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .ks-portrait { min-height: 0 !important; position: relative !important; aspect-ratio: 4 / 3; }
  .ks-portrait img { position: absolute !important; inset: 0 !important; height: 100% !important; }

  /* the join-team name row stays two-up until phone widths */
  .ks-form-card .ks-split { grid-template-columns: 1fr 1fr !important; }

  /* a sticky header consumes too much of a phone viewport */
  .ks-header { position: static !important; }
  .ks-header-inner { flex-wrap: wrap !important; justify-content: center !important; row-gap: 12px !important; }
  .ks-nav { width: 100%; flex-wrap: wrap !important; justify-content: center !important; gap: 18px !important; }
  .ks-header-logo { height: 88px !important; }

  /* footer reorganises into stacked blocks */
  .ks-footer-top { flex-direction: column !important; align-items: flex-start !important; gap: 26px !important; }
  .ks-footer-contact { width: 100%; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 22px 30px !important; }
  .ks-footer-contact > div { flex: 0 1 auto; }
  .ks-footer-contact a, .ks-footer-contact div div { white-space: normal !important; }
  .ks-legal-grid { grid-template-columns: 1fr !important; justify-items: center !important; gap: 14px !important; }
  .ks-legal-grid > div { justify-self: center !important; text-align: center !important; }
  .ks-legal-grid > div:empty { display: none; }
}

/* --------------------------------------------------------------------------
   4. Phone — type, padding and the donation/contact grids.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .ks-endorse-bar { padding: 10px 16px !important; gap: 9px !important; }
  .ks-endorse-bar > span:first-child { width: 22px !important; height: 22px !important; font-size: 13px !important; }
  .ks-endorse-bar > span:last-child { font-size: 15px !important; letter-spacing: .06em !important; line-height: 1.25 !important; }

  .ks-header-inner { padding: 12px 16px !important; }
  .ks-header-logo { height: 74px !important; }
  .ks-nav { gap: 14px 18px !important; }
  .ks-nav a { font-size: 15px !important; letter-spacing: .06em !important; }
  .ks-nav a[style*="background:#be1e2d"] { padding: 10px 22px !important; font-size: 15px !important; }

  .ks-kicker { font-size: 18px !important; letter-spacing: .14em !important; }

  /* donation tiles: eight amounts read cleanly two-up */
  .ks-tier-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .ks-tier-grid > a { font-size: 21px !important; padding: 18px 0 !important; }
  .ks-tier-grid > a[style*="grid-column"] { padding: 20px 14px !important; }

  /* forms fit the viewport and stack fully */
  .ks-form-card { padding: 22px 18px !important; }
  .ks-form-card .ks-split { grid-template-columns: 1fr !important; }
  .ks-form-card input, .ks-form-card select, .ks-form-card textarea { width: 100% !important; font-size: 16px !important; }
  .ks-form-card button { padding: 16px !important; }

  .ks-footer-contact { gap: 20px 26px !important; }
  .ks-footer-contact > div { flex: 1 1 44%; }
  .ks-footer-logo { height: 72px !important; }
}

/* --------------------------------------------------------------------------
   5. Small phones (320–400px).
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .ks-endorse-bar > span:last-child { font-size: 13.5px !important; }
  .ks-header-logo { height: 66px !important; }
  .ks-nav a { font-size: 14px !important; }
  .ks-tier-grid > a { font-size: 19px !important; }
  .ks-footer-contact > div { flex: 1 1 100%; }
  .ks-footer-logo { height: 64px !important; }
}

/* --------------------------------------------------------------------------
   6. Endorsements page — three targeted mobile corrections (v3.1).
      Mobile/tablet only; the desktop presentation is untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* red page title must not run past the viewport */
  .ks-page-kicker { display: block; font-size: clamp(34px, 6.4vw, 60px) !important; letter-spacing: .1em !important; }
  .ks-page-h1 { font-size: clamp(34px, 5.6vw, 52px) !important; }

  /* Chip Roy reads as one endorsement: name, photo, then quote */
  .ks-chiproy { display: flex !important; flex-direction: column !important; gap: 20px !important; align-items: stretch !important; }
  .ks-chiproy-text { display: contents !important; }
  .ks-chiproy .ks-attrib { order: 1 !important; }
  .ks-chiproy-photo { order: 2 !important; width: 100% !important; max-width: 380px; margin: 0 auto !important; }
  .ks-chiproy .ks-quote-mark { order: 3 !important; }
  .ks-chiproy .ks-quote-text { order: 4 !important; margin-bottom: 0 !important; }
}

@media (max-width: 640px) {
  .ks-page-kicker { font-size: clamp(26px, 7vw, 42px) !important; letter-spacing: .06em !important; }
  .ks-page-h1 { font-size: clamp(28px, 7.2vw, 40px) !important; }
  .ks-chiproy-photo { max-width: 320px; }
}

@media (max-width: 420px) {
  .ks-page-kicker { font-size: 25px !important; letter-spacing: .04em !important; }
  .ks-page-h1 { font-size: 27px !important; }
  .ks-chiproy-photo { max-width: 280px; }
}


/* Terry Jones endorsement — MOBILE ONLY: photo above quote */
@media (max-width: 900px) {
  section:has(img[alt="Hunt County Sheriff Terry Jones"]) .ks-split > div:first-child {
    order: 2 !important;
  }

  section:has(img[alt="Hunt County Sheriff Terry Jones"]) .ks-split > div:last-child {
    order: 1 !important;
  }
}