/**
 * Homepage Banner Widget
 *
 * A single scheduled banner image (1024×220), centered and responsive.
 * The container is hidden until the JS injects an active banner, so no space is
 * reserved when nothing is scheduled. The locked aspect-ratio sizes the box
 * before the image bytes arrive, preventing layout shift once revealed.
 *
 * @package Zededa
 */

.zededa-homepage-banner {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* No banner scheduled (and the JS no-banner state): take up no space. */
.zededa-homepage-banner[hidden] {
	display: none;
}

.zededa-homepage-banner__item {
	display: block;
	width: 100%;
	max-width: 1024px;
	margin-inline: auto;
	line-height: 0; /* strip inline-image descender gap */
}

.zededa-homepage-banner__item[hidden] {
	display: none;
}

.zededa-homepage-banner__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 1024px;
	aspect-ratio: 1024 / 220; /* reserve the active box → no shift after image load */
	margin-inline: auto;
}

/*
 * Breakpoints (theme de-facto: 1024 / 768 / 375). The single asset scales
 * fluidly while holding its 1024:220 ratio. A separate mobile asset can hook in
 * at the 375 breakpoint later if legibility requires it.
 */
@media (max-width: 1024px) {
	.zededa-homepage-banner__item,
	.zededa-homepage-banner__img {
		max-width: 100%;
	}
}