/**
 * core/columns, Testimony style (testimony.php). Loaded only on pages that use it.
 *
 * The client words share one panel (Jeffrey, 2026-10-02): one column per
 * quote, each holding its portrait, then a group with the quote and the pet's
 * name. Side by side (782px, where core's columns stop stacking) the columns
 * share a two-row subgrid, so the portraits sit on one baseline and the quotes
 * start on one line whatever the portraits' proportions. One large Sentinel
 * opening quote is pressed into the top left corner. Tonal: the room's wall
 * colour on its panel, so it reads as pressed into the panel rather than as a
 * second colour. On phones the columns stack and the mark goes.
 */

.is-style-jsa-testimony > .wp-block-column > .wp-block-image {
	max-width: 75%;
	margin-inline: auto;
}

@media (max-width: 781px) {
	/* Stacked, each quote needs more room from the next than from its portrait. */
	.wp-block-columns.is-style-jsa-testimony {
		row-gap: var(--wp--preset--spacing--section-sm);
	}
}

@media (min-width: 782px) {
	.wp-block-columns.is-style-jsa-testimony {
		/* Light world: a Hairline mark on the Warm Paper card. */
		--jsa-testimony-mark: var(--wp--preset--color--border-light);
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: auto auto;
		position: relative;
		isolation: isolate;
	}

	.is-style-jsa-navy-room .is-style-jsa-testimony {
		--jsa-testimony-mark: var(--wp--preset--color--gallery-wall);
	}

	.is-style-jsa-earth-room .is-style-jsa-testimony {
		--jsa-testimony-mark: var(--wp--preset--color--red-earth);
	}

	/* Portrait in row 1 on the shared baseline, words in row 2; the row gap is the block's. */
	.is-style-jsa-testimony > .wp-block-column {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		align-items: start;
		position: relative;
		z-index: 1;
	}

	.is-style-jsa-testimony > .wp-block-column > .wp-block-image {
		align-self: end;
		margin-block: 0;
	}

	.is-style-jsa-testimony > .wp-block-column > :not(:first-child) {
		margin-block-start: 0;
	}

	.wp-block-columns.is-style-jsa-testimony::before {
		content: "\201C";
		content: "\201C" / "";
		position: absolute;
		z-index: 0;
		top: -0.2em;
		/* The glyph's ink starts 0.049em right of its box, so this keeps the
		   ink `sm` inside the panel's edge at every size (the panel pads the
		   columns by flow-gap); an em offset alone pushed it onto the wall. */
		left: calc(var(--wp--preset--spacing--sm) - var(--wp--preset--spacing--flow-gap) - 0.049em);
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 300;
		/* 60% larger than first set (Jeffrey, 2026-10-07), so the whole mark
		   shows beside a tall portrait like Buddy's and fills the corner. */
		font-size: clamp(22.4rem, 12.8rem + 16vw, 32rem);
		line-height: 0.8;
		color: var(--jsa-testimony-mark);
		pointer-events: none;
	}
}