/*
 * Browse hero.
 *
 * Loaded on the catalogue only. Four elements: label, heading, one sentence, and a
 * decorative composition of real creator marks. Everything the page could restate here —
 * search, product type, platform, the result count — lives somewhere else and is
 * deliberately absent, so this sheet styles a hero and nothing that behaves like a control.
 *
 * The band is full-bleed out of the constrained main column via a viewport-width negative
 * margin. Content stays on the 1320 grid so the heading's left edge lines up with the
 * filter rail below it.
 */

.sqbh {
	margin-inline: calc(50% - 50vw);
	padding-inline: max(28px, calc((100vw - 1320px) / 2));
	background: var(--wp--preset--color--surface);
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.sqbh__in {
	display: flex;
	align-items: center;
	gap: 56px;
	max-inline-size: 1320px;
	margin-inline: auto;
	padding-block: 55px;
}

.sqbh__copy {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.sqbh__eyebrow {
	margin: 0 0 10px;
	color: var(--wp--preset--color--brand);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-semibold);
	letter-spacing: var(--sq-ls-eyebrow);
	line-height: var(--sq-lh-eyebrow);
	text-transform: uppercase;
}

.sqbh__title {
	margin: 0 0 10px !important;
	font-family: var(--sq-font-sans) !important;
	font-size: clamp(2.125rem, 1.3rem + 2.4vw, 3.375rem) !important;
	font-weight: var(--sq-w-semibold) !important;
	line-height: 1.04 !important;
	letter-spacing: var(--sq-ls-h1) !important;
	text-wrap: balance;
	max-inline-size: 15ch;
}

.sqbh__lede {
	margin: 0;
	max-inline-size: 44ch;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-body);
}

/* ── Decorative creator-mark composition ────────────────────────────────────
 *
 * Nine identical square tiles in a 500x230 box: five across the top, four staggered
 * beneath. Every tile is the same size, radius, border, shadow and background whatever
 * the mark inside it is — a wordmark is contained, never cropped, and never widens
 * its tile. Position and motion are per-slot and live here; the block only emits nine
 * identical spans, so the arrangement cannot drift out of sync with the markup.
 */

.sqbh__art {
	--sqbh-tile: 84px;
	position: relative;
	flex: 0 0 auto;
	inline-size: 620px;
	block-size: 230px;
}

.sqbh__tile {
	position: absolute;
	box-sizing: border-box;   /* so the stated tile size is the outer size */
	inline-size: var(--sqbh-tile);
	block-size: var(--sqbh-tile);
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	border-radius: 18px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--text) 8%, transparent);
	/*
	 * One rule, applied to every tile: the plate carries that mark's own dominant hue at
	 * 92% lightness. Monochrome marks derive no hue and fall back to plain white, which is
	 * why some tiles are white and none of it is arbitrary. The tint is set per tile rather
	 * than per position because the mark inside rotates, so the colour travels with it and
	 * crossfades on the same beat.
	 */
	background-color: var(--tint, var(--wp--preset--color--surface-raised));
	transition: background-color .5s ease;
	box-shadow:
		0 1px 2px color-mix(in srgb, var(--wp--preset--color--text) 5%, transparent),
		0 14px 30px -18px color-mix(in srgb, var(--wp--preset--color--text) 50%, transparent);
	will-change: transform;
	animation: sqbh-float var(--dur) ease-in-out var(--del) infinite alternate;
}

/*
 * One stage per tile, identical in every tile, so a tall mark and a wide mark are
 * measured against the same box. The stage is the positioning context for the crossfade:
 * both the outgoing and incoming image sit on top of each other inside it, which is why
 * a swap cannot move anything around it.
 */
.sqbh__stage {
	position: relative;
	inline-size: 48px;
	block-size: 48px;
	display: grid;
	place-items: center;
}

.sqbh__stage img {
	grid-area: 1 / 1;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	transition: opacity .5s ease;
}

/* The incoming image starts transparent and is faded up by the rotator. */
.sqbh__stage img[data-sqbh-enter] {
	opacity: 0;
}

@keyframes sqbh-float {
	from { transform: translate3d(0, 0, 0) rotate(0deg); }
	to   { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)); }
}

/*
 * Hovering a tile stops the whole group, so anyone looking at a logo can.
 *
 * Keyed off a tile rather than the composition box on purpose: the box is 620x230 but the
 * nine tiles only cover 45% of it, so `.sqbh__art:hover` meant resting the pointer anywhere
 * in the surrounding empty space froze everything — which reads as the animation being
 * broken rather than politely paused.
 */
.sqbh__art:has(.sqbh__tile:hover) .sqbh__tile {
	animation-play-state: paused;
}

/*
 * Anchors.
 *
 * Individually placed, not generated: three loose vertical levels (three tiles high, two
 * mid, four low), uneven horizontal spacing, and no two tiles sharing a column or a row.
 * Every pair clears by at least 4px even when both tiles drift toward each other, so no
 * logo can ever be covered — and because each tile floats around its own anchor, the
 * motion never pulls them back into a shared line.
 */
.sqbh__tile:nth-child(1) { left: 382px; top:  17px; --dx: -4px; --dy:  7px; --rot: -1.2deg; --dur: 5.2s; --del: -2.6s; }
.sqbh__tile:nth-child(2) { left: 127px; top:   0;   --dx:  3px; --dy: 10px; --rot:  1.6deg; --dur: 4.4s; --del: -1.7s; }
.sqbh__tile:nth-child(3) { left: 237px; top:  10px; --dx:  3px; --dy: -10px; --rot: 1.9deg; --dur: 5.8s; --del: -3.4s; }
.sqbh__tile:nth-child(4) { left:   6px; top:  62px; --dx: -4px; --dy:  6px; --rot: -1.1deg; --dur: 4.0s; --del: -0.9s; }
.sqbh__tile:nth-child(5) { left: 536px; top:  72px; --dx:  4px; --dy: -7px; --rot:  1.7deg; --dur: 4.8s; --del: -2.2s; }
.sqbh__tile:nth-child(6) { left: 203px; top: 146px; --dx: -3px; --dy: -6px; --rot: -1.4deg; --dur: 6.2s; --del: -4.1s; }
.sqbh__tile:nth-child(7) { left: 402px; top: 126px; --dx:  3px; --dy: -7px; --rot:  1.3deg; --dur: 4.2s; --del: -1.3s; }
.sqbh__tile:nth-child(8) { left: 307px; top: 134px; --dx: -3px; --dy: -8px; --rot: -1.8deg; --dur: 5.0s; --del: -3.0s; }
.sqbh__tile:nth-child(9) { left: 100px; top: 130px; --dx:  3px; --dy: -9px; --rot:  1.5deg; --dur: 6.8s; --del: -5.5s; }

/* Dark mode: the plate darkens, the marks keep their own colour. */
html[data-sq-theme="dark"] .sqbh {
	background: var(--wp--preset--color--dark-surface);
	border-block-end-color: var(--wp--preset--color--dark-border);
}

html[data-sq-theme="dark"] .sqbh__tile {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-contrast) 10%, transparent);
	background-color: color-mix(in srgb, var(--tint, transparent) 16%, var(--wp--preset--color--dark-soft));
	box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--wp--preset--color--overlay-scrim) 70%, transparent);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Tablet keeps the two-column layout: the tiles step down to 72px and the two
   right-hand slots drop, which is what buys the copy enough width to stay beside them. */
@media (max-width: 1100px) {
	.sqbh__in { gap: 40px; padding-block: 56px; }
	.sqbh__art {
		--sqbh-tile: 72px;
		inline-size: 370px;
		block-size: 198px;
	}
	.sqbh__stage { inline-size: 42px; block-size: 42px; }

	/* Seven of the nine, re-anchored rather than rescaled: the desktop spacing does not
	   survive a 410px box, so the tablet gets its own scatter on the same three levels. */
	.sqbh__tile:nth-child(1) { left:  84px; top:   7px; --dx: -3px; --dy:  9px; }
	.sqbh__tile:nth-child(2) { left: 166px; top:   0;   --dx:  3px; --dy: -6px; }
	.sqbh__tile:nth-child(3) { left: 248px; top:  10px; --dx:  3px; --dy:  9px; }
	.sqbh__tile:nth-child(4) { left:   0;   top:  74px; --dx: -4px; --dy: -8px; }
	.sqbh__tile:nth-child(5) { left: 184px; top: 114px; --dx:  4px; --dy: -8px; }
	.sqbh__tile:nth-child(6) { left: 274px; top: 120px; --dx: -3px; --dy: -8px; }
	.sqbh__tile:nth-child(7) { left:  98px; top: 123px; --dx:  4px; --dy: -8px; }
	.sqbh__tile:nth-child(8),
	.sqbh__tile:nth-child(9) { display: none; }
}

/* Below the two-column threshold: text first, then two rows of three. */
@media (max-width: 740px) {
	.sqbh { padding-inline: 24px; }
	.sqbh__in {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
		padding-block: 26px 30px;
	}
	.sqbh__title { max-inline-size: none; }
	.sqbh__lede { max-inline-size: 60ch; }

	.sqbh__art {
		--sqbh-tile: 60px;
		align-self: center;
		inline-size: 340px;
		block-size: 144px;
		max-inline-size: 100%;
	}
	.sqbh__stage { inline-size: 34px; block-size: 34px; }
	.sqbh__tile { border-radius: 14px; }

	/*
	 * Six tiles in two loosely staggered groups. A 60px tile in a 144px box leaves only
	 * 84px of vertical range, and any two tiles closer than 66px horizontally have to clear
	 * each other vertically — so the groups sit high and low while the offsets inside each
	 * group and the gaps between columns stay deliberately irregular.
	 */
	.sqbh__tile:nth-child(1) { left: 249px; top:  6px; --dx:  3px; --dy:  7px; }
	.sqbh__tile:nth-child(2) { left:  29px; top:  0;   --dx: -3px; --dy:  7px; }
	.sqbh__tile:nth-child(3) { left: 100px; top:  8px; --dx:  3px; --dy: -7px; }
	.sqbh__tile:nth-child(4) { left:  11px; top: 76px; --dx: -3px; --dy: -6px; }
	.sqbh__tile:nth-child(5) { left: 269px; top: 84px; --dx:  3px; --dy: -7px; }
	.sqbh__tile:nth-child(6) { left:  85px; top: 84px; --dx: -3px; --dy: -6px; }
	.sqbh__tile:nth-child(7),
	.sqbh__tile:nth-child(8),
	.sqbh__tile:nth-child(9) { display: none; }
}

@media (max-width: 560px) {
	.sqbh { padding-inline: 18px; }
	.sqbh__in { padding-block: 24px 28px; gap: 20px; }
}

/*
 * Reduced motion gets the composition, not the movement. The rotator checks the same
 * query and stops swapping marks, so the arrangement is genuinely still.
 */
@media (prefers-reduced-motion: reduce) {
	.sqbh__tile {
		animation: none;
		transform: none;
	}
	.sqbh__stage img,
	.sqbh__tile {
		transition: none;
	}
}