/* Desktop: main + footer 28px. Mobile: main + spacer 8px */
#page-content-container {
	display: grid;
	width: 100%;
}

.page-content-container--desktop {
	grid-template-rows: minmax(0, 1fr) 28px;
}

.page-content-container--mobile {
	grid-template-rows: minmax(0, 1fr) 8px;
}

.page-content-container--mobile.page-content-container--has-mobile-ad {
	grid-template-rows: auto minmax(0, 1fr) 8px;
}

/* content mode */
.page-content-container--full-height {
	height: auto;
	min-height: 100%;
}

.page-content-container--fit-window {
	height: 100%;
}

.page-content-container__main {
	overflow: visible;
	min-width: 0;
}

/* no-scroll fit-window: ad keeps its height, content fills (and can shrink into) the rest */
#page-content-container:not(.page-content-container--content-scroll) .page-content-container__main--has-inline-ad {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
}

.page-content-container--content-scroll .page-content-container__main {
	overflow: auto;
	min-height: 0;
}

.page-content-container__footer {
	padding-top: 8px;
	padding-bottom: 4px;
	height: 28px;
	box-sizing: border-box;
}

.page-content-container--mobile .page-content-container__footer {
	padding: 0;
	height: 8px;
}

.page-content-container__mobile-ad {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
}

/* Skyscraper: 2-column grid (main + 160px ad) with 16px gap */
.page-content-container__content-row {
	display: grid;
	grid-template-columns: 1fr 160px;
	gap: 0 16px;
}

.page-content-container--has-skyscraper .page-content-container__main {
	min-height: 600px;
}

/* fit-window + skyscraper: the ad (fixed 600px) can't shrink. Promote main/skyscraper
   into the outer grid (content-row becomes display: contents) as a 2x2 grid: row 1 (1fr)
   holds main+ad and grows if the ad needs more than the window offers; footer spans row 2,
   always landing exactly beneath row 1 - at the window bottom if the ad fit, or the ad's
   bottom if it didn't. */
.page-content-container--desktop.page-content-container--has-skyscraper.page-content-container--fit-window {
	grid-template-columns: 1fr 160px;
	grid-template-rows: 1fr 28px;
	column-gap: 16px;
}

.page-content-container--fit-window.page-content-container--has-skyscraper .page-content-container__content-row {
	display: contents;
}

.page-content-container--fit-window.page-content-container--has-skyscraper .page-content-container__footer {
	grid-column: 1 / -1;
	grid-row: 2;
}