/**
 * Partner Logos widget.
 *
 * Every value an Elementor control touches is a custom property set on `.wcp`.
 * The defaults below are what the widget looks like with no styling controls
 * touched at all.
 *
 * The whole file exists to solve one problem: twelve logos drawn by twelve
 * different designers, at aspect ratios from 0.65 to 3.0, have to read as one
 * set. Two rules do the work — a tile of one fixed shape, and a logo capped on
 * BOTH axes inside it — and everything else here is decoration.
 */

.wcp {
	--wcp-columns: 4;
	--wcp-gap: 24px;
	--wcp-row-gap: 24px;
	--wcp-ratio: 3 / 2;
	--wcp-tile-h: auto;
	--wcp-tile-h-set: 72px;
	--wcp-scale: 78%;

	--wcp-tile-bg: #fff;
	--wcp-tile-bg-hover: #fff;
	--wcp-tile-padding: 20px;
	--wcp-border-width: 1px;
	--wcp-border-color: rgba(0, 0, 0, 0.08);
	--wcp-border-color-hover: rgba(0, 0, 0, 0.22);
	--wcp-radius: 6px;
	--wcp-lift: 3px;

	--wcp-filter: none;
	--wcp-filter-hover: none;
	--wcp-opacity: 1;
	--wcp-opacity-hover: 1;
	--wcp-zoom: 1;
	--wcp-blend: normal;

	--wcp-name-color: rgba(0, 0, 0, 0.6);
	--wcp-name-color-hover: #2f7d32;
	--wcp-name-gap: 12px;

	--wcp-focus: #2f7d32;

	display: grid;
	grid-template-columns: repeat(var(--wcp-columns), minmax(0, 1fr));
	column-gap: var(--wcp-gap);
	row-gap: var(--wcp-row-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcp__item {
	margin: 0;
}

.wcp-notice {
	padding: 24px;
	border: 1px dashed rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	color: rgba(0, 0, 0, 0.55);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Tile
 *
 * `isolation: isolate` is not cosmetic. The logo may be set to `mix-blend-mode:
 * multiply` to dissolve the white box baked into a JPG logo, and without a
 * stacking context here it would blend against whatever the page happens to put
 * behind the widget instead of against this tile's own background.
 *
 * Rendered as <a> when the partner has a website and <div> when it does not, so
 * both are styled together — an <a> with no href is still focusable and still
 * announced as a link, which is worse than not being one.
 * ---------------------------------------------------------------------- */

.wcp__tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	box-sizing: border-box;
	padding: var(--wcp-tile-padding);
	border: var(--wcp-border-width) solid var(--wcp-border-color);
	border-radius: var(--wcp-radius);
	background-color: var(--wcp-tile-bg);
	color: inherit;
	text-decoration: none;
	isolation: isolate;
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

a.wcp__tile:hover,
a.wcp__tile:focus-visible {
	border-color: var(--wcp-border-color-hover);
	background-color: var(--wcp-tile-bg-hover);
	transform: translateY(calc(var(--wcp-lift) * -1));
}

a.wcp__tile:focus-visible {
	outline: 2px solid var(--wcp-focus);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Logo
 *
 * The frame is a fixed-ratio box and the logo is centred inside it on both
 * axes whatever its own proportions are, capped with max-width AND max-height
 * so a 3:1 banner and a 1:1 roundel end up carrying the same visual weight.
 *
 * Capping width alone — which is what a plain Image widget does — is exactly
 * what made the old page look wrong: at a matched width, the banner is three
 * times the area of the roundel.
 *
 * The centring is flexbox, and it has to stay in flow. The logo used to be
 * `position: absolute; inset: 0; margin: auto`, which left the frame with no
 * in-flow content at all — and a box whose only height comes
 * from `aspect-ratio` contributes ZERO height when the browser measures it at
 * an indefinite width. That is exactly what Chrome does below the 768px
 * breakpoint, where Elementor lays this widget out as an item of a column flex
 * container (`.e-con-inner`): the section reserved only the tiles' padding and
 * the row gaps (5 rows -> 5 x 40px + 4 x 24px = 296px) while the grid painted
 * 961px tall, and the 655px of overflowing rows drew straight over the footer.
 * An in-flow logo gives the frame a real intrinsic height, so the measurement
 * can no longer collapse.
 *
 * The percentages resolve because the frame has a definite height — either
 * `aspect-ratio` against a definite width, or `--wcp-tile-h`.
 *
 * `--wcp-tile-h` exists because a ratio alone cannot size a logo strip on a
 * phone. A ratio derives the tile HEIGHT from the column WIDTH, and phone
 * columns are wide: two columns of a 390px screen are 173px each, so even a
 * 2:1 tile is 87px tall holding a logo 16px tall. Worse, it gets taller as the
 * screen grows — 181px at 767px wide — and dropping the tile padding makes it
 * taller still, because that widens the column. A height in px is flat across
 * the whole breakpoint, which is what a strip of logos wants.
 *
 * The two cannot both apply — a definite height turns `aspect-ratio` off, since
 * it only applies while one axis is auto — so which one you get is a control,
 * not a race. The `Size tiles by` select writes `--wcp-tile-h` as either
 * `auto` (the ratio decides) or `var(--wcp-tile-h-set)` (the height decides),
 * per breakpoint. `--wcp-tile-h-set` is where the Tile height slider lands, and
 * it is deliberately NOT the property the frame reads: a leftover height can
 * then sit in the settings without silently outranking a shape.
 *
 * Flex, and not `display: grid; place-items: center`, which looks equivalent
 * and is not. A centred grid item sits in an `auto` track, and an auto track
 * sized to a 91px logo stays 91px tall inside a 48px frame — so the logo's own
 * `max-height` resolved against the overflowing track and capped nothing. A
 * flex item resolves its percentages against the flex container's content box,
 * which is the frame itself.
 * ---------------------------------------------------------------------- */

.wcp__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--wcp-tile-h, auto);
	aspect-ratio: var(--wcp-ratio);
}

.wcp__frame .wcp__logo {
	width: auto;
	height: auto;
	max-width: var(--wcp-scale);
	max-height: var(--wcp-scale);
	filter: var(--wcp-filter);
	opacity: var(--wcp-opacity);
	mix-blend-mode: var(--wcp-blend);
	transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.wcp__tile:hover .wcp__logo,
.wcp__tile:focus-visible .wcp__logo {
	filter: var(--wcp-filter-hover);
	opacity: var(--wcp-opacity-hover);
	transform: scale(var(--wcp-zoom));
}

/* -------------------------------------------------------------------------
 * Name
 * ---------------------------------------------------------------------- */

.wcp__name {
	display: block;
	margin: var(--wcp-name-gap) 0 0;
	color: var(--wcp-name-color);
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	transition: color 0.25s ease;
}

a.wcp__tile:hover .wcp__name,
a.wcp__tile:focus-visible .wcp__name {
	color: var(--wcp-name-color-hover);
}

@media (prefers-reduced-motion: reduce) {
	.wcp__tile,
	.wcp__logo,
	.wcp__name {
		transition-duration: 0.01ms;
	}

	a.wcp__tile:hover,
	a.wcp__tile:focus-visible {
		transform: none;
	}

	.wcp__tile:hover .wcp__logo,
	.wcp__tile:focus-visible .wcp__logo {
		transform: none;
	}
}