/**
 * STEP Network ads — placement styles for the Senior theme.
 */

.sticky-banner,
.senior-ad-block,
.dynamic-ad {
	clear: both;
}

.senior-ad-block,
.dynamic-ad {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	text-align: center;
}

/* Live slots hold their format's height plus the "Annonce" label before the
   tag fills, so the content below doesn't jump. The heights come from the
   markup; a slot without one keeps no minimum. An unfilled slot keeps the
   space too, since collapsing it late would be a jump of its own. */
.senior-ad-block,
.dynamic-ad {
	--senior-ad-height: var(--senior-ad-desktop-height);
	min-height: calc(var(--senior-ad-height) + 25px);
}

@media (max-width: 767.5px) {
	.senior-ad-block,
	.dynamic-ad {
		--senior-ad-height: var(--senior-ad-mobile-height);
	}
}

/* The 930px formats are wider than the text column, so a slot claims the
   theme's full content band plus its own gutters. The theme caps every direct
   child of .entry-content through a selector it keeps making more specific,
   so the width is forced here rather than chased. Inside a narrower column
   the slot simply fills it and the ad scales down. */
.entry-content > .senior-ad-block,
.entry-content > .dynamic-ad,
.entry-content > .wp-block-group .senior-ad-block,
.entry-content > .wp-block-group .dynamic-ad,
.sidebar-content-inner > .senior-ad-block,
.sidebar-content-inner > .dynamic-ad {
	max-width: calc(var(--seniornews-container, 44.5rem) + 2rem) !important;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* The label only appears once the tag has run, so a blocked or empty
   slot never leaves a stray "Annonce" behind. */
.senior-ad-block[data-senior-ad-ready]::before,
.dynamic-ad[data-senior-ad-ready]::before,
.sticky-banner[data-senior-ad-ready]::before {
	content: "Annonce";
	display: block;
	margin-bottom: 0.5rem;
	font-family: tahoma, sans-serif;
	font-size: 14px;
	line-height: 1.2;
	color: #b8b8b8;
	text-align: center;
}

/* The creative is 160 or 300 wide and sits against the content: the left
   slot aligns it right, the right slot aligns it left. The slot itself is up
   to 300px (sticky-ads.js shrinks it to the gutter) and clips the rest. */
.sticky-banner {
	position: absolute;
	z-index: 90;
	display: flex;
	flex-direction: column;
	width: 300px;
	max-width: 300px;
	overflow: hidden;
	visibility: hidden;
}

.sticky-banner--left {
	align-items: flex-end;
}

.sticky-banner--right {
	align-items: flex-start;
}

.sticky-banner[data-senior-ad-ready]::before {
	align-self: stretch;
	width: auto;
	max-width: none;
}

/* The tag's box follows the creative's width, up to the slot. A creative
   wider than the slot then keeps its inner edge and loses the outer one. */
.sticky-banner > div:not(.senior-ad-placeholder) {
	display: flex;
	max-width: 100%;
	min-width: 0;
}

.sticky-banner--left > div:not(.senior-ad-placeholder) {
	justify-content: flex-end;
}

.sticky-banner--right > div:not(.senior-ad-placeholder) {
	justify-content: flex-start;
}

.sticky-banner iframe,
.sticky-banner img,
.sticky-banner object {
	display: block;
	flex-shrink: 0;
	max-width: 300px;
}

.sticky-banner--left .senior-ad-placeholder {
	margin-left: auto;
	margin-right: 0;
}

.sticky-banner--right .senior-ad-placeholder {
	margin-left: 0;
	margin-right: auto;
}

.sticky-banner.is-ready:not(.is-hidden) {
	visibility: visible;
}

.sticky-banner.is-hidden {
	display: none !important;
}

.sticky-banner--left,
.sticky-banner--right {
	right: auto;
}

.sticky-banner.glue {
	position: fixed;
}

/* Adnami's seamless skin measures .content-wrapper for the column and
   draws the wallpaper in the margins beside it. The element stays empty. */
.content-wrapper {
	width: min(100%, calc(var(--seniornews-container, 58.75rem) + (var(--seniornews-gutter, 1rem) * 2)));
	height: 0;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	pointer-events: none;
}

/* The skin creative breaks out of the billboard into the side margins, and
   the theme's content area clips that. Keep the header fixed: Adnami's own
   rule switches it to sticky, which stacks it on top of the header spacer. */
html.adsm-skin .entry-content {
	overflow: visible;
}

html.adsm-skin #site-header.header-wrapper {
	position: fixed !important;
}

/* A slot with nothing booked for the current viewport. */
.senior-ad-empty {
	display: none !important;
}

/* Slots booked for one device only. Breakpoints match the theme and ads.js. */
.senior-ad-only--mobile {
	display: none !important;
}

@media (max-width: 767.5px) {
	.senior-ad-only--mobile {
		display: block !important;
	}

	.senior-ad-only--desktop {
		display: none !important;
	}
}

/* --------------------------------------------------------------
   Test placeholders

   Stand-ins for the real tags until the ad network goes live. Each box
   scales down proportionally when the column is narrower than the format.
   -------------------------------------------------------------- */

.senior-ad-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(100%, var(--senior-ad-width));
	aspect-ratio: var(--senior-ad-ratio);
	margin-left: auto;
	margin-right: auto;
	background-color: #6171ff;
	color: #fff;
	font-family: tahoma, sans-serif;
	font-size: 16px;
	line-height: 1.2;
}

.senior-ad-placeholder--930x180 {
	--senior-ad-width: 930px;
	--senior-ad-ratio: 930 / 180;
}

.senior-ad-placeholder--930x600 {
	--senior-ad-width: 930px;
	--senior-ad-ratio: 930 / 600;
}

.senior-ad-placeholder--300x600 {
	--senior-ad-width: 300px;
	--senior-ad-ratio: 300 / 600;
}

.senior-ad-placeholder--160x600 {
	--senior-ad-width: 160px;
	--senior-ad-ratio: 160 / 600;
}

.senior-ad-placeholder--300x250 {
	--senior-ad-width: 300px;
	--senior-ad-ratio: 300 / 250;
}

.senior-ad-placeholder--320x320 {
	--senior-ad-width: 320px;
	--senior-ad-ratio: 320 / 320;
}

.senior-ad-placeholder--320x100 {
	--senior-ad-width: 320px;
	--senior-ad-ratio: 320 / 100;
}

.senior-ad-placeholder--320x50 {
	--senior-ad-width: 320px;
	--senior-ad-ratio: 320 / 50;
}

/* Slots print both variants, so only the matching one is shown. The JS
   breakpoint in ads.js mirrors this query. */
.senior-ad-placeholder--mobile {
	display: none;
}

@media (max-width: 767.5px) {
	.senior-ad-placeholder--desktop {
		display: none;
	}

	.senior-ad-placeholder--mobile {
		display: flex;
	}
}