/*
 * Layer: templates. The course page (kit pages/course.html): head (eyebrow · real title · summary
 * tags · pine), then the intro and utils' course-sections beside the sticky course-rail. Page
 * padding is components/index.css (.nd-index). The kit turns the rail island's hover lift off.
 */
@layer templates {

	.nd-course > * {
		margin-block: 0;
	}

	/* Kit .course-head. */
	.nd-course-head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 460px;
		gap: 48px;
		align-items: center;
		margin-bottom: 72px;
	}

	.nd-course-head > *,
	.nd-course-head__copy > * {
		margin-block: 0;
	}

	/* Kit eyebrows are inline-flex, in a body-height line box (L60). "Course" hides without a numeral. */
	.nd-course-head__eyebrow {
		flex-wrap: wrap;
		gap: 0;
		padding-block: 8px 6px;
	}

	.nd-course-head__eyebrow::before {
		margin-inline-end: 10px;
	}

	.nd-course-head__eyebrow > * {
		margin: 0;
		color: inherit;
		font: inherit;
		letter-spacing: inherit;
	}

	.nd-course-head__label {
		margin-inline-end: 0.4em;
	}

	.nd-course-head__label:has(+ .nd-course-head__numeral:empty),
	.nd-course-head__numeral:empty {
		display: none;
	}

	.nd-course-head__date::before {
		content: "·" / "";
		margin-inline: 10px;
	}

	.nd-course-head__date:first-child::before {
		content: none;
	}

	.nd-course-head .nd-course-head__title {
		margin: 20px 0 24px;
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--display-page);
		font-weight: 500;
		line-height: var(--wp--custom--line-height--display-l);
		letter-spacing: var(--wp--custom--tracking--display);
		text-wrap: balance;
	}

	/* Summary tags (kit .tags + the page-level .tag, a step larger than .nd-tag). */
	.nd-course-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.nd-course-tags .nd-tag {
		padding: 8px 14px;
		font-size: var(--wp--preset--font-size--eyebrow);
	}

	/* Kit .course-head__img + both veils. */
	.nd-course-head .nd-course-head__img {
		position: relative;
		height: 420px;
		margin: 0;
	}

	.nd-course-head__img img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: right center;
	}

	.nd-course-head__img::before,
	.nd-course-head__img::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
	}

	.nd-course-head__img::before {
		background: var(--wp--preset--gradient--veil-left);
	}

	.nd-course-head__img::after {
		background: var(--wp--preset--gradient--veil-y);
	}

	/* Kit .course-grid. */
	.nd-course__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 72px;
		align-items: start;
	}

	.nd-course__grid > *,
	.nd-course__main > * {
		margin-block: 0;
	}

	.nd-course__intro:not(:empty) {
		margin-bottom: 72px;
	}

	/* Kit .course-main > section + .nd-display-s at 40px with the brand-deep number. */
	/* Rail anchors land below the sticky header. */
	.nd-course-section {
		margin-bottom: 72px;
		scroll-margin-top: 108px;
	}

	.nd-course-section__title {
		display: flex;
		gap: 14px;
		align-items: center;
		margin: 0 0 20px;
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--display-s);
		font-weight: 500;
		line-height: var(--wp--custom--line-height--display-s);
	}

	.nd-course-section__number {
		color: var(--wp--preset--color--brand-deep);
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--eyebrow);
		font-weight: 500;
		line-height: 1;
	}

	.nd-course-section__items {
		display: grid;
		gap: 12px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Kit .nd-link-card: the whole card is the link. */
	.nd-link-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 20px;
		align-items: center;
		padding: 22px 26px;
		border-radius: var(--wp--preset--border-radius--media);
		background-color: var(--wp--preset--color--paper);
		box-shadow: 0 0 0 1px var(--wp--preset--color--line);
		color: var(--wp--preset--color--ink);
		text-decoration: none;
		transition:
			transform var(--wp--custom--duration--base) var(--wp--custom--ease),
			box-shadow var(--wp--custom--duration--base);
	}

	.nd-link-card:hover {
		box-shadow: var(--wp--preset--shadow--island);
		color: var(--wp--preset--color--ink);
	}

	.nd-link-card:focus-visible {
		outline: 2px solid transparent;
		box-shadow: var(--wp--custom--focus-ring);
	}

	.nd-link-card[aria-current="page"] {
		box-shadow: 0 0 0 1px var(--wp--preset--color--brand-deep);
	}

	.nd-link-card__body {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 12px;
		align-items: center;
	}

	.nd-link-card__title {
		font-family: var(--wp--preset--font-family--display);
		font-size: 26px;
		font-weight: 500;
		line-height: 1.15;
		text-wrap: pretty;
	}

	/* Kit .nd-cta. */
	.nd-link-card .nd-cta {
		display: inline-flex;
		gap: 10px;
		align-items: center;
		color: var(--wp--preset--color--brand-deep);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--cta);
		font-weight: 600;
		line-height: 1;
		transform-origin: left center;
		transition: transform var(--wp--custom--duration--base) var(--wp--custom--ease);
	}

	/* Kit .course-rail. */
	.nd-course__rail {
		position: sticky;
		top: 108px;
	}

	.nd-course-rail {
		display: grid;
		gap: 20px;
	}

	.nd-course-rail > * {
		margin: 0;
	}

	/* Kit .nd-island at the rail's padding; no hover lift here. */
	.nd-course-rail__island {
		box-sizing: border-box;
		padding: 32px 30px 28px;
		border: 1px solid var(--wp--custom--glass--island-border);
		border-radius: var(--wp--preset--border-radius--card);
		background-color: var(--wp--custom--glass--island);
		box-shadow: var(--wp--preset--shadow--island);
		color: var(--wp--preset--color--ink);
		-webkit-backdrop-filter: var(--wp--custom--blur--card);
		backdrop-filter: var(--wp--custom--blur--card);
	}

	.nd-course-rail__island > * {
		margin-block: 0;
	}

	.nd-course-rail__island .nd-island__glyph {
		margin-bottom: 18px;
		font-family: var(--wp--preset--font-family--cjk);
	}

	.nd-course-rail__title {
		margin-bottom: 12px;
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--display);
		font-size: 30px;
		font-weight: 500;
		line-height: var(--wp--custom--line-height--display-s);
	}

	/* Kit .nd-rail-link. */
	.nd-rail-link {
		display: flex;
		gap: 12px;
		justify-content: space-between;
		padding: 12px 0;
		border-top: 1px solid var(--wp--preset--color--line);
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--label);
		font-weight: 500;
		line-height: 1.3;
		text-decoration: none;
	}

	.nd-rail-link:last-child {
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.nd-rail-link:hover {
		color: var(--wp--preset--color--brand-deep);
	}

	.nd-rail-link span {
		flex: none;
		color: var(--wp--preset--color--ink-muted);
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--eyebrow);
		font-weight: 500;
		line-height: 1.3;
	}

	/* Kit .nd-btn--block below the links. */
	.nd-course-rail__start {
		display: flex;
		gap: 10px;
		justify-content: center;
		width: 100%;
		margin-top: 20px;
		box-sizing: border-box;
		text-decoration: none;
	}

	/* Kit .renew plate (lapsed members only). */
	.nd-renew {
		padding: 24px 26px;
		border-radius: var(--wp--preset--border-radius--card);
		background-color: var(--wp--preset--color--paper);
		box-shadow:
			0 0 0 1px var(--wp--preset--color--line),
			0 0 0 7px var(--wp--preset--color--porcelain),
			0 0 0 8px color-mix(in srgb, var(--wp--preset--color--glass-border) 30%, var(--wp--preset--color--line));
	}

	.nd-renew .nd-eyebrow {
		padding-block: 8px 6px;
	}

	.nd-renew__text {
		margin: 8px 0 16px;
		color: var(--wp--preset--color--ink-soft);
		font-size: var(--wp--preset--font-size--small);
		line-height: var(--wp--custom--line-height--small);
	}

	/* Kit .nd-btn--glass.nd-btn--sm. */
	.nd-renew .nd-renew__link {
		min-height: 40px;
		padding: 13px 20px;
		border-color: var(--wp--preset--color--glass-border);
		background-color: var(--wp--custom--glass--button);
		color: var(--wp--preset--color--ink);
		font-size: var(--wp--preset--font-size--meta);
		text-decoration: none;
	}

	.nd-renew .nd-renew__link:is(:hover, :focus-visible) {
		background-color: var(--wp--custom--glass--bg-strong);
		color: var(--wp--preset--color--ink);
	}

	@media (prefers-reduced-motion: no-preference) {

		.nd-link-card:hover {
			transform: translateY(-4px);
		}

		.nd-link-card:hover .nd-cta {
			transform: scale(1.08);
		}

		.nd-link-card:hover .nd-arrow {
			transform: translateX(8px);
		}
	}

	@media (max-width: 1100px) {

		.nd-course-head,
		.nd-course__grid {
			grid-template-columns: minmax(0, 1fr);
		}

		.nd-course-head .nd-course-head__img {
			order: -1;
			height: 260px;
		}

		.nd-course__rail {
			position: static;
		}
	}

	@media (max-width: 600px) {

		.nd-link-card {
			padding: 18px 20px;
		}

		.nd-link-card__title {
			font-size: 22px;
		}
	}
}