/* Shared styles for solution / industry / case-study detail templates */
@layer components {
	@scope (.detail) {
		/* Hero */
		.detail-hero {
			background-color: var(--color-bg-dark);
			position: relative;
			overflow: hidden;
		}

		.detail-hero__inner {
			color: var(--color-text-invert);
			position: relative;
			display: flex;
			flex-direction: column;
			gap: calc(var(--gutter) * 1);
		}

		.detail-hero h1 {
			line-height: 1.125;
			color: var(--color-text-invert);
			max-inline-size: 680px;
			text-wrap: balance;
		}

		.detail-hero__lede {
			font-size: var(--font-size-lg);
			color: oklch(from var(--color-text-invert) l c h / 70%);
			max-inline-size: 64ch;
		}

		.detail-hero__actions {
			display: flex;
			flex-wrap: wrap;
			gap: calc(var(--gutter) * 0.75);
			padding-block-start: calc(var(--stack) / 2);
		}

		/* Section stack (header + content) */
		.detail-stack {
			display: flex;
			flex-direction: column;
			gap: calc(var(--gutter) * 1);
		}

		.detail-stack--invert {
			color: var(--color-text-invert);
		}

		/* Card grid */
		.detail-card-grid {
			--grid-min-size: clamp(14rem, 30%, 22rem);
			gap: calc(var(--gutter) * 0.75);
		}

		/* Problem / Use Case card (light bg, dashed border) */
		.detail-card-dashed {
			padding: calc(var(--gutter) * 2);
			border: 1px dashed var(--color-border);
			border-radius: 12px;
			display: flex;
			flex-direction: column;
			gap: calc(var(--gutter) * 0.75);
		}

		.detail-card-dashed h3 {
			font-size: var(--font-size-lg);
			font-weight: 700;
		}

		.detail-card-dashed p {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
		}

		/* Capability / Service card (dark bg, faint border) */
		.detail-card-faint {
			padding: calc(var(--gutter) * 2);
			border: 1px solid oklch(from var(--color-text-invert) l c h / 12%);
			border-radius: 12px;
			display: flex;
			flex-direction: column;
			gap: calc(var(--gutter) * 0.75);
		}

		.detail-card-faint h3 {
			font-size: var(--font-size-lg);
			font-weight: 700;
			color: var(--color-text-invert);
		}

		.detail-card-faint p {
			font-size: var(--font-size-sm);
			color: oklch(from var(--color-text-invert) l c h / 60%);
		}

		/* Dark section wrapper */
		.detail-dark {
			background-color: var(--color-bg-dark);
		}

		.detail-dark h2 {
			color: var(--color-text-invert);
		}

		.detail-dark__lede {
			color: oklch(from var(--color-text-invert) l c h / 70%);
			max-inline-size: 64ch;
		}

		/* Long-form challenge prose */
		.detail-prose {
			max-inline-size: 72ch;
		}

		.detail-prose p {
			font-size: var(--font-size-lg);
			color: var(--color-text-muted);
		}

		/* Results / stats section */
		.detail-results {
			padding-block: calc(var(--stack) * 4);
		}

		.detail-results .stat-strip {
			text-align: start;
		}

		/* FAQ */
		.detail-faq {
			--grid-min-size: clamp(16rem, 35vw, 25rem);
			gap: calc(var(--gutter) * 3);
			align-items: start;
		}

		.detail-faq__heading {
			position: sticky;
			inset-block-start: 48px;
		}

		.detail-faq__list {
			display: flex;
			flex-direction: column;
		}

		.detail-faq__item {
			padding-block: calc(var(--stack) * 1.5);
			border-block-start: 1px solid var(--color-border);
			display: flex;
			flex-direction: column;
			gap: calc(var(--gutter) * 0.75);
		}

		.detail-faq__item dt {
			font-size: var(--font-size-lg);
			font-weight: 700;
		}

		.detail-faq__item dd {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
		}

		/* Industry: proof case study card */
		.detail-proof-card {
			padding: calc(var(--gutter) * 2);
			border: 1px solid var(--color-border);
			border-radius: 12px;
			display: flex;
			flex-direction: column;
			gap: var(--gutter);
		}

		.detail-proof-card h3 {
			font-size: var(--font-size-lg);
			font-weight: 700;
		}

		.detail-proof-card__meta {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
		}

		.detail-proof-card__points {
			display: flex;
			flex-direction: column;
			gap: calc(var(--gutter) / 2);
		}

		.detail-proof-card__points p {
			font-size: var(--font-size-sm);
		}

		.detail-proof-card__points span {
			color: var(--color-text-muted);
		}

		.detail-proof-card__timeline {
			font-size: 0.75rem;
			font-weight: 500;
			color: var(--color-text-muted);
			text-transform: uppercase;
			letter-spacing: 0.05em;
		}

		/* CTA cluster (used inside .cta-section) */
		.detail-cta-actions {
			justify-content: center;
			gap: calc(var(--gutter) * 0.75);
			padding-block-start: calc(var(--stack) / 2);
		}

		/* Managed services (IaaS) — process CTA + industries chips */
		.ms-process__cta {
			display: flex;
			justify-content: center;
		}

		.ms-industries {
			gap: calc(var(--gutter) / 2);
		}
	}
}