/*
 * Bledkom — paid advert slots
 *
 * Scoped under .bk-ads. Colours come from the global palette with real
 * fallbacks, so a theme change cannot leave a slot unpainted.
 *
 * The brief was "somewhere non-intrusive but visible". That is the whole
 * design: a hairline band, a small label, a picture, and nothing else. No
 * shadow, no border that competes with a listing card, no animation. An advert
 * that shouts at somebody reading about a house for sale is an advert that
 * makes the site look cheap, and the site is the product.
 *
 * ---------------------------------------------------------------------------
 * Update log
 * ---------------------------------------------------------------------------
 * 0.32.0 — 2026-08-28 — First build. Three slots, and the first-child rule
 *                       that keeps a slot filled when JavaScript is off.
 * ---------------------------------------------------------------------------
 */

.bk-ads {
	display: block;
	margin: 32px 0 8px;
	padding: 0;
	clear: both;
}

/*
 * The label. Small, quiet, and never optional: a paid placement has to say
 * that is what it is, or the site is selling its own credibility with the
 * banner. إشهار, not إعلان — إعلان is what a listing is called here, and using
 * the same word for both is exactly the confusion this label exists to stop.
 */
.bk-ads__label {
	display: block;
	margin: 0 0 6px;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--global-palette5, #4A5C61);
	opacity: 0.75;
}

.bk-ads__rail {
	position: relative;
}

/*
 * Every eligible advert is printed and the picker in the footer reveals one.
 * This rule is what happens when the picker never runs — with JavaScript off,
 * a slow connection or a script error, the first advert shows and the slot is
 * still a slot. It must stay: without it a broken picker leaves a blank band
 * where somebody has paid to be.
 */
.bk-ads__rail > .bk-ad {
	display: none;
}

.bk-ads__rail > .bk-ad:first-child {
	display: block;
}

.bk-ad {
	position: relative;
	text-decoration: none !important;
	border: 0;
	background: var(--global-palette8, #EEF1F0);
	border-radius: 10px;
	overflow: hidden;
}

.bk-ad:hover,
.bk-ad:focus-visible {
	text-decoration: none !important;
}

.bk-ad:focus-visible {
	outline: 3px solid var(--global-palette1, #1B6B70);
	outline-offset: 3px;
}

.bk-ad__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 10px;
}

.bk-ad__caption {
	display: block;
	padding: 8px 12px 10px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--global-palette4, #3A4E53) !important;
	text-align: start;
}

/*
 * ---------------------------------------------------------------------------
 * The slots
 * ---------------------------------------------------------------------------
 */

/*
 * Under the page. A wide strip, capped in height so a tall picture somebody
 * uploaded by mistake cannot push the footer off the screen. object-fit keeps
 * it from being stretched — a squashed shopfront is worse than a cropped one.
 */
.bk-ads--page_bottom {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--global-palette7, #E3E9E8);
}

.bk-ads--page_bottom .bk-ad__img {
	max-height: 260px;
	object-fit: cover;
	object-position: center;
}

/* Side column. A box, so it sits in the width a sidebar actually has. */
.bk-ads--sidebar {
	margin: 0 0 24px;
}

.bk-ads--sidebar .bk-ad__img {
	max-height: 420px;
	object-fit: cover;
}

/* Above the footer. The same strip, with room to breathe under it. */
.bk-ads--footer {
	margin: 24px 0;
}

.bk-ads--footer .bk-ad__img {
	max-height: 220px;
	object-fit: cover;
}

@media (max-width: 600px) {
	.bk-ads {
		margin: 24px 0 4px;
	}

	.bk-ads--page_bottom .bk-ad__img,
	.bk-ads--footer .bk-ad__img {
		max-height: 200px;
	}
}

/*
 * Nobody wants an advert in the printout, and nobody wants one in a screen
 * reader's list of links twice over.
 */
@media print {
	.bk-ads {
		display: none;
	}
}