/* ============================================================
   About Us + company figures — German Power Solutions

   Two bands:
     .about   heading, body and a call to action over artwork
     .stats   five figures on the muted ground

   COLOUR — computed from the literal token values in tokens.css
   with the WCAG 2.x relative-luminance formula.

   .about — white text over the scrim. The scrim is the whole point
   of the band's colour design, so the figure below is the worst
   case rather than the typical one: compositing rgba(17,17,17,A)
   over a *pure white* image, which is the brightest thing a client
   could ever upload here.

       alpha .86  composite #323232   white text  12.76:1  AAA
       alpha .74  composite #4f4f4f   white text   8.21:1  AAA

   The gradient runs .86 -> .74, so every pixel of copy in this band
   is at worst 8.21:1 no matter what image is behind it. That is the
   reason the scrim exists: contrast here cannot be broken by
   someone in wp-admin choosing a bright photograph.

   .stats — on --grey-100 #f2f2f2:

       --gps-black  #111111  16.87:1  AAA   the figures
       --grey-600   #5a5f66   5.75:1  AA    labels and standfirst
       --gps-red    #dd0000   4.60:1        icons only; non-text
                                            needs 3:1, and this is
                                            comfortably over it

   NOT USED: --gps-yellow on this ground is 1.49:1 against white and
   barely better against #f2f2f2. It is forbidden for text by
   tokens.css and it is not used for the icons either -- red is the
   palette's accent for light grounds, which is why the header's
   contact icons are red and the footer's are yellow.
   ============================================================ */

/* ---------- Band A: About ----------
   One grid cell, three layers stacked in it: artwork, scrim,
   content. grid-area:1/1 on all three is the same overlay idiom
   parts.css uses for the promo cards -- no absolute positioning, so
   the tallest layer (always the content) sets the band's height and
   nothing has to be told how tall the band is. */
.about{
  display:grid;
  isolation:isolate;          /* keeps the scrim's stacking local */
  background:var(--gps-black);/* what shows if the artwork 404s */
}

.about__bg{
  grid-area:1/1;
  align-self:stretch;
  /* width AND height are both load-bearing. align-self:stretch gives
     this box a definite block size; without an explicit width an
     intrinsically-sized replaced element would resolve its inline
     size from that height and the artwork would grow wider than the
     band on any page where the copy is long. */
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  /* The illustration is drawn dark on purpose, but a client-uploaded
     photograph will not be. The scrim below does the contrast work;
     this only stops a very light image reading as a blown-out. */
  display:block;
}

/* The scrim. A pseudo-element rather than a div so the markup carries
   no element that exists purely to be a colour. */
.about::after{
  content:"";
  grid-area:1/1;
  background:linear-gradient(180deg,
    rgba(17,17,17,.86) 0%,
    rgba(17,17,17,.78) 55%,
    rgba(17,17,17,.74) 100%);
}

/* z-index, not source order: the scrim is a ::after and would
   otherwise paint over the content it exists to make readable. */
.about__inner{
  grid-area:1/1;
  z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-5);
  padding-block:clamp(var(--sp-9),8vw,7rem);
  text-align:center;
}

.about__title{
  margin:0;
  font-family:var(--font-head);
  font-size:clamp(1.75rem,3.1vw,2.25rem);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-tight);
  line-height:var(--lh-display);
  color:var(--gps-white);
  text-wrap:balance;
}

/* 68ch, not the 46ch the footer blurb uses. This paragraph is centred,
   and centred text is read by returning to a ragged left edge every
   line -- a narrow measure makes that return happen too often. 68ch
   at --fs-base keeps it to roughly six lines on a desktop viewport. */
.about__body{
  margin:0;
  max-width:68ch;
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--gps-white);
  text-wrap:pretty;
}

.about__cta{margin-top:var(--sp-2)}
.about__cta .gps-ico{
  width:1.125rem;height:1.125rem;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--dur) var(--ease);
}
.about__cta:hover .gps-ico,
.about__cta:focus-visible .gps-ico{transform:translateX(.25rem)}

/* ---------- Band B: figures ---------- */
.stats{
  background:var(--grey-100);
  padding-block:clamp(var(--sp-7),4.5vw,var(--sp-9));
}

.stats__intro{
  margin:0 auto clamp(var(--sp-6),3.2vw,var(--sp-8));
  max-width:62ch;
  text-align:center;
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--grey-600);
  text-wrap:pretty;
}

/* auto-fit rather than repeat(5,...). The client controls how many
   figures exist, and a hard five would leave dead tracks at four and
   overflow at six. auto-fit collapses the empty tracks, so five
   figures span the full container at every desktop width.

   7rem, not 9.5rem, and the difference is one orphaned row. The
   container is 692px at 768px wide; with four 24px gaps that leaves
   596px of track. A 9.5rem (152px) floor fits only three of those
   plus change, so the grid resolved to four columns and the fifth
   figure dropped alone onto a second row. 7rem is 112px and
   596/5 = 119px, so all five sit on one line from 48rem up.

   min(100%,7rem) keeps the floor from ever exceeding the container --
   the grid half of the no-horizontal-overflow rule. */
.stats__list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,7rem),1fr));
  gap:var(--sp-7) var(--sp-5);
  margin:0;padding:0;list-style:none;
}

.stat{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-2);
  min-width:0;
  text-align:center;
}

.stat__ico{
  width:2.5rem;height:2.5rem;
  margin-bottom:var(--sp-1);
  fill:none;stroke:var(--gps-red);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}

/* --fw-black and tight tracking: this is the one number on the page
   that is meant to be read at a glance from across the room. */
.stat__value{
  font-family:var(--font-head);
  font-size:clamp(1.75rem,3vw,2.25rem);
  font-weight:var(--fw-black);
  letter-spacing:var(--tr-tight);
  line-height:1;
  color:var(--gps-black);
}

.stat__label{
  font-size:var(--fs-sm);
  font-weight:var(--fw-med);
  line-height:var(--lh-head);
  color:var(--grey-600);
  overflow-wrap:anywhere;
}

/* ============================================================
   Breakpoints — the canonical ladder from base.css:
   (width < 64rem) / (width < 48rem) / (width < 30rem).
   ============================================================ */

/* Tablet. The band gets shorter because a 7rem block padding that
   reads as generous at 1440 reads as an empty screen at 900. */
@media (width < 64rem){
  .about__inner{padding-block:clamp(var(--sp-8),7vw,var(--sp-10))}
}

/* Phones. Five across is 64px a column at 375 -- narrower than
   "450+" is wide. Two up, which lands 2/2/1. */
@media (width < 48rem){
  .stats__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about__inner{
    padding-block:var(--sp-9);
    gap:var(--sp-4);
  }
  /* The artwork is a 1920x600 landscape. Cropped to a portrait-ish
     box it shows a strip of sky and nothing else, so the band gets a
     floor that keeps a readable slice of it behind the copy. */
  .about__bg{min-height:100%}
}

/* Smallest phones only. 22.5rem (360px) rather than the ladder's
   30rem rung, which is the same threshold header.css uses for its own
   narrowest case.

   At 375 two columns give 148px each and every label here fits on one
   line in that -- "Countries Served" is the longest at roughly 118px.
   Stacking them there would have cost five full rows of scroll for no
   gain. Below 360 the column drops to about 120px and the longest
   label starts wrapping, so one per row is the cheaper arrangement. */
@media (width <= 22.5rem){
  .stats__list{
    grid-template-columns:minmax(0,1fr);
    gap:var(--sp-6);
  }
}