/* ============================================================
   BP: Ads
   Ad slots for the barita-pro/ads block. Fixed-size slots keep
   their exact aspect ratio and shrink proportionally on narrow
   screens (no layout shift); fluid slots fill the container.
   ============================================================ */

.bp-ads {
	margin: var(--bp-space-6) 0;
}

/* Small "Advertisement" caption above the slot. */
.bp-ads__label {
	margin: 0 0 var(--bp-space-2);
	font-size: var(--bp-text-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bp-color-text-muted);
	text-align: center;
}

.bp-ads--left .bp-ads__label {
	text-align: left;
}

.bp-ads--right .bp-ads__label {
	text-align: right;
}

/* Slot: centered by default; left/right variants align it. */
.bp-ads__slot {
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

.bp-ads--left .bp-ads__slot {
	margin-left: 0;
	margin-right: auto;
}

.bp-ads--right .bp-ads__slot {
	margin-left: auto;
	margin-right: 0;
}

.bp-ads__slot ins {
	text-decoration: none;
}

/* Banner image ads fill the reserved slot without cropping. */
.bp-ads__slot .bp-ads__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Fluid (responsive) slots: reserve a minimum height so the page does
   not shift when the AdSense creative arrives. A min-height (not a
   fixed height) is used on purpose: taller creatives still grow the
   slot, and shorter creatives only leave a small gap. Fixed-size slots
   are untouched — they already keep their exact aspect ratio. */
.bp-ads--fluid .bp-ads__slot {
	min-height: 90px;
}

@media (min-width: 768px) {
	.bp-ads--fluid .bp-ads__slot {
		min-height: 250px;
	}
}

/* Optional boxed background (light + dark mode). */
.bp-ads--boxed {
	padding: var(--bp-space-3);
	background-color: var(--bp-ads-bg, transparent);
	border-radius: var(--bp-radius);
}

html[data-theme="dark"] .bp-ads--boxed {
	background-color: var(--bp-ads-bg-dark, var(--bp-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) {
	.bp-ads--hide-mobile {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.bp-ads--hide-tablet {
		display: none;
	}
}

@media (min-width: 1024px) {
	.bp-ads--hide-desktop {
		display: none;
	}
}