/* ============================================================
   BOLTON Signal — tpl-capability.css
   Capability Pillar template: hero, families grid, docs strip, CTA.
   Seven [data-capability] narratives accent off the gold ramp, tuned
   per-pillar via the inline --cap-hue set by the template. Dark-first.
   ============================================================ */
@layer templates {

	.tpl-capability {
		/* Per-pillar accent derived from the gold ramp + the page's hue.
		   Falls back to --bx-gold when --cap-hue is absent. */
		--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.16);
	}

	/* ---------- Hero ---------- */
	.cap-hero { position: relative; }
	.cap-hero::after {
		content: ""; position: absolute; inset: 0; pointer-events: none;
		background: radial-gradient(80% 120% at 0% 0%, var(--cap-accent-glow), transparent 58%);
	}
	.cap-hero > .container { position: relative; z-index: 1; }
	.cap-hero__eyebrow { color: var(--cap-accent); }
	.cap-hero__title { background: linear-gradient(180deg, var(--bx-cream), var(--bx-champagne)); -webkit-background-clip: text; background-clip: text; color: transparent; }
	.cap-hero__intro { max-width: 64ch; }
	.cap-hero__actions { margin-top: var(--bx-sp-40); display: flex; flex-wrap: wrap; gap: var(--bx-sp-30); }

	/* ---------- Families grid ---------- */
	.cap-section__title { font-size: var(--bx-fs-xl); margin-top: var(--bx-sp-20); }
	.cap-families__grid { margin-top: var(--bx-sp-50); }

	.cap-family-card { text-decoration: none; color: inherit; }
	.cap-family-card .card__kicker { color: var(--cap-accent); }
	.cap-family-card:hover { border-color: var(--cap-accent-dim); }
	.cap-family-card .card__link { color: var(--cap-accent); }
	.cap-family-card.card--feature::after { background: linear-gradient(90deg, transparent, var(--cap-accent), transparent); }

	.cap-families__empty { margin-top: var(--bx-sp-50); }

	/* ---------- Documentation-awareness strip ---------- */
	.cap-docs__panel {
		display: grid; gap: var(--bx-sp-40);
		padding: var(--bx-sp-50);
		background: var(--bx-surface); border: 1px solid var(--bx-navy-line);
		border-radius: var(--bx-radius-lg);
		position: relative; overflow: hidden;
	}
	.cap-docs__panel::before {
		content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
		background: linear-gradient(180deg, var(--cap-accent), transparent);
	}
	.cap-docs__title { font-size: var(--bx-fs-lg); margin-top: var(--bx-sp-20); }
	.cap-docs__body { color: var(--bx-contrast-midtone); max-width: 60ch; margin-top: var(--bx-sp-20); }
	.cap-docs__chips { margin-top: var(--bx-sp-20); }

	@media (min-width: 880px) {
		.cap-docs__panel { grid-template-columns: 1.5fr 1fr; align-items: center; }
		.cap-docs__chips { margin-top: 0; }
	}

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

	/* ---------- Per-pillar accent overrides (canonical seven) ----------
	   Inline --cap-hue already tunes the accent; these named hooks let the
	   narrative be themed further without touching markup. */
	.tpl-capability[data-capability="signal"]   { --cap-accent: #DCC288; --cap-accent: light-dark(hsl(44 62% 30%), #DCC288); }
	.tpl-capability[data-capability="flight"]    { --cap-accent: hsl(38 58% 58%); --cap-accent: light-dark(hsl(38 62% 30%), hsl(38 58% 58%)); }
	.tpl-capability[data-capability="motion"]    { --cap-accent: hsl(41 55% 58%); --cap-accent: light-dark(hsl(41 60% 30%), hsl(41 55% 58%)); }
	.tpl-capability[data-capability="workshop"]  { --cap-accent: hsl(46 60% 60%); --cap-accent: light-dark(hsl(46 66% 28%), hsl(46 60% 60%)); }
	.tpl-capability[data-capability="safety"]    { --cap-accent: hsl(36 60% 56%); --cap-accent: light-dark(hsl(36 64% 30%), hsl(36 60% 56%)); }
	.tpl-capability[data-capability="power"]     { --cap-accent: hsl(48 62% 62%); --cap-accent: light-dark(hsl(48 68% 27%), hsl(48 62% 62%)); }
	.tpl-capability[data-capability="shelter"]   { --cap-accent: hsl(40 50% 56%); --cap-accent: light-dark(hsl(40 56% 30%), hsl(40 50% 56%)); }

	/* ---------- v0.3.0 native Capabilities hub (page-capabilities.php) ---------- */
	.caphub-groups .cap-section__title { font-size: var(--bx-fs-xl); margin-top: var(--bx-sp-20); }
	.caphub-grid { list-style: none; margin: var(--bx-sp-50) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--bx-sp-30); }
	.caphub-card { position: relative; display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.3rem; text-decoration: none; color: inherit; background: var(--bx-surface); border: 1px solid var(--bx-surface-border); border-radius: var(--bx-radius-lg); overflow: hidden; transition: border-color var(--bx-dur-1), transform var(--bx-dur-1); }
	.caphub-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: light-dark(hsl(var(--h) 68% 38%), hsl(var(--h) 60% 56%)); }
	.caphub-card:hover { border-color: hsl(var(--h) 60% 52% / .6); transform: translateY(-2px); }
	.caphub-card:focus-visible { outline: none; box-shadow: var(--bx-focus); }
	.caphub-card__num { font-family: var(--bx-font-mono); font-size: .72rem; color: var(--bx-text-muted); }
	.caphub-card__dot { width: 11px; height: 11px; border-radius: 50%; background: light-dark(hsl(var(--h) 68% 38%), hsl(var(--h) 60% 56%)); box-shadow: 0 0 0 3px hsl(var(--h) 60% 52% / .16); }
	.caphub-card__name { font-size: 1.12rem; font-weight: 650; line-height: 1.22; margin: .1rem 0 0; }
	.caphub-card__d { color: var(--bx-text-2); font-size: .93rem; }
	.caphub-card__cta { margin-top: auto; padding-top: .5rem; color: var(--bx-accent-strong); font-weight: 600; font-size: .9rem; }
}