/* ============================================================
 * PFCA Audience Cards — node 27:1298, 1568px content width
 *
 * ✓ marks a value read from the design. ⚖ marks a judgment call.
 *
 * SPECIFICITY: no card or button styles are defined here. The card is
 * .pfca-card.pfca-card--accent, the button .pfca-btn — both global.
 * This module owns the row, the overlapping face strip and the
 * heading's gradient treatment.
 *
 * RESPONSIVE: the design has no mobile artboards, so every breakpoint
 * below is a decision made in this file, per the standing delegation.
 * ============================================================ */

.pfca-audience-cards {
  padding-inline: clamp(16px, 4.63vw, 80px);
  padding-block: 65px;   /* half the design's 130px inter-section gap */
}

/* ⚠ The 1568px cap goes on __inner, the inset stays on the section.
 * Both on one element and box-sizing: border-box spends the padding
 * out of the max-width. See GUARDRAILS.md. */
.pfca-audience-cards__inner {
  max-width: 1568px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 80px;             /* ✓ design — heading to card row */
}

/* No font-size: H2/H3 sizes come from theme-overrides.css, driven by
 * the editor-configurable theme fields. A size here would fight the
 * theme editor and win, making the editor's control a lie. */
.pfca-audience-cards__heading {
  margin: 0;
  text-align: center;    /* ✓ design */
  text-wrap: balance;
}


/* ------------------------------------------------------------
 * The row — ✓ design: two cards, 20px gap.
 * 2 × 774 + 20 = 1568 exactly.
 * ------------------------------------------------------------ */

.pfca-audience-cards__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;             /* ✓ design */
  align-items: stretch;
}

/* ⚠ A list that is a LAYOUT opts out of the theme's prose list rule.
 * :where(li + li) { margin-top: 0.4em } lands on every item but the
 * first — in a row that is a stagger, not a nudge. Found on
 * pfca-story-grid, shipped, three cards one out of line. */
:where(.pfca-audience-cards__grid) li { margin-top: 0; }

.pfca-audience-cards__item {
  /* Equal columns. Basis 0 rather than auto so the two divide the row
   * evenly regardless of which card's heading is longer. */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

.pfca-audience-cards__card {
  flex: 1 1 auto;
  gap: 40px;             /* ✓ design, where the base card's gap is 20 */
  align-items: flex-start;
}


/* ------------------------------------------------------------
 * The face strip
 *
 * ✓ design: five 60px circles overlapping by 20px. Done with a
 * negative margin on every face but the last rather than by
 * positioning, so the strip is exactly as wide as its content and
 * stays correct with four faces or six.
 * ------------------------------------------------------------ */

.pfca-audience-cards__faces {
  display: flex;
  align-items: center;
}

.pfca-audience-cards__face {
  flex: 0 0 auto;
  width: 60px;           /* ✓ design */
  height: 60px;          /* ✓ design */
  border-radius: 50%;
  object-fit: cover;

  /* ⚖ The design's photos are already circular cut-outs, so they carry
   * no ring. A white ring is the usual way to separate overlapping
   * avatars and is deliberately NOT added — on the white card ground
   * it would be invisible anyway, and on the green-bordered card it
   * would read as a second border. */
}

/* ✓ design: −20px of overlap, applied to every face except the last
 * so the strip does not end with a phantom 20px of negative space. */
.pfca-audience-cards__face:not(:last-child) { margin-right: -20px; }


/* ------------------------------------------------------------
 * The card heading — ✓ design: H3, 36/1.1, Bold, Dark Navy
 * ------------------------------------------------------------ */

.pfca-audience-cards__card-heading {
  margin: 0;
  font-family: var(--pfca-font-display);
  font-size: var(--pfca-text-3xl);           /* 36px — ✓ */
  line-height: var(--pfca-leading-heading);  /* 1.1 — ✓ */
  font-weight: var(--pfca-weight-bold);      /* ✓ */
  color: var(--pfca-text-default);           /* ✓ Dark Navy */
}

/* ✓ design: the picked-out words run left-to-right from Brand Navy to
 * Brand Blue, clipped to the glyphs.
 *
 * ⚠ background-clip: text makes the text itself transparent, so if the
 * gradient fails to paint the words VANISH — a worse failure than a
 * wrong colour. Two guards: the shorthand is written so `color` is set
 * to the navy FIRST and only then overridden by transparent, which is
 * what a browser without -webkit-background-clip renders; and the
 * declaration is scoped to a span that always has real text in it.
 *
 * NOT --pfca-gradient-accent: that token is the green→blue tile
 * gradient at 130.5°. This is navy→blue at 90°, a different gradient
 * that happens to share one stop. Collapsing them would be wrong. */
.pfca-audience-cards__accent {
  color: var(--pfca-navy);
  background-image: linear-gradient(90deg, var(--pfca-navy) 0%, var(--pfca-sky) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* If the browser cannot clip a background to text, leave the words in
 * solid navy rather than transparent. @supports is the only way to ask
 * the question; the property above is harmless on its own. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .pfca-audience-cards__accent {
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* Positioning only — .pfca-btn owns how the button looks. */
.pfca-audience-cards__action { flex: 0 0 auto; }


/* ------------------------------------------------------------
 * ⚖ Responsive — all of this is a decision, not a design value
 * ------------------------------------------------------------ */

@media (max-width: 1023px) {
  .pfca-audience-cards { padding-block: 48px; }
  .pfca-audience-cards__inner { gap: 48px; }
  .pfca-audience-cards__card { gap: 32px; }
}

/* Stacks at 899px rather than the theme's usual 767px, matching
 * pfca-hero: these are two wide cards carrying a 36px heading each,
 * and at a real iPad-portrait viewport (768px) a two-column row leaves
 * roughly 350px per card — narrower than the heading's own comfortable
 * measure, and the point at which the layout was already the worst
 * case rather than a compromise. */
@media (max-width: 899px) {
  .pfca-audience-cards__grid { flex-direction: column; }
  .pfca-audience-cards__item { flex: 1 1 auto; }
}

@media (max-width: 767px) {
  .pfca-audience-cards { padding-block: 40px; }
  .pfca-audience-cards__inner { gap: 32px; }
  .pfca-audience-cards__card { gap: 24px; }

  /* ⚖ The 36px card heading is the largest thing in the stack on a
   * phone and outweighs the H2 above it. Stepped to the design's H4
   * so the section still reads heading-then-cards. */
  .pfca-audience-cards__card-heading { font-size: var(--pfca-text-2xl); }
}