/**
 * Homepage section composition (Step 7 Batch 5–5.3) — front page only.
 *
 * This file styles the BANDS. It deliberately contains no Tour-card, Destination-card,
 * Collection-card or Article-card rules: those components are owned by woocommerce.css
 * and content.css, both of which load on this route, so the homepage renders the
 * identical approved cards rather than a homepage copy of them (the component drift the
 * batch brief forbids).
 *
 * Layered per ADR-06 — no `!important`. Values come from the approved Direction 2A
 * homepage screen; every colour is an existing --wse-* token.
 */

@layer wse.components {

	/* ── Hero (2A: 560px band, cover image, bottom-anchored copy) ──────────── */

	.wse-home-hero {
		position: relative;
		display: flex;
		align-items: flex-end;
		/* 2A is a 560px band on a 1340 canvas. Fluid here so a phone keeps a real
		   photograph rather than a letterbox, and a short laptop never loses the CTA.
		   min() against 78svh keeps the hero + header inside a short viewport. */
		min-height: min(78svh, clamp(420px, 46vw, 560px));
		overflow: hidden;
		background: var(--wse-charcoal-deep);
	}

	.wse-home-hero__image {
		position: absolute;
		inset: 0;
		z-index: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* The block publishes its editor-controlled focal point as a custom property
		   rather than an inline object-position declaration. That preserves the 30%
		   tablet/mobile crop while allowing the measured desktop-only override below. */
		object-position: 50% var(--wse-home-hero-focal-y);
	}

	/* The 4:3 source becomes a wide, shallow crop once the hero reaches its 560px
	   desktop height. At 30%, cover discarded the upper 83 source pixels at 1440
	   and 98px at 1728, clipping the left subject's hair against the header and
	   creating a false overlap. Eight percent is the smallest tested upward shift
	   that keeps that subject inside the crop at 1280/1440/1728 without adding the
	   excess ceiling visible at 0%. Geometry and zoom are unchanged. */
	@media (min-width: 1280px) {
		/* The editor publishes the base focal token inline on the hero. Override
		   the consuming property here so the approved desktop crop wins without
		   discarding the editor-owned mobile/tablet value. */
		.wse-home-hero__image { object-position: 50% 8%; }
	}

	/* Hero scrim — measured against the real photograph, not eyeballed.
	 *
	 * 2A specifies one vertical scrim (.32 / .12 @42% / .80), drawn against a headline
	 * pinned to the last 40px of a 560px band. Our copy block is taller and starts
	 * around 47% of the band, so 2A's stops leave text on a bright photograph: the
	 * first live measurement put the hero eyebrow at 2.77:1 median / 1.84:1 p05.
	 *
	 * The scrim is therefore driven by the copy's WIDTH, which changes with viewport:
	 *  - Base (< 1024px): the copy block spans essentially the whole width, so a
	 *    vertical ramp has to carry all of the contrast on its own.
	 *  - >= 1024px: the copy is a 720px block on the left of a much wider band, so a
	 *    left-third horizontal gradient does the work and the vertical ramp relaxes
	 *    back toward 2A's shape — which keeps the right of the photograph (three of
	 *    the four subjects) untouched.
	 *
	 * Every stop below was tuned by measuring the composited background inside the
	 * real glyph rectangles at 390/768/1024/1440; figures are in the batch report.
	 */
	.wse-home-hero::after {
		position: absolute;
		z-index: 1;
		/* The ramp must be at full strength by ~34%: below 1024 the hero is at its
		   420px floor while the headline grows with the viewport, so the copy block
		   starts HIGHER as the screen widens — measured, the eyebrow sits at 41% of
		   the band at 390px but 35% at 768px. Ramping to 46% (the obvious guess)
		   left the 768 eyebrow on a 0.48 scrim and failing at 3.08:1. */
		background: linear-gradient(
			180deg,
			rgb(51 52 46 / 26%) 0%,
			rgb(51 52 46 / 20%) 18%,
			rgb(51 52 46 / 74%) 34%,
			rgb(51 52 46 / 92%) 100%
		);
		content: "";
		inset: 0;
	}

	@media (min-width: 1024px) {
		.wse-home-hero::after {
			background:
				linear-gradient(
					90deg,
					rgb(51 52 46 / 62%) 0%,
					rgb(51 52 46 / 38%) 42%,
					rgb(51 52 46 / 0%) 68%
				),
				linear-gradient(
					180deg,
					rgb(51 52 46 / 28%) 0%,
					rgb(51 52 46 / 14%) 30%,
					rgb(51 52 46 / 58%) 68%,
					rgb(51 52 46 / 86%) 100%
				);
		}
	}

	/* The rail is owned here rather than by a `constrained` block layout, and that is
	   deliberate: WordPress's constrained layout emits
	   `margin-left/right: auto !important` on every direct child, which would centre
	   2A's left-anchored 720px hero copy block and cannot be overridden without an
	   !important of our own (forbidden, ADR-06). A `default` layout emits no such
	   rules, so the same rail contract is applied straight from the shared tokens. */
	.wse-home-hero__inner {
		position: relative;
		z-index: 2;
		box-sizing: border-box;
		width: 100%;
		max-width: var(--wse-container-max);
		margin-inline: auto;
		padding-block: clamp(2rem, 5vw, 2.5rem);
		padding-inline: var(--wse-container-pad);
	}

	.wse-home-hero__content {
		display: flex;
		max-width: 720px;
		flex-direction: column;
		gap: 0.875rem;
	}

	/* 2A draws this eyebrow in amber (#fcb444). Measured on the real photograph it
	   cannot meet AA: amber is a LIGHT colour (relative luminance .54), the eyebrow is
	   small text (13.5px bold → 4.5:1 required), and against the scrimmed photo it
	   measured 3.26:1 worst-case / 4.74:1 median. Reaching 4.5:1 would need roughly
	   0.8 scrim alpha under the copy, which turns the left of the photograph into a
	   silhouette. White measures 5.8:1 worst-case at the current scrim with the
	   photograph intact, so the eyebrow is white and 2A's amber stays where it carries
	   the design and the contrast: the solid amber primary CTA below it, and the amber
	   section eyebrows on every light band down the page. */
	.wse-home-hero__eyebrow {
		margin: 0;
		font-family: var(--wse-font-display);
		font-size: clamp(0.75rem, 1.4vw, 0.845rem);
		font-weight: 700;
		letter-spacing: 0.24em;
		text-transform: uppercase;
	}

	/* No max-width: the 720px content block IS the measure (2A). An extra ch cap
	   forced a third line, which pushed the headline up out of the scrim. */
	.wse-home-hero__title {
		margin: 0;
		font-size: clamp(2.125rem, 5.2vw, 3.875rem);
		line-height: 1.02;
		text-wrap: balance;
	}

	.wse-home-hero__actions {
		margin-top: 0.25rem;
		gap: 0.75rem;
	}

	/* ── Bands ─────────────────────────────────────────────────────────────── */

	.wse-home-band {
		padding-block: clamp(2.5rem, 5vw, 3.5rem);
	}

	.wse-home-band--tint { background: var(--wse-sand); }

	.wse-home-band--dark {
		background: var(--wse-charcoal-deep);
		color: var(--wse-text-on-dark-body);
	}

	/* The page background is already cream; give the plain bands the card white so
	   tint/plain alternation stays visible (2A alternates #ffffff / #fbf7f0). */
	.wse-home-band:not(.wse-home-band--tint, .wse-home-band--dark) {
		background: var(--wse-card);
	}

	/* No cap: the band is already the unified 1280 rail (Batch 5.2), so the eyebrow,
	   heading and intro simply fill it. The old 24ch heading cap and a 760/880px intro
	   cap are both retired — a narrower column here was exactly the "wide media, narrow
	   text" rhythm Ian flagged. */
	.wse-home-section-head { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
	.wse-home-section-head > * { margin-block: 0 0.5rem; }
	.wse-home-section-head > :last-child { margin-bottom: 0; }

	.wse-home-eyebrow {
		margin: 0 0 0.35rem;
		color: var(--wse-amber-text);
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	.wse-home-eyebrow--dark { color: var(--wse-amber); }

	.wse-home-section-head__intro {
		margin: 0;
		color: var(--wse-text-secondary);
	}

	.wse-home-actions {
		margin-top: clamp(1.5rem, 3vw, 2rem);
		gap: 0.75rem;
	}

	/* ── Reviews (2A §28 dark featured + §29 light card grid) ──────────────── */

	.wse-home-stars {
		display: block;
		color: var(--wse-amber-deep);
		font-size: 0.875rem;
		letter-spacing: 2px;
		line-height: 1;
	}

	.wse-home-stars--dark { color: var(--wse-amber); }

	/* No cap here: this figure lives in the proof band's 3fr grid column, and a split
	   layout's text fills its assigned column — a nested prose cap inside an already
	   narrower column is exactly what the Step 6 consolidation removes. */
	.wse-home-featured-review {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		margin: 0;
	}

	.wse-home-featured-review__quote { margin: 0; }

	.wse-home-featured-review__quote p {
		margin: 0;
		color: #fff;
		font-family: var(--wse-font-display);
		font-size: clamp(1.25rem, 2.6vw, 1.4375rem);
		font-weight: 600;
		line-height: 1.35;
		text-wrap: pretty;
	}

	.wse-home-review__meta {
		margin: 0;
		font-size: 0.845rem;
	}

	.wse-home-band--dark .wse-home-review__meta { color: var(--wse-text-on-dark-soft); }
	.wse-home-band--dark .wse-home-review__meta a { color: var(--wse-text-on-dark-soft); }
	.wse-home-band--dark .wse-home-review__meta a:hover { color: #fff; }

	.wse-home-review__author { font-weight: 600; }

	.wse-home-review-cards {
		display: grid;
		margin: 0;
		padding: 0;
		gap: 1rem;
		grid-template-columns: minmax(0, 1fr);
		list-style: none;
	}

	.wse-home-review-card {
		display: flex;
		min-width: 0;
		margin: 0;
	}

	.wse-home-review-card figure {
		display: flex;
		width: 100%;
		flex-direction: column;
		gap: 0.4rem;
		margin: 0;
		padding: 0.875rem 1.125rem 1rem;
		border: 1px solid var(--wse-line-soft);
		border-radius: var(--wse-radius);
		background: var(--wse-card);
	}

	.wse-home-review-card__quote { margin: 0; }

	.wse-home-review-card__quote p {
		margin: 0;
		color: var(--wse-ink);
		font-size: 0.9075rem;
		line-height: 1.55;
	}

	/* 2A draws this attribution in #8a857b, which is --wse-muted. Measured with axe on
	   the live card that is 3.67:1 on white — a real AA failure for 13px text (needs
	   4.5:1), shipped in Batch 5 because the hero was measured carefully and this was
	   not. --wse-text-secondary is the same warm grey one step darker and measures
	   6.8:1. Same class of decision as the hero eyebrow: 2A's value loses to the
	   contrast requirement, and the token set already had the honest answer. */
	.wse-home-review-card .wse-home-review__meta {
		margin-top: auto;
		padding-top: 0.25rem;
		color: var(--wse-text-secondary);
		font-size: 0.8125rem;
	}

	/* ── Why WSE (2A light intro band: copy + three-image collage) ─────────── */

	/* Our own grid rather than wp-block-columns: core stacks columns at <=781px with
	   `flex-basis: 100% !important`, which cannot be extended upward without an
	   !important of our own (forbidden, ADR-06). At 782-1023 that left BOTH the copy
	   and the collage squeezed into ~353px halves. Here the band stacks until 1024
	   and the collage keeps a usable width at every step. */
	.wse-home-deeper__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.5rem, 3.5vw, 2.75rem);
	}

	/* Side by side only from 1200px. 2A's collage is 560px wide on a 1340 canvas;
	   below ~1200 there is simply not that much room beside the copy, and measured at
	   1024 a 42% column drove the two small frames down to 131x78 — the "unusable
	   dimensions" the brief rules out. Stacking instead (which the brief explicitly
	   permits when side-by-side gets cramped) keeps the collage at its 640px cap and
	   the small frames at ~205x164. */
	@media (min-width: 1200px) {
		.wse-home-deeper__grid {
			/* ~42% lands the collage near 2A's own 560px at the 1280 rail. */
			grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
			align-items: center;
		}

	}

	/* Stacked (below 1200) this is an ordinary full-width text section, so it takes the
	   ONE standard column — otherwise it ran the band's full width (~976px at 1024),
	   which also left the capped collage stranded beside dead space. Once the band
	   splits it becomes a split-layout column and fills it (see the 1200 query above). */
	.wse-home-deeper__copy { max-width: none; }
	.wse-home-deeper__copy > * { margin-block: 0 1rem; }
	.wse-home-deeper__copy > :last-child { margin-bottom: 0; }
	.wse-home-deeper__list { color: var(--wse-text-secondary); }
	.wse-home-deeper__list li { margin-bottom: 0.5rem; }

	/* 2A's editorial collage: one portrait lead spanning both rows, two landscape
	   images stacked beside it. CSS Grid, never absolute positioning — the lead
	   simply spans, so the two columns cannot drift out of alignment and there is no
	   masonry offset to explain.
	 *
	 * BASE = the mobile composition: the lead spans the full width above two smaller
	 * images side by side. 2A's own 2fr/1fr split would leave the small images ~110px
	 * wide inside a 358px phone column — the "unusably narrow" outcome. The lead keeps
	 * a portrait-leaning 4:3 here rather than a wide crop, because the source IS a
	 * portrait photograph and a 16:9 frame would cut the subject in half.
	 */
	.wse-home-collage {
		display: grid;
		/* Capped so the stacked band (below 1200) keeps an editorial collage rather
		   than a full-rail slab; the side-by-side column is narrower than this anyway. */
		max-width: 640px;
		grid-template-columns: 1fr 1fr;
		gap: var(--wse-gap);
	}

	.wse-home-collage__item--lead {
		grid-column: 1 / -1;
		aspect-ratio: 4 / 3;
	}

	.wse-home-collage__item:not(.wse-home-collage__item--lead) { aspect-ratio: 4 / 3; }

	/* >=600px there is room for 2A's real composition. The band is still stacked at
	   this width (the copy/collage grid splits at 1024), so the collage has the full
	   rail: ~704px at 768. `aspect-ratio` on the CONTAINER fixes both row heights, so
	   every frame's box exists before any byte arrives — no layout shift, and no
	   per-image ratio guess. 560/300 is 2A's own collage proportion. */
	@media (min-width: 600px) {
		.wse-home-collage {
			grid-template-columns: 2fr 1fr;
			grid-template-rows: 1fr 1fr;
			aspect-ratio: 560 / 300;
		}

		.wse-home-collage__item--lead {
			grid-column: auto;
			grid-row: span 2;
			aspect-ratio: auto;
		}

		.wse-home-collage__item:not(.wse-home-collage__item--lead) { aspect-ratio: auto; }
	}

	/* The FIGURE owns the frame: the radius + overflow clip whatever `cover` crops, so
	   the radius cannot be defeated by a rule on the image itself. */
	.wse-home-collage__item {
		min-width: 0;
		min-height: 0;
		margin: 0;
		overflow: hidden;
		border-radius: var(--wse-radius);
		background: var(--wse-neutral-tint);
	}

	/* NOTE: the collage image sizing itself is UNLAYERED (see the bottom of this file).
	   Core emits `.wp-block-image img { height: auto }` unlayered, which beat the
	   layered version here — measured, the images kept their intrinsic height inside a
	   fixed frame, so the two small ones sat in white bars and the 477px-tall lead
	   overflowed its 269px mobile frame and distorted the grid. */

	/* ── Founder ───────────────────────────────────────────────────────────── */

	.wse-home-founder__inner > p { color: var(--wse-text-secondary); }

	.wse-home-founder__links {
		margin-top: 1.5rem;
		font-weight: 600;
	}

	/* ── TRIP Foundation (2A charcoal panel + amber rule) ──────────────────── */

	/* ── Combined social-proof band (2A): featured review + TRIP Foundation ──
	 *
	 * 2A pairs these in ONE charcoal band. `3fr / 2fr` rather than percentages or
	 * calc(): the fr unit already accounts for the gap, so the two columns cannot
	 * drift or overflow the way a `60% / 40%` split does once a gap is added.
	 * `minmax(0, …)` because a grid track's default `min-width: auto` refuses to
	 * shrink below its content — a long unbroken Tour title in the review
	 * attribution would otherwise push the band wider than its rail.
	 *
	 * Base = stacked (mobile/compact tablet): review first, TRIP second, both full
	 * width. Source order already matches, so nothing is reordered visually and the
	 * DOM stays the single semantic source.
	 */
	.wse-home-proof__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.75rem, 4vw, 2.5rem);
	}

	@media (min-width: 900px) {
		.wse-home-proof__grid {
			grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
			align-items: center;
		}
	}

	/* The amber rule divides the two sides on desktop and tops the card when
	   stacked, so the TRIP side always reads as its own distinct panel. */
	.wse-home-trip__inner {
		border-left: 3px solid var(--wse-amber);
		padding-left: clamp(1rem, 2.5vw, 2.25rem);
	}

	/* No nested caps: the text fills the proof band's 2fr column — in a split layout the
	   column IS the measure (Step 6 consolidation retired the 22ch/62ch caps). */
	.wse-home-trip__title { margin: 0 0 0.75rem; }

	.wse-home-trip__body {
		margin: 0;
		color: var(--wse-text-on-dark-body);
		font-size: 1.0625rem;
		line-height: 1.55;
	}

	.wse-home-trip__link {
		margin: 1rem 0 0;
		font-weight: 600;
	}

	.wse-home-trip__link a { color: var(--wse-amber); }
	.wse-home-trip__link a:hover { color: #fff; }

	/* ── Guidebook + newsletter ────────────────────────────────────────────── */

	.wse-home-newsletter {
		margin-top: clamp(2rem, 4vw, 2.75rem);
		padding: clamp(1.25rem, 3vw, 1.75rem);
		border: 1px solid var(--wse-amber-line);
		border-radius: var(--wse-radius);
		background: var(--wse-amber-tint);
	}

	.wse-home-newsletter__title { margin: 0 0 0.5rem; }
	.wse-home-newsletter > p { margin: 0; }

	@media (min-width: 768px) {
		.wse-home-review-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}

	@media (min-width: 1024px) {
		.wse-home-review-cards { gap: 1.25rem; }
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * UNLAYERED — text on the hero photograph and the charcoal bands (ADR-06
 * exception 1: the same collision mechanics documented at the top of base.css).
 *
 * theme.json emits its global heading colour UNLAYERED, as
 * `:root :where(h1,h2,…){color:var(--wp--preset--color--charcoal-deep)}`. Unlayered
 * author CSS always beats @layer-ed author CSS regardless of specificity, so the
 * layered version of these rules lost: the hero headline rendered charcoal-on-
 * photograph (measured ~1.6:1 — illegible) and the dark bands' headings rendered
 * charcoal-on-charcoal. Unlayered, `.wse-home-hero__title` (0,1,0) beats
 * `:root :where(h1)` (0,1,0) on order, and the text is readable.
 *
 * Keep this section minimal and scoped to `.wse-home-*`. NEVER use !important.
 * ───────────────────────────────────────────────────────────────────────── */

.wse-home-hero__title,
.wse-home-hero__eyebrow,
.wse-home-band--dark :is(h2, h3) {
	color: #ffffff;
}

.wse-home-band--dark .wse-home-review__meta,
.wse-home-band--dark .wse-home-review__meta a:not(.wp-element-button) {
	color: var(--wse-text-on-dark-soft);
}

.wse-home-band--dark .wse-home-review__meta a:not(.wp-element-button):hover {
	color: #ffffff;
}

.wse-home-trip__link a:not(.wp-element-button) { color: var(--wse-amber); }
.wse-home-trip__link a:not(.wp-element-button):hover { color: #ffffff; }

/* Cancel core's FLOW-layout margins on our GRID wrappers.
 *
 * A `core/group` with the default layout renders as `is-layout-flow`, and WordPress
 * emits, unlayered:
 *     :root :where(.is-layout-flow) > *            { margin-block-start: 1.5rem }
 *     :root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }
 * Those are for a vertical stack. On a grid they land on the grid ITEMS: measured, the
 * collage's two small frames were pushed 24px below the lead's top edge — precisely
 * the "unexplained card offset / masonry effect" this correction is meant to remove —
 * and each was 24px shorter than its row. The same rule staggers any two-child grid
 * wrapper (the proof band, the Why-WSE split).
 *
 * The grids' own `gap` already owns the spacing, so the margin is redundant as well as
 * harmful. Unlayered for the usual reason (core's rule is unlayered); no !important.
 */
.wse-home-collage > *,
.wse-home-proof__grid > *,
.wse-home-deeper__grid > * {
	margin-block: 0;
}

/* Why-WSE collage images: fill the frame the GRID already sized.
 *
 * Core emits `.wp-block-image img { box-sizing:border-box; height:auto; max-width:100% }`
 * UNLAYERED, and unlayered author CSS beats @layer-ed author CSS regardless of
 * specificity. Layered, `height:100%` lost to core's `height:auto`: measured live, a
 * 174x112 frame held a 174x98 image (white bars top and bottom), and at 390 the
 * portrait lead rendered 358x477 inside a 358x269 frame — overflowing it and
 * distorting the grid rows. Unlayered, `.wse-home-collage__item img` (0,2,0) beats
 * `.wp-block-image img` (0,2,0) on order, and each image fills its frame exactly.
 *
 * `object-fit: cover` is deliberate and scoped to these three editorial frames only —
 * 2A's collage is a set of coordinated crops. Every other image family on this site
 * keeps `contain` (Tour/Destination/Collection posters are artwork, never crops).
 */
.wse-home-collage__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The lead is a standing figure — bias the crop upward so heads stay in frame. */
.wse-home-collage__item--lead img { object-position: 50% 28%; }

/* Hero secondary action (2A): a translucent charcoal pill with a light hairline,
   readable on the photograph. Core's `is-style-outline` gives it a transparent
   background and amber-text link colour — both emitted unlayered — which rendered
   as dark-on-photograph. Scoped to the hero only; the outline style is unchanged
   everywhere else on the site. */
.wse-home-hero__cta-secondary .wp-block-button__link,
.wse-home-hero__cta-secondary .wp-element-button {
	border: 1px solid rgb(255 255 255 / 65%);
	background: rgb(51 52 46 / 45%);
	color: #ffffff;
}

.wse-home-hero__cta-secondary .wp-block-button__link:hover,
.wse-home-hero__cta-secondary .wp-element-button:hover {
	border-color: #ffffff;
	background: rgb(51 52 46 / 70%);
	color: #ffffff;
}

.wse-home-hero__cta-secondary .wp-block-button__link:focus-visible,
.wse-home-hero__cta-secondary .wp-element-button:focus-visible {
	outline: 2px solid var(--wse-amber);
	outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * UNLAYERED — homepage seam + grids for shared card components (ADR-06
 * amendment; same collision mechanics as the woocommerce.css vendor-override
 * section).
 *
 * WordPress emits `:where(.wp-site-blocks) > * { margin-block: 1.5rem 0; }`
 * unlayered. That rule put a 24px cream strip between the sticky header and
 * this route's hero. The homepage main is the spacing owner here: zero its
 * generated outer margin at the narrowest route scope, without a negative
 * margin or any change to later bands / non-homepage templates.
 *
 * `.wse-dest-cards` and `.wse-collection-cards` receive their 1/2/3-column grid from
 * woocommerce.css. On the homepage the Destination row wants 2/4 and the Collection
 * row 2/3, and the Tour row must use the archive's own 1/2/3/4 contract. These rules
 * change ONLY grid-template-columns on the homepage's own scoped wrappers — never the
 * card internals, which stay exactly as approved elsewhere.
 *
 * Unlayered because woocommerce.css's product-grid rules are themselves unlayered
 * (they must beat WooCommerce's unlayered stylesheet); a layered rule here would lose
 * to them regardless of specificity.
 * ───────────────────────────────────────────────────────────────────────── */

.wp-site-blocks > main.wse-home { margin-block-start: 0; }

.wse-home-tours ul.products {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
}

.wse-home-tours ul.products::before,
.wse-home-tours ul.products::after { display: none; }

.wse-home-tours ul.products[class*="columns-"] li.product {
	float: none;
	width: 100%;
	min-width: 0;
	margin: 0;
}

.wse-home-tours ul.products li.product a.wse-tour-card__link {
	display: flex;
	flex-direction: column;
}

.wse-home-dest-cards,
.wse-home-collection-cards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.wse-home-tours ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wse-home-collection-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* At 900px the live 2x2 cards are 420px and read comfortably. Hold that
   component width through the intermediate range instead of letting two tracks
   balloon toward 600px just below the four-column threshold. The grid still
   occupies the unified rail; only its two card tracks are centred and capped. */
@media (min-width: 768px) and (max-width: 1239px) {
	.wse-home-tours ul.products {
		grid-template-columns: repeat(2, minmax(0, 420px));
		justify-content: center;
	}
}

@media (min-width: 1024px) {
	.wse-home-dest-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Live geometry, not a round-number guess: below 1240px four tracks shrink under
   ~277px and two of the four real titles exceed the approved three-line card
   contract. Keep the balanced 2x2 until every current title fits unbroken, then
   move directly to one 4-card row. No homepage three-column state exists. */
@media (min-width: 1240px) {
	.wse-home-tours ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.5rem;
	}
}