/**
 * SCTC Partners — equal-footprint logo grid.
 *
 * The partner page stores a single `core/gallery` holding 21 nested
 * `core/image` blocks. Left alone, each logo keeps its own aspect ratio, and
 * those run from 0.67 (FFT, a portrait 774x1162) to 5.40 (Service gagnant, an
 * 810x150 banner) — a factor of eight. The widest logos read as headline
 * sponsors and the small square ones as afterthoughts, which is exactly the
 * hierarchy the club does not want to publish.
 *
 * Everything is scoped to `.sctc-partners-page`, the body class the plugin adds
 * on this page only, so the galleries on `installations`, `arbitrage` and the
 * other pages keep the theme's behaviour.
 */

/* --- Grid --------------------------------------------------------------- */

/*
 * The block stores `columns-3`, which at 21 logos gives seven very tall rows on
 * a wide screen. A grid with `auto-fit` replaces the core flex layout and lets
 * the column count follow the available width instead of the stored attribute —
 * no content change, no per-breakpoint column list to maintain, and a partner
 * can be added or removed without touching this file.
 *
 * The 220px floor is what pins the count. The content column is capped at 80% by
 * the page template, which leaves 745px at 1440 — so this floor yields three
 * columns on a desktop, giving each logo a noticeably larger frame than the
 * five-across grid it replaces. Phones are handled by the media query below,
 * where the floor cannot fit the two columns the club asked for.
 */
.sctc-partners-page .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	/*
	 * The block serialises `blockGap.left: 0`, so the layout emits
	 * `gap: var(--wp--preset--spacing--50) 0` inline and the columns touch. One
	 * even gap is restated here for both axes.
	 */
	gap: 20px;
	/*
	 * The block also stores a 1px border around the whole gallery. Framing a
	 * grid of frames doubles the boxing without adding meaning; the cells carry
	 * their own outline below. `!important` is needed here and only here: the
	 * stored `has-heading-border-color` sets the colour with `!important` of its
	 * own.
	 */
	border: 0 !important;
}

/*
 * On a phone the 220px floor above can only ever fit one track, and a single
 * column blows each logo up to the full width and turns the page into a
 * 21-screen scroll. Two per row is asked for here, so the count is stated
 * outright rather than coaxed out of `auto-fit` with a second floor — the
 * viewport is too narrow for the floor to be anything but a constraint to fight.
 *
 * The gutter tightens with it. The page template caps the content column at 80%,
 * leaving the gallery 249px of a 375px viewport; two tracks plus the 20px gap
 * need 260px. Ten pixels buys back the missing width, and the frames carry their
 * own border, so they stay visually separate.
 */
@media (max-width: 600px) {
	.sctc-partners-page .wp-block-gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}

/* --- The square frame ---------------------------------------------------- */

/*
 * The frame is the whole point: an identical square for every partner. Equal
 * allocated surface is what "no one is put forward" means here, and the shared
 * square delivers it whatever the shape of the logo inside.
 *
 * The `:not(#individual-image)` is copied from core, and it is load-bearing.
 * Core sizes gallery items with
 * `.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image)`,
 * a (0,3,2) selector setting `width: calc(33.33% - ...)`. Without the same
 * trick this rule sits at (0,2,2), loses, and every frame collapses onto its
 * own logo — the exact bug this file exists to fix. Borrowing core's own
 * no-op id negation matches its specificity without an `!important`.
 */
.sctc-partners-page .wp-block-gallery figure.wp-block-image:not(#individual-image) {
	aspect-ratio: 1 / 1;
	/*
	 * Filling the grid track is what makes every frame identical. Core's
	 * percentage width belongs to its flex layout, which the grid above replaces.
	 *
	 * Core restates its `calc(33.33% - gap)` inside `@media (min-width: 600px)`
	 * at the same specificity as this rule, so only source order decides — and a
	 * media query carries no extra weight. It happens to resolve our way (plugin
	 * styles print after core's), but the margin is one enqueue order away from
	 * flipping, so the win is made explicit rather than left to chance.
	 */
	width: 100% !important;
	/* Grid items default to `min-width: auto`, which lets a wide logo push its track. */
	min-width: 0;
	margin: 0;
	/*
	 * Logos ship on white, on transparent and on colour (FFT is a solid block,
	 * Comité has a white plate baked in). A white cell is the only backdrop that
	 * makes those three cases look like one set: the baked-in plates become
	 * invisible, and the transparent PNGs stop showing the page through.
	 */
	background-color: var(--wp--preset--color--background, #fff);
	/*
	 * A hairline separates two adjacent white logos, which would otherwise merge
	 * into a single block.
	 */
	border: 1px solid var(--wp--preset--color--border-color, #dadada);
	border-radius: 4px;
	/*
	 * The padding equalises the *inked* surface, not just the allocated one.
	 * Without it a natively square logo (casa, MG, New Made) would fill its cell
	 * edge to edge while a banner (Service gagnant) would ink a thin strip — the
	 * very imbalance the square was meant to remove. A shared inner box caps
	 * everyone, so the gap between the fullest and the thinnest logo narrows.
	 */
	padding: 14px;
	box-sizing: border-box;
	overflow: hidden;
	transition: box-shadow 0.4s ease, transform 0.4s ease;
}

/*
 * Every logo links to its partner's site. The anchor is inline-block by default
 * (core, `.wp-block-image>a`), so it has to relay the square for the image to be
 * centred against the frame rather than against the text baseline.
 */
.sctc-partners-page .wp-block-gallery figure.wp-block-image > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	/* The figure is a flex container, so the anchor must not shrink to its logo. */
	flex: 1 1 auto;
	min-width: 0;
	/* The theme zeroes figure-link padding at style.css line 2076; restated here. */
	padding: 0;
	box-sizing: border-box;
}

/* --- The logo ------------------------------------------------------------ */

/*
 * `contain`, deliberately, not `cover`.
 *
 * `cover` in a square would keep 18% of the width of Service gagnant (810x150)
 * and 20% of PhotoPlus (2560x512): the wordmark — the only part that identifies
 * the partner — would be cropped out of frame, and FFT (774x1162) would lose its
 * text. A cropped logo is no longer a logo: brand guidelines forbid recropping,
 * and an unreadable mark defeats the purpose of showing it.
 *
 * The equality the club asked for comes from the identical frame around the
 * logo, not from making every logo ink the same pixels. `contain` keeps each
 * mark whole inside that shared frame.
 */
.sctc-partners-page .wp-block-gallery figure.wp-block-image img {
	/* Core sets `width: auto` and `height: auto`; the square needs the whole box. */
	width: 100%;
	height: 100%;
	/*
	 * The one `!important` on an image here, and it is forced: core ships
	 * `max-width: 100% !important` on `.wp-block-gallery.has-nested-images
	 * figure.wp-block-image img`, so no amount of specificity alone can hand the
	 * image the box it needs. `100%` is the same value core asks for — this
	 * restates it at a weight that survives, it does not widen anything.
	 */
	max-width: 100% !important;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
}

/* --- Affordance ---------------------------------------------------------- */

/*
 * The theme gives figure links no cue of their own (style.css line 2076 zeroes
 * their padding), so one is wired here. A lift plus a shadow rather than the
 * zoom the theme uses on thumbnails: scaling a logo laid out with `contain`
 * would push it past the frame it was placed in.
 */
.sctc-partners-page .wp-block-gallery figure.wp-block-image:not(#individual-image):hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(20, 24, 52, 0.12);
}

/*
 * Keyboard users get the same feedback. The anchor is the focusable element, so
 * the cue is relayed from its focus state onto the frame around it.
 */
.sctc-partners-page .wp-block-gallery figure.wp-block-image:not(#individual-image):focus-within {
	box-shadow: 0 0 0 2px var(--wp--preset--color--heading, #332467);
}

@media (prefers-reduced-motion: reduce) {
	.sctc-partners-page .wp-block-gallery figure.wp-block-image:not(#individual-image) {
		transition: none;
	}

	.sctc-partners-page .wp-block-gallery figure.wp-block-image:not(#individual-image):hover {
		transform: none;
	}
}

/* --- The brochure link ---------------------------------------------------- */

/*
 * The "Télécharger notre brochure" link sits in a `core/paragraph` with a
 * `primary` background, not in a `core/button`. WordPress only colours it white
 * at rest, through a rule whose `:where()` carries no weight:
 *
 *   .wp-elements-<hash> a:where(:not(.wp-element-button)) { color: background }
 *
 * That is (0,1,0), and it declares nothing for `:hover`. The theme's global
 * `a:hover, a:focus { color: primary }` (style.css line 2866) is (0,1,1), so it
 * wins on hover and paints #CD1A2E text onto a #CD1A2E background — a 1:1
 * contrast, the link disappears. The theme already guards against this at
 * style.css line 2869, but only for `.wp-block-button`.
 *
 * The body class lifts these rules to (0,2,1), which beats the theme without an
 * `!important`. The hover mirrors the theme's own button transition (style.css
 * line 2933): the background turns `secondary` and the text stays white —
 * 11.6:1, AAA.
 *
 * The selector matches on `p.has-primary-background-color` rather than the
 * generated `wp-elements-<hash>` class: WordPress recomputes that hash whenever
 * the block's attributes change, so pinning to it would leave this fix
 * silently dead after the first edit in the admin. This page holds a single
 * paragraph on a primary background, so the looser selector stays precise.
 */
.sctc-partners-page p.has-primary-background-color {
	transition: background-color 0.3s ease;
}

/*
 * The hover is carried by the paragraph, not the anchor: the background belongs
 * to the `<p>`, and the link is `display: inline`, so an `a:hover` would repaint
 * only the inked part of the box. `:focus-within` relays the link's keyboard
 * focus onto that same background — the device already used for the partner
 * frames above.
 */
.sctc-partners-page p.has-primary-background-color:hover,
.sctc-partners-page p.has-primary-background-color:focus-within {
	background-color: var(--wp--preset--color--secondary);
}

.sctc-partners-page p.has-primary-background-color a:hover,
.sctc-partners-page p.has-primary-background-color a:focus,
.sctc-partners-page p.has-primary-background-color a:focus-visible {
	/*
	 * `background` (#ffffff), not `white`: the theme reaches for
	 * `--wp--preset--color--white` at style.css line 2870, but that variable is
	 * declared in no palette — neither theme.json nor styles/red.json — so it
	 * resolves to `unset`.
	 */
	color: var(--wp--preset--color--background);
}

@media (prefers-reduced-motion: reduce) {
	.sctc-partners-page p.has-primary-background-color {
		transition: none;
	}
}