/* m-about.css — phone/tablet parity with the desktop design (about.html).
   Loaded after styles.css/pages.css/m-shared.css. Desktop (1440) must stay unchanged:
   everything below is either inside a max-width query, the 1240-1439 laptop band (the identity once the column is 1240), or scoped to a [data-fit] container
   (the fit helper in js/main.js only scales those when their parent is narrower than the desktop width). */

/* ═══════════ scaled compositions (data-fit) ═══════════ */
/* .vals (data-fit=450): the value chips keep the desktop line breaks [01][02] / 03 / 04 / 05 / 06.
   pages.css:458 lets them wrap inside on phones; inside the scaled cluster they stay on one line, as on desktop. */
.gt-r .vals[data-fit] .val-chip{white-space:nowrap}

/* ═══════════ laptop band (1240-1439) ═══════════ */
/* 1920px screens at 150% = 1280 CSS px. The column is min(1240px, 100% - 48px) (pages.css:319/336), 1192px at 1240,
   so the 1440 composition is kept with narrower margins. Every value is clamped to its 1440 value once the column is 1240
   (>=1288px, later with a classic scrollbar, hence the band runs to 1439). */
@media (min-width:1240px) and (max-width:1439px){
  /* map + contacts keep their 1440 share of the column (1024 and 1216 of 1240): the pin and the three contacts line up as at 1440 */
  .map-wrap{width:min(1024px,calc((100% - 48px) * .8258))}
  .contact-row{width:min(1216px,calc((100% - 48px) * .9806))}
  /* Vision | Mission and Trust: the two text columns keep their 1440 widths (1060px together), so every line breaks as at 1440.
     The px the column loses come out of the side padding and the middle gap equally (60px at 1288+, 44px at 1240). */
  .gb-vision,.gb-trust{padding-left:min(60px,calc((100% - 1108px) / 3));padding-right:min(60px,calc((100% - 1108px) / 3));column-gap:min(60px,calc(100% - 1060px))}
  /* benefits: the four cards stay on one row (3+1 below a 1237px column), 295px shrinking to 284px at 1240; text breaks as at 1440 */
  .benefits .row{flex-wrap:nowrap;width:min(1237px,100%)}
  .benefits .c28{flex:1 1 0;min-width:0;width:auto}
}

/* ═══════════ tablet + phone (<=1239) ═══════════ */
@media (max-width:1239px){
  /* hero glow: restored (pages.css:444 hides it) and anchored as on desktop —
     800px wide on a 1240px hero (64.5%), right edge 150px past the hero (-12.1%),
     centre at 43% of the hero height. width/right/margin-top % resolve against the hero width, top against its height. */
  .au-hero-rings{display:block;width:64.5%;height:auto;aspect-ratio:1;right:-12.1%;top:43%;margin-top:-32.25%}

  /* map pin: the halo, ring, dot and tooltip offset keep their desktop proportion of the 1024px map
     (48px = 4.6875%, 28/48 and 8/48 of the pin), instead of staying at desktop px on a shrunken map */
  .map-pin{width:4.6875%;height:auto;aspect-ratio:1}
  .map-pin .p1{width:100%;height:100%}
  .map-pin .p2{width:58.33%;height:58.33%}
  .map-pin .p3{width:16.67%;height:16.67%}
  .map-tip{bottom:calc(100% + 4px)}

  /* Vision | Mission stack: the vertical divider becomes a horizontal rule between the two blocks */
  .gb-vision .gv-r{border-top:1px solid var(--border);padding-top:24px}

  /* value chips: any width that fits 01+02 but not 05+06 gives the desktop line breaks */
  .gt-r .vals{max-width:450px}

  /* world map inset inside the column as on desktop (1024 of 1240 = 82.58%) */
  .map-wrap{width:calc((100% - 48px) * .8258)}

  /* headings keep the desktop tracking (-0.02em) instead of fixed px made for 45-56px type */
  .au-hero h1,.gradbox .h45,.au-para .h2-48,.benefits .h2-48{letter-spacing:-.02em}
}

/* ═══════════ phone (<=760) ═══════════ */
@media (max-width:760px){
  /* hero: phone gutter above the badge (same 16px as the homepage hero), no blank band under the scaled chips */
  .au-hero{margin-top:16px;min-height:0}
  .au-hero .heading{padding-top:24px}

  /* gradbox type keeps the desktop hierarchy: section headings below the page H1,
     mission items larger than the paragraphs (pages.css:320 out-specifies the phone .h45 rule) */
  .gradbox .h45,.h45{font-size:clamp(26px,7vw,45px)}
  .gradbox p{font-size:17px;line-height:26px}

  /* vertical rhythm: 60px between blocks, 96px band around the About-us heading (the desktop 1.6 : 1) */
  .au-col{gap:60px;margin-top:48px}
  .footer-wrap{margin-top:60px}                 /* benefits → CTA uses the same 60px block gap */
  .au-para{padding:36px 24px}

  /* contact email / phone: 40px tap rows instead of a 24px line */
  a.cv{display:block;padding:8px 0}

  /* benefit cards on the same 24px gutter as the gradboxes above, as on desktop */
  .benefits .row{width:100%}
  .benefits .c28{width:100%}
}