/* =====================================================================
   Process Cards — Figma "Switch to OneGold now…" 8373:28362.
   A white band, content locked to the 1240 content area. Three blocks
   stacked with a 40px vertical gap: centred header (Axiforma Medium 32/45
   H2 + Axiforma Regular 18/25 lead), a 3-up row of fixed-height (400px)
   cards (each a full-card background image with a caption pinned to the
   top), a small note, then a CTA block (caption + filled OneGold-blue
   button). Cards stack to a single column on mobile (<=767.98px).
   Tokens only; component-local --pc-* props for the few non-token values
   (the soft-blue card border/glow hexes mirror the Figma "card glow").
   ===================================================================== */

.process-cards {
  /* Component-local values (no token edits; mirrors the about-values --av-* pattern). */
  --pc-block-gap: 40px;          /* header -> card-row -> note -> CTA block       */
  --pc-row-gap: 20px;            /* between cards                                 */
  --pc-card-h: 400px;            /* fixed card height on desktop                  */
  --pc-card-h-mobile: 360px;     /* min card height on mobile                     */
  --pc-card-pad: 40px;           /* inner padding inside each card                */
  --pc-card-border: #99ccfa;     /* Figma soft-blue card border (== --soft-blue)  */
  --pc-card-glow: 0 0 8px rgba(153, 204, 250, 0.4); /* Figma soft-blue card glow  */
  --pc-cta-block-gap: 20px;      /* CTA caption -> button                         */
  --pc-cta-min-w: 160px;         /* button min-width                              */
  --pc-cta-tracking: 0.16px;     /* button letter-spacing                         */
  --pc-cta-hover: #006fd6;       /* darker OneGold blue on hover (repo button.css)*/
  --pc-lead-max: 800px;          /* lead paragraph measure                        */

  background: var(--gray-0);
  padding-block: var(--home-sec-pad-y);
}

/* ---- Inner stack locked to the 1240 content area, centred. ---- */
.process-cards__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pc-block-gap);
  text-align: center;
}

/* ---- Header: H2 + lead ---- */
.process-cards__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cb-gap);
  width: 100%;
}

/* H2 — Axiforma Medium 32/45 (OG Desktop H2). */
.process-cards__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  color: var(--gray-8);
  word-break: break-word;
}

/* Lead — Axiforma Regular 18/25 (RAW; may contain a <br>). */
.process-cards__lead {
  margin: 0;
  max-width: var(--pc-lead-max);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-25);
  color: var(--gray-8);
  word-break: break-word;
}

/* ---- 3-up card row ---- */
.process-cards__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pc-row-gap);
  width: 100%;
}

/* A single card: full-card background image behind a top-pinned caption. */
.process-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: var(--pc-card-h);
  padding: var(--pc-card-pad);
  border: 1px solid var(--pc-card-border);
  border-radius: var(--radius-8);
  box-shadow: var(--pc-card-glow);
  overflow: hidden;
}

/* Full-card background image (absolute, behind the caption). */
.process-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-8);
  pointer-events: none;
}

/* Caption — pinned to the TOP, above the image. Axiforma Regular/Book 20. */
.process-card__caption {
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-20);
  line-height: var(--lh-25);
  color: var(--gray-8);
  text-align: center;
  word-break: break-word;
}

/* ---- Small note (Axiforma Regular 16, centred, RAW). ---- */
.process-cards__note {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-25);
  color: var(--gray-8);
  word-break: break-word;
}

/* ---- CTA block: caption + filled blue button ---- */
.process-cards__cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pc-cta-block-gap);
  width: 100%;
}

/* CTA caption — Axiforma Regular 16. */
.process-cards__cta-caption {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-25);
  color: var(--gray-8);
  word-break: break-word;
}

/* Filled OneGold-blue button (matches the repo .btn--og look: og-blue fill,
   white Medium 16, 14/24 padding, radius 8, 0.16px tracking). Self-contained
   so the partial is CMS-mappable without the shared .btn classes. */
.process-cards__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pc-cta-min-w);
  padding: var(--btn-pad-y-lg) var(--btn-pad-x-lg);
  border-radius: var(--radius-8);
  background: var(--og-blue);
  color: var(--gray-0);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  line-height: 1;
  letter-spacing: var(--pc-cta-tracking);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.process-cards__cta:hover { background: var(--pc-cta-hover); }

/* ---- Tablet: wrap the 3-up row to a single column early enough to avoid
   cramped cards while keeping the desktop band metrics. ---- */
@media (max-width: 1023.98px) {
  .process-cards__row {
    grid-template-columns: 1fr;
  }
  .process-card {
    height: auto;
    min-height: var(--pc-card-h-mobile);
  }
}

/* ---- Mobile (M frame @767.98px): single column, auto-height cards, reduced
   band padding, H2 clamps down. ---- */
@media (max-width: 767.98px) {
  .process-cards {
    padding-inline: var(--pad-mobile);
    padding-block: 40px;
  }
  .process-cards__heading {
    font-size: clamp(28px, 6.4vw, var(--fs-32));
    line-height: 1.3;
  }
  .process-cards__lead {
    max-width: none;
  }
  .process-cards__row {
    grid-template-columns: 1fr;
    gap: var(--pc-row-gap);
  }
  .process-card {
    height: auto;
    min-height: var(--pc-card-h-mobile);
  }
  .process-cards__cta {
    white-space: normal;
  }
}