/**
 * Game Overdrive advertising component — V3.
 *
 * One geometry contract for every manual slot:
 *   not-requested / unfilled / failed   zero height, zero margin, no label
 *   preparing (far from viewport)       zero height, invisible
 *   preparing (near viewport)           modest reservation, label fades in
 *   filled                              real creative height, label visible
 *
 * That is what keeps an unfilled slot from leaving a hole or a lone
 * "Publicidade" behind, and what keeps a fill from shifting the page.
 */

:root {
	--go-ad-label-color: #555d68;
	--go-ad-label-color-dark: #c6cbd2;
}

.go-ad-slot,
.go-ad-slot *,
.go-adsense-placement,
.go-adsense-placement * {
	box-sizing: border-box;
}

.go-ad-slot {
	clear: both;
	inline-size: 100%;
	max-inline-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
}

.go-ad-slot__label {
	display: none;
	inline-size: 100%;
	margin: 0 0 6px;
	color: var(--go-ad-label-color);
	font: 700 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
	letter-spacing: .11em;
	text-align: center;
	text-transform: uppercase;
}

.go-ad-slot.is-ad-not-requested,
.go-ad-slot.is-ad-unfilled,
.go-ad-slot.is-ad-failed {
	display: none !important;
	visibility: hidden !important;
	inline-size: 0 !important;
	block-size: 0 !important;
	min-block-size: 0 !important;
	max-block-size: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

/*
 * A request in flight far from the viewport takes no vertical space, but it
 * MUST stay in the layout flow. AdSense reads the available width at the moment
 * of the request: a slot at `display:none` answers "No slot size for
 * availableWidth=0" and burns the single request that slot will ever get.
 * Zero height with full width gives the request a real measure and still shows
 * nothing. Space is reserved only once the reader is close enough, which avoids
 * the open-then-close movement an always-reserved box produces on no-fill.
 */
.go-ad-slot.is-ad-preparing {
	display: block;
	visibility: hidden;
	inline-size: 100%;
	block-size: 0;
	min-block-size: 0;
	max-block-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	pointer-events: none;
}

.go-ad-slot.is-ad-preparing[data-go-ad-near-viewport="1"] {
	display: grid;
	visibility: visible;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	justify-items: center;
	min-block-size: min(var(--go-ad-reserve-mobile, 0px), 42vh);
	max-block-size: none;
	margin-block: clamp(12px, 2.5vw, 22px);
	padding-block: 6px;
	overflow: hidden;
	contain: layout;
	pointer-events: none;
}

.go-ad-slot.is-ad-preparing.is-ad-prepare-visible > .go-ad-slot__label,
.go-ad-slot.is-ad-filled > .go-ad-slot__label {
	display: block;
}

.go-ad-slot.is-ad-preparing.is-ad-prepare-visible > .go-ad-slot__label {
	opacity: .78;
}

.go-ad-slot.is-ad-filled {
	display: grid;
	visibility: visible;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	justify-items: center;
	inline-size: 100%;
	min-inline-size: 0;
	block-size: auto;
	min-block-size: 0;
	max-block-size: none;
	margin-block: clamp(18px, 3vw, 32px);
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
	pointer-events: auto;
}

.go-ad-slot > ins.go-ad-unit,
.go-ad-slot > ins.adsbygoogle {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	min-inline-size: 0;
	margin-inline: auto;
	text-align: center;
	overflow: visible;
}

.go-ad-slot.is-ad-filled[data-go-ad-rendered-size]:not([data-go-ad-sizing="fixed"]) > ins {
	inline-size: min(100%, var(--go-ad-creative-width, 100%));
	min-block-size: var(--go-ad-creative-height, 0);
}

/* =========================================================================
   Fixed sizes
   AdSense reads the computed box of the <ins> at request time. Declaring an
   exact width and height per breakpoint — with no data-ad-format — is Google's
   documented way to pin a unit to one size, and it is the only way to
   guarantee it. A responsive unit may legitimately answer with a creative
   several screens tall; a 320x50 cannot. Every size below mirrors the
   reference portal, and every reserve in config.php matches it exactly, so a
   fill produces zero layout shift.
   ========================================================================= */

.go-ad-slot[data-go-ad-sizing="fixed"] > ins {
	display: inline-block;
	inline-size: auto;
	max-inline-size: 100%;
	margin-inline: auto;
}

/* Masthead above the headline: 320x50 phone, 728x90 from tablet up. */
.go-ad-slot--site-masthead[data-go-ad-sizing="fixed"] > ins {
	inline-size: 320px;
	block-size: 50px;
}

/* Between paragraphs: 300x250 phone, 336x280 from tablet up. */
.go-ad-slot--article-content[data-go-ad-sizing="fixed"] > ins {
	inline-size: 300px;
	block-size: 250px;
}

/* Listing masthead and mid-page: 320x100 phone, 728x90 from tablet up. */
.go-ad-slot--hero-display[data-go-ad-sizing="fixed"] > ins,
.go-ad-slot--listing-midpage[data-go-ad-sizing="fixed"] > ins {
	inline-size: 320px;
	block-size: 100px;
}

/* Right rail: 160x600, 300x600 on a very wide screen. */
.go-ad-slot--rail-right[data-go-ad-sizing="fixed"] > ins {
	inline-size: 160px;
	block-size: 600px;
}

@media (min-width: 768px) {
	.go-ad-slot--site-masthead[data-go-ad-sizing="fixed"] > ins,
	.go-ad-slot--hero-display[data-go-ad-sizing="fixed"] > ins,
	.go-ad-slot--listing-midpage[data-go-ad-sizing="fixed"] > ins {
		inline-size: 728px;
		block-size: 90px;
	}

	.go-ad-slot--article-content[data-go-ad-sizing="fixed"] > ins {
		inline-size: 336px;
		block-size: 280px;
	}
}

@media (min-width: 1900px) {
	.go-ad-slot--rail-right[data-go-ad-sizing="fixed"] > ins {
		inline-size: 300px;
	}
}

.go-ad-slot iframe {
	display: block;
	max-inline-size: 100%;
	margin-inline: auto;
	border: 0;
}

/*
 * Site masthead: the band between the header and the opening content, on every
 * template. It gets symmetric breathing room so it reads as its own strip and
 * not as something glued to the hero.
 */
.go-ad-slot--site-masthead.is-ad-filled,
.go-ad-slot--site-masthead.is-ad-preparing[data-go-ad-near-viewport="1"] {
	margin-block: clamp(14px, 2vw, 22px);
}

/* A mobile-only position is never even laid out on a wider screen. */
@media (min-width: 768px) {
	.go-ad-slot--mobile-only {
		display: none !important;
		block-size: 0 !important;
		margin: 0 !important;
	}
}

/*
 * In-content units keep the 300x250 / 336x280 band on every device. Capping the
 * <ins> width — not the wrapper height — is what makes the auction pick that
 * shape, so nothing is ever cropped and the block reads the same on a phone and
 * on a desktop.
 */
/*
 * Breathing room. The reported complaint was ads glued to the hero and glued to
 * the prose; these are the two boundaries where that happened.
 */
.go-home-section-ad.is-ad-filled,
.go-home-section-ad.is-ad-preparing[data-go-ad-near-viewport="1"] {
	margin-block: clamp(28px, 4vw, 48px);
}

.go-article__content .go-ad-slot--article-content.is-ad-filled,
.go-article__content .go-ad-slot--article-content.is-ad-preparing[data-go-ad-near-viewport="1"] {
	margin-block: clamp(32px, 5vw, 52px);
}

/*
 * Desktop sidebar. It sticks below the header so it stays in view while the
 * reader scrolls the article — the position that measured the best Active View
 * of the whole account (61%) before this rebuild.
 */
@media (min-width: 1101px) {
	.go-article-sidebar__ad.is-ad-filled {
		position: sticky;
		inset-block-start: max(var(--go-ad-sticky-top, 96px), env(safe-area-inset-top));
		z-index: 1;
	}
}

/* In-content units follow the measure of the prose, never the full canvas. */
.go-article__content .go-ad-slot.is-ad-filled {
	inline-size: min(100%, 760px);
	margin-inline: auto;
	margin-block: clamp(24px, 4vw, 40px);
}

.go-ad-slot--post-multiplex.is-ad-filled,
.go-post-multiplex.is-ad-filled {
	inline-size: min(100%, 1100px);
	margin-inline: auto;
}

/* The one homepage/archive display unit sits inside the editorial container. */
.go-home-section-ad.is-ad-filled,
.go-ad-slot--listing-midpage.is-ad-filled {
	margin-block: clamp(20px, 3.5vw, 36px);
}

.go-archive-list__ad,
.go-stream__ad {
	grid-column: 1 / -1;
	list-style: none;
}

/* The placement class and the feed/sidebar class share one component node. */
.go-archive-list__ad.is-ad-not-requested,
.go-archive-list__ad.is-ad-unfilled,
.go-archive-list__ad.is-ad-failed,
.go-stream__ad.is-ad-not-requested,
.go-stream__ad.is-ad-unfilled,
.go-stream__ad.is-ad-failed,
.go-article-sidebar__ad.is-ad-not-requested,
.go-article-sidebar__ad.is-ad-unfilled,
.go-article-sidebar__ad.is-ad-failed,
.go-archive-aside__ad.is-ad-not-requested,
.go-archive-aside__ad.is-ad-unfilled,
.go-archive-aside__ad.is-ad-failed {
	display: none !important;
	block-size: 0 !important;
	min-block-size: 0 !important;
	max-block-size: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

.go-article-sidebar__ad.is-ad-preparing[data-go-ad-near-viewport="1"],
.go-archive-aside__ad.is-ad-preparing[data-go-ad-near-viewport="1"] {
	min-block-size: min(var(--go-ad-reserve-desktop, 250px), calc(100vh - 140px));
	margin-block: 0 24px;
}

.go-article-sidebar__ad.is-ad-filled,
.go-archive-aside__ad.is-ad-filled {
	margin-block: 0 28px;
}

@media (min-width: 768px) {
	.go-ad-slot.is-ad-preparing[data-go-ad-near-viewport="1"] {
		min-block-size: min(var(--go-ad-reserve-desktop, var(--go-ad-reserve-mobile, 0px)), 42vh);
	}
}

@media (max-width: 1100px) {
	.go-ad-slot--desktop-only:not(.is-ad-filled) {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.go-ad-slot.is-ad-preparing[data-go-ad-near-viewport="1"],
	.go-ad-slot.is-ad-filled {
		max-inline-size: 100%;
		margin-block: 16px;
	}
}

/*
 * Only the publisher label follows the theme. Nothing here reaches a creative:
 * the container background stays transparent in both modes so a white banner in
 * dark mode is the advertiser's own frame, not a slab drawn by the site.
 */
html[data-theme='dark-mode'] .go-ad-slot__label {
	color: var(--go-ad-label-color-dark);
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme='light-mode']) .go-ad-slot__label {
		color: var(--go-ad-label-color-dark);
	}
}

@media (prefers-reduced-motion: reduce) {
	.go-ad-slot {
		scroll-behavior: auto;
		transition: none !important;
		animation: none !important;
	}
}

/* =========================================================================
   Side rails
   Fixed to the viewport gutter, outside the content container. They add
   inventory on wide screens without changing the measure of the article by a
   single pixel — the layout grid never sees them. Below 1640px the gutter
   cannot hold a rail, so they stay display:none and are never requested: the
   controller refuses to request a slot with no layout width.
   ========================================================================= */

/*
 * The track is a zero-width absolute layer over the document. It starts where
 * the controller measured the first editorial block (--go-rail-start) and ends
 * where that content ends (--go-rail-span), so the rail can never sit over the
 * header or over the "EM ALTA" bar, and it stops before the footer.
 */
.go-rails {
	position: absolute;
	inset-inline: 0;
	inset-block-start: var(--go-rail-start, 0px);
	block-size: var(--go-rail-span, 0px);
	z-index: 6;
	pointer-events: none;
}

.go-rail {
	display: none;
	position: sticky;
	inset-block-start: max(var(--go-ad-sticky-top, 96px), env(safe-area-inset-top));
	inline-size: var(--go-rail-width, 160px);
	margin-inline-start: auto;
	pointer-events: none;
}

.go-rail__sticky,
.go-rail__slot {
	pointer-events: auto;
}

/*
 * The content container is 1160px and centred, so each gutter is
 * (100% - 1160px) / 2. The rail is centred inside the right gutter and only
 * appears once that gutter can hold it with room to breathe on both sides.
 */
@media (min-width: 1640px) {
	.go-rail--right {
		display: block;
		--go-rail-width: 160px;
		/*
		 * Centred inside the right gutter. A sticky element is positioned by the
		 * flow, not by insets, so the horizontal placement is a margin.
		 */
		margin-inline-end: calc((100% - 1160px - var(--go-rail-width) * 2) / 4);
	}
}

@media (min-width: 1900px) {
	.go-rail--right {
		--go-rail-width: 300px;
	}
}

.go-rail .go-ad-slot.is-ad-filled,
.go-rail .go-ad-slot.is-ad-preparing[data-go-ad-near-viewport="1"] {
	inline-size: 100%;
	margin: 0;
}

.go-rail .go-ad-slot.is-ad-preparing[data-go-ad-near-viewport="1"] {
	min-block-size: min(var(--go-ad-reserve-desktop, 600px), calc(100vh - 180px));
}

.go-rail .go-ad-slot__label {
	margin-block-end: 4px;
	opacity: .7;
}

/* Never let a rail sit under the bottom anchor or fight the accessibility panel. */
@media (max-width: 1639px) {
	.go-rail {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.go-rail {
		transition: none !important;
	}
}