.sbs-banner {
	position: relative;
	overflow: hidden;
	width: 100%;
	border-radius: var(--sbs-radius-desktop, 16px);
	aspect-ratio: var(--sbs-ratio-desktop, 1);
}

.sbs-banner img.sbs-banner__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--sbs-object-position-desktop, 50% 50%);
}

.sbs-banner__link {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * P1 #45: hero height override. The container height is driven by
 * --sbs-hero-height and aspect-ratio is disabled, but the image keeps
 * object-fit: cover and its focus-point-derived object-position, so it
 * is cropped rather than stretched.
 */
.sbs-banner--fixed-height {
	aspect-ratio: auto;
	height: var(--sbs-hero-height, auto);
}

/*
 * FIX (v1.1.0, P0 #13/#15/#16): previously the container only ever used
 * the DESKTOP aspect-ratio/radius/focus-point at every breakpoint, which
 * distorted or badly cropped mobile/tablet creative that has a different
 * ratio than the desktop source. Each breakpoint now redeclares its own
 * ratio/radius/object-position from the CSS custom properties Output.php
 * emits per banner.
 */
@media (max-width: 1024px) {
	.sbs-banner {
		aspect-ratio: var(--sbs-ratio-tablet, var(--sbs-ratio-desktop, 1));
		border-radius: var(--sbs-radius-tablet, var(--sbs-radius-desktop, 16px));
	}
	.sbs-banner--fixed-height { aspect-ratio: auto; }
	.sbs-banner img.sbs-banner__img {
		object-position: var(--sbs-object-position-tablet, var(--sbs-object-position-desktop, 50% 50%));
	}
}

@media (max-width: 767px) {
	.sbs-banner {
		aspect-ratio: var(--sbs-ratio-mobile, var(--sbs-ratio-desktop, 1));
		border-radius: var(--sbs-radius-mobile, var(--sbs-radius-desktop, 16px));
	}
	.sbs-banner--fixed-height { aspect-ratio: auto; }
	.sbs-banner img.sbs-banner__img {
		object-position: var(--sbs-object-position-mobile, var(--sbs-object-position-desktop, 50% 50%));
	}
}

.sbs-zone {
	display: grid;
	gap: var(--sbs-gap-desktop, 16px);
	width: 100%;
}

.sbs-zone--single { grid-template-columns: 1fr; }
.sbs-zone--double { grid-template-columns: 1fr 1fr; }
.sbs-zone--triple { grid-template-columns: 2fr 1fr; grid-auto-rows: 1fr; }
.sbs-zone--triple .sbs-zone__slot:nth-child(1) { grid-row: span 2; }
.sbs-zone--quad { grid-template-columns: repeat(4, 1fr); }
.sbs-zone--large_small { grid-template-columns: 2fr 1fr; grid-auto-rows: 1fr; }
.sbs-zone--large_small .sbs-zone__slot:nth-child(1) { grid-row: span 2; }
.sbs-zone--feature_grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1024px) {
	.sbs-zone {
		gap: var(--sbs-gap-tablet, 12px);
	}
	.sbs-zone--quad,
	.sbs-zone--feature_grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.sbs-zone {
		gap: var(--sbs-gap-mobile, 8px);
	}
	.sbs-zone--mobile-stack.sbs-zone--double,
	.sbs-zone--mobile-stack.sbs-zone--triple,
	.sbs-zone--mobile-stack.sbs-zone--quad,
	.sbs-zone--mobile-stack.sbs-zone--large_small,
	.sbs-zone--mobile-stack.sbs-zone--feature_grid {
		grid-template-columns: 1fr;
	}
	.sbs-zone--mobile-stack .sbs-zone__slot:nth-child(1) {
		grid-row: auto;
	}
	.sbs-zone--mobile-grid2.sbs-zone--quad,
	.sbs-zone--mobile-grid2.sbs-zone--feature_grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.sbs-zone--mobile-carousel {
		grid-auto-flow: column;
		grid-auto-columns: 85%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}
	.sbs-zone--mobile-carousel .sbs-zone__slot {
		scroll-snap-align: start;
	}
	.sbs-zone--mobile-first_only .sbs-zone__slot:not(:first-child) {
		display: none;
	}
}

.sbs-hide-mobile { display: block; }
.sbs-hide-desktop { display: none; }

/* P1 #26: additional layout presets */
.sbs-zone--full_width { grid-template-columns: 1fr; }
.sbs-zone--category_campaign { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* P1 #27: independent tablet layout overrides */
@media (min-width: 768px) and (max-width: 1024px) {
	.sbs-zone--tablet-grid2 { grid-template-columns: repeat(2, 1fr); }
	.sbs-zone--tablet-stack { grid-template-columns: 1fr; }
	.sbs-zone--tablet-stack .sbs-zone__slot:nth-child(1) { grid-row: auto; }
	.sbs-zone--tablet-carousel {
		grid-auto-flow: column;
		grid-auto-columns: 60%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}
}

/* P1 #28: container width controls */
.sbs-zone--width-content { max-width: var(--wp--style--global--content-size, 1200px); margin-inline: auto; }
.sbs-zone--width-custom { max-width: var(--sbs-zone-max-width, 1200px); margin-inline: auto; }
.sbs-zone--width-full { width: 100%; max-width: none; }
/* width-inherit intentionally sets nothing -- the Elementor container governs. */

/* P1 #28 optional: edge-to-edge on mobile only when explicitly enabled */
@media (max-width: 767px) {
	.sbs-zone--mobile-full-bleed {
		width: 100vw;
		max-width: 100vw;
		margin-inline-start: calc(50% - 50vw);
		margin-inline-end: calc(50% - 50vw);
	}
	.sbs-zone--mobile-full-bleed .sbs-banner {
		border-radius: 0;
	}
}

@media (max-width: 767px) {
	.sbs-hide-mobile { display: none; }
	.sbs-hide-desktop { display: block; }
}