/* =========================================================================
 * Feature Grid 005 — Two Notes Around a Tall Photo
 *
 * The layout is the blocks' (pattern.php): a Constrained section, a centred
 * Stack for the head, a 7-column Grid with spans 2 / 3 / 2, and two vertical
 * Stacks that push their note and photo to their two ends. This file only
 * does what no block setting can: the photos fill their column, the
 * statement balances its lines, and below md the grid becomes one column.
 * ========================================================================= */

/* The statement: a short line, held to a measure in em so it breaks into
   two balanced lines on a computer whatever its fluid size (it would run
   about 23em on one line); on a phone the column narrows it further.
   Composition geometry, not spacing. Balanced, so no word is left alone. */
.feature-grid-005 .feature-grid-005__head h2 {
	max-width: 15em;
	margin: 0;
	text-wrap: balance;
}

.feature-grid-005 .feature-grid-005__head > p {
	margin: 0;
}

/* Every photo fills the width its column gives it; the block's own aspect
   ratio sets its height. */
.feature-grid-005 .feature-grid-005__photo.feature-grid-005__photo {
	width: 100%;
	margin: 0;
}

.feature-grid-005__photo img {
	display: block;
	width: 100%;
}

/* The tall photo: its 4:5 sets the row's height, at least; when a side
   column needs more (a note that wraps on a narrow screen), the row grows and
   the photo grows with it, cropped, so it always reaches the row's foot. The
   grid stretches it, and a stretched grid item has a definite height. */
.feature-grid-005 .feature-grid-005__tall.feature-grid-005__tall img {
	height: 100%;
}

/* The editor writes an inline `height: auto` on block images; only
   !important beats it (AGENTS.md, "CSS traps"). Editor only. */
.editor-styles-wrapper .feature-grid-005 .feature-grid-005__tall img {
	height: 100% !important;
}

.feature-grid-005__note > * {
	margin-block: 0;
}

.feature-grid-005__note > h4 + p {
	margin-top: var(--space-sm);
}

/* Below md (a tablet held upright, a phone): one column, in the blocks'
   order. Every child takes the whole row whatever its span; nothing else is
   decided here (the side stacks keep their own order and alignment). Two
   classes: core's span rule weighs one. */
@media (max-width: 48rem) {
	.feature-grid-005__grid.feature-grid-005__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.feature-grid-005__grid.feature-grid-005__grid > * {
		grid-column: 1 / -1;
	}

	/* In one column the side stacks are as tall as their content: no row
	   to stretch to, so the space between their two ends is the stack's
	   own gap. */
	.feature-grid-005 .feature-grid-005__col.feature-grid-005__col {
		gap: var(--space-md);
	}
}