/**
 * Full-bleed sections.
 *
 * Every band on the home page is already `alignfull`, so its BACKGROUND runs
 * edge to edge. What stops short is the content inside it: the band is a
 * constrained layout with a content width, and the grid re-centres itself in
 * that column. On a wide monitor that reads as a narrow site inside a wide one.
 *
 * This releases the content too, for the sections where edge to edge is the
 * better read, and leaves the rest alone. The rule of thumb, and the reason
 * this is a per-section opt-in rather than a global change:
 *
 *   Bleed IMAGERY. Never bleed a paragraph.
 *
 * A grid of photographs gains from the width. A column of running text loses,
 * because the line runs past the distance an eye tracks comfortably and the
 * reader starts losing their place on the return sweep.
 *
 * Two ways in:
 *
 *   1. Add `st-bleed` to a section's outer group in the editor (Advanced ->
 *      Additional CSS class). Works on any section, on any page.
 *   2. The named sections at the foot of this file, which are opted in here so
 *      the home page needs no content edit at all.
 *
 * ---------------------------------------------------------------------------
 * HOW, and why not the usual way
 *
 * The familiar full-bleed trick is `width: 100vw` with `margin-left: calc(50%
 * - 50vw)`. Both halves of it are wrong here.
 *
 * `100vw` INCLUDES the scrollbar. On this page the viewport is 1440 and the
 * usable width is 1425, so a 100vw section overhangs by 15px and puts a
 * horizontal scrollbar on the document. Nothing errors; the page just starts
 * sliding sideways.
 *
 * The negative margin never lands at all. WordPress's constrained layout emits
 * `.wp-container-… > :where(:not(.alignleft):not(.alignright):not(.alignfull))
 * { margin-left: auto; margin-right: auto }`, which is one class of
 * specificity, and it is printed INLINE in the body, after this file. Equal
 * specificity, later in the document, so it wins and the section stays put.
 * Measured: the margin computed to -55px and the element did not move.
 *
 * So instead of pushing the child out past its parent, this drops the parent's
 * side padding for the sections that want the room. No viewport units, no
 * scrollbar arithmetic, no magic number to keep in sync with the theme's
 * gutter, and the width comes out right at every zoom level.
 *
 * The doubled class names (`.st-bleed.st-bleed`) are the specificity bump that
 * beats the inline layout rule. Ugly, deliberate, and cheaper than fighting it.
 */

/*
 * Everything below 601px is left completely alone.
 *
 * A phone has no width to give away: the theme's own gutter is already the
 * whole margin, the grid is one or two tiles across either way, and bleeding
 * changes nothing except the risk of a stray horizontal scrollbar.
 *
 * The first attempt handed the padding back with `revert` inside a max-width
 * query instead. That does not do what it reads like. Both the parent's
 * padding and the override are author-origin, so `revert` goes past the theme
 * all the way to the user-agent default, which is zero. Measured at 485px: the
 * gutter was gone and the tiles ran into both edges of the screen.
 *
 * Gating the whole thing on min-width means the mobile layout is the theme's,
 * untouched, rather than something reconstructed to look like it.
 */
@media ( min-width: 601px ) {

	/* ------------------------------------- the parent gives up its gutter */

	.wp-block-group:has( > .st-bleed ),
	.wp-block-group:has( > .st-shop-cats ),
	.wp-block-group:has( > .st-catalog-grid ) {
		padding-left: 0;
		padding-right: 0;
	}

	/* ------------------------------- the section takes the full width */

	.st-bleed.st-bleed,
	.st-shop-cats.st-shop-cats,
	.st-catalog-grid.st-catalog-grid {
		max-width: none;
		width: auto;
		margin-left: 0;
		margin-right: 0;

		/* The page margin, restored on the section itself. A bled grid still
		   needs a gutter, or the first tile is welded to the screen edge. */
		padding-left: clamp( 1rem, 3vw, 3rem );
		padding-right: clamp( 1rem, 3vw, 3rem );
	}
}

/*
 * The category grid was a wrapping flex row of fixed-width tiles, which leaves
 * a ragged tail once the row is wide. Auto-fill keeps the tiles even and holds
 * at 1280 and at 2560 without a breakpoint per size.
 */
.st-shop-cats .st-cat-cards {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 15rem, 1fr ) );
	gap: 1rem;
}

/* auto-fill cannot fit two 15rem tiles on a phone, so it drops to one and the
   section becomes eleven screens of scrolling. Two up, explicitly. */
@media ( max-width: 600px ) {
	.st-shop-cats .st-cat-cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.st-shop-cats .st-cat-card {
	width: auto;
	min-width: 0;
}

/*
 * Same for the product grid: it is photography too, and four columns in a
 * 1140px column made the cards smaller than the garments deserve.
 *
 * ---------------------------------------------------------------------------
 * READ THIS BEFORE CHANGING THE TWO RULES BELOW.
 *
 * theme.json sizes every look with an `!important` percentage width on the
 * `li` — `width: calc(25% - 1.5rem)` for Editorial — because Woo's own
 * `.wc-block-product-template.is-flex-container.is-flex-container.columns-4>li`
 * is (0,4,1) and nothing weaker gets past it.
 *
 * That percentage is a share of the FLEX ROW. Make the row a grid and the very
 * same declaration becomes a share of one TRACK, so every card collapses to a
 * quarter of its own cell: 44px images and a title wrapping one word per line.
 * The first version of this file released it with a plain `width: auto` at
 * (0,2,1), which loses to theme.json's (0,3,1) `!important` — no error, no
 * warning, and the block editor does not load this file, so the page looks
 * correct exactly where you built it. It cost a live home page.
 *
 * The track is already the right width. The card only has to fill it, and the
 * override has to out-specify theme.json AND carry `!important` to reach it.
 *
 * Per-look sizing lives in the two custom properties. The minimum track is what
 * makes a look a look — Showcase is a feature row, Compact is dense — and a
 * single 16rem minimum for all of them turned every look into the same 5-up.
 * The gaps match the ones theme.json's widths were derived from, so a bled grid
 * and a contained one space their cards identically.
 */
.st-catalog-grid {
	--st-catalog-min: 16rem;
	--st-catalog-gap: 2rem;
}

.st-catalog-grid.is-style-catalog-compact {
	--st-catalog-min: 13rem;
	--st-catalog-gap: 1rem;
}

.st-catalog-grid.is-style-catalog-card {
	--st-catalog-gap: 1.5rem;
}

.st-catalog-grid.is-style-catalog-gallery {
	--st-catalog-min: 19rem;
}

.st-catalog-grid.is-style-catalog-showcase {
	--st-catalog-min: 26rem;
	--st-catalog-gap: 3rem;
}

/*
 * Ledger is deliberately excluded: it is one column of full-width spec rows, so
 * an auto-fill grid does not widen it, it shatters it into columns of rows. It
 * keeps Woo's flex row and theme.json's `width: 100%`, and still gains the
 * bleed, which is all it wanted.
 */
.st-catalog-grid:not( .is-style-catalog-ledger ) .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( var( --st-catalog-min ), 1fr ) );
	gap: var( --st-catalog-gap );
}

.st-catalog-grid.st-catalog-grid:not( .is-style-catalog-ledger )
	.wc-block-product-template.wc-block-product-template > li {
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	margin: 0;
}

/*
 * Deliberately NOT bled, and worth writing down so nobody adds them later
 * thinking it was an oversight:
 *
 *   st-manifesto, st-receipt, st-accordion   running text, needs a short line
 *   st-hiw-grid                              numbered steps read as a sequence,
 *                                            and width breaks the sequence
 *   st-trust-strip, st-marquee               already edge to edge by their own
 *                                            construction
 */

/*
 * `:has()` is what lets a section reach up and clear its parent's gutter with
 * no content edit. Where it is unsupported the parent keeps its padding and the
 * sections simply stay the width they are today. Nothing breaks; the page just
 * does not bleed.
 */