/* A capability record's own page (single-capability.php) — the first screen with its
   two fact boxes, three step blocks to a row with the step's photograph beside it,
   a photograph beside each product, and the enquiry closing the page.
   Enqueued by functions.php for the whole type, so every capability record loads it.
   Class prefix: .capd-. Colours, type, radii and the shared pattern vocabulary come
   from assets/css/tokens.css and style.css; nothing here restates either. */

/* ---------- First screen: the two facts, a small box each -------------------
   Execution model and Capability group sit under the first screen's words, one
   framed box each so the two are told apart at a glance. The site's reference bar
   (.refbar in style.css) already carries this vocabulary, but it is built as one
   strip of hairline-separated cells for a dark band; these two are separate boxes
   on the white ground, so the frame, the ground and the gap are set here. They are
   children of the hero's text column, so the shared staggered entrance covers them
   with the words above them. */
.capd-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;margin-top:clamp(24px,2.8vw,32px)}
.capd-fact{padding:13px 15px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--off)}
.capd-fact__k{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.capd-fact__v{margin:6px 0 0;font-family:var(--display);font-size:17px;font-weight:600;
  line-height:1.2;color:var(--charcoal)}

/* ---------- Process: one block per step, three to a row --------------------
   Each block holds two regions: number and title on one line with the
   explanation under them on the left, the step's square photograph on the right,
   held at the top of the block so the square reads as the step's own frame. Three
   to a row, with the number set into the title's line. The photograph is the
   record's own evidence image where one exists and the measured slot
   (components/media.php) where it does not. */
.capd-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.capd-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,36%);
  gap:clamp(14px,1.6vw,22px);min-width:0;padding:clamp(16px,1.8vw,24px);
  border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.capd-step__b{min-width:0}
.capd-step__m{display:flex;align-items:flex-start;min-width:0}

/* Number and title on one line: the number keeps the process-row voice (.steps .n
   in style.css) but sits in the heading's line rather than above it, aligned on
   the title's baseline. */
.capd-step__h{display:flex;align-items:baseline;gap:9px;margin:0 0 9px}
.capd-step__n{flex:none;font-family:var(--display);font-size:13px;font-weight:600;
  letter-spacing:.14em;color:var(--accent)}
.capd-step__h h3{margin:0;font-size:16.5px;line-height:1.25}
.capd-step__b p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
/* The frame is the square .r-11 measures, driven by this column's width, and it
   is not stretched to the block's height: the shape on the page is the shape the
   step's photograph has to be taken as. */
.capd-step__m .fig{width:100%}

/* ---------- Products: words left, the product's own photo right ------------- */
.capd-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.capd-prod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40%);
  gap:clamp(14px,1.6vw,20px);min-width:0;padding:clamp(16px,1.8vw,22px);
  border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.capd-prod__b{display:flex;flex-direction:column;gap:8px;min-width:0}
.capd-prod__b h3{margin:0;font-size:16px}
.capd-prod__b h3 a{color:var(--charcoal)}
.capd-prod__b h3 a:hover{color:var(--accent)}
.capd-prod__b p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.capd-prod__m{display:flex;min-width:0}
.capd-prod__m .fig{width:100%}
.capd-prod__m .ph{height:100%;min-height:clamp(110px,10vw,150px)}
/* The route to the whole Products page, centred under the list: the shared
   text-link voice (.tlink, style.css), given the room a list closing needs. */
.capd-more{margin:clamp(20px,2.2vw,28px) 0 0;text-align:center}

/* ---------- Closing band: the enquiry in the middle -------------------------
   One narrow centred column: the heading and its one line over the short field
   set of components/enquiry-form.php, which keeps its own card and its own
   left-aligned field labels. The column is narrower than .sec-head's own 74ch
   measure, which is why the head is re-measured here rather than in style.css. */
.capd-enquiry{max-width:660px;margin:0 auto;text-align:center}
.capd-enquiry .sec-head{max-width:none;margin:0 0 clamp(22px,2.6vw,30px);
  display:flex;flex-direction:column;align-items:center}
.capd-enquiry .sec-head .lede{max-width:52ch}
.capd-enquiry .enquiry-form{text-align:left}

/* ---------- Narrower screens ----------------------------------------------- */
@media (max-width:1100px){
  .capd-steps,.capd-prods{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .capd-step,.capd-prod{grid-template-columns:minmax(0,1fr) minmax(0,34%)}
}
@media (max-width:700px){
  .capd-steps,.capd-prods{grid-template-columns:1fr}
}
@media (max-width:560px){
  .capd-step,.capd-prod{grid-template-columns:minmax(0,1fr) minmax(0,38%);
    gap:13px;padding:15px}
  .capd-step__h{gap:7px;margin-bottom:7px}
  .capd-step__n{font-size:12px;letter-spacing:.12em}
  .capd-step__h h3{font-size:15.5px}
  .capd-step__b p,.capd-prod__b p{font-size:13.5px;line-height:1.55}
  .capd-prod__m .ph{min-height:96px}
}