/* accreditations component — GENERATED by tools/make-fixtures.py --emit-components
   from the same source ranges as widgets/accreditations/fixture.html
   (../../site/css/shared-responsive.css + ../../site/css/blocks-responsive.css + build/css/responsive.css via fixtures.config.json). Byte-identical rules are
   the contract: edit the stage-2 source and regenerate, never this file. */
/* == accreditations == STAGE 2. The band is 691 tall: 101 of white page above the centred H2, then the row of
   six 171x146 badge tiles, the 1440x1 gradient hairline and the contact/pitch row (Frame 198 [80,6335
   1440x490] with 100 of white below it). Mobile-first: the tiles wrap 2 / 3 / 6 per row (600 / 1200), the
   hairline is the container's full width at every size, and the foot row stacks below 900. From 1500 the
   stage-1 composition returns, so at 1600 this reproduces stage 1 exactly. Sizes are clamp(MIN, fluid, MAX)
   with MAX the stage-1 value, reached AT 1600 from a 390 phone (tools/fluid.py --minw 390). */
.s-accreditations {
  /* the design stacks the three parts with 50 / 49 / 50; ONE token carries them below the composition
     width (the hairline's 1px difference is a Figma row offset, pinned exactly from 1500) */
  --acc-gap: clamp(30px, 1.65289vw + 23.6037px, 50px);          /* 50 at 1600 */
  --acc-foot-gap: clamp(40px, 12.1488vw - 7.33017px, 187px);    /* the foot row's H gap 187 at 1600 */
  padding-top: clamp(50px, 4.21488vw + 33.612px, 101px);        /* 101 at 1600; on the SECTION, not the first child (a margin there collapses through and moves the page) */
  padding-bottom: var(--gap-section-lg);                        /* the band's 100 of white below the frame — stage 1 gets it from height: 691 */
}

/* Frame 193 12640:316 [212,6335 1176x248]: the title column, centred in the container. */
.accreditations__title { max-width: 1176px; margin: 0 auto; text-align: center; }

/* Frame 162 12640:318 [212,6437 1176x146]: six 171x146 tiles, H gap 30. A grid of capped tracks — the
   tiles hold 171 wherever the column is wide enough and shrink below it on a narrow phone (2 x 171 + 30
   needs a 372 column; a 390 phone has 350), which no fixed width can do. Centred as a group. */
.accreditations__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 171px));
  justify-content: center;
  gap: var(--gap-30);
  margin-top: var(--acc-gap);
}
/* the per-tile paddings (20/23 · 20/15 · 20/20/14 · 20/50/20/49 · 20/42) centre the BADGE ART inside the
   1600 tile; on a shrunk tile they would squash the art (fira's 99 of side padding on a 165 tile leaves
   66 for a 72 badge), so below the composition width every tile takes one symmetric pad and the stack
   centres itself. The design's pairs return with the 171 tiles at 1500. */
/* One tile box at every width. The file gives each tile its own side padding (23 / 15 / 20 / 50+49 / 42) —
   the designer centring each badge's ART by hand; a centred stack in one symmetric pad lands the same pixels
   (only fira's 50/49 becomes 49.5). The bottom pad is the two-line PEFC tile's 14 and min-height holds the
   design's 146 for the five shorter stacks. */
.accreditations__tile { display: flex; flex: 1 1 0; max-width: 171px; min-height: 146px; padding: 20px 12px 14px; background: var(--c-grey-100); }
.accreditations__stack { display: flex; flex-direction: column; align-items: center; gap: 15px; width: 100%; }
.accreditations__tile--pefc .accreditations__stack { gap: 12px; }   /* the two-line caption's frame uses 12 (12640:327) */
.accreditations__badge { flex: none; }
/* Figma fill filters on the two ISO badges: saturation -1, exposure -0.12 (the source mark is blue; the
   design shows it grey). saturate(1+s) / brightness(1+e) — the mapping the export assembler measured. */
.accreditations__badge--desaturated { filter: saturate(0) brightness(0.88); }
/* the captions are nowrap in stage 1 because each 1600 tile is one character wider than its longest
   caption; on a shrunk tile that would overflow, so below 1500 they wrap and the tile row grows (the
   tiles stretch to the tallest — min-height, not height). */
.accreditations__caption { width: 100%; text-align: center; }
.accreditations__caption span { display: block; }   /* the PEFC caption's two Figma lines, each its own box */

/* LINE 12640:342 [80,6633 1440x0], a 1px GRADIENT_LINEAR stroke: gold to 78.5%, then a fade to white; the
   0-height Figma line paints on row y-1, 49 below the tile row. A CSS gradient with the design's stops at
   every width (developer ticket 8) — the exported svg it replaced also scaled down to a sub-pixel stroke in
   any box narrower than its 1440 viewBox. */
.accreditations__rule {
  display: block; width: 100%; height: 1px; margin-top: var(--acc-gap);
  background: linear-gradient(90deg, var(--c-gold) 78.5095%, var(--c-white) 100%);
}

/* Frame 197 12640:343 [80,6683 1440x142], H gap 187: 277 contact block + 976 pitch. Stacked below 900. */
.accreditations__foot { display: flex; flex-direction: column; gap: var(--acc-gap); margin-top: var(--acc-gap); }

/* Frame 196 12640:344 [80,6683 277x117], V gap 10 */
.accreditations__contact { display: flex; flex-direction: column; gap: 10px; width: 100%; }
/* Frame 166 12640:346 [80,6724 277x76], V gap 14; both rows are 31 tall with the icon centred on the line */
.accreditations__rows { display: flex; flex-direction: column; gap: 14px; color: var(--c-bronze); font-weight: 300; }
.accreditations__row {
  display: flex; align-items: center;
  overflow-wrap: anywhere;   /* the mail address is one unbreakable 250px word and the 320 column is 280 wide */
  /* tap target: the hit box is 44 tall and the margin pulls the FLOW box back to the design's 31, so the
     icon and the line sit exactly where they do at 1600 (padding could not do it — the body line box is
     itself fluid, 27 on a phone, so a fixed 13 of padding measured 40). The two 44 boxes end up 1px
     apart, so neither buries the other. */
  min-height: 44px; margin-block: -6.5px;
}
.accreditations__row--phone { gap: 11px; }
.accreditations__row--mail  { gap: 13px; }
.accreditations__icon { flex: none; }

/* Frame 195 12640:353 [544,6683 976x142], V gap 30 */
.accreditations__pitch { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-30); width: 100%; }
.accreditations__copy {
  width: 100%;             /* 976 inside the 1600 pitch */
  white-space: pre-wrap;   /* the design's double spaces are real ("your  specification") — the source paragraph is on ONE line so no indentation leaks in */
}

@media (min-width: 600px) {
  .accreditations__tiles { grid-template-columns: repeat(3, minmax(0, 171px)); }
  /* the mail row fits the column from here; below it it breaks anywhere rather than overflow */
  .accreditations__row { overflow-wrap: normal; }
}

@media (min-width: 900px) {
  .accreditations__foot { flex-direction: row; align-items: flex-start; gap: var(--acc-foot-gap); }
  .accreditations__contact { flex: none; width: 277px; }
  .accreditations__pitch { flex: 1 1 0; min-width: 0; }   /* 1440 - 277 - 187 = 976 at 1600 */
}

@media (min-width: 1024px) {
  /* the 44px tap-target device is a touch-width one: above it the row is its own single body line (the
     design's 31) and grows if a longer address wraps — a height here held the box at 31 and printed the
     second line over the row below (tools/stress.mjs) */
  .accreditations__row { min-height: 0; margin-block: 0; }
}

@media (min-width: 1200px) {
  .accreditations__tiles { grid-template-columns: repeat(6, minmax(0, 171px)); }
  /* Chrome's centred run carries the TRAILING letter-space in its advance width and Figma's does not, so
     the glyphs sat 4px left of the reference; one letter-space of indent shifts a centred line by half of
     it, back onto Figma's x (0.2em = the stage-1 7px at the 1600 h2 size). Only from the desktop
     composition: text-indent moves the FIRST line only, which is wrong once the title wraps. */
  .accreditations__title { text-indent: var(--ls-title); }
}

@media (min-width: 1600px) {
  /* the stage-1 composition: the pinned boxes and the design's own paddings */
  .s-accreditations { padding-top: 101px; padding-bottom: 100px; }     /* 101 above Frame 198 and 100 below its 490 = the 691 band */
  .accreditations__title { max-width: 1176px; }
  .accreditations__tiles { margin-top: 50px; grid-template-columns: repeat(6, minmax(0, 171px)); gap: 30px; }   /* 6 × 171 + 5 × 30 = 1176, centred in the 1440 */
  .accreditations__rule { margin-top: 49px; }
  .accreditations__foot { margin-top: 50px; }
  .accreditations__pitch { gap: 30px; }
}