/**
 * Section: media and text. Stacked on phones (media first); side by side from
 * 56rem, the media on the side chosen in the editor.
 */

.section-media-text__inner {
	display: grid;
	gap: var(--space-6);
	align-items: center;
}

.section-media-text__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-media);
}

.section-media-text__heading {
	margin-top: 0;
}

.section-media-text__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: var(--space-5) 0 0;
}

.section-media-text__external {
	width: 1rem;
	height: 1rem;
}

/* Image of a PDF sample: opens the PDF (assets/js/pdf-viewer.js). */
.section-media-text__pdf {
	display: block;
	border-radius: var(--radius-media);
	transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

.section-media-text__pdf:hover {
	box-shadow: var(--shadow-raised);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {

	.section-media-text__pdf:hover {
		transform: none;
	}
}

/* Video cover: the player replaces the link on click (assets/js/video.js). */
.section-media-text__video {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-media);
	background: var(--color-navy);
}

.section-media-text__video .section-media-text__image {
	height: 100%;
	border-radius: 0;
	object-fit: cover;
}

.section-media-text__play {
	position: absolute;
	inset: 0;
	display: grid;
	width: 72px;
	height: 72px;
	margin: auto;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	box-shadow: var(--shadow-raised);
	color: var(--color-text-inverse);
	transition: transform var(--duration-fast) var(--ease);
	place-items: center;
}

.section-media-text__video:hover .section-media-text__play {
	transform: scale(1.08);
}

.section-media-text__media .video-player {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--radius-media);
}

@media (min-width: 56rem) {

	.section-media-text__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-8);
	}

	.section-media-text--media-right .section-media-text__media {
		order: 2;
	}
}

@media (prefers-reduced-motion: reduce) {

	.section-media-text__video:hover .section-media-text__play {
		transform: none;
	}
}