/* Request a Quote — page-local composition.
   Enqueued by functions.php only on /request-a-quote/
   Class prefix: .rfq-. Colours, type and radii come from assets/css/tokens.css and
   the shared pattern vocabulary from style.css; nothing here restates either.

   The page has two compositions of its own: the first screen, where the enquiry
   sits beside the words instead of under them, and the four post-submission steps,
   which are blocks rather than process rows. */

/* ---------- The three bands, told apart by their ground --------------------
   The first screen keeps the site's white; the four steps sit on the pale accent
   tint so their white blocks read as blocks instead of as a second white band;
   the two routes keep the neutral light band the section already carried. */
.rfq-tint{background:var(--accent-t)}

/* ---------- First screen: the enquiry beside the words ---------------------
   components/page-hero.php lays the two columns out on .hero__grid and centres
   them. Here the second column is the full RFQ form and is the taller of the two,
   so both columns start at the top, and the form takes the wider share because
   its two-column field grid has to fit across it. */
.hero--split .hero__grid{align-items:start;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}

/* ---------- 01 · The four steps, as four blocks in two rows of two ---------
   Each block is a bordered card holding two regions: number, title and
   explanation on the left, the photograph that belongs to the step on the right.
   The photograph fills the height beside the words, so the two regions meet
   instead of a short frame sitting in a tall card. The size the slot wants is
   printed inside it until the shot exists (components/media.php). */
.rfq-steps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.rfq-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40%);
  gap:clamp(16px,2vw,26px);min-width:0;padding:clamp(18px,2.2vw,26px);
  border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.rfq-step__b{min-width:0}
.rfq-step__m{display:flex;min-width:0}
.rfq-step__n{margin:0 0 8px;font-family:var(--display);font-size:13px;font-weight:600;
  letter-spacing:.14em;color:var(--accent)}
.rfq-step__b h3{margin:0 0 8px;font-size:16.5px}
.rfq-step__b p:not(.rfq-step__n){margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.rfq-step__m .fig{width:100%}
.rfq-step__m .ph{height:100%;min-height:clamp(140px,13vw,200px)}

/* ---------- Narrower screens: the blocks stack, each still two regions ----- */
@media (max-width:1024px){
  .rfq-step{grid-template-columns:minmax(0,1fr) minmax(0,36%)}
}
@media (max-width:860px){
  .rfq-steps{grid-template-columns:1fr}
}
@media (max-width:560px){
  .rfq-step{grid-template-columns:minmax(0,1fr) minmax(0,38%);gap:14px;padding:16px}
  .rfq-step__n{margin-bottom:6px;font-size:12px;letter-spacing:.12em}
  .rfq-step__b h3{font-size:15.5px}
  .rfq-step__b p:not(.rfq-step__n){font-size:13.5px;line-height:1.55}
}