/* m-why.css — phone/tablet parity with the desktop design (why-vaultdef.html).
   Loaded after styles.css/pages.css/m-shared.css. Desktop (1440) must stay unchanged:
   every rule sits inside a max-width query or the 1240-1439 laptop band (the identity once the column is full width). */

/* ═══════════ laptop band (1240-1439) ═══════════ */
/* 1920px screens at 150% = 1280 CSS px. The hero card and .ww-col are 100% - 48px here (1192 at 1240,
   less with a classic scrollbar), not the 1240/1241 they were drawn for; these rules keep the 1440
   composition in the narrower column. Each one resolves to its 1440 value once the column is full width
   (>=1289px, later with a classic scrollbar, hence the band runs to 1439). */
@media (min-width:1240px) and (max-width:1439px){
  /* hero: 1131 / 1240, so the text keeps its 54px inset in the card; the heading block never shrinks
     (the one-line title would wrap), the subline takes any squeeze (it holds 2 lines down to 385px) */
  .ww-hero .wh-row{width:min(1131px,91.21%)}
  .ww-hero .wh-row>div{flex-shrink:0}
  /* road: the milestone column keeps 494px (row 06 wraps to 3 lines under 486px, which pushes the rows
     off the badges' inline tops); the bordered note beside it takes the shrink (its text holds 3 lines to 439px) */
  .road-l{flex-shrink:0}
  /* why compliance: four cards in one row, as at 1440 (295px each, 1240 in all); they shrink evenly
     instead of wrapping 3+1. The gap follows the column (20 / 1241); the side padding gives up 10% of the
     column's shortfall (11px at 1240), so the card text keeps its 1440 breaks ('CERT-In' stays whole) */
  .c28-grid{flex-wrap:nowrap;column-gap:1.6116%}
  .c28{min-width:0;padding:16px min(16px, calc(16px - (1241px - 100%) * .1))}
}

/* ═══════════ tablet + phone (<=1239) ═══════════ */
@media (max-width:1239px){
  /* hero + section heads: once the two columns stack, the 40px column gap turns into a hole
     between the heading and its paragraph (homepage .section-head uses 24px) */
  .ww-hero .wh-row{gap:16px}
  .ladder-head,.road-head{gap:24px}

  /* ── evidence ladder ──
     each .rung carries data-fit="400": the helper scales the whole desktop card (panel + mockup).
     Inside a scaled rung the desktop values come back (identical to desktop, so harmless there). */
  .rung[data-fit] .rung-in{min-height:510px}
  .rung[data-fit] .rung-in .rg-d{font-size:20px;line-height:28px}

  /* ── nine differences: the concentric-ring orb sits under the intro, as on desktop ──
     .nine-left must span the column (it shrink-wrapped to its widest child), so the
     data-fit="313" helper sees the real column width on narrow phones */
  .nine-left{width:100%;max-width:640px}
  .ww-rings{display:block;position:relative;top:auto !important;left:auto;margin-top:62px} /* 62 + 16px gap = desktop 78px */

  /* ── road to May 2027: badge rail beside each milestone ──
     the badges carry desktop inline tops (10…960px) that cannot follow the reflowed rows;
     .road becomes a 2-column grid: badges 01-06 in the rail column, milestone rows beside them */
  .road{display:grid;grid-template-columns:45px minmax(0,1fr);grid-auto-flow:column;column-gap:12px;padding-left:7px}
  .road-nums,.road-rows{display:contents}
  .road .num-badge{grid-column:1;position:relative;top:auto !important;align-self:start;margin-top:16px;z-index:1}
  .road-row{grid-column:2;position:relative;padding-left:10px;padding-right:10px}   /* desktop 10px side inset inside the separator */
  /* the grey connector (ww-mask.svg is a 1.5px #D5D7DA line) redrawn per row through the badge centres */
  .road-row::after{content:"";position:absolute;left:-35.25px;top:0;bottom:-1px;width:1.5px;background:#D5D7DA}
  .road-row:first-child::after{top:38.5px}
  .road-row:last-child::after{bottom:auto;height:38.5px}

  /* ── why compliance is not optional: cards fill the column edge to edge, as on desktop ── */
  .c28-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .c28-grid .c28{width:auto;min-height:0}

  /* touch: 40px+ tap targets without moving anything (block: padding cancelled by an equal
     negative margin; inline link: vertical padding does not change the line box) */
  .faq button{padding:8px 0;margin:-8px 0}
  .road-head .rt a{padding:10px 0}
}

/* ═══════════ phone (<=760) ═══════════ */
@media (max-width:760px){
  .c28-grid{grid-template-columns:minmax(0,1fr)}
}

/* ═══════════ narrow phone (<375): the rung label would drop under 13px at the rung's scale ═══════════ */
@media (max-width:374px){
  .rung[data-fit] .rg-t .eyebrow{font-size:17px}
}