/* ═════════════════════════════════════════════════════════════════
   COMPONENT — Head Band
   ═════════════════════════════════════════════════════════════════
   Full-bleed accent-coloured stripe with a giant uppercase headline
   and a single-line lede underneath. Used as a "section title" band
   between the hero and the body sections on product pages. Was
   inline as `.po-adv-head` (BAO/CAO) and `.pc-band` (BCP) — lifted
   here so the markup + CSS lives in one place.

   Background tones — default is `accent`, which picks up the page's
   `var(--accent)` so the band turns green on BAO/business pages and
   orange on CAO. Hardcoded `green` / `orange` / `ink` modifiers exist
   for cases where the band shouldn't follow the page accent.

   Markup: /template-parts/components/head-band.php
   ───────────────────────────────────────────────────────────────── */

.head-band {
	position: relative;
	padding: clamp(48px, 5vw, 72px) 0;
	overflow: hidden;
}

.head-band--accent { background: var(--accent, var(--green)); }
.head-band--green  { background: var(--green); }
.head-band--orange { background: var(--orange); }
.head-band--ink    { background: var(--ink); }

.head-band-wrap {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.5vw, 28px);
	color: #FFF;
}

.head-band-headline {
	margin: 0;
	color: #FFF;
	font-family: var(--f-sans);
	font-size: clamp(32px, 5vw, 72px);
	font-style: normal;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	white-space: nowrap;
}

.head-band-lede {
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--f-sans);
	font-size: var(--fs-lead);
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.01em;
}

@media (max-width: 768px) {
	.head-band      { padding: clamp(40px, 9vw, 64px) 0; }
	.head-band-wrap { gap: 14px; }
}
@media (max-width: 480px) {
	.head-band-headline { white-space: normal; }
}