/*
 * Home - Partner.
 *
 * Read from cp-all-designer/index.html:826-870 and css/app.css:188-196, 1365,
 * 1386-1510, 3148.
 *
 * Drawn at 1440 (app.css:113): a fixed measure carries across unchanged.
 * Colour, padding, the tile's size, its corner and how many stand in a row all
 * arrive from the Style tab and are not repeated here.
 *
 * Left behind: the window's height. `.sec` would give this band a screen of its
 * own (app.css:336-338), but on this page `.closing` cancels it —
 * `.closing > .sec.brands { flex: 1 1 0; min-height: 0 }` (app.css:1351-1352) —
 * and hands the band whatever the footer leaves of one screen. The footer is a
 * Theme Builder template rather than a part of this section, so the pairing
 * belongs to the page, not here.
 *
 * app.css changes the row at 1200px (1508, nine to a row), which falls inside
 * the desktop tier. The three tiers the build states take the design's 12, 6
 * and 3; the nine is not a tier here. That is a decision.
 */

.custom-home-partner {
	position: relative;
	display: block;
	box-sizing: border-box;
}

.custom-home-partner__inner {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1920px;                     /* the content cap, every band */
}

.custom-home-partner__head {
	max-width: 820px;
	margin: 0 auto 22px;
	text-align: center;                    /* app.css:1364 */
}

.custom-home-partner__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0;                             /* app.css:1367 */
	font-size: 16px;
	font-weight: 600;
	/* app.css:190 measures 1.15px; every px value here is even. */
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* app.css:1373-1376 — one flat wall, centred, however many marks there are. */
.custom-home-partner__wall {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap, 8px);
}

.custom-home-partner__tile {
	position: relative;
	box-sizing: border-box;
	display: block;
	flex: 0 0 calc((100% - (var(--cols, 12) - 1) * var(--gap, 8px)) / var(--cols, 12));
	min-height: 0;
	aspect-ratio: 3 / 2;
	border-width: 2px;                     /* app.css:1386 measures 1px */
	border-style: solid;
	text-decoration: none;
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 300ms;
}

.custom-home-partner__tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px -14px rgba(22, 65, 140, 0.2);   /* --sh, app.css:146 */
	z-index: 2;                            /* app.css:1399 */
}

/* app.css:1477-1484 — a frame of fixed share, the mark contained in it,
   centred by top and left: transform is the hover's. */
.custom-home-partner__tile img {
	position: absolute;
	top: calc((100% - var(--mark-height, 60.23%)) / 2);
	left: calc((100% - var(--mark-width, 56.45%)) / 2);
	width: var(--mark-width, 56.45%);
	height: var(--mark-height, 60.23%);
	object-fit: contain;
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* app.css:1489-1494 — a mark that links lifts for the keyboard as for the hand. */
a.custom-home-partner__tile:focus-visible {
	outline: 2px solid #50A3D5;
	outline-offset: 2px;
	transform: translateY(-4px);
	box-shadow: 0 18px 44px -14px rgba(22, 65, 140, 0.2);
	z-index: 2;
}

.custom-home-partner__tile:hover img {
	transform: scale(1.12);                /* app.css:1400 */
}

/* A tile with no mark in it is still a box, and is still seen. */
.custom-home-partner__tile-name {
	position: absolute;
	inset: calc((100% - var(--mark-height, 60.23%)) / 2) calc((100% - var(--mark-width, 56.45%)) / 2);
	display: grid;
	place-items: center;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
	.custom-home-partner__tile,
	.custom-home-partner__tile img {
		transition: none;
	}
	.custom-home-partner__tile:hover,
	a.custom-home-partner__tile:focus-visible,
	.custom-home-partner__tile:hover img {
		transform: none;
	}
}