/* ============================================================
   Community Catalysts — mobile optimization layer
   Loaded last in every page's <helmet>. The pages are authored
   with inline styles, so these responsive overrides use
   !important to win at narrow widths only.
   Breakpoints: 1040px (nav), 1000px (wide grids), 720px (phone)
   ============================================================ */

/* ---------- global guards ---------- */
html, body { overflow-x: clip; }
@media (max-width: 1000px) { img, video, iframe { max-width: 100%; } }

/* ---------- nav: desktop row vs. burger ---------- */
.cc-nav-burger { display: none; }
@media (max-width: 1040px) {
  .cc-nav-desktop { display: none !important; }
  .cc-nav-burger { display: inline-flex !important; }
}
@media (min-width: 1041px) {
  .cc-nav-drawer { display: none !important; }
}

/* ---------- grids: step down, then stack ---------- */
@media (max-width: 1000px) {
  [style*="repeat(5, 1fr)"]:not([data-keep-grid]),
  [style*="repeat(4, 1fr)"]:not([data-keep-grid]),
  [style*="repeat(3, 1fr)"]:not([data-keep-grid]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="repeat(3, 219px)"] { grid-template-columns: repeat(2, 219px) !important; }
  [data-footer-grid] { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  /* horizontal timeline rails don't survive a column step-down */
  #imp-timeline > div[style*="position: absolute"],
  #cs-timeline > div[style*="position: absolute"] { display: none !important; }
}
@media (max-width: 720px) {
  [style*="grid-template-columns"]:not([data-keep-grid]) { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="repeat(3, 219px)"] { grid-template-columns: minmax(0, 260px) !important; }
}

/* ---------- spacing rhythm ---------- */
@media (max-width: 720px) {
  /* card / panel interiors */
  [style*="padding: 60px"], [style*="padding: 56px"], [style*="padding: 52px"],
  [style*="padding: 48px"], [style*="padding: 44px"], [style*="padding: 40px"],
  [style*="padding: 38px"], [style*="padding: 36px"], [style*="padding: 34px"] { padding: 26px !important; }
  /* section vertical rhythm */
  [style*="padding: 96px"], [style*="padding: 88px"], [style*="padding: 80px"],
  [style*="padding: 72px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  /* section gutters (anything authored with a 32px gutter) */
  [style*="max-width"][style*="px 32px"]:not([style*="gap"]):not(a):not(button),
  [style*=": 0 32px"]:not(a):not(button) { padding-left: 20px !important; padding-right: 20px !important; }
  /* large grid/flex gaps */
  [style*="gap: 60px"], [style*="gap: 56px"], [style*="gap: 48px"] { gap: 28px !important; }
}

/* ---------- type scale ---------- */
@media (max-width: 720px) {
  :root {
    --text-lg:  1.25rem;   /* 20 */
    --text-xl:  1.5rem;    /* 24 */
    --text-2xl: 1.75rem;   /* 28 */
    --text-3xl: 2.125rem;  /* 34 */
    --text-4xl: 2.375rem;  /* 38 */
  }
  /* oversized non-heading display numerals (stats, quote marks) */
  [style*="font-size: 4"], [style*="font-size: 5"], [style*="font-size: 6"],
  [style*="font-size: 7"], [style*="font-size: 8"] { font-size: 30px !important; }
  [style*="font-size: 3"] { font-size: 26px !important; }
  h1[style] { font-size: clamp(29px, 8vw, 40px) !important; line-height: 1.08 !important; }
  h2[style] { font-size: clamp(24px, 6.2vw, 31px) !important; line-height: 1.16 !important; }
  h3[style] { font-size: clamp(19px, 5vw, 24px) !important; line-height: 1.2 !important; }
  p[style], li[style] { text-wrap: pretty; }
  /* 16px minimum on fields so iOS doesn't zoom on focus */
  input, textarea, select { font-size: 16px !important; }
  /* comfortable tap targets */
  button { min-height: 40px; }
}

/* ---------- page-specific ---------- */
@media (max-width: 720px) {
  /* index hero: shorter shell, gutter-safe copy */
  [data-hero-shell] { min-height: 520px !important; height: 80vh !important; max-height: 760px !important; border-radius: 22px !important; }
  /* footer: compact two-column link block under the brand */
  footer { padding: 36px 20px 26px !important; }
  [data-footer-grid] { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  [data-footer-brand] img { height: 42px !important; }
  [data-footer-brand] p { font-size: 14px !important; margin-bottom: 14px !important; }
  [data-footer-brand] form { max-width: none !important; }
  [data-footer-brand] form input { min-width: 0 !important; }
  [data-footer-links] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 14px !important; align-items: start; }
  [data-footer-links] > div:first-child { grid-row: span 2; }
  footer h2[style] { font-size: 13px !important; line-height: 1.25 !important; letter-spacing: .1em !important; margin: 0 0 4px !important; }
  footer a[style*="display: block"], footer a[style*="display: flex"] { display: flex !important; align-items: center; min-height: 38px !important; padding: 0 !important; font-size: 15px !important; }
  footer a i { width: 18px !important; font-size: 15px !important; }
  footer a svg { width: 16px !important; height: 16px !important; }
  [data-footer-legal] { margin-top: 24px !important; padding-top: 16px !important; flex-direction: column; align-items: flex-start !important; gap: 8px !important; line-height: 1.5; }
  /* case-study photo strip: shorter frames on a phone */
  .cs-strip figure { height: 260px !important; }
  /* full-width CTAs in stacked button rows */
  [data-stack-cta] > * { flex: 1 1 100% !important; text-align: center !important; }
}

/* ---------- Bethel Homes CLT: stacked panel follows its own card ---------- */
@media (max-width: 720px) {
  .cc-clt-grid > [data-clt-card="how"] { order: 1; }
  .cc-clt-grid > [data-clt-panel="how"] { order: 2; }
  .cc-clt-grid > [data-clt-card="qualify"] { order: 3; }
  .cc-clt-grid > [data-clt-panel="qualify"] { order: 4; }
  .cc-clt-grid > [data-clt-card="apply"] { order: 5; }
  .cc-clt-grid > [data-clt-panel="apply"] { order: 6; }
  .cc-clt-grid > [data-clt-card="mortgage"] { order: 7; }
  .cc-clt-grid > [data-clt-panel="mortgage"] { order: 8; }
}

/* ---------- Bethel Homes property features: stay 2-up on phones ---------- */
@media (max-width: 720px) {
  .cc-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
  .cc-feat-grid > div:last-child { grid-column: 1 / -1; }
  .cc-feat-grid > div > div { padding: 22px 18px 24px !important; }
}