/* === De advertentiehouder ===
 *
 * Zelfde kader als de affiliateblokken van de DaisyCon-plugin: dezelfde radius, dezelfde
 * achtergrond, dezelfde schaduw en hetzelfde onderschrift. Waar die plugin zijn eigen
 * CSS-variabelen zet (--dcae-radius, --dcae-ad-bg) gebruiken we die, zodat de twee kaders
 * niet uit elkaar lopen als daar iets verandert. Zonder die plugin vallen we terug op
 * waarden die bij het donkere thema passen.
 */
.hb-as-slot-wrap {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 344px;
	margin: 28px auto;
	padding: 0;
}

.hb-as-slot {
	/* Inhoud exact 300 px: het netwerk rekent zijn indeling op de inhoudsbreedte, en met
	 * `border-box` werd dat 298 px (300 min de twee randen). Dan paste een raster van twee
	 * tegels niet meer en viel het terug op één kolom. De rand valt nu buiten de 300. */
	box-sizing: content-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 300px;
	max-width: 100%;
	/* Inhoud exact 300 x 250, met de rand erbuiten: zo meet het netwerk de maat waarvoor
	 * het levert. De padding zorgt voor lucht tussen de advertentie en de rand -- gelijk
	 * aan alle kanten, omdat de inhoud gecentreerd staat. */
	height: 250px;
	margin: 0 auto;
	padding: 10px;
	background: var(--dcae-ad-bg, rgba(255, 255, 255, 0.04));
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--dcae-radius, 12px);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
	overflow: hidden;
	text-align: center;
}

.hb-as-slot iframe,
.hb-as-slot ins,
.hb-as-slot img {
	max-width: 100%;
}

/* Het onderschrift, in dezelfde maat als bij de affiliateblokken. */
.hb-as-slot__label {
	display: block;
	margin: 8px 0 0;
	padding: 0;
	color: var(--dcae-disclosure, rgba(255, 255, 255, 0.55));
	font-size: 11px;
	letter-spacing: 0.01em;
	line-height: 1.4;
	text-align: center;
	opacity: 0.85;
}

/* Testmodus: laat zien waar hij komt en hoe groot hij is, zonder netwerk. */
.hb-as-slot--test {
	border-style: dashed;
	opacity: 0.45;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Op een smalle telefoon is er geen ruimte voor 10 px lucht aan elke kant: de kolom is
 * daar ongeveer 330 px, dus de padding gaat omlaag in plaats van dat het blok buiten de
 * kolom valt. */
@media (max-width: 420px) {
	.hb-as-slot {
		max-width: 100%;
		padding: 4px;
	}
}

/**
 * Terugval als het netwerk niets levert.
 *
 * De houder is 300 bij 250 met een kader; zonder inhoud is dat een gat. Deze link vult dat
 * gat met een gewone verwijzing naar onze eigen aanbiedingen. Bewust geen kader eromheen:
 * het moet lezen als een link in de tekst, niet als een advertentie die niet is geladen.
 */
.hb-as-slot__huis {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 300px;
	height: 250px;
	max-width: 100%;
	box-sizing: border-box;
	padding: 18px;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	border-radius: var(--dcae-radius, 8px);
	background: var(--dcae-ad-bg, #141414);
	color: inherit;
}

.hb-as-slot__huis:hover,
.hb-as-slot__huis:focus {
	text-decoration: underline;
}

@media (max-width: 420px) {
	.hb-as-slot__huis {
		width: 100%;
		height: 200px;
	}
}

/*
 * Lege houder: geen kader beloven.
 *
 * Zonder toestemming wordt er niets geplaatst. Zonder deze regel blijft er dan
 * een leeg vak van 300 bij 250 staan met het label "Reclame" eronder -- een
 * belofte die niet wordt ingelost. De houder klapt dicht tot er iets te zien is.
 */
.hb-as-slot-wrap--leeg {
	display: none;
}