/**
 * `nomon/brands` — block-scoped styles, auto-enqueued only when the block is on
 * the page.
 *
 * Full-bleed surface band: mirrors the `core/group` bg auto-bleed in main.css so
 * the section colour reaches the viewport edges while inner content stays capped
 * at content-size. Vertical breathing room comes from `--section-space` — the
 * one bg-section exception to the "no baked vertical spacing" rule (see
 * docs/styling.md). `!important` on the inline margins matches WP's emitted
 * `.is-layout-constrained > * { margin-inline: auto !important }`.
 */

/* `50vw` counts the scrollbar the layout box doesn't, so the carousel overshoots by a few px; `clip` absorbs it without making a scroll container. */
.nomon-brands {
	/* Shear of an 80px card; half of it overhangs each side of the card's box. */
	--brands-slant: calc(80px * tan(var(--skew-angle)) * -1);

	overflow-x: clip;
}

@media (min-width: 48rem) {
	.nomon-brands {
		--brands-slant: calc(88px * tan(var(--skew-angle)) * -1);
	}
}

.has-global-padding > .nomon-brands {
	max-width: none;
	margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
	padding-block: var(--section-space);
}

.nomon-brands__inner {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

/* Runs past the right viewport edge so the next cards clip there, signalling more to swipe; `__inner` is the containing block, so `50% - 50vw` reaches it exactly. */
.nomon-brands__carousel {
	margin-right: calc(50% - 50vw);
}

/* Inset by the overhang so the first card's leaning corner survives the clip and its bottom edge lands on the heading's. */
.nomon-brands__carousel,
.nomon-brands__row {
	padding-inline: calc(var(--brands-slant) / 2);
}

/* main.css's critical pre-init rule pins `.swiper-slide { width: 100% }`, which `slidesPerView: 'auto'` needs undone. */
.nomon-brands__slide {
	width: auto;
}

.nomon-brands__card {
	transform: skewX(var(--skew-angle));
}

.nomon-brands__logo,
.nomon-brands__name {
	transform: skewX(calc(var(--skew-angle) * -1));
}

.nomon-brands__card:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}