/* ═════════════════════════════════════════════════════════════════
   COMPONENT — Agents Grid
   ═════════════════════════════════════════════════════════════════
   "Agentic orchestration" section: header + 2×2 agent cards + 4-up
   stats row. Markup lives in
   /template-parts/components/agents-grid.php. Originally extracted
   from the product-opening cascade so other pages can reuse it with
   their own data.
   ───────────────────────────────────────────────────────────────── */

.po-agents {
	background: var(--cream);
	position: relative;
	overflow: hidden;
}
.po-agents::after {
	content: '';
	position: absolute;
	right: -10vw; top: 30%;
	width: clamp(380px, 48vw, 720px);
	height: clamp(380px, 48vw, 720px);
	/* background: url(../../img/object.png) center/contain no-repeat; */
	opacity: .10;
	pointer-events: none;
	z-index: 0;
	-webkit-mask-image: radial-gradient(ellipse 68% 68% at 60% 45%, black 22%, transparent 65%);
	mask-image:         radial-gradient(ellipse 68% 68% at 60% 45%, black 22%, transparent 65%);
}
.po-agents > * { position: relative; z-index: 1; }

.po-agents-head { max-width: 1280px; margin-bottom: clamp(40px, 5.417vw, 78px); }
.po-agents-head .display { text-transform: uppercase; }
.po-agents-head .display .hl-line  { display: inline; }
.po-agents-head .display .it-tail  { display: inline; padding-top: 0; }

.po-agents-sub {
	font-family: var(--f-sans);
	font-weight: 500;
	font-size: clamp(24px, 2.917vw, 42px);
	line-height: 1.095;
	color: var(--ink);
	letter-spacing: -0.03em;
	margin: 0 0 clamp(40px, 5.417vw, 78px);
}

.po-agent-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-bottom: clamp(40px, 5.417vw, 78px);
}
.po-agent {
	--shimmer-pos: 120%;        /* off-screen right; JS updates this */

	background: rgba(255, 255, 255, 0.60);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid transparent;
	border-radius: 14px;
	padding: 30px 30px 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	position: relative;
	overflow: hidden;

	transition:
		--shimmer-pos 0.55s ease,
		border-color  0.25s ease,
		transform     0.35s cubic-bezier(.16,1,.3,1),
		box-shadow    0.35s ease;
}

/* Shimmer band — scroll-driven and cursor-tracked on hover. */
.po-agent::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		120deg,
		transparent                       0%,
		transparent                       calc(var(--shimmer-pos) - 28%),
		rgba(255, 255, 255, 0.18)         calc(var(--shimmer-pos) - 12%),
		rgba(255, 255, 255, 0.45)         var(--shimmer-pos),
		rgba(255, 255, 255, 0.18)         calc(var(--shimmer-pos) + 12%),
		transparent                       calc(var(--shimmer-pos) + 28%),
		transparent                       100%
	);
}

.po-agent:hover {
	border-color: var(--accent, var(--green));
	transform: translateY(-4px);
	box-shadow: 0 24px 50px rgba(0,0,0,.08);
	transition:
		--shimmer-pos 0.06s linear,
		border-color  0.25s ease,
		transform     0.35s cubic-bezier(.16,1,.3,1),
		box-shadow    0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
	.po-agent {
		transition: border-color 0.25s ease, transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s ease;
	}
	.po-agent::after { display: none; }
}
.po-agent-main {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}
.po-agent-head {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-right: 80px;
	/* Reserve height for 3-line title so .po-agent-body always starts
	   at the same level regardless of how many lines the title wraps to.
	   Formula: eyebrow (22px) + gap (8px) + 3 × title-line-height.
	   Title: clamp(16px, 1.667vw, 24px) × line-height 1.3 = 6.5vw per 3 lines. */
	min-height: clamp(92px, calc(6.5vw + 30px), 124px);
}
.po-agent-eyebrow {
	font-family: var(--f-sans);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	line-height: 1.1;
	/* Pinned to the canonical green across BOTH variants —
	   agent eyebrows stay consistent regardless of page accent. */
	color: var(--green);
	text-transform: uppercase;
}
.po-agent-title {
	font-family: var(--f-sans);
	font-size: clamp(16px, 1.667vw, 24px);
	font-weight: 400;
	line-height: 1.3;
	color: var(--ink);
	letter-spacing: -0.02em;
	margin: 0;
}
.po-agent-num {
	position: absolute;
	top: 0;
	right: 0;
	font-family: var(--f-sans);
	font-size: clamp(28px, 3.056vw, 44px);
	font-weight: 800;
	line-height: 1.045;
	color: rgba(82, 82, 81, 0.4);
	letter-spacing: -0.03em;
	text-align: right;
}
.po-agent-body {
	font-family: var(--f-sans);
	font-size: clamp(13px, 1.25vw, 18px);
	font-weight: 400;
	line-height: 1.44;
	color: rgba(26, 26, 26, 0.75);
	margin: 0;
}
.po-agent-timing {
	font-family: var(--f-sans);
	font-size: 11px;
	font-weight: 600;
	line-height: 2;
	/* Pinned to canonical green across BOTH variants — same pattern as
	   .po-stat-val, .po-agent-eyebrow, and .po-agent-stat-val. */
	color: var(--green);
	text-transform: uppercase;
	letter-spacing: normal;
	white-space: nowrap;
}

/* Stats row under the agent grid. Auto-fit columns (adapts to 3 or 4
   items), each with a big accent-coloured value, a sentence-case label,
   and a 1-px rule underneath. */
.po-agent-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 20px;
}
.po-agent-stat {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rule);
}
.po-agent-stat-val {
	font-family: var(--f-sans);
	font-size: clamp(36px, 4.8vw, 68px);
	font-weight: 500;
	/* Pinned to canonical green across BOTH variants — same pattern as
	   .po-stat-val and .po-agent-eyebrow. */
	color: var(--green);
	line-height: 1;
	letter-spacing: -.01em;
	white-space: nowrap;
	width: 100%;
	text-align: center;
}
.po-agent-stat-lbl {
	font-family: var(--f-sans);
	font-size: clamp(16px, 1.7vw, 24px);
	color: rgba(26, 26, 26, 0.75);
	line-height: 1.54;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	width: 100%;
	text-align: center;
}
/* When a stat label is composed of explicit line spans, each span renders
   on its own line and never wraps — guarantees the label stays at the
   intended line count regardless of column width. */
.po-agent-stat-lbl .lbl-line {
	display: block;
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.po-agent-grid     { grid-template-columns: 1fr; }
	.po-agent-stats    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.po-agent-stats    { grid-template-columns: 1fr; }
}

/* ─── 3-up variant ─────────────────────────────────────────────────
   Used by the CALM Portal "Continue exploring" section (links to
   Loquat IQ / Business onboarding / Consumer onboarding). Steps
   down to 1 column at the narrow breakpoint. */
.po-agent-grid--3up { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
	.po-agent-grid--3up { grid-template-columns: 1fr; }
}

/* ─── 4-up "process step" variant ──────────────────────────────────
   Used by the lending lifecycle (Originate / Underwrite / Decide /
   Disburse). Steps down to 2 then 1 columns at the standard
   breakpoints below. */
.po-agent-grid--4up { grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1024px) {
	.po-agent-grid--4up { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.po-agent-grid--4up { grid-template-columns: 1fr; }
}

/* When a card has no top-right ordinal (process-step layout where the
   number lives in the eyebrow as "01 /"), the head no longer needs
   to reserve 70px of right padding for it — recover that width. */
.po-agent--no-num .po-agent-head { padding-right: 0; }
.po-agent--no-num .po-agent-main { gap: 16px; }

/* Quote / sub-callout card rendered below the stats row. Same
   white/blur treatment as the agent cards above so it reads as part
   of the section. Inline HTML is allowed in the .po-agent-callout-text
   block — bold and underlined-link helpers are scoped here.

   When the caller passes `callout_icon`, the card becomes a flex row:
   the icon (e.g. /assets/icons/exclamation-mark.svg) sits on the left
   and the text wraps on the right with a 44px gap (Figma value).
   Without an icon, the text fills the full width. */
.po-agent-callout {
	margin-top: clamp(40px, 6vw, 80px);
	background: rgba(255, 255, 255, 0.60);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 14px;
	padding: 34px 30px 28px;
}
.po-agent-callout--with-icon {
	display: flex;
	align-items: center;
	gap: 44px;
}
.po-agent-callout-icon {
	flex-shrink: 0;
	width: 19px;
	height: auto;
	display: block;
}
.po-agent-callout-text {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--f-sans);
	/* Figma callout body — 26px / 40px line-height. --fs-body-sm caps
	   at exactly 26px at the 1440 design width and scales down on
	   narrower viewports. */
	font-size: var(--fs-body-sm);
	font-weight: 400;
	line-height: 40px;
	color: rgba(26, 26, 26, 0.75);
}
.po-agent-callout-text strong {
	color: var(--ink);
	font-weight: 700;
}
.po-agent-callout-text a {
	color: var(--ink);
	font-weight: 700;
	text-decoration: underline;
}
.po-agent-callout-text a:hover { color: var(--accent, var(--green)); }

/* When two callouts stack (e.g. consumer-lending lifecycle has both
   a thin-file message and the "Not a bank?" message), keep them
   visually paired with a tighter gap than the section-to-callout
   margin above. */
.po-agent-callout + .po-agent-callout {
	margin-top: clamp(20px, 2vw, 32px);
}