/**
 * TPD Ads — front-end layout
 *
 * Posts — Desktop: 300x600 in .col-sidebar; Mobile: 300x250 mid-article
 * Non-posts — Desktop only: 970x90 footer leaderboard
 */

/* Shared ad chrome */
.tpd-ad,
.tpd-ad-link {
	display: block;
	line-height: 0;
	text-decoration: none;
}

.tpd-ad-img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* -------------------------------------------------------------------------
 * Mobile mid-article unit (default visible; hidden on desktop)
 * ---------------------------------------------------------------------- */
.tpd-ad-mobile {
	display: block;
	text-align: center;
	/* Full width of the text column so borders span edge-to-edge */
	width: 100%;
	max-width: none;
	margin: 27px 0;
	padding: 18px 0;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	box-sizing: border-box;
}

.tpd-ad-mobile .tpd-ad-img {
	width: 300px;
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
 * Footer leaderboard (970x90) — desktop only, non-post pages
 * ---------------------------------------------------------------------- */
.tpd-ad-leaderboard {
	display: none;
	text-align: center;
	padding: 1.5rem 1rem;
	margin: 0;
	background: #fff;
}

.tpd-ad-leaderboard__inner {
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.tpd-ad-leaderboard .tpd-ad-img {
	width: 970px;
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
 * Desktop sidebar — hide until lg, match theme .col-sidebar flex rules
 * Theme sets: .two-cols-section .col-sidebar { flex: 0 0 470px }
 * We tighten to 300px ad width + padding and only show on desktop.
 * ---------------------------------------------------------------------- */
.tpd-ad-sidebar {
	display: none;
}

@media (min-width: 1024px) {
	/* Leaderboard: show only on desktop */
	.tpd-ad-leaderboard {
		display: block;
	}

	/*
	 * Theme sets .wrapper { overflow: hidden }, which prevents position:sticky
	 * from tracking the viewport. Only lift it on single posts where we pin ads.
	 */
	body.single-post .wrapper {
		overflow: visible;
	}

	/* Title / hero image stay full width; content + sidebar share a row */
	.two-cols-section .row {
		display: flex;
		flex-wrap: wrap;
		/* stretch so .tpd-ad-sidebar is as tall as the article — sticky needs that travel distance */
		align-items: stretch;
		/*
		 * Bootstrap .row uses negative horizontal margins for gutters.
		 * .col-content / .tpd-ad-sidebar are not Bootstrap cols, so they
		 * don't get compensating padding and the ad sticks out of the well.
		 */
		--bs-gutter-x: 0;
		margin-left: 0;
		margin-right: 0;
	}

	.two-cols-section .row > :not(.col-content):not(.col-sidebar) {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}

	.two-cols-section .col-content {
		flex: 1 1 0;
		min-width: 0;
		/* space between article copy and the 300x600 sidebar ad */
		padding-right: 40px;
		max-width: none;
		box-sizing: border-box;
	}

	.two-cols-section .col-sidebar.tpd-ad-sidebar,
	.two-cols-section .tpd-ad-sidebar {
		display: block;
		flex: 0 0 300px;
		width: 300px;
		max-width: 300px;
		min-width: 0;
		margin-left: 0;
		padding-left: 8px;
		box-sizing: border-box;
		/* must stay visible — overflow:hidden kills sticky on the inner pin */
		overflow: visible;
		align-self: stretch;
	}

	.tpd-ad-sidebar__inner {
		position: -webkit-sticky;
		position: sticky;
		top: 36px; /* offset from viewport top while sticky */
		width: 100%;
		max-width: 300px;
		z-index: 2;
	}

	.tpd-ad-sidebar .tpd-ad-img {
		width: 100%;
		max-width: 300px;
		height: auto;
	}

	/* Hide in-content mobile unit on desktop */
	.tpd-ad-mobile {
		display: none !important;
	}
}

/* Print: never show ads */
@media print {
	.tpd-ad-sidebar,
	.tpd-ad-mobile,
	.tpd-ad-leaderboard,
	.tpd-ad {
		display: none !important;
	}
}