/*
 * Logo tile (`is-style-logo-tile` on a `core/group`).
 *
 * One cell of the customer-logo grid: a square of the section's ground with a
 * logo centred in it, and the company's name appearing along the bottom edge
 * while the pointer is over it. `patterns/logos-intro-grid.php` is the consumer,
 * where the cells are the children of a `core/group` with a grid layout.
 *
 * Class-activated, because it only means anything on a group holding exactly a
 * `core/image` and a `core/paragraph`, in that order. A file rather than an
 * `inline_style` because of the `@media` query — inline CSS is appended to the
 * block's own core stylesheet, which is fine for a flat declaration and cannot
 * carry a query's worth of rules legibly.
 *
 * ## Why the square is here and not on the block
 *
 * `core/group`'s `dimensions` support is `minHeight` and `minWidth` and nothing
 * else — `block-supports/dimensions.php` serialises exactly four features and
 * `aspectRatio` is not among them, so `"style":{"dimensions":{"aspectRatio":1}}`
 * on a group is dropped without a word. A `minHeight` cannot stand in for it:
 * the grid's column is a `1fr` share of whatever rail it is on, so a cell that
 * has to stay square has to derive its height from a width nothing states.
 *
 * The cells all carry the same ratio and the same column width, so every cell in
 * a row resolves to the same height and the row's own `auto` height is that
 * number — grid's default `stretch` then has nothing left to stretch, and the
 * ratio survives it.
 *
 * ## The logo is sized in percent, so it has to be centred by hand
 *
 * The design draws each logo at its own size — a wordmark at 60% of the cell
 * beside a roundel at 31% — so the size lives on each `core/image`'s own width
 * control, as a percentage of the cell. That percentage resolves against the
 * `<figure>`, so the figure has to be the full width of the cell, which is what
 * `justifyContent: "stretch"` on the group's vertical flex layout says
 * (`align-items: stretch`). A figure that hugged its image instead would leave
 * the percentage resolving against its own contents.
 *
 * Being full width, the figure no longer centres anything, and `text-align`
 * cannot do it either: the theme's default `core/image` style makes the `img` a
 * block. Hence the auto inline margins. The alternative — `align: "center"` on
 * the image — is worse here, because core's own rule for that makes the figure
 * `display: table`, which shrink-wraps it and takes the percentage's containing
 * block away again.
 *
 * **`width: 100%` on the figure is not the same statement as `align-items:
 * stretch`, and leaving it out breaks the layout silently.** Stretch gives the
 * figure the cell's width, but it does so *after* the flex container has measured
 * the item's height from its contents — and that measurement runs with the cross
 * size still indefinite, so the image's percentage width resolves against the
 * figure's own max-content width, which is the file's natural size. The figure
 * comes out as tall as the image would be at 30.7% of **91px** rather than of
 * 213px, and then never re-measures: the image paints at its correct 65×47 and
 * the box holding it is 20px tall, so a vertical `justify-content: center`
 * centres the wrong box and every logo sits low by a different amount. Nothing
 * errors, `getComputedStyle` on the image is exactly right, and the only visible
 * symptom is twelve logos each off-centre by its own share. An explicit `100%`
 * resolves against the cell's grid track, which *is* definite, so it is settled
 * before the height is measured.
 *
 * ## The name, and why it is `display: none` by default
 *
 * The name is a real paragraph in the markup rather than generated content, so it
 * is the design's own string, editable, and translatable. It is positioned
 * against the cell rather than laid out in it, because the design keeps the logo
 * centred on the *whole* square with the name over the bottom edge — measured in
 * Figma, a cell with a name and a cell without have their logos on the same
 * centre line, so the name cannot be taking part in the stacking.
 *
 * `display: none` is the base state and the hover query turns it on, rather than
 * the other way round. Three things fall out of that order, all of them wanted:
 *
 * - **A touch device never shows it.** `(hover: none)` is where a hover state
 *   sticks after a tap, and a label that appears on first tap and stays is worse
 *   than no label — the phone frame draws no names at all.
 * - **A browser that does not understand the query keeps the design's resting
 *   state**, which is the safe direction to fail in.
 * - **A screen reader is not told the name twice.** The image carries the company
 *   in its `alt`, so the paragraph is a duplicate; `display: none` and
 *   `visibility: hidden` both keep it out of the accessibility tree, and the only
 *   moment it is in there is while someone is hovering it with a mouse.
 *
 * `visibility` rather than `opacity` alone for the resting state inside the
 * query, for that last reason — and the two transition together on purpose:
 * `visibility` interpolates to `visible` for every value strictly between the
 * endpoints, so it flips on immediately on the way in and holds until the fade
 * has finished on the way out. `opacity` alone would leave a transparent label in
 * the tree; `visibility` alone would snap.
 *
 * The fade is not wrapped in a reduced-motion guard, following the rest of the
 * theme: nothing travels across the screen, and a fade in place is closer to the
 * colour transitions that preference leaves alone than to the movement it asks
 * to remove.
 *
 * `:focus-within` is there for the case where an editor gives a logo a link —
 * `core/image` has a link control, and a tile with one should show its name to a
 * keyboard as well as to a pointer. With no link in the markup it matches
 * nothing, which is why it costs nothing to write.
 */

.wp-block-group.is-style-logo-tile {
	aspect-ratio: 1;

	/* The containing block for the name below. */
	position: relative;

	> figure {
		/* Definite, so the image's percentage width has something to resolve
		   against before the cell measures its height. See above. */
		width: 100%;
	}

	img {
		margin-inline: auto;
	}

	> p {
		display: none;
	}
}

@media (hover: hover) {
	.wp-block-group.is-style-logo-tile > p {
		display: block;
		position: absolute;
		inset-block-end: var(--wp--preset--spacing--sm);
		inset-inline: 0;
		visibility: hidden;
		opacity: 0;
		transition:
			opacity 0.2s var(--wp--custom--transition-spring-smooth),
			visibility 0.2s;
	}

	.wp-block-group.is-style-logo-tile:hover > p,
	.wp-block-group.is-style-logo-tile:focus-within > p {
		visibility: visible;
		opacity: 1;
	}
}