/*
 * Layer: templates. The courses archive (kit pages/courses.html): course rows (numeral ·
 * cleaned title · Open) beside the sticky rail. The head and toolbar are components/index.css.
 * Each row's real title stays the post-title link: invisible, it covers the row, so assistive
 * tech hears the title once while the numeral and cleaned title (aria-hidden) are what shows.
 */
@layer templates {

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

	.nd-index__grid > *,
	.nd-index__main > * {
		margin-block: 0;
	}

	.nd-index__main > .nd-toolbar {
		margin-bottom: 8px;
	}

	/* Kit .index-rail. */
	.nd-index__rail {
		position: sticky;
		top: 108px;
		display: grid;
		gap: 20px;
	}

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

	/* Course rows (kit .nd-entry.course-row). */
	.wp-block-post-template.is-style-course-rows {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wp-block-post-template.is-style-course-rows > .wp-block-post {
		position: relative;
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr) auto;
		gap: 28px;
		align-items: center;
		margin-block: 0;
		padding: 22px 0;
		border-top: 1px solid var(--wp--preset--color--line);
		color: var(--wp--preset--color--ink);
	}

	.wp-block-post-template.is-style-course-rows > .wp-block-post:last-child {
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.is-style-course-rows .wp-block-post > *,
	.is-style-course-rows .nd-course-row__body > * {
		margin-block: 0;
	}

	/* Empty when the title has none (D6): the column keeps its width. */
	.is-style-course-rows .nd-course-row__numeral {
		padding-top: 8px;
		color: var(--wp--preset--color--brand-deep);
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
		line-height: 1;
	}

	.is-style-course-rows .nd-course-row__title {
		margin-bottom: 4px;
		font-family: var(--wp--preset--font-family--display);
		font-size: 27px;
		font-weight: 500;
		line-height: var(--wp--custom--line-height--entry-title);
		transition: color var(--wp--custom--duration--fast);
	}

	.is-style-course-rows .wp-block-post:hover .nd-course-row__title {
		color: var(--wp--preset--color--brand-deep);
	}

	/* Kit teacher line (.nd-text-s) under the title; empty when the course has no teacher. */
	.is-style-course-rows .nd-course-row__teacher {
		color: var(--wp--preset--color--ink-soft);
		font-size: var(--wp--preset--font-size--small);
		line-height: var(--wp--custom--line-height--small);
	}

	.is-style-course-rows .nd-course-row__teacher:empty {
		display: none;
	}

	/* Kit .nd-entry__tags in the row: the PDA tag, then Open. */
	.is-style-course-rows .nd-course-row__end {
		display: flex;
		gap: 18px;
		align-items: center;
		justify-content: flex-end;
	}

	.is-style-course-rows .nd-course-row__end > * {
		margin: 0;
	}

	/*
	 * The real title: the row's link, transparent over the whole row. Raised: the hover transforms
	 * on Open/arrow create stacking contexts that would otherwise paint above it and eat the click.
	 */
	.is-style-course-rows .nd-course-row__link {
		position: absolute;
		z-index: 1;
		inset: 0;
		margin: 0;
		opacity: 0;
	}

	.is-style-course-rows .nd-decorative {
		pointer-events: none;
	}

	/* The hovered arrow slides 8px past the row's edge, into the 72px column gap. */
	@media (min-width: 1101px) {
		.is-style-course-rows .nd-course-row__link {
			right: -16px;
		}
	}

	.is-style-course-rows .nd-course-row__link a {
		display: block;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.is-style-course-rows .wp-block-post:has(.nd-course-row__link a:focus-visible) {
		box-shadow: var(--wp--custom--focus-ring);
	}

	/* Kit .nd-cta at 16px inside the row. */
	.is-style-course-rows .nd-course-row__open {
		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--label);
		font-weight: 600;
		line-height: 1;
		transform-origin: left center;
		transition: transform var(--wp--custom--duration--base) var(--wp--custom--ease);
	}

	.is-style-course-rows .wp-block-post:hover .nd-course-row__open {
		transform: scale(1.08);
	}

	.is-style-course-rows .wp-block-post:hover .nd-arrow {
		transform: translateX(8px);
	}

	/* "Before you begin" plate (kit .nd-plate, padding 28px 30px). */
	.nd-notice {
		padding: 28px 30px;
	}

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

	/* Kit eyebrows are inline-flex, in a body-height line box. */
	.nd-notice .nd-eyebrow {
		padding-block: 8px 6px;
	}

	.nd-notice__title {
		margin-top: 12px;
		font-family: var(--wp--preset--font-family--display);
		font-size: 26px;
		font-weight: 500;
		line-height: var(--wp--custom--line-height--entry-title);
	}

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

	.nd-notice .wp-block-button__link {
		min-height: 40px;
		padding: 13px 20px;
		font-size: var(--wp--preset--font-size--meta);
	}

	/* Rail island (kit .nd-island + h3 at 30px). */
	.nd-index__rail .nd-island__title {
		font-size: 30px;
	}

	@media (max-width: 1100px) {

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

		.nd-index__rail {
			position: static;
		}

		.wp-block-post-template.is-style-course-rows > .wp-block-post {
			grid-template-columns: minmax(0, 1fr);
			gap: 10px;
		}

		.is-style-course-rows .nd-course-row__numeral {
			padding-top: 0;
		}

		.is-style-course-rows .nd-course-row__numeral:empty {
			display: none;
		}

		.is-style-course-rows .nd-course-row__end {
			justify-content: flex-start;
		}
	}

	@media (prefers-reduced-motion: reduce) {

		.is-style-course-rows .wp-block-post:hover :is(.nd-course-row__open, .nd-arrow) {
			transform: none;
		}
	}
}