/**
 * TOL Ads — front-end layout
 *
 * Sitewide — Responsive header + footer leaderboards (size map via JS)
 * Optional — Desktop 300x600 sidebar; mobile 300x250 mid-article
 */

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

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

/* -------------------------------------------------------------------------
 * Mobile mid-article unit (default visible; hidden on desktop)
 * ---------------------------------------------------------------------- */
.tol-ad-mobile {
	display: block;
	text-align: center;
	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;
}

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

/* -------------------------------------------------------------------------
 * Responsive leaderboards (header + footer)
 * One unit per size is in the DOM; inactive ones stay hidden.
 * ---------------------------------------------------------------------- */
.tol-ad-leaderboard {
	display: block;
	text-align: center;
	padding: 0;
	margin: 1.75rem 0;
	background: transparent;
	border: 0;
	box-sizing: border-box;
}

/* Header + footer LBs: chrome-free on dark site bg (same as mid) */
.tol-ad-leaderboard--header,
.tol-ad-leaderboard--footer {
	background: transparent;
	padding: 0;
	margin: 1.75rem auto;
	border: 0;
	max-width: 970px;
	width: 100%;
}

/* Mid / shortcode LBs (homepage body): no white chrome — vertical margin only */
.tol-ad-leaderboard--shortcode,
.tol-ad-leaderboard--mid,
.home-ad .tol-ad-leaderboard {
	background: transparent;
	padding: 0;
	margin: 1.75rem 0;
	border: 0;
}

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

.tol-ad-leaderboard [data-tol-lb-size][hidden],
.tol-ad-leaderboard [data-tol-lb-size][hidden='hidden'] {
	display: none !important;
}

.tol-ad-leaderboard .tol-ad-img {
	max-width: 100%;
	height: auto;
	width: auto;
}

/* Size-specific max widths so creatives don't stretch oddly */
.tol-ad-leaderboard .tol-ad--970x90 .tol-ad-img,
.tol-ad-leaderboard .tol-ad--970x250 .tol-ad-img {
	width: 970px;
	max-width: 100%;
}

.tol-ad-leaderboard .tol-ad--728x90 .tol-ad-img {
	width: 728px;
	max-width: 100%;
}

.tol-ad-leaderboard .tol-ad--320x50 .tol-ad-img,
.tol-ad-leaderboard .tol-ad--320x73 .tol-ad-img {
	width: 320px;
	max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Desktop sidebar — hide until lg
 * ---------------------------------------------------------------------- */
.tol-ad-sidebar {
	display: none;
}

@media (min-width: 1024px) {
	.two-cols-section .row {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		--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;
		padding-right: 40px;
		max-width: none;
		box-sizing: border-box;
	}

	.two-cols-section .col-sidebar.tol-ad-sidebar,
	.two-cols-section .tol-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;
	}

	.tol-ad-sidebar__inner {
		width: 100%;
		max-width: 300px;
	}

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

	.tol-ad-mobile {
		display: none !important;
	}
}

@media print {
	.tol-ad-sidebar,
	.tol-ad-mobile,
	.tol-ad-leaderboard,
	.tol-ad {
		display: none !important;
	}
}