/* ZukaAdZone – frontend
 *
 * Device visibility uses the WordPress 782px breakpoint:
 *   <= 781px  => "mobile"
 *   >= 782px  => "desktop"
 * Rendering both and hiding with CSS is cache-safe (unlike server-side
 * wp_is_mobile(), which a page cache would freeze to one device).
 */

.zaz {
	margin: 18px auto;
	text-align: center;
}

.zaz img,
.zaz .zaz__img,
.zaz .zaz__video {
	max-width: 100%;
	height: auto;
}

/* Responsive oEmbed wrapper (YouTube / Vimeo). */
.zaz .zaz__embed {
	position: relative;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
}
.zaz .zaz__embed iframe,
.zaz .zaz__embed object,
.zaz .zaz__embed embed {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
}

/* Scheduled ads are hidden until frontend.js confirms they're inside their
   start/end window (it adds .zaz-active). */
.zaz-sched { display: none; }
.zaz-sched.zaz-active { display: block; }

/* In-context preview ad (only ever shown to a logged-in editor previewing). */
.zaz-preview-ad {
	position: relative;
	outline: 2px dashed #2271b1;
	outline-offset: 6px;
}
.zaz-preview-ad .zaz-preview-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: #2271b1;
	color: #fff;
	font: 600 11px/1 -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	letter-spacing: .3px;
	padding: 4px 10px;
	border-radius: 10px;
	white-space: nowrap;
}

/* Mobile only: hide on desktop widths. */
@media ( min-width: 782px ) {
	.zaz-hide-desktop { display: none !important; }
}

/* Desktop only: hide on mobile widths. */
@media ( max-width: 781px ) {
	.zaz-hide-mobile { display: none !important; }
}