/*
	Block-composed pages — the ONLY rules here.

	Scoped to `.agt-blocks`, which page.php emits only when a page's content is blocks. No page
	that exists today takes that branch (see the has_blocks() note in page.php), so nothing in this
	file can move a pixel on any page the gate compares. That is the whole reason it is a separate
	file rather than an addition to a copied stylesheet.

	What it fixes: every AGT block carries its own `.container`, so AGT sections need nothing. But an
	editor will also drop core blocks — a paragraph, a heading, a list — between them, and a bare
	core block in a full-bleed wrapper runs edge to edge. These rules give those, and only those, the
	same width as `.container`.

	`--container-max` and `--space-4` are prod's own custom properties from /css/travel.css. Reusing
	them rather than restating a number is what keeps this from becoming a second source of truth for
	the site's width.
*/

.agt-blocks > p,
.agt-blocks > h1,
.agt-blocks > h2,
.agt-blocks > h3,
.agt-blocks > h4,
.agt-blocks > h5,
.agt-blocks > h6,
.agt-blocks > ul,
.agt-blocks > ol,
.agt-blocks > blockquote,
.agt-blocks > figure,
.agt-blocks > pre,
.agt-blocks > table,
.agt-blocks > hr,
.agt-blocks > .wp-block-group,
.agt-blocks > .wp-block-columns,
.agt-blocks > .wp-block-buttons,
.agt-blocks > .wp-block-image,
.agt-blocks > .wp-block-embed,
.agt-blocks > .wp-block-separator {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-4);
	padding-right: var(--space-4);
}

/*
	agt/hero — the OPTIONAL extras, MOVED HERE FROM blocks/hero/style.css on 2026-09-03.

	Nothing below styles the hero itself. The hero's appearance is prod's, from the copied
	/css/travel.css, and none of this may override a rule that lives there — INSTRUCTIONS.md: the
	copied CSS is the contract. Every selector is a class the block emits ONLY when an editor asks
	for it, so on a default hero none of them match.

	WHY IT IS NOT block.json's `style` ANY MORE, measured rather than argued. The moment an article's
	post_content gained an `agt/hero` block, WordPress inlined that 2.6KB stylesheet into the page —
	`wp_maybe_inline_styles()` inlines a block stylesheet under 20KB — and every one of the 14 article
	pages grew by exactly 2746 bytes with no pixel moved. RULES.md: "Defaults are byte-identical. A
	block with default attributes emits what the template emitted." A `<style>` block in the head is
	not that. css/blocks.css is already a `<link>` on every page, so these rules cost the HTML nothing
	at all here.
*/

/* Scrim: a flat wash over the image, colour chosen in the editor. */
.agt-hero-component--overlay-scrim::before {
	background: var( --agt-hero-scrim, rgb( 0 0 0 / 45% ) );
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/* Gradient: dark at the bottom where the text sits, clear at the top. */
.agt-hero-component--overlay-gradient::before {
	background: linear-gradient( to top, rgb( 0 0 0 / 70% ), transparent 60% );
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/*
 * None: switch off whatever prod's own CSS paints over the image. Scoped to the two things prod
 * uses for it, rather than a blanket rule, so it cannot silently kill something else.
 */
.agt-hero-component--overlay-none::before,
.agt-hero-component--overlay-none::after {
	display: none;
}

/*
 * Blur applies to the BACKGROUND, never the section: `filter` on the section would blur the heading
 * with it. A pseudo-element cannot carry the parent's background-image, so this blurs a copy of it
 * via backdrop-filter on the overlay layer instead.
 */
.agt-hero-component--blur::before {
	backdrop-filter: blur( 8px );
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/* Text colour, applied to the content only, so nothing outside the hero inherits it. */
.agt-hero-component--tinted .agt-hero-component__content,
.agt-hero-component--tinted .agt-hero-component__content h1,
.agt-hero-component--tinted .agt-hero-component__subtitle {
	color: var( --agt-hero-text, inherit );
}

/*
 * The content must sit ABOVE any overlay pseudo-element added here. Only applied alongside one of
 * this file's own modifier classes, so a default hero's stacking is left exactly as prod has it.
 */
.agt-hero-component--overlay-scrim .agt-container,
.agt-hero-component--overlay-gradient .agt-container,
.agt-hero-component--blur .agt-container {
	position: relative;
	z-index: 1;
}

/*
	CORE BLOCK STYLES THAT MOVE THE GATE — held back to prod's computed values.

	Converting the article body to core blocks makes WordPress emit its per-block stylesheets. The
	reasoning for every declaration in them is in `inc/block-writer.php` under "WHAT CORE'S OWN CSS
	DOES TO US"; all but these two are already the computed value and change nothing. These two do
	change it, so at defaults they are put back. Ship order #1: nothing visible moves before we are
	live (Tamm, 2026-09-10, rejecting article-detail and destination-detail in the VRT run).

	MEASURED at 1440px on /articles/6-ways-avitourism-can-help-conserve-australian-birds:

	                       prod        local before      local after
	  figcaption margin    0 / 0       8.5px / 17px      0 / 0
	  hr border-top        1px inset   2px solid         1px inset

	Five captions on that page at 25.5px each is 127.5px of the 210px the desktop capture grew by.
	The two `<hr>` measured 2.0px tall on BOTH sides, so the separator is a colour diff, not a
	layout shift — put back for pixel parity, not for height.
*/

.wp-block-image figcaption {
	margin-top: 0;
	margin-bottom: 0;
}

hr.wp-block-separator {
	border: 1px inset;
}

/* The destination activity grid ends the two-column layout. Its generic grid margin added a
 * 30px blank strip before the following full-width adventure chooser. */
.grid-layout--destination .element-image-gallery {
	margin-bottom: 0;
}

/*
	agt/adventure-chooser — TWO BREAKPOINTS LAND ON THE SAME PIXEL AND THE CARD LOSES 37% OF ITS WIDTH.

	Measured on the public side before this, at `.adventure-chooser .agt-tour-card`:

	    viewport   cards   card width
	      900        2       191.0px
	     1199        2       265.8px
	     1200        3       168.0px    <- one pixel of viewport, -37%
	     1400+       3       234.7px    <- still 12% narrower than at 1199

	`/css/travel.css:7229` turns `.adventure-chooser__content` from `1fr 1fr` into `560px 1fr` at
	`min-width: 1200px`, and `:7305` takes `.adventure-tours` from 2 columns to 3 at the same width.
	Both fire together. The map track gains 12.5px, the tours column loses 11.5px, and the card count
	goes up by one inside it.

	THREE COLUMNS CANNOT BE MADE TO WORK HERE, and that is why this fix removes them rather than
	moving them. `.adventure-chooser__content` is capped at `--container-max: 1400px` with `2rem` of
	padding, so its inner width never exceeds 1336px; minus the 560px map and the 40px gap the tours
	column never exceeds 736px, and 736px across three columns is 234.7px — permanently narrower than
	the 265.8px two columns give at 1199px. So no breakpoint exists at which 3-up beats 2-up, and
	Tamm's "wider viewports should not give narrower cards than narrower ones" forces 2-up.

	The second rule is the remaining 5.75px of it: `1fr 1fr` gives the map 547.5px at 1199px and the
	fixed track then jumps it to 560px, so the tours column still dips for one pixel. `1fr` reaches
	560px at a 1224px viewport, so the fixed track starts there instead and the two meet flush.

	Measured after: 900 -> 191.0, 1199 -> 265.8, 1200 -> 265.8, 1224 -> 272.0, 1300 -> 310.0,
	1400+ -> 360.0. Monotonic, no step larger than 0.5px anywhere.

	OFF AT DEFAULTS, behind `agt_adventure_chooser_2up`. Tamm approved this fix on 2026-09-09 on the
	understanding that "it wouldn't move the gate, because the gate is at fixed sizes". It does: the
	gate's desktop capture is 1440px, which is above the 1200px breakpoint, so `tour-detail` went
	from 3 cards to 2 and came back RED. Tamm rejected it on 2026-09-10 — "major layout shift on
	choose your next adventure cards" — under ship order #3: a visual change ships behind an option
	that is off by default, and at defaults the gate stays pixel-identical to prod.

	Turn it on with:
	  npx wp-env run cli wp option update agt_adventure_chooser_2up 1
*/

@media (min-width: 1200px) {
	.adventure-chooser--2up .adventure-tours {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) and (max-width: 1223px) {
	.adventure-chooser--2up .adventure-chooser__content {
		grid-template-columns: 1fr 1fr;
	}
}

/*
	Per-page theme (light | dark) — docs/RULES.md "Blocks go anywhere, on any background".

	inc/page-theme.php emits data-theme="light" (default) or "dark" (front page default) on <body>.
	These rules live here, not in their own stylesheet, because production loads exactly two
	stylesheets and the gate's @perf budget allows only a11y.css and blocks.css on top. Every
	gate-compared page other than the front page has no `.element--bg-dark` descendant in its
	content, so at rest these rules match nothing and move no pixel.

	`.element--bg-dark` is the class several homepage-style sections share (testimonials, why-agt,
	marquee, featured-explore, explore-grid, the home hero) for a black section on a white page.
	Flipping its own background/text covers the ones that inherit; testimonials sets colour on its
	children explicitly, so it needs its own override.

	ponytail: only testimonials (demonstrated on page 1555) is overridden by name. Add another
	section's descendants here when a light page using it still reads white-on-white.
*/

body[data-theme="light"] .element--bg-dark {
	background-color: var(--agt-white);
	color: var(--agt-black);
}

body[data-theme="light"] .testimonials .testimonial__review,
body[data-theme="light"] .testimonials .testimonial__designation,
body[data-theme="light"] .testimonials .testimonial__author,
body[data-theme="light"] .testimonials .section-title {
	color: var(--agt-black);
}