/* m-the-act.css — phone/tablet parity with the desktop design (the-act.html).
   Loaded after styles.css/pages.css/m-shared.css. Desktop (1440) must stay unchanged:
   every rule below sits inside a max-width query or the 1240-1439 laptop band. (Hero circuits,
   tile density and card radii below 1240 are handled in m-shared.css.) */

/* ═══════════ laptop band (1240-1439) ═══════════ */
/* 1920px screens at 150% = 1280 CSS px. Below 1288px the hero card is 100% - 48px (1192px at 1240) and the act-grid
   (1340px at 1440) is 1192-1239px, so the 1440 composition is kept with narrower margins. Every value below reaches
   its 1440 value before 1288px (hero) or 1272px (act-grid), so the band joins the desktop layout without a jump; it runs
   on to 1439 (where it is the identity) so a classic scrollbar just above 1288 is covered too. */
@media (min-width:1240px) and (max-width:1439px){
  /* hero: text row keeps its 1440 share of the card (1076 / 1240), so it sits 79px inside at 1240 instead of 58px
     (the inline width is desktop px, hence !important) */
  .act-hero .wh-row{width:min(1076px,86.78%) !important}
  /* hero circuits: desktop px boxes as fractions of the 1240px card (as m-shared.css does below 1240),
     so both traces frame the corners exactly as at 1440; the inline tops are desktop px too */
  .act-hero .hero-circuit-l{top:0 !important;margin-top:-22.82%;width:42.79%;height:auto;aspect-ratio:530.6/570.7}
  .act-hero .hero-circuit-r-wrap{top:0 !important;margin-top:-22.42%;left:59.78%;width:45.16%;height:auto;aspect-ratio:560/570}
  .act-hero .hero-circuit-r{width:101.79%;height:auto;aspect-ratio:570/560.4;flex-shrink:0}
  /* obligations: the text column keeps its 1440 width (681px), so every paragraph breaks exactly as at 1440.
     The 1440 grid (397 TOC + 40 + 45 badge + 61 + 681 = 1224px) is up to 32px too wide below 1272px; the TOC card
     gives up half of it (397 -> 381, its widest heading needs 376) and the two gaps the rest (40 -> 34, 61 -> 51 at 1240). */
  .act-toc{width:clamp(381px,50% - 215px,397px)}
  .act-grid{column-gap:clamp(34px,18.75% - 189.5px,40px)}
  .ob-row{column-gap:clamp(51px,100% - 726px,61px)}
  /* How cards keep their 1440 width (4 x 273.5 = 1094px) so the card text breaks as at 1440;
     the box padding (46 -> 31) and card gap (18 -> 12) give up the 48px at 1240, in the 1440 ratio */
  .how{padding-left:clamp(31px,31.25% - 356.5px,46px);padding-right:clamp(31px,31.25% - 356.5px,46px)}
  .how-cards{column-gap:clamp(12px,(100% - 1094px) / 3,18px)}
}

/* ═══════════ tablet + phone (<=1239) ═══════════ */
@media (max-width:1239px){
  /* "On this page" card: pages.css:432 hides it below 1240px. Bring the desktop sidebar back. */
  .act-toc{display:block}
  /* a TOC jump lands the obligation title just below the sticky nav instead of under it */
  .ob-row{scroll-margin-top:80px}   /* 80 = nav 69-77 + breathing room, minus the 28px row padding, plus the 28px .reveal offset a not-yet-revealed row still has */

  /* "See all" stays on the right, as on desktop (the heading itself has to stack) */
  .act-sectors .section-head>.btn{align-self:flex-end}
}

/* ═══════════ tablet stack (<=1024) ═══════════ */
@media (max-width:1024px){
  /* too narrow for sidebar + list: the card sits above the obligations, same card, same type */
  .act-grid{flex-direction:column;gap:32px}
  .act-toc{position:static;width:100%;max-width:560px}
}
/* two cards per row on tablets: keep the round arrow button round on the card back
   (it was squeezed into an oval below ~1000px) */
@media (min-width:761px) and (max-width:1024px){
  .act-sectors .fb-arrow{flex-shrink:0}
}
/* ...and the 141px desktop card is too short for the back text once the card narrows */
@media (min-width:761px) and (max-width:899px){
  .act-sectors .flip{height:165px}
}

/* ═══════════ phone (<=760) ═══════════ */
@media (max-width:760px){
  /* hero H1 breaks as on desktop: "What the Act asks / of you" (inline max-width:442px = 7.9em at 56px) */
  .act-hero h1{max-width:7.9em !important}

  /* TOC links: 40px tap targets without moving anything (padding cancelled by margin) */
  .toc-group a{padding:6px 0;margin:-6px 0 6px}

  /* obligation rows: number badge back in its own column beside the title, with title,
     paragraph and pill on one vertical line (pages.css:449 stacked them) */
  .ob-row{flex-direction:row;gap:16px}
  .ob-body{flex:1;min-width:0}
  /* citation pill keeps the desktop pill:paragraph ratio (18/20 -> 15/17) */
  .ob-pill{font-size:15px;line-height:24px;padding:6px 12px}

  /* sector cards: slim white bar with the desktop 28px label and 80px icon column
     (the Telecom icon's inline 72px + 4px margin fills the same 80px box again) */
  .act-sectors .flip{height:150px}
  .act-sectors .flip-front span{font-size:28px}
  .act-sectors .flip-front img{width:80px;height:80px;flex-shrink:0}
}

/* ═══════════ small phone (<=480) ═══════════ */
@media (max-width:480px){
  /* each TOC group heading and link stays on one line (heading with its chevron), as on desktop;
     only the narrowest phones (<375px) step the type down a little */
  .act-toc{padding:20px}
  .act-toc h3,.toc-group>b{font-size:min(20px,5.3vw)}   /* same size as each other, as on desktop */
  .toc-group a{font-size:min(18px,4.7vw)}
}