/*
 * A course page (single-nayumi_course.php; docs/INFORMATION_ARCHITECTURE.md section 7.7, docs/DESIGN_SYSTEM.md
 * sections 8.9 and 9). Loaded on course pages only (Enqueue).
 *
 * Head: text first and the photo under it (4:3 on a phone, 16:10 on a tablet); side by side from 1024 px.
 * Facts bar: two facts a row on a phone, three on a tablet (four facts make two rows of two), all in one row from
 * 1024 px. Text: one column; from 1024 px the enquiry card stays in view beside it. Below 1024 px the card gives way to
 * a bar at the foot of the window with the price and the WhatsApp button.
 */
@layer components {
	/* Head */
	.course-hero {
		padding-block: var(--space-5) var(--space-8);
	}

	.course-hero__grid {
		display: grid;
		gap: var(--space-7);
		align-items: center;
	}

	@media (min-width: 64em) {
		.course-hero__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--space-9);
		}
	}

	.course-hero__text > * + * {
		margin-block-start: var(--space-5);
	}

	.course-hero__lead {
		max-width: 34em;
		color: var(--color-text-secondary);
		font-size: var(--fs-lead);
		line-height: var(--lh-lead);
	}

	.course-hero__badges {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		padding: 0;
		list-style: none;
	}

	.course-hero__text > .course-hero__actions {
		margin-block-start: var(--space-7);
	}

	@media (min-width: 48em) {
		.course-hero__media {
			aspect-ratio: 16 / 10;
		}
	}

	@media (min-width: 64em) {
		.course-hero__media {
			aspect-ratio: 4 / 3;
		}
	}

	/* Facts bar */
	.course-facts {
		padding-block: var(--space-6) var(--space-7);
		border-block-end: var(--border-hairline);
	}

	.course-facts__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-5) var(--space-4);
	}

	.course-facts__item {
		padding-block-start: var(--space-3);
		border-block-start: 1px solid var(--color-accent);
	}

	.course-facts__item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.course-facts__label {
		color: var(--color-text-muted);
		font-size: var(--fs-caption);
		font-weight: 600;
		line-height: var(--lh-caption);
		letter-spacing: var(--tracking-eyebrow);
		text-transform: uppercase;
	}

	.course-facts__value {
		margin-block-start: var(--space-1);
		font-size: var(--fs-h4);
		font-weight: 600;
		line-height: var(--lh-h4);
	}

	.course-facts__note {
		margin-block-start: var(--space-1);
		color: var(--color-text-secondary);
		font-size: var(--fs-small);
		line-height: var(--lh-small);
	}

	.course-facts__provider {
		margin-block-start: var(--space-6);
		color: var(--color-text-secondary);
		font-size: var(--fs-small);
		line-height: var(--lh-small);
	}

	.course-facts__provider-label {
		color: var(--color-text);
		font-weight: 600;
	}

	/* A tablet: three facts a row, on a grid of six so that a short last row shares the width; four facts are two
	   rows of two. */
	@media (min-width: 48em) {
		.course-facts__list {
			grid-template-columns: repeat(6, minmax(0, 1fr));
		}

		.course-facts__item,
		.course-facts__item:last-child:nth-child(odd) {
			grid-column: span 2;
		}

		.course-facts__item:nth-child(3n + 1):nth-last-child(2),
		.course-facts__item:nth-child(3n + 2):last-child,
		.course-facts__list:has(> :nth-child(4):last-child) > .course-facts__item {
			grid-column: span 3;
		}

		.course-facts__item:nth-child(3n + 1):last-child {
			grid-column: 1 / -1;
		}
	}

	/* From 1024 px: every fact in one row. */
	@media (min-width: 64em) {
		.course-facts__list {
			grid-auto-columns: minmax(0, 1fr);
			grid-auto-flow: column;
			grid-template-columns: none;
		}

		.course-facts__item,
		.course-facts__item:last-child:nth-child(odd),
		.course-facts__item:nth-child(3n + 1):nth-last-child(2),
		.course-facts__item:nth-child(3n + 2):last-child,
		.course-facts__item:nth-child(3n + 1):last-child,
		.course-facts__list:has(> :nth-child(4):last-child) > .course-facts__item {
			grid-column: auto;
		}
	}

	/* Text, with the enquiry card beside it from 1024 px. The facts bar above it already makes a break, so the text
	   starts closer than a section usually would. */
	.course__main {
		padding-block-start: var(--space-8);
	}

	.course__layout {
		display: grid;
		gap: var(--space-8);
	}

	@media (min-width: 64em) {
		.course__layout {
			grid-template-columns: minmax(0, 1fr) 22rem;
			align-items: start;
			gap: var(--space-8);
		}
	}

	.course__side {
		display: none;
	}

	@media (min-width: 64em) {
		.course__side {
			display: block;
			align-self: stretch;
		}
	}

	/* The trainers of the course, under its text: two a row, three from 768 px. */
	.course-trainers {
		margin-block-start: var(--space-9);
	}

	.course-trainers__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-5) var(--space-4);
		margin-block-start: var(--space-6);
		padding: 0;
		list-style: none;
	}

	@media (min-width: 48em) {
		.course-trainers__list {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: var(--space-5);
		}
	}

	/* The enquiry card: in view below the header while the text scrolls. */
	.enquiry-card {
		position: sticky;
		inset-block-start: calc(var(--header-h) + var(--space-5));
		padding: var(--space-5);
		border: var(--border-hairline);
		border-radius: var(--radius-lg);
		background: var(--color-surface);
	}

	/* The price is a fact, so it is set in the body font with even figures, not in the display font. */
	.enquiry-card__price {
		margin-block-start: var(--space-1);
		font-size: var(--fs-h3);
		font-weight: 600;
		line-height: var(--lh-h3);
	}

	.enquiry-card__label {
		color: var(--color-text-muted);
	}

	.enquiry-card__note {
		margin-block-start: var(--space-2);
		color: var(--color-text-secondary);
		font-size: var(--fs-small);
		line-height: var(--lh-small);
	}

	.enquiry-card__details {
		margin-block-start: var(--space-5);
		border-block-start: var(--border-hairline);
		font-size: var(--fs-small);
		line-height: var(--lh-small);
	}

	.enquiry-card__detail {
		display: flex;
		justify-content: space-between;
		gap: var(--space-4);
		padding-block: var(--space-3);
		border-block-end: var(--border-hairline);
	}

	.enquiry-card__detail dt {
		color: var(--color-text-secondary);
	}

	.enquiry-card__detail dd {
		font-weight: 600;
		text-align: end;
	}

	.enquiry-card .btn {
		width: 100%;
		margin-block-start: var(--space-5);
	}

	.enquiry-card__contact {
		margin-block-start: var(--space-5);
		padding-block-start: var(--space-4);
		border-block-start: var(--border-hairline);
		color: var(--color-text-secondary);
		font-size: var(--fs-small);
		line-height: var(--lh-small);
	}

	.enquiry-card__contact ul {
		padding: 0;
		list-style: none;
	}

	.enquiry-card__contact a {
		display: inline-flex;
		align-items: center;
		min-height: var(--size-control-sm);
		font-weight: 600;
	}

	/* The bar at the foot of the window, below 1024 px. It is sticky inside the course, so it stops above the closing
	   band; it sits above the page's cards (later in the page, same layer) and under the header and its menu panel. */
	.course-bar {
		position: sticky;
		inset-block-end: 0;
		z-index: var(--z-base);
		padding-block: var(--space-2) max(var(--space-2), env(safe-area-inset-bottom));
		border-block-start: var(--border-hairline);
		background: var(--color-surface);
	}

	@media (min-width: 64em) {
		.course-bar {
			display: none;
		}
	}

	.course-bar__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
	}

	.course-bar__price {
		display: flex;
		flex: none;
		flex-direction: column;
		line-height: var(--lh-small);
		white-space: nowrap;
	}

	.course-bar__label {
		color: var(--color-text-muted);
		font-size: var(--fs-caption);
		font-weight: 600;
		letter-spacing: var(--tracking-eyebrow);
		text-transform: uppercase;
	}

	.course-bar__amount {
		font-weight: 600;
	}

	/* The button is the small size, so the bar stays within --bar-h, the room the page keeps clear above it for the
	   focused element (base.css). It gives way before the price on the narrowest phones; without a price it takes the
	   whole bar. */
	.course-bar .btn {
		flex: 0 1 auto;
		min-width: 0;
		min-height: var(--size-control-sm);
		padding-inline: var(--space-4);
	}

	.course-bar__inner > .btn:only-child {
		flex: 1 1 auto;
	}

	@media (forced-colors: active) {
		.enquiry-card,
		.course-bar {
			border-color: CanvasText;
		}
	}
}