/* ═════════════════════════════════════════════════════════════════
   PRODUCT — CARDS & PAYMENTS (shared)

   One stylesheet powers Cards & Payments product pages. Currently:
     - pages/page-business-cards-payments.php  (Business / BCP)

   Architecture mirrors product-opening.css:
     - Theme variants (.pc-theme-business / .pc-theme-consumer) scope
       --accent so swapping the wrapper modifier flips the page accent.
     - Class naming: every page-scoped hook uses the `.pc-*` prefix
       (pc = product-cards). Components reused from
       /assets/css/components/ keep their own selectors.

   Section inventory (in source order, see /template-parts/product-cards.php):
   - Hero overlay + proof strip   (.pc-hero)
   - Product band                 (.pc-band)
   - Card capabilities 2×2        (.pc-caps)
   - Agentic orchestration        (component: po-agents — shared)
   - FAQ                          (component: faq — shared)
   - Final CTA accent band        (.pc-finalcta)
   ═════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   THEME VARIANTS — scope --accent tokens once at the page root.
   ───────────────────────────────────────────────────────────────── */
.product-cards.pc-theme-business {
	--accent:      var(--green);
	--accent-rgb:  11, 102, 35;
	--accent-tint: rgba(11, 102, 35, 0.16);
}
.product-cards.pc-theme-consumer {
	--accent:      var(--orange);
	--accent-rgb:  255, 79, 0;
	--accent-tint: rgba(255, 79, 0, 0.16);
}


/* ─────────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────────── */
.pc-hero .pc-bg-overlay {
	position: absolute;
	inset: 0;
	mix-blend-mode: screen;
	pointer-events: none;
}


/* The product band — full-bleed accent stripe with a white headline
   and a lede paragraph — is rendered via the shared head-band
   component (/template-parts/components/head-band.php +
   /assets/css/components/head-band.css). The `.pc-band` modifier
   class is reserved here for any page-specific tweaks that surface
   later, but the component owns all the visual styling. */


/* ─────────────────────────────────────────────────────────────────
   CARD CAPABILITIES — 2×2 light-grey cards
   Each card: title (42px medium) + body of bold-labeled bullet
   sentences. Sits on cream so the cards' #EEEEED reads as a soft
   separation rather than a heavy panel.
   ───────────────────────────────────────────────────────────────── */
.pc-caps {
	background: var(--cream);
}

.pc-caps-head {
	max-width: 1280px;
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 1.8vw, 32px);
	margin-bottom: clamp(40px, 5vw, 72px);
}
.pc-caps-head .display { text-transform: uppercase; }
.pc-caps-head .display .hl-line { display: inline; }
.pc-caps-head .display .it-tail { display: block; }
.product-cards .po-caps-head .display .it-tail { display: block; }

.pc-caps-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 2vw, 28px);
}

.pc-cap {
	background: #EEEEED;
	border-radius: 14px;
	padding: clamp(32px, 3vw, 48px);
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 2.5vw, 40px);
	transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.pc-cap:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 50px rgba(0,0,0,.06);
}

.pc-cap-title {
	margin: 0;
	font-family: var(--f-sans);
	font-size: var(--fs-card-title);
	font-weight: 500;
	line-height: 1.095;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.pc-cap-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.4vw, 22px);
}
.pc-cap-point {
	font-family: var(--f-sans);
	font-size: var(--fs-card-body);
	font-weight: 400;
	line-height: 1.55;
	color: rgba(26, 26, 26, 0.75);
}
.pc-cap-point-label {
	font-weight: 600;
	color: var(--ink);
	margin-right: 0.25em;
}
.pc-cap-point-text { display: inline; }

.pc-cap-body {
	margin: 0;
	font-family: var(--f-sans);
	font-size: var(--fs-card-body);
	font-weight: 400;
	line-height: 1.55;
	color: rgba(26, 26, 26, 0.75);
}

@media (max-width: 1024px) {
	.pc-caps-grid { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────────
   AGENTS HEAD — keep the 2-line headline truly on 2 lines
   The BCP agents h2 is a single roman line ("How the agents work")
   followed by an italic tail ("for business transaction"). At max
   font-size (--fs-display-it ≈ 120px) the italic copy can be ~1.3k
   wide and tip into a 3rd line on borderline viewports. nowrap
   pins it to one line so the headline always renders as exactly two.
   The parent `.po-agents` has `overflow: hidden` so any tail
   overflow at very narrow widths is clipped to the section edge
   rather than introducing horizontal scroll.
   ───────────────────────────────────────────────────────────────── */
.product-cards .po-agents-head .display .it-tail {
	white-space: nowrap;
}

/* Roman callout inside the italic tail.
   The word "for" lives inside the .it-tail span (so it stays on the
   same visual line as "business transaction" — the layout doesn't
   change), but reverts to the .display baseline above (sans 500,
   uppercase, ink, letter-spacing -.01em) so it reads identical to
   the .hl-line on row 1. */
.product-cards .po-agents-head .display .it-tail .hl-roman {
	font-family: var(--f-sans);
	font-style: normal;
	font-weight: 500;
	font-size: var(--fs-display-xl);
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 0.94;
}


/* ─────────────────────────────────────────────────────────────────
   FINAL CTA — accent band variant (matches po-finalcta)
   ───────────────────────────────────────────────────────────────── */
.pc-finalcta {
	background: var(--accent);
}
.pc-finalcta h2 {
	display: flex;
	flex-direction: column;
	letter-spacing: -0.02em;
	line-height: 0.9;
}
.pc-finalcta h2 .hl-line { line-height: 0.9; }
.pc-finalcta h2 .it-tail { line-height: 0.9; }
.pc-finalcta p {
	font-size: var(--fs-body-sm);
	line-height: 1.54;
}
.pc-finalcta .btn-orange {
	background: var(--orange);
	color: var(--cream);
	border: 1px solid rgba(26, 26, 26, 0.15);
	border-radius: 12px;
	padding: 22px 32px;
	font-weight: 600;
}
.product-cards.pc-theme-consumer .pc-finalcta .btn-orange {
	background: var(--green);
}
.product-cards.pc-theme-consumer .pc-finalcta .btn-orange:hover {
	box-shadow: 0 10px 30px rgba(11, 102, 35, .35);
}
.pc-finalcta .btn-orange:hover {
	box-shadow: 0 10px 30px rgba(255, 79, 0, .35);
	transform: translateY(-1px);
}