/*
 * Text and image section.
 *
 * Two equal columns, gap 96, vertically centred: copy one side, an image
 * well the other. The well is light grey (white inside a grey section),
 * 560 to 680 tall, with a caption bar underneath: hairline, label, name.
 * About's version bleeds the photo to the page edge.
 *
 *   <div class="vdt-media-section [vdt-media-section--flip]">
 *     <div class="vdt-media-section__copy">…section header…</div>
 *     <figure class="vdt-media-section__figure">
 *       <div class="vdt-media-section__well"><img …></div>
 *       <figcaption class="vdt-figure__caption"><span class="vdt-figure__caption-label">Shown</span> AT-01003 stick reader</figcaption>
 *     </figure>
 *   </div>
 */

@layer vdt.components {
	.vdt-media-section {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--vdt-space-40) var(--vdt-gap-columns);
		align-items: center;
	}

	.vdt-media-section--flip .vdt-media-section__copy {
		order: 2;
	}

	.vdt-media-section__copy {
		max-width: var(--vdt-measure-lead);
	}

	.vdt-media-section__figure {
		margin: 0;
	}

	.vdt-media-section__well {
		display: grid;
		place-items: center;
		min-height: 35rem;
		padding: var(--vdt-space-48);
		background: var(--vdt-surface-alt);
	}

	.vdt-media-section__well img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	/* A product render in a well casts the light shadow. */
	.vdt-media-section__well img.vdt-render {
		filter: var(--vdt-shadow-render-light);
	}

	/* A photograph fills the well instead. */
	.vdt-media-section__well--photo {
		padding: 0;
	}

	.vdt-media-section__well--photo img {
		width: 100%;
		height: 100%;
		min-height: inherit;
		object-fit: cover;
	}

	.vdt-media-section__figure .vdt-figure__caption {
		margin-top: var(--vdt-space-16);
	}

	/* Bleed: the figure runs through the page margin to the edge on its side. */
	.vdt-media-section--bleed .vdt-media-section__figure {
		margin-right: calc(var(--vdt-gutter) * -1);
	}

	.vdt-media-section--bleed.vdt-media-section--flip .vdt-media-section__figure {
		margin-right: 0;
		margin-left: calc(var(--vdt-gutter) * -1);
	}

	@media (max-width: 60rem) {
		.vdt-media-section {
			grid-template-columns: minmax(0, 1fr);
		}

		.vdt-media-section--flip .vdt-media-section__copy {
			order: 0;
		}

		.vdt-media-section__well {
			min-height: 20rem;
			padding: var(--vdt-space-24);
		}

		.vdt-media-section--bleed .vdt-media-section__figure,
		.vdt-media-section--bleed.vdt-media-section--flip .vdt-media-section__figure {
			margin-inline: calc(var(--vdt-gutter) * -1);
		}
	}
}