/*
 * The parts that page sections are built from (docs/DESIGN_SYSTEM.md section 8.7). The patterns in patterns/ use
 * them; core's layout spacing inside a .section gives way to these rules (overrides.css).
 *
 * Section header: eyebrow, heading, optional lead, optional "All ..." link on the right from 768 px.
 * Split: text beside a photo from 1024 px. Pillars, steps: three or four short items with a hairline above.
 * Band: a deep strip with text and actions. CTA band: the centred closing invitation. Testimonials: a quote and a name.
 */
@layer components {
	.section-eyebrow {
		color: var(--color-accent-text);
	}

	.section--deep .section-eyebrow {
		color: var(--color-text-inverse-muted);
	}

	.section-header {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		margin-block-end: var(--space-7);
	}

	@media (min-width: 48em) {
		.section-header {
			flex-direction: row;
			align-items: flex-end;
			justify-content: space-between;
			gap: var(--space-6);
		}
	}

	.section-header__text {
		max-width: var(--measure);
	}

	.section-header__text > * + *,
	.split__text > * + *,
	.band__text > * + * {
		margin-block-start: var(--space-4);
	}

	/* The eyebrow sits close to its heading. */
	:is(.section-header__text, .split__text, .band__text, .home-hero__text) > .section-eyebrow + * {
		margin-block-start: var(--space-3);
	}

	.section-header__lead {
		color: var(--color-text-secondary);
		font-size: var(--fs-lead);
		line-height: var(--lh-lead);
	}

	.section-header__more {
		flex: none;
	}

	/* A link with an arrow: "All courses". The paragraph holds an ordinary link, so editors can change its words. */
	.link-more a {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		min-height: var(--size-control-sm);
		font-weight: 600;
		text-decoration: none;
	}

	.link-more a::after {
		content: "\2192" / "";
		transition: transform var(--dur-fast) var(--ease-out);
	}

	@media (hover: hover) {
		.link-more a:hover {
			text-decoration-line: underline;
		}

		.link-more a:hover::after {
			transform: translateX(var(--space-1));
		}
	}

	/* A row of buttons: stacked at full width on a phone, side by side from 600 px. */
	.actions {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.actions :is(.wp-block-button, .wp-block-button__link, .btn) {
		width: 100%;
	}

	@media (min-width: 37.5em) {
		.actions {
			flex-flow: row wrap;
			align-items: center;
		}

		.actions :is(.wp-block-button, .wp-block-button__link, .btn) {
			width: auto;
		}
	}

	/* Text and a photo: stacked on a phone, side by side from 768 px. */
	.split {
		display: grid;
		gap: var(--space-7);
		align-items: center;
	}

	@media (min-width: 48em) {
		.split {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.split--reverse .split__media {
			order: -1;
		}
	}

	@media (min-width: 64em) {
		.split {
			gap: var(--space-9);
		}
	}

	.split .actions {
		margin-block-start: var(--space-6);
	}

	/* Principles: a hairline above each, one column, three from 768 px. */
	.pillars {
		display: grid;
		gap: var(--space-6);
		counter-reset: pillar;
	}

	@media (min-width: 48em) {
		.pillars {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.pillar,
	.step {
		padding-block-start: var(--space-5);
		border-block-start: 1px solid var(--color-accent);
	}

	.pillar > * + *,
	.step > * + * {
		margin-block-start: var(--space-2);
	}

	.pillar p,
	.step p {
		color: var(--color-text-secondary);
	}

	.pillar__title,
	.step__title {
		font-size: var(--fs-h4);
		line-height: var(--lh-h4);
	}

	/* Steps: numbered 01 to 04 in tabular figures; two columns from 600 px, four from 1024 px. */
	.steps {
		display: grid;
		gap: var(--space-6) var(--space-5);
		counter-reset: step;
	}

	@media (min-width: 37.5em) {
		.steps {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 64em) {
		.steps {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.step {
		counter-increment: step;
	}

	.step::before {
		display: block;
		margin-block-end: var(--space-3);
		color: var(--color-accent-text);
		font-size: var(--fs-small);
		font-variant-numeric: tabular-nums;
		font-weight: 600;
		content: counter(step, decimal-leading-zero);
	}

	/* Tags: a list of short words as quiet chips. */
	.tag-list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		padding: 0;
		list-style: none;
	}

	.tag-list li {
		padding: var(--space-1) var(--space-3);
		border: 1px solid var(--color-line-strong);
		border-radius: var(--radius-pill);
		color: var(--color-text-secondary);
		font-size: var(--fs-small);
	}

	/* Band: a deep strip with its text on the left and the actions on the right from 1024 px. */
	.band__inner {
		display: grid;
		gap: var(--space-6);
	}

	@media (min-width: 64em) {
		.band__inner {
			grid-template-columns: minmax(0, 2fr) auto;
			align-items: end;
			gap: var(--space-9);
		}
	}

	.band__text {
		max-width: var(--measure);
	}

	.section--deep .band__text p {
		color: var(--color-text-inverse-muted);
	}

	/* Page hero: the heading band of an inner page built from sections (the Our Courses page, a course category). The
	   title is the H1 size, the lead at most 34em; links or chips may follow. With a photo, text and photo sit side by
	   side from 1024 px. */
	.page-hero {
		padding-block: var(--space-7) var(--space-8);
	}

	.page-hero .breadcrumbs {
		margin-block-start: calc(var(--space-7) * -0.5);
	}

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

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

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

	.page-hero__text > .section-eyebrow + * {
		margin-block-start: var(--space-3);
	}

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

	.page-hero__lead > * + * {
		margin-block-start: var(--space-3);
	}

	.page-hero .category-chips,
	.page-hero .wp-block-nayumi-category-chips {
		margin-block-start: var(--space-6);
	}

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

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

	/* Every course by category: a heading and a link per category, then its cards; the groups well apart. */
	.course-catalog__group + .course-catalog__group {
		margin-block-start: var(--space-9);
	}

	.course-catalog__header {
		margin-block-end: var(--space-6);
	}

	/* Questions and answers: the list at reading width under its heading. */
	.faq > .wp-block-details {
		max-width: var(--measure);
	}

	/* The closing invitation, centred. */
	.cta-band__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-4);
		max-width: var(--container-narrow);
		text-align: center;
	}

	.cta-band__inner > .wp-block-nayumi-whatsapp-button {
		margin-block-start: var(--space-3);
	}

	.cta-band__note {
		color: var(--color-text-secondary);
		font-size: var(--fs-small);
	}

	/* Testimonials: a student's own words under the section's eyebrow and heading, in the narrow column. A quote of
	   several sentences reads more easily in the body font, at the lead size; a large opening mark in the display font
	   and the accent shows that it is a quote, and the name follows it. The mark's box is cut to the upper half of its
	   line, where the glyph sits. */
	.testimonials > * + * {
		margin-block-start: var(--space-4);
	}

	.testimonials > .testimonial {
		margin-block-start: var(--space-7);
	}

	.testimonial {
		margin-inline: 0;
		padding: 0;
		border: 0;
		font-family: var(--font-body);
		font-size: var(--fs-lead);
		line-height: var(--lh-lead);
	}

	.testimonial::before {
		display: block;
		height: 0.5em;
		color: var(--color-accent);
		font-family: var(--font-display);
		font-size: var(--fs-display);
		font-synthesis: none;
		line-height: 1;
		content: "\201C" / "";
	}

	.testimonial cite {
		display: block;
		margin-block-start: var(--space-5);
		color: var(--color-text-secondary);
		font-size: var(--fs-small);
		font-style: normal;
		font-weight: 600;
		line-height: var(--lh-small);
	}
}