/**
 * Shared "ad rail" styling (label ABOVE the box, not overlaid — see
 * ad-slot.php's 'rail' variant). Used by BOTH the Article Listing
 * sidebar (328px column) and the Article Details left/right skyscraper
 * rails (160px columns) — the column width itself comes from each
 * page's own grid (.cat-shell / .art-shell), not from these rules, so
 * one stylesheet correctly serves both without duplication. Previously
 * lived only in article-listing.css; extracted here once a second page
 * needed the exact same component (Article Details, Phase 4).
 */

.ad-rail .rlbl {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	text-align: center;
	margin-bottom: 8px;
}

.ad-rail .rbox {
	position: relative;
	border: 1px solid var(--color-line-mid);
	background: var(--color-wash);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 260px;
}

/* Same flex-item-doesn't-stretch fix as .ui-lb/.ui-rect (article-card.css)
   — the <a>/<picture> wrapper needs an explicit width or it shrinks to
   the image's native pixel size whenever the ad has a Redirect URL.
   `.ad-rail .rbox > a > picture` covers the nested-picture-inside-a case
   (same root cause as the leaderboard's bottom-cropping bug). */
.ad-rail .rbox > a,
.ad-rail .rbox > picture,
.ad-rail .rbox > a > picture {
	display: block;
	width: 100%;
	height: 100%;
}

.ad-rail .rbox img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/**
 * Strict per-slot dimensions (task spec) — .rbox is shared by both the
 * Article Listing sidebar rail AND the Article Details left/right
 * skyscraper rails, which have DIFFERENT required sizes, so each slot's
 * own ad-slot-<key> class (added in ad-slot.php) carries its own
 * aspect-ratio/max-width instead of the shared .rbox base rule. Mobile
 * overrides below. This also fixes ads becoming abnormally tall on
 * mobile — height is always derived from the locked aspect-ratio, never
 * from the raw uploaded image's own dimensions.
 */
.ad-rail .ad-slot-listing_sidebar {
	max-width: 326px;
	aspect-ratio: 326 / 613;
	min-height: 0;
}

.ad-rail .ad-slot-single_left_rail,
.ad-rail .ad-slot-single_right_rail {
	max-width: 158px;
	aspect-ratio: 158 / 758;
	min-height: 0;
}

/* "Hide on mobile" per-slot checkbox (Advertisements panel) — applied to
   the slot's .ad-rail wrapper in ad-slot.php. */
@media (max-width: 768px) {
	.ad-rail.ad-hide-mobile {
		display: none;
	}

	.ad-rail .ad-slot-listing_sidebar {
		max-width: 358px;
		aspect-ratio: 358 / 673;
	}

	.ad-rail .ad-slot-single_left_rail,
	.ad-rail .ad-slot-single_right_rail {
		max-width: 358px;
		aspect-ratio: 358 / 1718;
	}
}

/**
 * The shared empty-slot placeholder (corner marks/tag/copy/size —
 * article-card.css) is sized for the leaderboard/rectangle's ~300px+
 * width. Article Details' rails are only 160px wide (.art-shell's grid
 * column) — tried scaling the 4 corner marks down first, but even at 7px
 * with tightened letter-spacing "ADVERTISEMENT" from adjacent corners
 * still visibly collided/overlapped (confirmed via a real screenshot, not
 * assumed) — 160px genuinely isn't wide enough for 4 of them at any
 * legible size. Corner marks are dropped at this width; the tag + italic
 * copy + size label (the actually-readable content, same message as
 * every other slot) stay, just scaled to fit. Article Listing's own
 * sidebar rail is ~328px, roomy enough to keep the unscaled corner-mark
 * treatment, so this is scoped to the narrow 160px case only.
 */
.art-shell .ad-rail .rbox .corner {
	display: none;
}

.art-shell .ad-rail .rbox .lb-in {
	padding: 10px;
}

.art-shell .ad-rail .rbox .lb-tag {
	font-size: 9px;
	letter-spacing: 2px;
}

.art-shell .ad-rail .rbox .lb-copy {
	font-size: 14px;
}