/**
 * 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,
.ad-rail .rbox > picture {
	display: block;
	width: 100%;
}

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

/**
 * 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;
}