/*
    Breakpoint steps for block styles whose other rules live in theme.json
    (styles.blocks.*.variations.*.css).

    WHY THIS CANNOT BE IN THEME.JSON: WP_Theme_JSON::process_blocks_custom_css()
    (wp-includes/class-wp-theme-json.php, WP 7.0.3) splits a block's css string
    on "&" and keeps only parts with exactly one "{". An @media block has two,
    so it is dropped, and the rule after it lands unconditionally. Measured:
    the button ">>" vanished and Aside floated at 375. Each rule below is the
    one breakpoint step the legacy design had; the selectors use the base
    is-style-* class, which WP keeps alongside its numbered instance class.
*/

/*
    The overlap between a hero and the article card under it, one number:
    --landing-overlap is how far the card (the Landing Article's first column)
    is pulled up into the hero, and the Post Hero reserves the same height plus
    2rem so its title clears the card. The Hero Overlap Group (templates/single.html)
    holds hero and card and sets it for the hero; the card sets it for itself, so
    the landing pages, whose hero is the Landing Hero, get it too. 5vh, 10vh from 992.
*/
.wp-block-group.is-style-hero-overlap, .wp-block-columns.is-style-landing-article { --landing-overlap: 5vh; }
.wp-block-columns.is-style-landing-article { max-width: var(--wp--style--global--wide-size); }
.wp-block-columns.is-style-landing-article > .wp-block-column:first-child { margin-top: calc(var(--landing-overlap) * -1); }

/* On a landing page the block after the card sits flush under it (the Post Content's block gap would add 2rem; a theme.json rule weighs 0,1,0 and cannot beat it). */
.wp-block-post-content.is-style-landing > .is-style-landing-article + * { margin-block-start: 0; }

@media (min-width: 992px) {
	.wp-block-group.is-style-hero-overlap, .wp-block-columns.is-style-landing-article { --landing-overlap: 10vh; }
}

@media (min-width: 768px) {
	/* Aside: floats beside the prose from tablet up, stacks below it. */
	.wp-block-group.is-style-aside {
		float: right;
		max-width: 430px;
		margin: 0 0 1.08rem 1.08rem;
	}

	/*
	    Post hero. Its frame is a min-height, not aspect-ratio + max-height: with
	    both, the browser narrows a full-width cover to keep the ratio once 90vh
	    caps the height (1701px wide in a 1920 x 900 window).
	*/
	.wp-block-cover.is-style-post-hero {
		align-items: flex-end;
		padding-bottom: calc(var(--landing-overlap, 5vh) + var(--wp--preset--spacing--40));
	}

	/* Photo, Market, Platform and Service Hero: --hero-narrow on a phone (theme.json, core/cover),
	   from tablet up the frame follows the photo's own shape (--hero-ratio; production's
	   project and service heroes measure 49.5vw). Each style differs by --hero-cap and --hero-narrow only. */
	.wp-block-cover:is(.is-style-photo-hero, .is-style-market-hero, .is-style-platform-hero, .is-style-service-hero) {
		min-height: min(var(--hero-cap, 70vh), calc(100vw / var(--hero-ratio, 2.02)));
	}

	/* Columns (the Services archive's A to Z list): the column count steps up with
	   the width, and from 992 each item keeps the 4rem it carried to its right. */
	.wp-block-post-template.is-style-columns {
		columns: 2;
	}

	/* News landing, Featured trio: on a phone the photos run edge to edge (the text
	   boxes stay inset); from a tablet up the section takes the page's side padding
	   (the Group's Gutters from Tablet style), and the lead card's white text box
	   stops at three quarters of the width (the Post Template's Lead Card style). */
	.wp-block-group.is-style-tablet-gutters { padding-inline: var(--wp--preset--spacing--40); }
	.wp-block-post-template.is-style-lead-first > li:first-child .has-white-background-color { max-width: 75%; }

	/* Tabs, Large: the labels sit 4rem apart from tablet up (24px below). */
	.wp-block-esa-tabs.is-style-large .wp-block-esa-tabs__link + .wp-block-esa-tabs__link { margin-left: var(--wp--preset--spacing--70); }

	.wp-block-group.is-style-sub-nav-tabs {
		padding-top: var(--wp--preset--spacing--60);
		padding-bottom: var(--wp--preset--spacing--90);
	}

	.wp-block-group.is-style-sub-nav-tabs .wp-block-navigation__container {
		align-items: flex-end;
	}

	.wp-block-group.is-style-sub-nav-tabs .wp-block-navigation-item__content {
		padding-bottom: var(--wp--preset--spacing--20);
	}
}

/* Landing hero: wider frame and deeper inset on desktop. */
@media (min-width: 992px) {
	.wp-block-cover.is-style-landing-hero {
		aspect-ratio: 16 / 7;
		max-height: 90vh;
	}

	.wp-block-cover.is-style-landing-hero .wp-block-cover__inner-container {
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70) 10vh;
	}

	/* Post hero: a 16:7 frame. */
	.wp-block-cover.is-style-post-hero {
		min-height: min(43.75vw, 90vh);
	}

	/* Columns (A to Z list): three columns, and each item keeps its right padding. */
	.wp-block-post-template.is-style-columns {
		columns: 3;
	}

	.wp-block-post-template.is-style-columns > li {
		padding-right: var(--wp--preset--spacing--70);
	}

	/* Pulled Up column (the biography card, single employee and leader): the white
	   card rises into the photo and takes a side inset; the text moves with it. */
	.wp-block-column.is-style-pull-up { padding-inline: var(--wp--preset--spacing--40); transform: translateY(calc(var(--wp--preset--spacing--60) * -1)); }

	/* Sub-Nav Tabs: eight of the twelve columns. */
	.wp-block-group.is-style-sub-nav-tabs .wp-block-navigation__container {
		max-width: calc(66.6667% - 0.6667rem);
	}
}

/* Wide: legacy follows each image's own shape (--hero-ratio, set from the featured image in inc/block-styles.php; 2.07 is the middle of the house images, 2.02 to 2.12). */
@media (min-width: 1280px) {
	.wp-block-cover.is-style-post-hero {
		min-height: min(calc(100vw / var(--hero-ratio, 2.07)), 90vh);
	}
}

/* Carousel Row, stacked on phones: the service Featured Projects are a plain
   column of cards under 768px as production, the arrows gone. */
@media (max-width: 767.98px) {
	.wp-block-post-template.is-style-carousel-stack { --carousel-gutter: 0px; flex-direction: column; gap: var(--wp--preset--spacing--20); overflow: visible; }
	.carousel:has(> .is-style-carousel-stack) > .carousel__arrow { display: none; }
}

/* Carousel Row: two cards in view from 769px (production's project sliders
   change over at 768, where one card fills the row). */
@media (min-width: 769px) {
	.wp-block-post-template:is(.is-style-carousel-row, .is-style-carousel-stack) {
		--carousel-per-view: 2;
	}
}

/* Project card: the photo is square under 480px and 4:3 above. The block takes
   one ratio and carries 4/3 as an inline style (patterns/project-card.php),
   hence !important. */
@media (max-width: 479.98px) {
	.wp-block-post-template .is-style-card .wp-block-post-featured-image {
		aspect-ratio: 1 !important;
	}
}

/*
    Home, About ESA band (the Group style `about-esa`; page-owned core blocks,
    every colour, size, gap and placement in block attributes, the whole-tile
    link in theme.json). What follows is what block attributes cannot say: they
    have no breakpoint.
*/

/* Mobile tile heights (ruling #20).

   The mosaic's row height is a DESKTOP constant: legacy pins
   `grid-template-rows: 320px` and holds it from 1280 up, which the block
   attributes reproduce as a fixed `minHeight` per tile and a 648px photo
   (two rows plus the gap). Below the one-column breakpoint legacy abandons
   that map entirely and lets each tile take its image's own height — 375x375
   for the two square images, 375x177 for the landscape one, all at 375 wide.

   A block attribute has no breakpoint, so the desktop constant follows the
   tiles down and the photo becomes a 648px slab above a 375px-wide column.
   That is the one thing core supports cannot express here, hence this file.

   `!important` is load-bearing rather than lazy: both values arrive as INLINE
   styles written by the block's own save output (`height:648px`,
   `min-height:20rem`), so nothing at class specificity can reach them.

   599px, not the 781px where core stacks the Columns: between 600 and 780 the
   mosaic still has three tracks and already measures SHORTER than legacy, so
   relaxing the heights there would widen the gap rather than close it. */
@media (max-width: 599.98px) {
	.is-style-about-esa figure.wp-block-image img {
		height: auto !important;
	}

	.is-style-about-esa .is-layout-grid > .wp-block-group {
		min-height: 0 !important;
	}

	/* One full-width track (ruling #23).

	   Legacy has ONE column from 0 to 767 — measured on production, every tile
	   the full viewport width at 375, 480 and 600. The mosaic reaches one
	   column by a different route: `columnCount: 3` +
	   `minimumColumnWidth: 11.5rem` emits
	   `repeat(auto-fill, minmax(max(min(11.5rem,100%), (100% - 16px)/3), 1fr))`,
	   so the track count is auto-fill arithmetic, and auto-fill still finds room
	   for TWO 184px tracks from 376px up.

	   Core's own escape hatch stops one step short. Alongside each
	   `columnSpan`, core emits `@container (max-width: 24.5rem)` — that is
	   2 x 11.5rem + 1.5rem = 392px — flattening the span to `1/-1`. It fires at
	   375, which is why that width already looked right, and NOT at 393-567,
	   where the grid holds two tracks with the spans intact: the field photo
	   and the Berry spotlight span both tracks and run full width, while the
	   Forsman spotlight and the two CTA cards sit at 236px with an empty track
	   beside them. That is the reported symptom, and it is a hole in the map
	   rather than a height: the container query cannot be moved, because its
	   breakpoint is derived from `minimumColumnWidth`, which the desktop ladder
	   pins (see the note in migration/blocks/home-about-esa.php).

	   So pin the track count instead of the tile widths, and neutralise the
	   spans the same way core's container query does. No `!important` here,
	   unlike the two rules above: core's grid and span declarations arrive from
	   the `core-block-supports` stylesheet at class specificity (0,1,0), which
	   0,3,0 clears on its own.

	   The scope stays ruling #20's 599px. 568-599 also collapses (three tracks
	   to one) and that closes toward legacy, which is single-column there too;
	   600-767 keeps its three tracks, still a ruled divergence. */
	.is-style-about-esa .wp-block-group.is-layout-grid {
		grid-template-columns: 1fr;
	}

	.is-style-about-esa .wp-block-group.is-layout-grid > * {
		grid-column: 1 / -1;
	}
}

/* Tablet: the band's Columns stay stacked to 991 (ruling #25).

   Core un-stacks core/columns at 782px, which hands the mosaic nothing but the
   60% column — 463.7px at 782. Three 11.5rem tracks need 3 x 184 + 2 x 8 =
   568px, so from 782 up to about 955 the grid falls to TWO tracks with the
   spans intact, and auto-placement leaves an empty half-cell beside each of the
   three span-1 tiles. The teal statement is squeezed to 310px in the same move
   and hard-wraps its 28px type. Measured at 800: 2449.3px tall against
   production's 2026.3, +423.0 — the worst the band gets at any width.

   The composition already holds a correct answer for these widths: the one it
   uses at 768, where core's own stacking gives the mosaic the full width and
   three tracks and puts the statement full width below it, measuring -76.1
   against production. So hold that regime until the un-stacked one actually
   fits, rather than inventing a third map for a 170px window.

   991 rather than the ~956 where the third track returns: 992 is the step this
   theme and legacy already share (base.css `.section-spacing`), and stopping
   there avoids a 36px sliver of its own regime. 1280 and up is untouched.

   Both !important are core's, answered in kind: it pins `flex-wrap: nowrap`
   from 782, and the 60/40 `flex-basis` arrives as an inline style from the
   columns' save output — ruling #20's reason. The `>` is load-bearing rather
   than tidy: the Join Us card holds its own nested Columns, which must keep
   their photo beside their copy right through this range. */
@media (min-width: 782px) and (max-width: 991.98px) {
	.is-style-about-esa > .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.is-style-about-esa > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Sub-Nav Links (About and Join Us): shown from 992px; item padding lives here
   because core's `.wp-block-navigation ul li { padding: 0 }` outweighs a
   variation. The side padding steps from 24 to 32px at 1280px, as production does. */
.wp-block-group.is-style-sub-nav .wp-block-navigation-item { padding: var(--wp--preset--spacing--30); }

@media (min-width: 1280px) {
	.wp-block-group.is-style-sub-nav .wp-block-navigation-item { padding-inline: var(--wp--preset--spacing--40); }
}

.wp-block-group.is-style-sub-nav .wp-block-navigation-item:last-of-type {
	padding-right: 0;
}

@media (max-width: 991.98px) {
	.wp-block-group.is-style-sub-nav {
		display: none;
	}
}

/* Sub-Nav Tabs (Leadership): a column of links on a phone, a row from 768px with
   the links resting on one line, and eight of the twelve columns from 992px. */
@media (max-width: 767.98px) {
	.wp-block-group.is-style-sub-nav-tabs .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
	}
}