/* Global type + spacing system (client feedback #8 typography and #19 spacing, 2026-10).
   Loads last on every page (functions.php, end of pqm_page_assets()). It does not restyle components: it maps the
   fixed pixel sizes and paddings that some page stylesheets brought from the original HTML designs
   (service-design / service-sections / banking-design / enterprise-design / automation-design / about-design)
   onto the shared tokens in pin.css, so the same kind of text has the same size on every page and every size
   scales down on tablets and phones. Audit (computed styles, 35 templates x 3 widths) is in HANDOVER.md.

   Scale (desktop -> mobile):
     H1 page title  --fs-h1       41.6 -> 27px      H2 section  --fs-h2   40 -> 25px
     H3 large       --fs-title-l  28 -> 20px        H3 card     --fs-title-m  21 -> 17px    H3 small  --fs-title-s 17px
     Lead           --fs-lead     21 -> 17px        Body        --fs-body 17px              Card text --fs-card 15px
     Label          --fs-label    12px, weight 800, uppercase
   Spacing: sections --sec-pad 96 -> 70 (tablet) -> 56px; compact bands --sec-pad-band 72 -> 48px. */

:root {
  --fs-lead: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  --sec-pad: clamp(56px, 2.2rem + 4.2vw, 96px);
  --sec-pad-band: clamp(48px, 1.75rem + 3vw, 72px);
}

/* ---------- Headings ---------- */

/* H1: About pages used a larger hero title (58px) than every other page (41.6px). */
.about-design .phero__h1 {
  font-size: var(--fs-h1);
}

/* Large H3 (feature / panel titles) that were 31-34px, almost as big as the H2 above them. */
.sp-expertise-copy h3,
.svh-tile h3,
.service-page .cs-feature__body h3 {
  font-size: var(--fs-title-l);
}

/* Card H3 that were fixed 20-23px (and did not shrink on phones). */
.service-page .sp-case h3,
.sp-case__body h3,
.bank-team h3,
.bank-product h3,
.bank-standards h3,
.es-flow h3,
.es-eco article:not(.es-eco__lead) h3,
.es-platform-card > h3,
.sp-outcome h3,
.sp-benefit h3,
.ocb__title,
.bcard__title:not(.bcard__title--lg),
.au-row__head h3 {
  font-size: var(--fs-title-m);
}

/* Blog cards: same title size everywhere (service / industry pages made them 22px through ".service-page h3"). */
.postgrid .pcard__title {
  font-size: var(--fs-title-s);
}

/* FAQ questions: 21px on most pages, 19px on industry and enterprise pages. */
.bank-faq .faq__label,
.es-faq .faq__label {
  font-size: var(--fs-title-m);
}

/* ---------- Paragraphs ---------- */

/* Section intros and copy that were a fixed 18px: body size, like every other section intro. */
.sp-head > p,
.sp-copy > p,
.sp-expertise-copy > p,
.au-head p,
.bank-proof-copy > p,
.about-design .split__copy > p,
.service-page .faq__side > p,
.sp-cta .wrap > div > p {
  font-size: var(--fs-body);
}

/* Card text that was a fixed 16-17px: card size, like the blog and service cards. */
.service-page .sp-case p,
.sp-case__body p,
.sp-outcome p,
.sp-outcomes-photo p,
.sp-benefit p,
.bank-team p,
.bank-product p,
.bank-standards p,
.es-flow p,
.es-eco article:not(.es-eco__lead) p,
.au-row__head p,
.abx-office__addr {
  font-size: var(--fs-card);
}

/* Leads that were fixed and did not scale. */
.about-contact-lead {
  font-size: var(--fs-lead);
}

.au-note p {
  font-size: var(--fs-title-l);
}

/* ---------- Labels ---------- */

/* Section labels: one size and weight (were 11 or 12px, weight 700 or 800). */
.sp-label,
.service-page .sp-case .sp-label {
  font-size: var(--fs-label);
  font-weight: 800;
}

/* ---------- Section spacing ---------- */

/* One vertical rhythm for every section family (were 88, 96 and 120px on desktop, and 56 or 72px on phones).
   Sections that are deliberately joined to the one above (no top padding) or tight strips keep their spacing. */
.section:not(.cs-tight):not(.hero),
.sp-section:not(.bank-audience):not(.es-related),
.svp-sec,
.abx-sec,
.bank-proof,
.svcband {
  padding-block: var(--sec-pad);
}

.sp-section.bank-audience,
.sp-section.es-related {
  padding-bottom: var(--sec-pad);
}

/* Compact bands: stats, CTA and logo strip. */
.abx-stats,
.sp-cta,
.logos {
  padding-block: var(--sec-pad-band);
}

/* ---------- Pager on small screens ---------- */

/* A long result set (e.g. 7 search result pages) made the pager wider than a phone (horizontal scroll).
   Small screens: smaller buttons, and the page numbers wrap onto a second centred line instead of overflowing. */
.pager {
  flex-wrap: wrap;
}

.pager__nums {
  flex-wrap: wrap;
  justify-content: center;
  min-width: 0;
}

@media (max-width: 480px) {
  .pager,
  .pager__nums {
    gap: 6px;
  }
  .pager__btn,
  .pager__num {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
  }
}