.tdam-ad {
	width: 100%;
	margin-block: 1rem;
	min-width: 0;
	padding: .75rem;
	border: 1px solid var(--td-line, #d8dade);
	border-top: 2px solid var(--td-red, #c9141d);
	background: var(--td-ad-paper, #fff);
	color: var(--td-ink, #111317);
	text-align: left;
	font-family: "Source Sans 3", Arial, sans-serif;
}

.tdam-ad__label {
	display: block;
	margin-bottom: .5rem;
	color: var(--td-muted, #626873);
	font: 600 .6875rem/1.4 "Source Sans 3", Arial, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tdam-ad a { max-width: 100%; }

.tdam-ad__media {
	display: block;
	width: 100%;
	overflow: hidden;
	background: var(--td-soft, #f0f1f3);
}

.tdam-ad__pdf-trigger { cursor: zoom-in; }

.tdam-ad__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
	object-position: var(--tdam-crop-x, 50%) var(--tdam-crop-y, 50%);
	transform: scale(var(--tdam-crop-zoom, 1));
	transform-origin: var(--tdam-crop-x, 50%) var(--tdam-crop-y, 50%);
}

.tdam-ad--header_leaderboard .tdam-ad__media,
.tdam-ad--footer_leaderboard .tdam-ad__media { aspect-ratio: 970 / 250; }

.tdam-ad--homepage_billboard .tdam-ad__media { aspect-ratio: 1200 / 400; }

.tdam-ad--homepage_sidebar .tdam-ad__media,
.tdam-ad--article_sidebar .tdam-ad__media { aspect-ratio: 300 / 600; }

.tdam-ad--homepage_feed_1 .tdam-ad__media,
.tdam-ad--homepage_feed_2 .tdam-ad__media,
.tdam-ad--homepage_feed_3 .tdam-ad__media { aspect-ratio: 728 / 300; }

.tdam-ad--article_inline .tdam-ad__media { aspect-ratio: 728 / 360; }

.tdam-ad--fit-cover .tdam-ad__media img { object-fit: cover; }
.tdam-ad--fit-contain .tdam-ad__media img { object-fit: contain; transform: none; }

.tdam-ad__fallback {
	min-height: 8rem;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .65rem;
	background: var(--td-soft, #f0f1f3);
	color: var(--td-ink, #111317);
}

.tdam-ad__fallback a { color: var(--td-red, #c9141d); font-weight: 700; }

.article-content .tdam-ad--article_inline { max-width: 760px; margin-block: 2rem; }

body.tdam-modal-open { overflow: hidden; }

.tdam-pdf-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 2rem;
}

.tdam-pdf-modal[hidden] { display: none; }

.tdam-pdf-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(13, 16, 20, .82);
	backdrop-filter: blur(3px);
}

.tdam-pdf-modal__dialog {
	position: relative;
	width: min(1120px, 100%);
	height: min(90vh, 900px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 24px 80px rgba(0, 0, 0, .4);
	color: #17191c;
	text-align: left;
}

.tdam-pdf-modal__header,
.tdam-pdf-modal__footer {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .85rem 1rem;
	background: #fff;
}

.tdam-pdf-modal__header { border-bottom: 1px solid #d8dadd; }
.tdam-pdf-modal__footer { border-top: 1px solid #d8dadd; }

.tdam-pdf-modal__header span {
	display: block;
	margin-bottom: .15rem;
	color: #c9141d;
	font: 700 .625rem/1.3 system-ui, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tdam-pdf-modal__header h2 {
	margin: 0;
	font: 700 clamp(1rem, 2vw, 1.25rem)/1.25 Georgia, serif;
}

.tdam-pdf-modal__close {
	width: 2.75rem;
	height: 2.75rem;
	flex: 0 0 auto;
	border: 1px solid #c8cbd0;
	border-radius: 50%;
	background: #fff;
	color: #17191c;
	cursor: pointer;
	font: 400 1.65rem/1 system-ui, sans-serif;
}

.tdam-pdf-modal__close:hover,
.tdam-pdf-modal__close:focus-visible { border-color: #c9141d; color: #c9141d; }

.tdam-pdf-modal__viewer {
	min-height: 0;
	flex: 1 1 auto;
	background: #4a4d52;
}

.tdam-pdf-modal__viewer iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
	background: #fff;
}

.tdam-pdf-modal__footer p {
	margin: 0;
	color: #5f646b;
	font: 400 .8125rem/1.4 system-ui, sans-serif;
}

.tdam-pdf-modal__footer > div { display: flex; gap: .6rem; }

.tdam-pdf-modal__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.4rem;
	padding: .55rem .85rem;
	border: 1px solid #c9141d;
	background: #c9141d;
	color: #fff;
	font: 700 .75rem/1 system-ui, sans-serif;
	text-decoration: none;
	white-space: nowrap;
}

.tdam-pdf-modal__button:hover,
.tdam-pdf-modal__button:focus-visible { background: #a90f17; color: #fff; }

.tdam-pdf-modal__button--secondary { background: #fff; color: #17191c; border-color: #aeb2b7; }
.tdam-pdf-modal__button--secondary:hover,
.tdam-pdf-modal__button--secondary:focus-visible { background: #f3f4f5; color: #17191c; }
.tdam-pdf-modal__button[hidden] { display: none; }

@media (max-width: 700px) {
	.tdam-pdf-modal { padding: 0; }
	.tdam-pdf-modal__dialog { width: 100%; height: 100dvh; border-radius: 0; }
	.tdam-pdf-modal__footer { align-items: stretch; flex-direction: column; }
	.tdam-pdf-modal__footer > div { width: 100%; }
	.tdam-pdf-modal__button { flex: 1 1 0; }
}

/* ---------------------------------------------------------------------------
   Multi-advertisement zones
   One zone holds any number of advertisements. Layout is derived from the
   count and the zone's minimum readable column width rather than from a
   hard-coded rule per count, so adding or removing an advertisement in the
   admin reflows the zone with no code change.
   --------------------------------------------------------------------------- */

.tdam-zone {
	display: grid;
	gap: 1rem;
	width: 100%;
	max-width: 100%;
	margin-block: 1.25rem;
	/* min() keeps a wide minimum from overflowing a narrow viewport. */
	grid-template-columns: repeat(auto-fit, minmax(min(var(--tdam-zone-min, 260px), 100%), 1fr));
}

/* A lone advertisement takes the full zone using its placement canvas. */
.tdam-zone:not(.tdam-zone--multi) { grid-template-columns: 1fr; }

.tdam-zone > .tdam-ad { margin-block: 0; min-width: 0; }

/* Reserve a stable canvas before images load. Contain preserves the full
   creative; only the campaign's explicit cover setting crops it. */
.tdam-ad .tdam-ad__media { max-height: 22rem; }
.tdam-zone .tdam-ad .tdam-ad__media {
	aspect-ratio: var(--tdam-zone-ratio, 300 / 250);
	max-height: 20rem;
}
.tdam-zone--flow-stack:not(.tdam-zone--multi) .tdam-ad .tdam-ad__media { max-height: 32rem; }
.tdam-zone--multi { align-items: stretch; }
.tdam-zone > .tdam-ad { display: flex; flex-direction: column; }
.tdam-ad__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .25rem .75rem;
	padding-top: .65rem;
	font-size: .8125rem;
	line-height: 1.4;
}
.tdam-ad__title { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.tdam-ad__action { color: var(--td-red, #c9141d); font-weight: 700; text-underline-offset: 3px; }
.tdam-ad a:focus-visible,
.tdam-rail-controls button:focus-visible,
.tdam-popup button:focus-visible,
.tdam-pdf-modal a:focus-visible,
.tdam-pdf-modal button:focus-visible { outline: 2px solid var(--td-red, #c9141d); outline-offset: 3px; }
.tdam-zone > .tdam-ad .tdam-ad__caption { margin-top: auto; }

/* Sidebars stay a single column and simply stack. */
.tdam-zone--flow-stack { grid-template-columns: 1fr; }

/* Never more than two across on tablet, whatever the count.
   Scoped above the mobile breakpoint: these selectors are more specific than
   the mobile stack rule, so an open-ended max-width would override it. */
@media (min-width: 600px) and (max-width: 1024px) {
	.tdam-zone--multi:not(.tdam-zone--flow-stack) {
		grid-template-columns: repeat(auto-fit, minmax(min(var(--tdam-zone-min, 260px), 100%), 1fr));
	}
	.tdam-zone--count-3:not(.tdam-zone--flow-stack),
	.tdam-zone--count-4:not(.tdam-zone--flow-stack) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Banner zones stay one row on tablets and phones; the next card peeks in.
   Other zones stack on phones so in-story advertisements stay legible. */
@media (max-width: 1024px) {
	.tdam-zone--flow-rail.tdam-zone--multi {
		grid-auto-flow: column;
		grid-auto-columns: 46%;
		grid-template-columns: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 0;
		padding-bottom: .35rem;
		-webkit-overflow-scrolling: touch;
	}
	.tdam-zone--flow-rail.tdam-zone--multi > .tdam-ad { scroll-snap-align: start; }
}
@media (max-width: 599px) {
	.tdam-zone--multi { grid-template-columns: 1fr; }
	.tdam-zone--flow-rail.tdam-zone--multi { grid-auto-columns: 90%; }
}

@media (prefers-reduced-motion: reduce) {
	.tdam-zone--flow-rail.tdam-zone--multi { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   Listing in-feed zone
   Spans the full width of the article grid it is injected into, so it reads as
   a deliberate break between stories rather than a card pretending to be one.
   --------------------------------------------------------------------------- */

.tdam-listing-break {
	grid-column: 1 / -1;
	margin-block: .5rem;
}

/* ---------------------------------------------------------------------------
   Reader pop-up
   --------------------------------------------------------------------------- */

.tdam-popup {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 1.5rem;
}

.tdam-popup[hidden] { display: none; }

.tdam-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(13, 16, 20, .78);
}

.tdam-popup__dialog {
	position: relative;
	width: min(600px, 100%);
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
	animation: tdam-popup-in 220ms ease-out;
}

@keyframes tdam-popup-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tdam-popup__dialog { animation: none; }
}

.tdam-popup__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .65rem 1rem;
	border-bottom: 1px solid #e4e6e9;
}

.tdam-popup__title {
	margin: 0;
	color: var(--td-muted, #626873);
	font: 600 .6875rem/1.4 "Source Sans 3", Arial, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tdam-popup__close {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 50%;
	background: var(--td-soft, #f0f1f3);
	color: var(--td-ink, #111317);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.tdam-popup__close:hover,
.tdam-popup__close:focus-visible { background: #e0e2e5; }

.tdam-popup__body { padding: 1rem; }

/* The pop-up already labels itself, so the card's own label would repeat it. */
.tdam-popup__body .tdam-ad { margin-block: 0; padding: 0; border: 0; }
.tdam-popup__body .tdam-ad__label { display: none; }

@media (max-width: 599px) {
	.tdam-popup { padding: 1rem; }
	.tdam-popup__dialog { max-height: calc(100vh - 2rem); }
}

/* Controls are progressive enhancement: touch scrolling works without JS. */
.tdam-rail-controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .75rem;
	margin-top: -.75rem;
	margin-bottom: 1.25rem;
	color: var(--td-muted, #626873);
	font: 600 .8125rem/1.4 "Source Sans 3", Arial, sans-serif;
}
.tdam-rail-controls[hidden] { display: none; }
.tdam-rail-controls button {
	min-height: 44px;
	padding: .5rem .85rem;
	border: 1px solid var(--td-line, #d8dade);
	background: var(--td-ad-paper, #fff);
	color: var(--td-ink, #111317);
	font: inherit;
	cursor: pointer;
}
.tdam-rail-controls button[aria-disabled="true"] { opacity: .45; cursor: default; }
html[data-theme="dark"] { --td-ad-paper: #171b21; }
.tdam-popup__dialog,
.tdam-pdf-modal__dialog { border-radius: 0; border-top: 3px solid var(--td-red, #c9141d); background: var(--td-ad-paper, #fff); color: var(--td-ink, #111317); }
.tdam-popup__header { position: sticky; top: 0; z-index: 1; background: var(--td-ad-paper, #fff); border-color: var(--td-line, #d8dade); }
.tdam-popup__dialog { max-height: calc(100dvh - 3rem); }
.tdam-popup__body .tdam-ad__media { aspect-ratio: var(--tdam-ad-ratio, 600 / 500); max-height: min(55dvh, 400px); }
.tdam-pdf-modal__header,
.tdam-pdf-modal__footer { background: var(--td-ad-paper, #fff); border-color: var(--td-line, #d8dade); }
.tdam-pdf-modal__header h2 { font-family: "Lora", Georgia, serif; }
.tdam-pdf-modal__footer p { color: var(--td-muted, #626873); }
.tdam-pdf-modal__header span { color: var(--td-red, #c9141d); }
.tdam-pdf-modal__close { background: var(--td-ad-paper, #fff); color: var(--td-ink, #111317); border-color: var(--td-line, #d8dade); }
@media (max-width: 599px) {
	.tdam-ad { padding: .625rem; }
	.tdam-zone { gap: .75rem; }
	.tdam-zone--flow-rail.tdam-zone--multi .tdam-ad__media { aspect-ratio: 300 / 250; }
	.tdam-popup__dialog { max-height: calc(100dvh - 2rem); }
}