/* ============================================================
   MN: Ads
   Ad slots for the mazninews/ads block. Fixed-size slots keep
   their exact aspect ratio and shrink proportionally on narrow
   screens (no layout shift); fluid slots fill the container.
   ============================================================ */

.mn-ads {
	margin: var(--mn-space-6) 0;
}

/* Small "Advertisement" caption above the slot. */
.mn-ads__label {
	margin: 0 0 var(--mn-space-2);
	font-size: var(--mn-text-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mn-color-text-muted);
	text-align: center;
}

.mn-ads--left .mn-ads__label {
	text-align: left;
}

.mn-ads--right .mn-ads__label {
	text-align: right;
}

/* Slot: centered by default; left/right variants align it. */
.mn-ads__slot {
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

.mn-ads--left .mn-ads__slot {
	margin-left: 0;
	margin-right: auto;
}

.mn-ads--right .mn-ads__slot {
	margin-left: auto;
	margin-right: 0;
}

.mn-ads__slot ins {
	text-decoration: none;
}

/* Banner image ads fill the reserved slot without cropping. */
.mn-ads__slot .mn-ads__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Optional boxed background (light + dark mode). */
.mn-ads--boxed {
	padding: var(--mn-space-3);
	background-color: var(--mn-ads-bg, transparent);
	border-radius: var(--mn-radius);
}

html[data-theme="dark"] .mn-ads--boxed {
	background-color: var(--mn-ads-bg-dark, var(--mn-ads-bg, transparent));
}

/* Device targeting: hide the whole slot (label included) on selected
   devices. Breakpoints follow the theme's responsive scale —
   mobile < 768px, tablet 768–1023px, desktop >= 1024px. Pure CSS so the
   targeting keeps working on cached pages. */

@media (max-width: 767.98px) {
	.mn-ads--hide-mobile {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.mn-ads--hide-tablet {
		display: none;
	}
}

@media (min-width: 1024px) {
	.mn-ads--hide-desktop {
		display: none;
	}
}

