/* Every picture ad sits in a frame of its slot's shape and is shown whole.
   A print ad of another shape gets light bands instead of being cut off,
   and the page does not move when the picture arrives. */
.td-a-rec {
	container-type: inline-size;
}

.tribune-ad-frame {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

/* In the right column an ad fills the column's width at its own shape. The
   picture's width and height attributes hold its space until it arrives. */
.td-a-rec-id-sidebar .tribune-ad-frame,
.td-main-sidebar .tribune-ad-frame,
.td-pb-span4 .tribune-ad-frame {
	aspect-ratio: auto;
	background: transparent;
}

.td-a-rec-id-sidebar .tribune-ad-frame img,
.td-main-sidebar .tribune-ad-frame img,
.td-pb-span4 .tribune-ad-frame img {
	height: auto !important;
	background: transparent;
	/* A skyscraper is shown whole but no taller than this, so it does not
	   fill a phone screen twice over. */
	max-height: 600px;
	object-fit: contain;
}

.tribune-ad-frame > *,
.tribune-ad-frame a {
	display: block;
	width: 100%;
	height: 100%;
}

/* A banner takes its own shape, full width, and never taller than 4:1. A
   taller print ad is shown whole at that height, centered on a light band.
   The picture's width and height attributes hold its space until it loads. */
.tribune-ad-frame img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: none;
	max-height: 25cqw;
	margin: 0;
	object-fit: contain;
	background: #f2f2f2;
}

/* The banner above the nameplate is picked in the browser after the page
   has drawn, which pushed the whole page down by the banner's height. Its
   4:1 space is held from the start, while the ad plugin's placeholder is in
   the slot; a wider banner sits centered in it. If the plugin leaves the
   slot empty it removes the placeholder, and the slot closes as before. */
@media (min-width: 768px) {
	/* The homepage hides ad slots with no picture yet (home.css); this one is
	   waiting for its picture, so it stays. */
	.td-header-desktop-wrap .td-a-rec-id-custom-spot:has([id^="cullm-"]) {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		aspect-ratio: 4 / 1;
		overflow: hidden;
	}

	.td-header-desktop-wrap .td-a-rec-id-custom-spot > div {
		width: 100%;
	}

	.td-header-desktop-wrap .td-a-rec-id-custom-spot .tribune-ad-frame img {
		background: transparent;
	}
}

/* A slot left empty, because its advertisers are already on the page, prints
   nothing, not a bare "Advertisement" label. */
.td-a-rec:not(:has(.tribune-ad-frame, iframe, ins, video, script, object, embed)) {
	display: none;
}

/* The box inside a story: box-sized and centered, not the full text width. */
.tribune-story-box {
	max-width: 336px;
	margin: 28px auto;
	text-align: center;
}

.tribune-rail-widget {
	margin-bottom: 32px;
}

/* The banner the theme puts above the story text pushed the story down and
   was a sliver on phones. The box inside the story takes its place. */
.td-a-rec-id-content_top {
	display: none !important;
}

/* The theme's "smart sidebar" script slides the right column as the page
   scrolls, and with a short column it snapped into place on the way back up.
   The column now scrolls with the page, and on a wide screen its last box
   stays in view below the menu row. */
.td-main-sidebar .td-ss-main-sidebar {
	position: static !important;
	top: auto !important;
	bottom: auto !important;
	width: auto !important;
	transform: none !important;
}

@media (min-width: 1019px) {
	/* The theme floats its columns, so the right column is only as tall as its
	   own contents. As a flex row it runs the length of the story. */
	.td-pb-row:has(> .td-main-sidebar) {
		display: flex;
	}

	.td-pb-row:has(> .td-main-sidebar)::before,
	.td-pb-row:has(> .td-main-sidebar)::after {
		content: none;
	}

	.td-main-sidebar .td-ss-main-sidebar {
		height: 100% !important;
	}

	.td-ss-main-sidebar > .tribune-rail-widget--stick {
		position: sticky;
		top: 72px;
	}
}

/* Between stories on a section page, and the phone boxes. */
.tribune-between {
	clear: both;
	margin: 8px 0 32px;
}

.tribune-phone-box {
	max-width: 336px;
	margin: 24px auto 32px;
	text-align: center;
}

@media (max-width: 767px) {
	.tribune-desk-only {
		display: none !important;
	}
}

/* From our advertisers: a row of box ads above the footer, 2 across on a
   phone and 4 on a wide screen. Each ad is shown whole; skyscrapers are
   capped so the row stays even. */
.tribune-ads-more {
	padding: 28px 20px 32px;
	border-top: 1px solid #e3e5e8;
	background: #f6f7f8;
}

.tribune-ads-more__inner {
	max-width: 1068px;
	margin: 0 auto;
}

.tribune-ads-more__label {
	margin: 0 0 14px;
	color: #767676;
	font-family: var(--tribune-font-sans, "Radio Canada", Arial, Helvetica, sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

.tribune-ads-more__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

@media (min-width: 768px) {
	.tribune-ads-more__row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
	}
}

.tribune-ads-more__item {
	display: flex;
	justify-content: center;
	min-width: 0;
}

.tribune-ads-more__item img {
	display: block;
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	max-height: 360px;
	margin: 0 auto;
	object-fit: contain;
	background: transparent;
}

.tribune-ads-more .tribune-ad-frame {
	aspect-ratio: auto;
	background: transparent;
}

/* Phone banners: under the header on the homepage and stories, and between
   the first sections of the homepage. Hidden on wider screens. The space is
   held at 4:1 while the ad loads, so the page does not move; a narrower
   phone banner (320 x 50) sits centered in it. */
.tribune-phone-banner {
	display: none !important;
}

@media (max-width: 767px) {
	.tribune-phone-banner:has([id^="cullm-"]) {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		width: auto;
		margin: 12px 20px;
		/* Room for a 4:1 banner and its label is held while the ad loads, so
		   the page does not jump; a taller banner grows the box, never clipped. */
		min-height: calc((100vw - 40px) / 4 + 24px);
	}

	.tribune-phone-banner img,
	.tribune-phone-banner video {
		max-width: 100%;
		height: auto;
	}

	.tribune-phone-banner > div {
		width: 100%;
	}

	.tribune-phone-banner .tribune-ad-frame img {
		background: transparent;
	}

	.tribune-phone-mid {
		margin: 20px 0;
	}
}

/* A phone that will not autoplay (Low Power Mode) shows a video ad's first frame with no play button; a tap still opens the ad's link. */
.td-a-rec video::-webkit-media-controls-start-playback-button,
.tribune-ad-item video::-webkit-media-controls-start-playback-button,
.tribune-ads-more video::-webkit-media-controls-start-playback-button,
[id^="cullm-"] video::-webkit-media-controls-start-playback-button {
	display: none !important;
	-webkit-appearance: none;
}