/**
 * core/group, Detail pair style (detail-pair.php). Loaded only on pages that use it.
 *
 * Three tracks: the close-up spans the first two, the whole painting the last
 * two, so they share the middle track and overlap there. The painting sits in
 * both rows and aligns to the bottom, dropping one section-sm below the
 * close-up; a taller painting just grows the first row, never covers the top.
 * Overrides whatever layout the group was given (grid, flex or flow).
 */

.wp-block-group.is-style-jsa-detail-pair {
	display: grid;
	grid-template-columns: 60fr 14fr 26fr;
	grid-template-rows: auto var(--wp--preset--spacing--section-sm);
	gap: 0;
}

.is-style-jsa-detail-pair > * {
	margin: 0;
}

.is-style-jsa-detail-pair > :first-child {
	grid-column: 1 / 3;
	grid-row: 1;
	align-self: start;
}

.is-style-jsa-detail-pair > :last-child {
	grid-column: 2 / 4;
	grid-row: 1 / 3;
	align-self: end;
	position: relative;
	z-index: 1;
}

/* Phones: a narrower column, so the painting takes a larger share to stay legible. */
@media (max-width: 781px) {
	.wp-block-group.is-style-jsa-detail-pair {
		grid-template-columns: 50fr 30fr 20fr;
	}
}