/*
 * Layer: templates. The front page's section layout (kit pages/index.html): hero, islands,
 * library rows + crane, testimonial, featured course, membership plate, newsletter. Components
 * (buttons, island, rows, plate, newsletter) are in components/; motion is in motion.css.
 */
@layer templates {

	/* Sections butt together: no block gap between them, nor before the footer. */
	.wp-site-blocks > .nd-front,
	.wp-site-blocks > .nd-front + * {
		margin-block-start: 0;
	}

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

	/* Hero (kit .hero): the cover is 980px; the poster/loop fills its top 900px. */
	.wp-block-cover.is-style-living {
		align-items: flex-start;
		min-height: 980px;
		padding: 0;
		background-color: var(--wp--preset--color--porcelain);
		color: var(--wp--preset--color--ink);
	}

	.wp-block-cover.is-style-living > :is(.wp-block-cover__image-background, .nd-living) {
		z-index: 0;
		bottom: auto;
		height: 900px;
	}

	/* Fade into the porcelain ground (kit .hero__fade). */
	.wp-block-cover.is-style-living::before {
		content: "";
		position: absolute;
		top: 700px;
		right: 0;
		left: 0;
		z-index: 1;
		height: 280px;
		background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--wp--preset--color--porcelain) 72%, transparent) 60%, var(--wp--preset--color--porcelain) 100%);
		pointer-events: none;
	}

	/* Mist (kit .hero__mist); motion.css lets it drift. */
	.wp-block-cover.is-style-living::after {
		content: "";
		position: absolute;
		right: -10%;
		bottom: -40px;
		left: -10%;
		z-index: 1;
		height: 300px;
		background:
			radial-gradient(55% 50% at 12% 70%, color-mix(in srgb, var(--wp--preset--color--porcelain) 90%, transparent), transparent 70%),
			radial-gradient(50% 45% at 55% 80%, color-mix(in srgb, var(--wp--preset--color--porcelain) 85%, transparent), transparent 70%),
			radial-gradient(45% 40% at 95% 60%, color-mix(in srgb, var(--wp--preset--color--porcelain) 90%, transparent), transparent 70%);
		pointer-events: none;
	}

	.wp-block-cover.is-style-living .wp-block-cover__inner-container {
		z-index: 2;
		margin-top: 120px;
	}

	/* Copy (kit .hero__copy): centred over a soft porcelain glow. */
	.nd-hero__copy {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 48px 24px 40px;
		background: radial-gradient(ellipse 48% 70% at 50% 50%, color-mix(in srgb, var(--wp--preset--color--porcelain) 95%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--porcelain) 60%, transparent) 55%, transparent 100%);
		text-align: center;
	}

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

	.nd-hero__copy .nd-hero__eyebrow {
		justify-content: center;
	}

	.nd-hero__copy .nd-hero__title {
		max-width: 1100px;
		margin: 28px 0 30px;
		line-height: var(--wp--custom--line-height--display-xl);
		letter-spacing: var(--wp--custom--tracking--display-xl);
		text-wrap: balance;
	}

	.nd-hero__title em {
		color: var(--wp--preset--color--brand-deep);
		font-style: italic;
	}

	.nd-hero__copy .nd-hero__lead {
		max-width: 600px;
		margin-bottom: 40px;
		color: var(--wp--preset--color--ink-soft);
		line-height: var(--wp--custom--line-height--body);
		text-wrap: pretty;
	}

	.nd-hero__actions {
		gap: 14px;
		justify-content: center;
	}

	/* Islands (kit .islands): float up over the hero's foot (M15 follow-up: higher), staggered down the page. */
	.nd-islands {
		position: relative;
		z-index: 2;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px;
		align-items: start;
		margin-top: -280px;
		padding: 0 var(--wp--style--root--padding-right) 96px var(--wp--style--root--padding-left);
	}

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

	.nd-islands > :nth-child(2) {
		margin-top: 64px;
	}

	.nd-islands > :nth-child(3) {
		margin-top: 128px;
	}

	/*
	 * New in the library (kit .library): rows beside the crane, which bleeds off the right edge.
	 * Past the 1920 shell cap the gap takes the bleed, so the rows keep their capped width.
	 */
	.nd-library {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 520px;
		gap: 56px;
		column-gap: calc(56px + var(--wp--custom--shell--bleed));
		align-items: center;
		overflow: hidden;
		padding: 0 0 40px var(--wp--style--root--padding-left);
	}

	.nd-library > *,
	.nd-library__list > * {
		margin-block: 0;
	}

	.nd-library__list {
		padding: 40px 0 80px;
	}

	.nd-library__list .nd-library__title {
		margin-bottom: 36px;
		line-height: var(--wp--custom--line-height--display-m);
		letter-spacing: var(--wp--custom--tracking--display-m);
		text-wrap: balance;
	}

	.nd-library__list .nd-library__more {
		margin-top: 32px;
	}

	.nd-library__more .wp-block-button__link {
		font-size: var(--wp--preset--font-size--article);
	}

	.nd-library__img {
		position: relative;
		height: 760px;
		margin: 0;
	}

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

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

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

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

	/* Testimonial (kit .testimonial). */
	.nd-testimonial {
		padding: 64px var(--wp--style--root--padding-right) 96px var(--wp--style--root--padding-left);
		text-align: center;
	}

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

	/* The breathing red dot above the quote. */
	.nd-testimonial::before {
		content: "";
		display: inline-block;
		width: 12px;
		height: 12px;
		margin-bottom: 36px;
		border-radius: 50%;
		background-color: var(--wp--preset--color--cinnabar);
	}

	.nd-testimonial .wp-block-quote {
		max-width: 900px;
		margin-inline: auto;
	}

	.nd-testimonial .wp-block-separator {
		margin-top: 56px;
	}

	/* Featured course (kit .course): the pine fills the band; the copy floats left on a glow. */
	.nd-feature {
		position: relative;
		height: 640px;
		overflow: hidden;
	}

	.nd-feature .nd-feature__img {
		position: absolute;
		inset: 0;
		margin: 0;
	}

	.nd-feature__img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: right center;
	}

	.nd-feature::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background:
			linear-gradient(180deg, var(--wp--preset--color--porcelain) 0%, transparent 14%, transparent 84%, var(--wp--preset--color--porcelain) 100%),
			linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--porcelain) 80%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--porcelain) 40%, transparent) 36%, transparent 56%);
		pointer-events: none;
	}

	.nd-feature .nd-feature__copy {
		position: absolute;
		top: 50%;
		left: var(--wp--style--root--padding-left);
		z-index: 2;
		box-sizing: content-box;
		max-width: 620px;
		margin: 0;
		padding: 48px 64px 48px 0;
		background: radial-gradient(ellipse 70% 80% at 38% 50%, color-mix(in srgb, var(--wp--preset--color--porcelain) 96%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--porcelain) 70%, transparent) 55%, transparent 100%);
		transform: translateY(-50%);
	}

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

	/* The glow keeps the copy legible over the pine; buttons keep their own crisp labels. */
	.nd-feature__copy > :not(.wp-block-buttons) {
		text-shadow:
			0 0 18px color-mix(in srgb, var(--wp--preset--color--porcelain) 95%, transparent),
			0 0 42px color-mix(in srgb, var(--wp--preset--color--porcelain) 90%, transparent),
			0 0 80px color-mix(in srgb, var(--wp--preset--color--porcelain) 80%, transparent);
	}

	.nd-feature__copy .nd-feature__title {
		margin: 20px 0 22px;
		line-height: var(--wp--custom--line-height--display-l);
		letter-spacing: var(--wp--custom--tracking--display);
		text-wrap: balance;
	}

	.nd-feature__copy .nd-feature__tags {
		gap: 10px;
		margin-bottom: 30px;
	}

	/* Kit's page-level .tag: a step larger than the shared .nd-tag. */
	.nd-feature__tags .nd-tag {
		padding: 8px 14px;
		font-size: var(--wp--preset--font-size--eyebrow);
	}

	.nd-feature__actions {
		gap: 14px;
	}

	.nd-feature__actions .is-style-text-link .wp-block-button__link {
		padding: 18px 10px;
		font-size: var(--wp--preset--font-size--medium);
	}

	/* Membership plate (kit .plate). */
	.nd-plate-section {
		display: grid;
		grid-template-columns: 560px minmax(0, 1fr);
		gap: 88px;
		align-items: center;
		padding: 96px var(--wp--style--root--padding-right) 128px var(--wp--style--root--padding-left);
	}

	.nd-plate-section > *,
	.nd-plate-section__copy > * {
		margin-block: 0;
	}

	.nd-plate-section .is-style-plate-round {
		width: 560px;
		max-width: 100%;
	}

	.nd-plate-section__copy {
		max-width: 560px;
	}

	.nd-plate-section__copy h2 {
		margin: 18px 0 20px;
		line-height: var(--wp--custom--line-height--display-l);
		letter-spacing: var(--wp--custom--tracking--display);
		text-wrap: balance;
	}

	.nd-plate-section__copy .nd-plate-section__text {
		margin-bottom: 32px;
		color: var(--wp--preset--color--ink-soft);
		text-wrap: pretty;
	}

	/* The kit's one breakpoint. */
	@media (max-width: 1100px) {

		.wp-block-cover.is-style-living {
			min-height: 100svh;
		}

		.wp-block-cover.is-style-living > :is(.wp-block-cover__image-background, .nd-living) {
			bottom: 0;
			height: 100%;
		}

		.wp-block-cover.is-style-living .wp-block-cover__inner-container {
			margin-top: 0;
		}

		.nd-hero__copy {
			padding: 140px 24px 80px;
		}

		/* Kit .actions: both the hero and course button rows stack full width. */
		:is(.nd-hero__actions, .nd-feature__actions) {
			flex-direction: column;
			width: 100%;
		}

		:is(.nd-hero__actions, .nd-feature__actions) > .wp-block-button,
		:is(.nd-hero__actions, .nd-feature__actions) .wp-block-button__link {
			width: 100%;
		}

		.nd-islands {
			grid-template-columns: minmax(0, 1fr);
			gap: 16px;
			margin-top: -60px;
		}

		.nd-islands > :is(:nth-child(2), :nth-child(3)) {
			margin-top: 0;
		}

		.nd-library {
			grid-template-columns: minmax(0, 1fr);
			padding: 0 var(--wp--style--root--padding-right) 0 var(--wp--style--root--padding-left);
		}

		/* The crane is decoration: below the desktop layout it would cost a whole screen. */
		.nd-library__img {
			display: none;
		}

		.nd-feature {
			height: 560px;
		}

		.nd-feature__copy .nd-feature__title {
			font-size: 48px;
		}

		.nd-plate-section {
			grid-template-columns: minmax(0, 1fr);
			gap: 32px;
			justify-items: center;
			text-align: center;
		}

		.nd-plate-section .is-style-plate-round {
			width: 260px;
		}

		.nd-plate-section__copy .nd-eyebrow,
		.nd-plate-section__copy .wp-block-buttons {
			justify-content: center;
		}
	}
}