/*
 * petpartners/brand-strip
 *
 * Two layouts (render.php). This file is the `list` layout — a wrapped line
 * of names — plus the `rail` layout's own rules further down, scoped under
 * `.is-layout-rail` so neither competes with the other's selectors.
 *
 * `list` is set at `sm`: a reference list, not competing with sections that
 * lead somewhere.
 */

.wp-block-petpartners-brand-strip:not( .is-layout-rail ) {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--xs ) var( --wp--preset--spacing--sm );
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-petpartners-brand-strip:not( .is-layout-rail ) a {
	display: flex;
	align-items: center;
	/*
	 * Names sit side by side rather than stacked, so WCAG 2.2's 2.5.8 spacing
	 * exception does not apply to them: each one takes the full target box.
	 */
	min-height: var( --wp--custom--chrome--tap-target );
	font-size: var( --wp--preset--font-size--sm );
	line-height: var( --wp--custom--typography--sm--line-height );
	text-underline-offset: 0.2em;
}

.wp-block-petpartners-brand-strip:not( .is-layout-rail ) a:hover,
.wp-block-petpartners-brand-strip:not( .is-layout-rail ) a:focus-visible {
	text-decoration-thickness: 2px;
}

/*
 * The rail layout.
 *
 * Same mechanism as the category rail (category-showcase/style.css) — one
 * row that scrolls rather than a wrapping grid, for the same reason: a
 * handful of tiles wrapped onto two rows reads as a leftover, one rail reads
 * as one set. See that file's longer note; this is the shorter version
 * because there is no index/branched variant here to contrast it against.
 */
.wp-block-petpartners-brand-strip.is-layout-rail {
	position: relative;
	display: block;
}

.wp-block-petpartners-brand-strip__track {
	display: flex;
	gap: var( --wp--preset--spacing--sm );
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 0;
	scrollbar-width: none;
}

.wp-block-petpartners-brand-strip__track::-webkit-scrollbar {
	display: none;
}

.wp-block-petpartners-brand-strip__cell {
	margin: 0;
	flex: 0 0 11.5rem;
	scroll-snap-align: start;
}

.wp-block-petpartners-brand-strip__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var( --wp--preset--spacing--sm );
	block-size: 100%;
	padding: var( --wp--preset--spacing--md ) var( --wp--preset--spacing--sm );
	box-sizing: border-box;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: var( --wp--preset--border-radius--lg );
	color: var( --wp--preset--color--brown );
	text-align: center;
	text-decoration: none;
	transition:
		border-color var( --wp--custom--motion--duration--fast ) var( --wp--custom--motion--easing--standard ),
		background-color var( --wp--custom--motion--duration--fast ) var( --wp--custom--motion--easing--standard );
}

.wp-block-petpartners-brand-strip__tile:hover,
.wp-block-petpartners-brand-strip__tile:focus-visible {
	border-color: var( --wp--preset--color--purple );
	background-color: var( --wp--preset--color--surface );
	color: var( --wp--preset--color--brown );
}

.wp-block-petpartners-brand-strip__tile:focus-visible {
	outline: 2px solid var( --wp--preset--color--purple );
	outline-offset: 2px;
}

/*
 * A logo is a wordmark, not an icon glyph, so the box is a short wide strip
 * rather than the category rail's 40x40 square — object-fit: contain still
 * does the work of landing any ratio supplied at the same optical size.
 * Nothing here assumes a logo exists: a term with none skips this element
 * entirely (render.php) and the tile is the name alone, same as before.
 */
.wp-block-petpartners-brand-strip__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 2.5rem;
}

.wp-block-petpartners-brand-strip__image {
	display: block;
	max-inline-size: 100%;
	max-block-size: 100%;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
}

.wp-block-petpartners-brand-strip__name {
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 600;
	line-height: var( --wp--custom--typography--sm--line-height );
}

/*
 * The arrows and the fading edge. Identical rules to the category rail's own
 * (category-showcase/style.css), under this block's own class names —
 * duplicated rather than shared, same reasoning as view.js.
 */
.wp-block-petpartners-brand-strip__arrow {
	position: absolute;
	inset-block-start: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: var( --wp--custom--chrome--tap-target );
	block-size: var( --wp--custom--chrome--tap-target );
	padding: 0;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: var( --wp--preset--border-radius--pill );
	background-color: var( --wp--preset--color--white );
	color: var( --wp--preset--color--brown );
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY( -50% );
	transition:
		opacity var( --wp--custom--motion--duration--base ) var( --wp--custom--motion--easing--standard ),
		visibility var( --wp--custom--motion--duration--base ) var( --wp--custom--motion--easing--standard );
}

.wp-block-petpartners-brand-strip__arrow svg {
	display: block;
	fill: currentColor;
}

.wp-block-petpartners-brand-strip__arrow.is-previous {
	inset-inline-start: 0;
	transform: translate( -40%, -50% ) rotate( 180deg );
}

.wp-block-petpartners-brand-strip__arrow.is-next {
	inset-inline-end: 0;
	transform: translate( 40%, -50% );
}

.wp-block-petpartners-brand-strip__arrow:hover {
	border-color: var( --wp--preset--color--purple );
	color: var( --wp--preset--color--purple );
}

.is-layout-rail.has-previous .wp-block-petpartners-brand-strip__arrow.is-previous,
.is-layout-rail.has-next .wp-block-petpartners-brand-strip__arrow.is-next {
	opacity: 1;
	visibility: visible;
}

.is-layout-rail.has-next .wp-block-petpartners-brand-strip__track {
	mask-image: linear-gradient( to right, #000 85%, transparent 100% );
}

.is-layout-rail.has-previous.has-next .wp-block-petpartners-brand-strip__track {
	mask-image: linear-gradient( to right, transparent 0, #000 6%, #000 85%, transparent 100% );
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-petpartners-brand-strip__tile,
	.wp-block-petpartners-brand-strip__arrow {
		transition: none;
	}
}