/*
 * Mosaïque de tuiles — section 01/08 of the validated homepage (« grille-aplats »)
 * and its generic twin (« grille-tuiles »).
 * Loaded only when a group carries .is-style-gb-mosaique or .is-style-gb-tuile.
 *
 * ── Why the band is a FLEX WRAP and no longer a CSS grid (15/09) ─────────────────
 * A grid has a FIXED number of columns; the number of tiles is not fixed — the guide
 * invites the SA to duplicate or delete a tile (§3.3, §4). Measured on 15/09 at
 * 1440 px, front and canvas alike: 2 tiles left a 720 px hole, 5 tiles a 1080 px
 * hole, 7 tiles a 360 px hole, and one tile duplicated inside the homepage's six
 * aplats pushed the last double tile onto a third row — two holes, the band in
 * pieces (apercus/editeur/recette/s2-front-mosaique-7-tuiles-trous.jpg).
 * A flex line GROWS its items to the full width instead: whatever the count,
 * whatever the double tiles, the band runs flush from edge to edge. « Géométrique,
 * franc » (design/charte/CHARTE.md) — a band ends at the edge, never on a hole.
 *
 * Consequence: a tile is no longer a grid item, so the native « Étendue de colonne »
 * is gone with the grid layout. A double tile carries the plain class
 * `gb-tuile--double` (basis 50 %, grow 2). That class is deliberately NOT a
 * registered block style: `getActiveStyle()` returns the FIRST `is-style-*` class of
 * a block, so clicking « Tuile double » in the Styles panel would replace the tile's
 * colour couple — a worse bug than the one this fixes.
 *
 * Only the TILE band changes. `patterns/tuiles-renvoi.php` shares
 * `.is-style-gb-mosaique` but fills it with `.is-style-gb-renvoi` children and stays
 * a two-column grid; the flex rules are therefore scoped by
 * `:has(> .is-style-gb-tuile)`, which matches the tile band and nothing else.
 *
 * Hover changes ink only (index, rule, icon): never the geometry of the container —
 * a band whose items resize under the pointer moves the text being read (31/08).
 */

/* ─────────────────────────────────────────────── the section head ── */
/* .gb-tete comes from the socle; the flow layout would still push the h2 down by one
   blockGap, so the margins are zeroed here. */
.gb-grille__tete.gb-tete > * { margin-block-start: 0; margin-block-end: 0; }
.gb-grille__tete .wp-block-heading { max-inline-size: 18ch; }

/* ──────────────────────────────────── the mosaic, tiles excepted ── */
/* « Tuiles de renvoi » keeps the native grid it declares; this fallback only draws it
   when the layout has been changed by hand. Joined tiles: no gap, ever. */
.is-style-gb-mosaique:not(.is-layout-grid):not(:has(> .is-style-gb-tuile)) {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.is-style-gb-mosaique > * { margin-block-start: 0; margin-block-end: 0; min-inline-size: 0; }

/* ───────────────────────────────────────────── the band of tiles ── */
/* Four per row at full width, and the last row grows to fill it. `:has()` beats the
   `display: grid` the core layout support may still print for content saved before
   15/09 (one class, so 0-1-0 against our 0-2-0): an old page gets the band too. */
.is-style-gb-mosaique:has(> .is-style-gb-tuile) {
	display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
	counter-reset: gb-tuile; }

/* ──────────────────────────────────────────────────── one tile ── */
.is-style-gb-tuile { position: relative; isolation: isolate; overflow: hidden;
	flex: 1 1 25%; min-inline-size: 0; counter-increment: gb-tuile;
	display: grid; grid-template-rows: auto 1fr auto; gap: 1.2rem;
	min-block-size: clamp(14rem, 21vw, 19rem); padding: clamp(1.4rem, 2.6vw, 2.4rem); }
.is-style-gb-tuile > * { margin-block-start: 0; margin-block-end: 0; }

/* The double tile: two of the four slots, and twice the share of a short row. */
.is-style-gb-tuile.gb-tuile--double { flex-basis: 50%; flex-grow: 2; }

/* Density — how many tiles a full-width row holds. Four by default; a band that wants
   fewer (« Pourquoi adhérer ? » asks for two) carries `gb-mosaique--2` or
   `gb-mosaique--3`. It is a DENSITY, not a column count: the last row still grows to
   the full width, which is the whole point of the flex band. Scoped above the tablet
   breakpoint so the two media queries below keep the last word. */
@media (min-width: 1201px) {
	.is-style-gb-mosaique.gb-mosaique--2 > .is-style-gb-tuile { flex-basis: 50%; }
	.is-style-gb-mosaique.gb-mosaique--2 > .is-style-gb-tuile.gb-tuile--double { flex-basis: 100%; }
	.is-style-gb-mosaique.gb-mosaique--3 > .is-style-gb-tuile { flex-basis: 33.334%; }
	.is-style-gb-mosaique.gb-mosaique--3 > .is-style-gb-tuile.gb-tuile--double { flex-basis: 66.667%; }
}

/* The ghost index: a big Unbounded figure that only wakes up under the pointer.
   A COUNTER, not a typed number: duplicating a tile used to duplicate its « 02 »
   (measured 15/09). Being a counter, it also cannot be emptied or mis-edited — and
   the editor canvas draws it from the same stylesheet, so the two documents agree. */
.is-style-gb-tuile::before { content: counter(gb-tuile, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--heading); font-weight: 900;
	font-size: clamp(1.9rem, 3.4vw, 3.1rem); line-height: 0.9; letter-spacing: -0.06em; opacity: 0.78;
	font-feature-settings: "tnum"; transition: opacity 0.3s, translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.is-style-gb-tuile:hover::before { opacity: 1; translate: 0 -0.12em; }

/* Content seeded before 15/09 still carries the hand-written index paragraph inside
   the tile. The counter draws the number now, so the paragraph is hidden rather than
   doubled; re-running bin/seed-demo.php removes it from the markup for good. */
.is-style-gb-tuile > .gb-tuile__n { display: none; }

/* The message, pinned to the bottom of the tile; the bold cuts the sentence. */
.is-style-gb-tuile > .gb-tuile__t { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.3;
	align-self: end; max-inline-size: 34ch; }

/* The rule: structural (30 %), it grows to the full width under the pointer.
   A pseudo-element, so the SA can neither lose it nor mis-place it. */
.is-style-gb-tuile::after { content: ""; display: block; block-size: 3px; inline-size: 3.4rem;
	background: currentColor; opacity: 0.3; transition: inline-size 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.is-style-gb-tuile:hover::after { inline-size: 100%; }

/* The icon is cropped by the corner of the tile: it belongs to the frame. z-index −1
   inside the tile's own stacking context puts it under the text, above the ground. */
.is-style-gb-tuile > .gb-icone { position: absolute; z-index: -1; inset-block-end: -14%; inset-inline-end: -6%;
	inline-size: clamp(9rem, 17vw, 15rem); block-size: auto; aspect-ratio: 1; fill: none;
	stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.3;
	transition: rotate 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s; pointer-events: none; }
.is-style-gb-tuile:hover > .gb-icone { rotate: -9deg; opacity: 0.48; }

/* ─────────────────────────────────────────────────── breakpoints ── */
@media (max-width: 1200px) {
	/* Two per row; a double tile still takes two slots, i.e. a whole row. */
	.is-style-gb-mosaique.wp-block-group:not(:has(> .is-style-gb-tuile)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.is-style-gb-tuile { flex-basis: 50%; }
	.is-style-gb-tuile.gb-tuile--double { flex-basis: 100%; }
	.gb-grille__tete.is-style-gb-decale { margin-inline-start: clamp(0rem, 7vw, 7rem); }
}
@media (max-width: 760px) {
	/* One per row; every tile, double or not, takes the row. */
	.is-style-gb-mosaique.wp-block-group:not(:has(> .is-style-gb-tuile)) { grid-template-columns: minmax(0, 1fr); }
	.is-style-gb-tuile, .is-style-gb-tuile.gb-tuile--double { flex-basis: 100%; }
	.gb-grille__tete.is-style-gb-decale { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.is-style-gb-tuile::before, .is-style-gb-tuile::after, .is-style-gb-tuile > .gb-icone { transition: none; }
	.is-style-gb-tuile:hover::before { translate: none; }
	.is-style-gb-tuile:hover > .gb-icone { rotate: none; }
}