/* Ad Platform — sponsored-ad block. Loaded site-wide so ads render correctly inside articles.
   Every slot enforces its native aspect ratio + max width. Images scale within those bounds and
   are never stretched or distorted. If an uploaded creative doesn't match the slot's aspect, it's
   letterboxed via object-fit: contain rather than warping the layout. */

.ap-ad {
	display: block;
	margin: 28px auto;
	text-align: center;
	max-width: 100%;
}
.ap-ad__link {
	display: block;
	margin: 0 auto;
	line-height: 0;
	background: #fafbfc; /* visible if uploaded creative has wrong aspect — letterboxing color */
	border-radius: 4px;
	overflow: hidden;
}
.ap-ad__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.ap-ad__label {
	display: block;
	font-size: 11px; color: #94a3b8; font-weight: 500;
	text-transform: uppercase; letter-spacing: 0.06em;
	margin-top: 6px;
}

/* Per-slot dimensions — enforce native size as a max width with the correct aspect ratio.
   On narrow viewports the slot scales down proportionally; on wide viewports it stays at native. */
.ap-ad--top_banner .ap-ad__link        { width: 970px;  max-width: 100%; aspect-ratio: 970 / 90;  }
.ap-ad--leaderboard .ap-ad__link       { width: 728px;  max-width: 100%; aspect-ratio: 728 / 90;  }
.ap-ad--leaderboard_hd .ap-ad__link    { width: 970px;  max-width: 100%; aspect-ratio: 728 / 90;  }
.ap-ad--half_page .ap-ad__link         { width: 300px;  max-width: 100%; aspect-ratio: 300 / 600; }
.ap-ad--medium_rectangle .ap-ad__link  { width: 300px;  max-width: 100%; aspect-ratio: 300 / 250; }
.ap-ad--wide_skyscraper .ap-ad__link   { width: 160px;  max-width: 100%; aspect-ratio: 160 / 600; }
.ap-ad--square .ap-ad__link            { width: 300px;  max-width: 100%; aspect-ratio: 1 / 1;     }

/* Archive-loop placement (between posts on home / category / tag / search). The ad sits as
   a sibling of the post markup, so it must span the full width of whatever container the
   theme uses — flex row, CSS grid, or plain flow. We force it to break out of multi-column
   layouts with grid-column / column-span and flex-basis 100%.

   Margins are zero on purpose: the parent container's gap (CSS Grid `gap`, flex `gap`, or
   sibling vertical margins on plain flow) already handles spacing between rows. Adding our
   own margin here stacks on top of that and produces the "huge empty space around the ad"
   bug on themes with tall grid rows.

   `align-self` and `grid-row-end: span 1` keep the ad from inheriting the height of the
   tallest sibling in its grid row, which is what made earlier versions sit in 400px-tall
   white space on category pages. */
.ap-ad--archive-row {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	grid-column: 1 / -1;       /* CSS Grid: span all columns */
	grid-row-end: span 1;      /* CSS Grid: don't span multiple rows */
	column-span: all;          /* CSS multi-col: span all */
	flex-basis: 100%;          /* flexbox: take full row */
	align-self: center;        /* don't stretch to row height — sit centered */
}
.ap-ad--archive-row .ap-ad__link {
	margin-inline: auto;
}
.ap-ad--archive-row .ap-ad__label {
	margin-bottom: 0;
}