/* §10.5 — Product L2 distinct visual treatment. Loaded only on Product CPT
   singles (inc/setup/enqueue-product-l2.php), layered on top of the shared
   .hero-l2 / .feature-grid baselines in modules-l2.css so nothing here
   leaks onto Service or Sector pages that reuse those same base classes.
   The brief is explicit: a visitor must be able to tell within one screen
   that this is something Seamless Ideas built, not a service — so the
   product hero and feature grid get their own colour, shape and type
   language rather than a re-skinned service hero. */

/*
 * Self-contained now — the shared .hero-l2 base moved to components.css and
 * became the light Service/Sector pattern (design-reference.html §07/§08),
 * so Product (page type "C", explicitly dark) can no longer borrow its
 * position/colour/spacing from that class. Everything the dark hero needs
 * is declared here instead.
 */
.hero-product {
	position: relative;
	overflow: hidden;
	background: var(--ink-soft);
	color: var(--paper);
	padding-block: 64px 48px;
}
.hero-product::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(circle at 85% 20%, rgba(238, 76, 124, 0.35), transparent 55%);
}
.hero-product .container { position: relative; z-index: 1; }
.hero-product h1 { font-family: var(--font-display); color: var(--paper); max-width: 16ch; }
.hero-product .eyebrow { color: var(--accent-light); }

.hero-product__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--accent);
	border-radius: 999px;
	color: var(--accent);
	font-size: var(--fs-interface);
	text-transform: uppercase;
	letter-spacing: var(--tracking-interface);
	margin-bottom: var(--space-5);
}
.hero-product__badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	display: inline-block;
}

/* Feature grid: on the Product template only, features read as product UI
   chrome — accent-topped cards with a filled icon chip — not generic
   service-card copy blocks. */
.feature-grid .feature-card {
	position: relative;
	border-radius: var(--radius-lg);
	border-color: var(--line-light);
	border-top: 3px solid var(--accent);
	background: var(--paper-soft);
}
.section--dark .feature-grid .feature-card, .section--dark-soft .feature-grid .feature-card {
	background: var(--ink-soft);
	border-top-color: var(--accent);
}
.feature-grid .feature-card__icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background: var(--ink);
	color: var(--paper);
	font-size: var(--fs-display-5);
}
.section--dark .feature-grid .feature-card__icon, .section--dark-soft .feature-grid .feature-card__icon {
	background: var(--paper);
	color: var(--ink);
}
.feature-grid .feature-card h3 { font-family: var(--font-display); }