/* ===== mobile-7sow.css — v0.6.0 mobile + contrast pass =====
   Enqueued in functions.php with dependency on 'wsx-tuned' so it always
   loads last in the 7SOW cascade (tokens → base → sections → tuned → this). */

/* --- A. Contrast: readable muted text on dark surfaces (all viewports) ---
   #8A9AA5 fails WCAG AA on both charcoals (4.27:1 / 3.42:1).
   #A7B5BF passes on both (5.9:1 / 4.72:1) and keeps the cool-grey mood. */
.wsx-theme-dark{color:#A7B5BF}
.wsx-footer{color:#A7B5BF}
.wsx-stat__label,#s04-stats .wsx-stat__label{color:#A7B5BF}
.wsx-cta__footnote{color:#A7B5BF}

@media(max-width:767px){

  /* --- B. Section rhythm: 96px block padding is a desktop value --- */
  .wsx-section{padding-block:52px}
  #framework.wsx-section{padding-bottom:44px}
  #s04-stats.wsx-section{padding-top:36px;padding-bottom:52px}
  .wsx-intro,#framework .wsx-intro,#s07-cards .wsx-intro{margin-bottom:36px}
  .wsx-rule{margin:18px auto}

  /* --- C. Hero: fit closer to one screen, fix clipping + alignment --- */
  #hero.wsx-section{min-height:0;padding-block:56px 48px}
  .wsx-hero{gap:30px}
  #hero .wsx-eyebrow{justify-content:center}
  #hero .wsx-hero__heading{font-size:clamp(34px,10.5vw,44px);line-height:1.12;text-align:center}
  #hero .wsx-hero__sub{margin:0 auto 20px;font-size:18px}
  #hero .wsx-hero__body{margin:0 auto 26px;font-size:16px}
  #hero .wsx-buttons{flex-direction:column;align-items:center;gap:10px}
  #hero .wsx-btn{width:100%;max-width:340px;text-align:center;padding:14px 20px}
  /* was width:370px on a ~342px content box → clipped by overflow:hidden */
  #hero .wsx-hero__img{width:min(300px,78vw);max-width:78vw;display:block;margin:6px auto 0}
  #hero .wsx-hero__media{text-align:center}
  #hero .wsx-hero__watermark{display:none}

  /* --- D. Framework cards: badge beside text instead of stacked slabs.
         Turns each ~400px card into ~140px; the 7-item list becomes scannable. --- */
  #framework .wsx-grid{gap:12px}
  #framework .wsx-card{padding:24px 20px;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start}
  #framework .wsx-card__badge{grid-row:1/span 2;font-size:26px;line-height:1.15;margin:0;min-width:34px}
  #framework .wsx-card__title{grid-column:2;margin:3px 0 8px;font-size:13.5px}
  #framework .wsx-card__body{grid-column:2;font-size:14px;line-height:1.65}
  #framework .wsx-card:hover{transform:none;box-shadow:none} /* no hover-lift on touch */

  /* --- E. Stats band: even 2×2 grid instead of ragged flex wrap --- */
  .wsx-stats{display:grid;grid-template-columns:1fr 1fr;gap:30px 16px;text-align:center;justify-items:center}

  /* --- F. Resource + audience cards: slightly tighter --- */
  #s07-cards .wsx-card{padding:30px 24px 40px}
  #s07-cards .wsx-card__icon{margin-bottom:16px}
  #s05-audience .wsx-pcard{padding:20px 22px}
  .wsx-split{gap:36px}
  .wsx-split__panel{gap:14px}

  /* --- G. CTA panels: tame the huge bottom margins baked into tuned rules --- */
  #s06-cta .wsx-cta__body{margin-bottom:32px}
  .wsx-cta__meta{gap:22px 32px;margin-top:26px}
  #s06-cta .wsx-cta__embed{max-width:300px;margin:26px auto}
}