/*
 * Affiliate ad slots - visual language matches the theme's existing
 * .ad-slot/.ad-slot__label treatment (css/main.css) so these read as
 * the same kind of placement the site has always had, just reusing the
 * CSS custom properties the theme itself defines on :root (falls back
 * to the theme's own default values if this stylesheet is ever loaded
 * without the theme active).
 */

.horezdar-aff-slot {
	text-align: center;
	margin: 0 auto;
}

.horezdar-aff-slot__label {
	display: block;
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: rgba(30, 30, 30, .4);
	margin-bottom: 8px;
}

.horezdar-aff-slot__link {
	display: inline-block;
	line-height: 0;
}

.horezdar-aff-slot__img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 8px;
}

/* In-article placement (between paragraphs/blocks). */
.horezdar-aff-slot--incontent {
	max-width: 100%;
	margin: 32px auto;
	overflow-x: auto;
}

/* Ad "card" inserted into .article-grid (template-parts/content.php) -
 * matches .article-card's own box so it sits naturally among real
 * article cards, clearly labeled as advertising rather than editorial. */
.article-card--ad {
	background: var(--horezdar-gray-light, #f1f1f1);
	border-radius: var(--horezdar-radius, 16px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.article-card--ad .horezdar-aff-slot {
	width: 100%;
}

/* Homepage landscape placement, below the latest-articles carousel. */
.horezdar-aff-slot--incontent.horezdar-aff-slot--grid-card {
	margin: 0;
}

/* A tall skyscraper/wide_vertical (160x600/300x600) creative shown on
 * mobile outside the (desktop-only) skyscraper rails - see
 * horezdar_aff_slot_needs_scroll_box() in includes/class-render.php.
 * Fixed 300x400 window, vertical scroll to see the rest of the image
 * rather than shrinking a 600px-tall creative to fit and letting it
 * dominate the screen. The image itself is intentionally NOT height-
 * capped here (only width, via .horezdar-aff-slot__img's existing
 * max-width:100%) so it renders at its real proportional height inside
 * the scrollable window instead of being squashed. */
/* Doubled-up selector deliberately: needs to outrank
 * .article-card--ad .horezdar-aff-slot's own `width: 100%` (same
 * specificity as a single class + ancestor class, so source order
 * alone can't be relied on) when a scroll-box creative lands in the
 * homepage/archive "between posts" grid card. */
.horezdar-aff-slot.horezdar-aff-slot--scrollbox {
	width: 300px;
	max-width: 100%;
	height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

.horezdar-aff-slot--scrollbox .horezdar-aff-slot__label {
	position: sticky;
	top: 0;
	background: var(--horezdar-white, #fff);
	padding-top: 2px;
}

/* Fixed desktop skyscraper rails - deliberately outside the theme's own
 * content grid (position: fixed to the viewport edge) so adding them
 * needed zero changes to the existing layout/templates. Hidden below
 * the width where they'd overlap the centered content column
 * (--horezdar-max-width, 1180px by default) - "display skyscrapers when
 * the layout permits" is enforced entirely by these two breakpoints. */
.horezdar-aff-slot--skyscraper-left,
.horezdar-aff-slot--skyscraper-right {
	display: none;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	width: 160px;
}

.horezdar-aff-slot--skyscraper-left {
	left: 16px;
}

.horezdar-aff-slot--skyscraper-right {
	right: 16px;
}

@media (min-width: 1550px) {
	.horezdar-aff-slot--skyscraper-left,
	.horezdar-aff-slot--skyscraper-right {
		display: block;
	}
}

@media (min-width: 1800px) {
	.horezdar-aff-slot--skyscraper-left,
	.horezdar-aff-slot--skyscraper-right {
		width: 300px;
	}
}