/*
 * The home page (patterns/home*.php). Loaded on the front page only (Enqueue::page_styles()).
 *
 * Hero (docs/DESIGN_SYSTEM.md sections 8.8 and 9): text first; the photo below it, square on a phone and 16:10 on a
 * tablet; from 1024 px text and a 4:5 photo side by side, six columns each. The heading is the display size.
 */
@layer components {
	.home-hero__grid {
		display: grid;
		gap: var(--space-7);
		align-items: center;
	}

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

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

	.home-hero__title {
		font-size: var(--fs-display);
		line-height: var(--lh-display);
	}

	.home-hero__lead {
		max-width: 34em;
		color: var(--color-text-secondary);
	}

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

	.home-hero__media {
		aspect-ratio: 1;
		border-radius: var(--radius-xl);
	}

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

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

	/* Why NAYUMI: the principles sit well apart from the text and photo above them. */
	.why {
		--stack-space: var(--space-9);
	}

	/* The trust strip under the hero: short proof points with a hairline above, two by two on a phone, four in a row
	   from 1024 px. */
	.trust__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-5) var(--space-4);
		padding: 0;
		list-style: none;
	}

	@media (min-width: 64em) {
		.trust__list {
			grid-template-columns: repeat(4, 1fr);
			gap: var(--space-6);
		}
	}

	.trust__list li {
		padding-block-start: var(--space-3);
		border-block-start: 1px solid var(--color-accent);
		color: var(--color-text-secondary);
		font-size: var(--fs-small);
		font-weight: 600;
		line-height: var(--lh-small);
	}
}