/* About page — this page's own sheet, and only the rules the shared layer does
   not already carry. The palette, the spacing and the type come from
   assets/css/tokens.css, assets/css/pages.css, assets/css/sections.css and
   style.css; nothing is redefined here. This sheet is enqueued site-wide
   (functions.php), so every rule is scoped to an .about-* name that only
   page-about.php renders.

   The page itself is built from the shared parts — .section, .section__head,
   .split, .panel, .card-grid, .media-frame, .icon-grid, .steps, .jobs-list and
   .note-line — and adds only what those parts do not cover: the banner
   photograph filling its panel, the large factory photograph, the factory
   facts, the step photographs, the six capabilities on the navy band, and the
   column count each card row stands on. */

/* ---------------------------------------------------------------- Banner -- */
/* The page opens on a photograph of the factory rather than on a product
   cut-out, so the banner picture fills its panel instead of sitting inside it
   with the pale ground showing around it, and the label stays under the
   picture. Scoped to this page's own <main>: the shared hero is fitted the
   contained way on every other page, and this sheet is enqueued site-wide. */
.site-main--about .page-hero__photo{height:clamp(260px,24vw,340px);padding:0;object-fit:cover}

/* ------------------------------------------------- The factory photograph -- */
/* One wide picture at the top of the manufacturing section, with its line
   underneath. The frame is the shared .media-frame, so the picture keeps the
   site's rounded corner and pale ground wherever it lands. */
.about-factory{margin:0 0 clamp(30px,4.2vw,48px)}
.about-factory .figure__caption{margin-top:12px}

/* ------------------------------------------------------- Factory facts -- */
/* The facts a wholesale order is planned on, as label-and-line rows rather than
   as figures: the site publishes no capacity, headcount or line count, so this
   block states what is agreed with an order instead of a headline number. */
.about-manufacturing{margin-top:clamp(8px,1.6vw,16px);align-items:start}
.about-facts{margin:26px 0 0;padding:0}
.about-facts__row{
  display:grid;
  grid-template-columns:minmax(0,168px) minmax(0,1fr);
  gap:4px 24px;
  padding:18px 0;
  border-top:1px solid var(--color-line);
}
.about-facts__row:first-child{padding-top:0;border-top:0}
.about-facts dt{margin:0;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--color-muted)}
.about-facts dd{margin:0;font-size:15px;line-height:1.55;color:var(--color-text)}

/* What the capability changes for the buyer: the same .icon-grid parts, read as
   one column beside the facts rather than as a row under them. */
.about-wholesale{grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.6vw,28px)}

/* --------------------------------------------------------- Product cards -- */
/* Three cards to a row, stated rather than left to auto-fit: the shared
   .card-grid measures its columns from a minimum width, which at this row's
   width would squeeze three cards into a tablet instead of folding to two.
   The picture area is the card's own pale block, as the Products hub draws it:
   the .panel already carries the border the card is read by. */
.about-products,
.about-partners{grid-template-columns:repeat(3,minmax(0,1fr))}
.about-products .media-frame,
.about-partners .media-frame{margin:0 0 18px;border:0;background:var(--color-pale)}
.about-products .panel__title,
.about-partners .panel__title{margin-top:0}

/* ------------------------------------------------------- Quality control -- */
/* The four steps use the shared .steps row, and each one carries the photograph
   of the area it is carried out in, so the block reads as the workshop rather
   than as a list of procedures.
   The four steps stand in one row, so everything in them lines up: the number
   chip on one line, the title on two — the longest of the four titles needs
   two lines at this width — and then the photograph, whose top edge is the
   same across the row because the block above it is the same height in every
   column. Below the tablet width the titles have room to be one line, so the
   reserved second line is given back to them. */
.about-quality .step{display:flex;flex-direction:column}
.about-quality .step h3{margin-bottom:18px;min-height:2.3em}
.about-step__shot{margin:0 0 16px}

/* ------------------------------------------- Engineering & support (navy) -- */
/* Six areas as two rows of three: left to auto-fit, the shared .icon-grid would
   fit four of them here and leave the last two alone under the row. */
.about-capabilities{grid-template-columns:repeat(3,minmax(0,1fr))}
/* The two shared parts on this band take the band's own colours: the icon tiles
   and the three support links would otherwise be pale blue on navy. */
.about-support .icon-grid__icon{background:rgba(255,255,255,.12);color:var(--color-sun)}
.about-support .icon-grid__title{color:#fff}
.about-support .icon-grid__note{color:#d2deea}
.about-support__handover{margin-top:clamp(36px,5vw,60px)}
.about-support .split__body h3{color:#fff}
.about-support .split__body > p{margin:0}
/* Three links in a column rather than three abreast: they sit in the copy half
   of the row, where three tiles would squeeze their own labels. */
.about-support .jobs-list{margin-top:26px;grid-template-columns:minmax(0,1fr)}
.about-support .jobs-list__item{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24);color:#fff}
.about-support .jobs-list__item .arrow{color:var(--color-sun)}
.about-support .jobs-list__item:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* -------------------------------------------------- Conversion routes -- */
.about-routes{gap:24px}
.about-route .card__meta{margin-bottom:12px}
.about-route .panel__note{margin-top:14px;font-size:15px}
/* One button's width for both routes: the two cards are a pair, and the two
   labels are not the same length, so the buttons take the card's own width and
   end on the same line rather than each at its own label's size. */
.about-route .panel__foot .btn{width:100%}

/* ---------------------------------------------------------- Responsive -- */
/* The rows fold the way the rest of the site folds them: three across on a
   desktop, two on a tablet, one on a phone. */
@media(max-width:1040px){
  .about-products,
  .about-partners{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
  .about-facts__row{grid-template-columns:minmax(0,1fr);gap:6px}
  /* Two steps to a row here, where each title fits on one line. */
  .about-quality .step h3{min-height:0}
  .about-capabilities{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .about-manufacturing{gap:32px}
  .about-quality .step h3{margin-bottom:14px}
  .about-support__handover{gap:32px}
}
@media(max-width:680px){
  .about-products,
  .about-partners{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:620px){
  .about-capabilities{grid-template-columns:minmax(0,1fr)}
}