/* ============================================================
   BOLTON Signal — tpl-family.css
   Product Family template: lighter storytelling that inherits the
   parent pillar's accent (via inline --cap-hue / [data-capability]).
   Dark-first.
   ============================================================ */
@layer templates {

	.tpl-family {
		--cap-accent: hsl(var(--cap-hue, 44) 55% 58%); /* dark fallback */
		--cap-accent: light-dark(hsl(var(--cap-hue, 44) 62% 30%), hsl(var(--cap-hue, 44) 55% 58%)); /* mode-aware: dark gold on light for AA */
		--cap-accent-dim: hsl(var(--cap-hue, 44) 38% 42%);
		--cap-accent-glow: hsl(var(--cap-hue, 44) 60% 55% / 0.14);
	}

	/* ---------- Hero ---------- */
	.family-hero { position: relative; }
	.family-hero::after {
		content: ""; position: absolute; inset: 0; pointer-events: none;
		background: radial-gradient(70% 110% at 100% 0%, var(--cap-accent-glow), transparent 60%);
	}
	.family-hero > .container { position: relative; z-index: 1; }
	.family-hero__eyebrow { color: var(--cap-accent); }
	.family-hero__intro { max-width: 62ch; }
	.family-hero__actions { margin-top: var(--bx-sp-40); display: flex; flex-wrap: wrap; gap: var(--bx-sp-30); align-items: center; }

	/* ---------- Commonly requested ---------- */
	.family-section__title { font-size: var(--bx-fs-xl); margin-top: var(--bx-sp-20); }
	.family-requested__list {
		margin-top: var(--bx-sp-40);
		display: grid; gap: var(--bx-sp-30);
		list-style: none; padding: 0;
		max-width: var(--bx-content);
	}
	.family-requested__list li {
		position: relative;
		padding: var(--bx-sp-30) var(--bx-sp-40) var(--bx-sp-30) calc(var(--bx-sp-40) + 0.6rem);
		background: var(--bx-surface); border: 1px solid var(--bx-navy-line);
		border-radius: var(--bx-radius);
		color: var(--bx-contrast-midtone);
	}
	.family-requested__list li::before {
		content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
		background: var(--cap-accent); border-radius: var(--bx-radius-sm) 0 0 var(--bx-radius-sm);
	}
	.family-requested__note { margin-top: var(--bx-sp-30); color: var(--bx-steel); font-size: var(--bx-fs-sm); }

	/* ---------- Closing CTA ---------- */
	.family-cta__inner { display: grid; gap: var(--bx-sp-30); justify-items: start; max-width: 60ch; }
	.family-cta__title { font-size: var(--bx-fs-xl); }
	.family-cta__body { color: var(--bx-contrast-midtone); }
	.family-cta__actions { display: flex; flex-wrap: wrap; gap: var(--bx-sp-30); align-items: center; }
}