@layer components {
	/* -------------------------------------------------------------------------
	   resource-detail  — long-form guide / checklist pages
	   Provides: dark hero, sidebar TOC, question cards, related resources
	   ------------------------------------------------------------------------- */

	/* hero ----------------------------------------------------------------- */
	.resource-hero {
		--_hero-bg: var(--color-bg-dark);
		grid-column: bleed;
		display: grid;
		grid-template-columns: subgrid;
		background-color: var(--_hero-bg);
		padding-block: 80px 100px;

		& > * {
			grid-column: content;
		}
	}

	.resource-hero .breadcrumb {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: var(--font-size-xs);
		font-weight: 500;
	}

	.resource-hero .breadcrumb .type {
		color: var(--color-accent);
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	.resource-hero .breadcrumb .sep {
		color: var(--color-text-faint-invert);
	}

	.resource-hero .breadcrumb .crumb {
		color: var(--color-text-muted-invert);
	}

	.resource-hero h1 {
		max-inline-size: 800px;
		color: var(--color-text-invert);
	}

	.resource-hero .description {
		font-size: var(--font-size-lg);
		line-height: 1.556;
		color: var(--color-text-muted-invert);
		max-inline-size: 600px;
	}

	.resource-hero .meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 32px;
		padding-block-start: 12px;
		font-size: var(--font-size-xs);
		font-weight: 500;
	}

	.resource-hero .meta dt {
		color: var(--color-text-faint-invert);
		text-transform: uppercase;
		letter-spacing: 0.06em;
		font-weight: var(--font-weight-medium);
	}

	.resource-hero .meta dd {
		color: var(--color-text-muted-invert);
	}

	.resource-hero .meta .accent {
		color: var(--color-accent);
	}

	/* intro + stats sidebar ------------------------------------------------ */
	.resource-intro {
		padding-block: 80px 0;
	}

	.resource-intro__inner {
		display: flex;
		gap: 80px;
	}

	.resource-intro__text {
		flex: 1;
		max-inline-size: 760px;
	}

	.resource-intro__text .lead {
		font-family: var(--font-family-heading);
		font-size: clamp(1.25rem, 1rem + 0.5vw, 1.75rem);
		font-weight: 700;
		letter-spacing: -0.02em;
		line-height: 1.286;
		color: var(--color-text);
	}

	.resource-intro__stats {
		inline-size: 280px;
		flex-shrink: 0;
		padding: 32px;
		border-inline-start: 2px solid var(--color-border);
	}

	.resource-intro__stat {
		& + & {
			margin-block-start: 24px;
		}
	}

	.resource-intro__stat .value {
		font-family: var(--font-family-heading);
		font-size: 2.25rem;
		font-weight: 700;
		letter-spacing: -0.03em;
		line-height: 1;
	}

	.resource-intro__stat .label {
		font-size: var(--font-size-xs);
		color: var(--color-text-muted-invert);
		line-height: 1.385;
		margin-block-start: 4px;
	}

	/* two-column body: TOC + content --------------------------------------- */
	.resource-body {
		padding-block: 80px;
	}

	.resource-body__inner {
		display: flex;
		gap: calc(var(--gutter) * 2);
	}

	/* sidebar TOC */
	.resource-toc {
		inline-size: 260px;
		flex-shrink: 0;
		position: sticky;
		inset-block-start: 80px;
		align-self: flex-start;
	}

	.resource-toc__list {
		list-style: none;
		padding: 0;
		border-inline-start: 2px solid var(--color-border);
		scroll-target-group: auto;
	}

	.resource-toc__item {
		padding: 12px 16px;
		font-size: var(--font-size-xs);
		font-weight: 400;
		color: var(--color-text-muted-invert);
		transition: color var(--transition-fast);
	}

	.resource-toc__item a {
		color: inherit;
		text-decoration: none;
	}

	/* scroll-spy: highlight TOC link whose target section is in view */
	.resource-toc__item:has(a:target-current) {
		font-weight: var(--font-weight-medium);
		color: var(--color-text);
		border-inline-start: 2px solid var(--color-accent);
		margin-inline-start: -2px;
	}

	/* content column */
	.resource-content {
		flex: 1;
		min-inline-size: 0;
	}

	/* checklist items: let the label shrink so long text wraps beside the
	   checkbox instead of pushing the whole label onto a new flex line */
	.resource-content li.box > label {
		flex: 1;
	}

	/* question card pattern ------------------------------------------------ */
	.resource-question {
		padding-block: 48px;
		border-block-end: 1px solid var(--color-border);

		&:first-child {
			padding-block-start: 0;
		}
	}

	.resource-question__header {
		display: flex;
		align-items: flex-start;
		gap: 16px;
	}

	.resource-question__number {
		font-family: var(--font-family-heading);
		font-size: 3rem;
		font-weight: 700;
		letter-spacing: -0.04em;
		line-height: 1;
		flex-shrink: 0;
		inline-size: 64px;
		color: var(--color-border);
	}

	.resource-question:first-child .resource-question__number {
		color: var(--color-accent);
	}

	.resource-question__category {
		font-size: 0.6875rem;
		font-weight: var(--font-weight-medium);
		color: var(--color-text-muted-invert);
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

	.resource-question h3 {
		font-size: clamp(1.125rem, 0.875rem + 0.5vw, 1.5rem);
		letter-spacing: -0.02em;
		line-height: 1.25;
	}

	/* answer cards row */
	.resource-answers {
		display: flex;
		gap: 20px;
		margin-block-start: 24px;
		padding-inline-start: 80px;
	}

	.resource-answer {
		flex: 1;
		padding: 20px;
		border-radius: var(--border-radius-lg);
		background-color: var(--color-bg-2);
	}

	.resource-answer__label {
		font-size: 0.6875rem;
		font-weight: var(--font-weight-medium);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		margin-block-end: 8px;
	}

	.resource-answer__label--why {
		color: var(--color-accent);
	}

	.resource-answer__label--look {
		color: var(--color-text);
	}

	.resource-answer__label--flag {
		color: var(--color-error);
	}

	.resource-answer--dark {
		background-color: var(--color-bg-dark);
		color: var(--color-text-muted-invert);
	}

	.resource-answer p {
		font-size: var(--font-size-sm);
		line-height: 1.571;
	}

	/* related callout ------------------------------------------------------ */
	.resource-callout {
		padding-block: 48px;
		display: flex;
	}

	.resource-callout__inner {
		display: flex;
		inline-size: 100%;
		border-radius: 12px;
		overflow: hidden;
	}

	.resource-callout__bar {
		inline-size: 4px;
		flex-shrink: 0;
		background-color: var(--color-yellow);
	}

	.resource-callout__body {
		padding: 28px 32px;
		background-color: var(--color-bg-2);
		flex: 1;
	}

	.resource-callout__label {
		font-size: 0.6875rem;
		font-weight: var(--font-weight-medium);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--color-yellow);
		margin-block-end: 16px;
	}

	.resource-callout__title {
		font-family: var(--font-family-heading);
		font-size: 1.25rem;
		font-weight: 700;
		letter-spacing: -0.01em;
		line-height: 1.3;
		margin-block-end: 12px;
	}

	.resource-callout__desc {
		font-size: var(--font-size-sm);
		line-height: 1.571;
		color: var(--color-text-muted);
		margin-block-end: 16px;
	}

	.resource-callout__link {
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-medium);
		color: var(--color-text);
		text-decoration: none;
	}

	/* next-steps / score box ----------------------------------------------- */
	.resource-next-steps {
		margin-block-start: 32px;
		padding: 40px;
		background-color: var(--color-bg-dark);
		border-radius: 12px;
	}

	.resource-next-steps__label {
		font-size: 0.6875rem;
		font-weight: var(--font-weight-medium);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--color-accent);
		margin-block-end: 8px;
	}

	.resource-next-steps h3 {
		color: var(--color-text-invert);
		margin-block-end: 24px;
	}

	.resource-next-steps p {
		color: var(--color-text-muted-invert);
		font-size: 0.9375rem;
		line-height: 1.6;
		max-inline-size: 640px;
	}

	.resource-scores {
		display: flex;
		gap: 16px;
		margin-block-start: 24px;
	}

	.resource-score {
		flex: 1;
		padding: 16px 20px;
		border: 1px solid oklch(from var(--color-text-faint-invert) l c h / 30%);
		border-radius: var(--border-radius-lg);
	}

	.resource-score__value {
		font-family: var(--font-family-heading);
		font-size: 1.25rem;
		font-weight: 700;
		color: var(--color-text-invert);
	}

	.resource-score__desc {
		font-size: var(--font-size-xs);
		color: var(--color-text-faint-invert);
		margin-block-start: 4px;
	}

	/* related resources section -------------------------------------------- */
	.resource-related {
		padding-block: 0 80px;
	}

	.resource-related__header {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		margin-block-end: 32px;
	}

	.resource-related__grid {
		display: flex;
		gap: 20px;
	}

	.resource-related__card {
		flex: 1;
		padding: 28px;
		border: 1px solid var(--color-border);
		border-radius: 10px;
		text-decoration: none;
		color: inherit;
		transition: border-color var(--transition-fast);
	}

	.resource-related__card:hover {
		border-color: var(--color-border-hover);
	}

	.resource-related__dot {
		inline-size: 8px;
		block-size: 8px;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.resource-related__type {
		font-size: 0.6875rem;
		font-weight: var(--font-weight-medium);
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--color-text-muted-invert);
	}

	.resource-related__card h4 {
		font-size: 1.125rem;
		letter-spacing: -0.01em;
		line-height: 1.333;
		margin-block: 16px 12px;
	}

	.resource-related__card p {
		font-size: var(--font-size-sm);
		line-height: 1.571;
		color: var(--color-text-muted);
		margin-block-end: 16px;
	}

	.resource-related__card .read-link {
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-medium);
		color: var(--color-text);
		text-decoration: none;
	}

	/* mobile responsive ---------------------------------------------------- */
	@media (max-width: 49.999em) {
		.resource-intro__inner {
			flex-direction: column;
			gap: 40px;
		}

		.resource-intro__stats {
			inline-size: 100%;
			border-inline-start: none;
			border-block-start: 2px solid var(--color-border);
			padding: 32px 0 0;
			display: flex;
			gap: 32px;
		}

		.resource-intro__stat + .resource-intro__stat {
			margin-block-start: 0;
		}

		.resource-body__inner {
			flex-direction: column;
			gap: 40px;
		}

		.resource-toc {
			inline-size: 100%;
			position: static;
		}

		.resource-toc__list {
			display: flex;
			flex-wrap: wrap;
			gap: 4px 0;
			border-inline-start: none;
			border-block-end: 2px solid var(--color-border);
			padding-block-end: 20px;
		}

		.resource-toc__item {
			padding: 6px 12px;
		}

		.resource-toc__item:has(a:target-current) {
			border-inline-start: none;
			margin-inline-start: 0;
			border-block-end: 2px solid var(--color-accent);
			margin-block-end: -2px;
		}

		.resource-answers {
			flex-direction: column;
			padding-inline-start: 0;
		}

		.resource-scores {
			flex-direction: column;
		}

		.resource-related__grid {
			flex-direction: column;
		}
	}
}