/**
 * core/columns, Reference pair style (reference-pair.php). Loaded only on pages that use it.
 *
 * Side by side (782px, where core's columns stop stacking) the two columns
 * dissolve into a three-track grid, the same tracks as the wall's gallery:
 * the painting spans two, the photograph takes the third. Row 1 holds the
 * painting and the photograph, bottom-aligned, so the photograph lines up
 * with the painting's image; row 2 holds the painting's wall label. The
 * column gap is the block's own (flow-gap, the gallery's gap). On phones the
 * columns stack as core's do and the Reference photo style halves the photo.
 */

@media (min-width: 782px) {
	.wp-block-columns.is-style-jsa-reference-pair {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 0;
	}

	.is-style-jsa-reference-pair > .wp-block-column {
		display: contents;
	}

	/* Row 1: the painting and the photograph, bottom-aligned (per item: core
	   sets align-items: normal !important on columns). Row 2: the label. */
	.is-style-jsa-reference-pair > .wp-block-column > :first-child {
		grid-row: 1;
		align-self: end;
	}

	.is-style-jsa-reference-pair > .wp-block-column > :not(:first-child) {
		grid-row: 2;
		align-self: start;
	}

	/* Photograph first: it takes track 1, the painting tracks 2 and 3. */
	.is-style-jsa-reference-pair > .wp-block-column:first-child:has(> .is-style-jsa-reference-photo) > * {
		grid-column: 1;
	}

	.is-style-jsa-reference-pair > .wp-block-column:first-child:has(> .is-style-jsa-reference-photo) ~ .wp-block-column > * {
		grid-column: 2 / 4;
	}

	/* Painting first: tracks 1 and 2, the photograph track 3. */
	.is-style-jsa-reference-pair > .wp-block-column:first-child:not(:has(> .is-style-jsa-reference-photo)) > * {
		grid-column: 1 / 3;
	}

	.is-style-jsa-reference-pair > .wp-block-column:last-child:has(> .is-style-jsa-reference-photo) > * {
		grid-column: 3;
	}

	/* The photograph stays smaller than a wall tile, on the painting's side of its track. */
	.is-style-jsa-reference-pair .wp-block-image.is-style-jsa-reference-photo {
		width: min(100%, 7.75rem);
		margin: 0;
		justify-self: end;
	}

	.is-style-jsa-reference-pair > .wp-block-column:last-child > .is-style-jsa-reference-photo {
		justify-self: start;
	}

	.is-style-jsa-reference-pair > .wp-block-column > .wp-block-image,
	.is-style-jsa-reference-pair > .wp-block-column > .wp-block-jsa-artwork {
		margin-block: 0;
	}
}