/*
 * A trainer (single-nayumi_trainer.php; docs/INFORMATION_ARCHITECTURE.md section 7.4). Loaded on trainer pages only
 * (Enqueue). The heading band is the shared page hero (components/sections.css).
 *
 * Head: the portrait above the name on a phone (at most 20rem wide), beside it from 768 px: a third of the row on a
 * tablet, a third again from 1024 px with more room between them.
 */
@layer components {
	.trainer-hero__grid {
		display: grid;
		gap: var(--space-6);
	}

	.trainer-hero__media {
		width: min(100%, 20rem);
	}

	@media (min-width: 48em) {
		.trainer-hero__grid {
			grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
			gap: var(--space-8);
			align-items: center;
		}

		.trainer-hero__media {
			width: 100%;
		}
	}

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

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

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

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

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

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