#page-html {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	height: 100vh !important;
	height: 100dvh !important;
	padding: 0 10px;
	box-sizing: border-box;
}

/* full-height: sticky footer - content fills the window when short, grows past it when long.
   1fr is minmax(auto, 1fr): it absorbs free space and still grows to fit content. */
#page-html.page-html--page-scroll {
	grid-template-rows: auto 1fr;
	height: auto !important;
	min-height: 100vh;
	min-height: 100dvh;
}

#page-html > #page-content-container {
	min-height: 0;
}

#page-html.page-html--page-scroll > #page-content-container {
	min-height: auto;
}

/* header */

:root {--page-header-icon-width-mobile: 24px;}
@media (min-width: 500px) and (min-height: 500px) {:root {--page-header-icon-width-mobile: 32px;}}
@media (min-width: 800px) and (min-height: 700px) {:root {--page-header-icon-width-mobile: 40px;}}

#page-header {
	width: 100%;
	display: grid;
}

#page-header.mobile {
	grid-template-columns: var(--page-header-icon-width-mobile) calc(var(--page-header-icon-width-mobile) + 8px) minmax(0, 1fr) auto minmax(0, 1fr) var(--page-header-icon-width-mobile) 8px var(--page-header-icon-width-mobile);
	grid-template-areas: 'm_menu . . m_logo . m_search . m_login';
	align-items: center;
	margin-top: 8px;
	margin-bottom: 12px;
}

#page-header.mobile #jbjs-logo {grid-area: m_logo;}
#page-header.mobile .menu  {grid-area: m_menu;}
#page-header.mobile #search-box  {grid-area: m_search;}
#page-header.mobile #user-info  {grid-area: m_login;}

#page-header.desktop {
	grid-row-gap: 8px;
	grid-template-rows: auto fit-content(0);
	grid-template-areas: 'line1' 'line2';
	margin-top: 24px;
	margin-bottom: 8px;
}

#page-header.desktop #page-header__line1 {
	grid-area: line1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) 728px minmax(0, 1fr);
	grid-template-areas: 'logo . ad .';
	align-items: center;
}
#page-header.desktop #page-header__line2 {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto 48px auto;
	grid-template-areas: 'menu . search . login';
	align-items: center;
}

#page-header.desktop #jbjs-logo {grid-area: logo;}
#page-header.desktop .ad-container  {grid-area: ad;}
#page-header.desktop .menu  {grid-area: menu;}
#page-header.desktop #search-box  {grid-area: search;}
#page-header.desktop #user-info  {grid-area: login;}

/* content container: main + footer split */

#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;
}

/* full-height: every min-height: 0 / minmax(0, 1fr) above would cap the sticky-footer growth at zero */
#page-html.page-html--page-scroll .page-content-container--desktop {
	grid-template-rows: 1fr 28px;
}

#page-html.page-html--page-scroll .page-content-container--mobile {
	grid-template-rows: 1fr 8px;
}

#page-html.page-html--page-scroll .page-content-container--mobile.page-content-container--has-mobile-ad {
	grid-template-rows: auto 1fr 8px;
}

.page-content-container__main {
	/* positioning context for page content (e.g. tiler controls) */
	position: relative;
	overflow: visible;
	min-width: 0;
}

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

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

/* Overhang into the page gutter so content edge shadows are not clipped by the scroll box.
   Margin and padding cancel out, so the content stays put. */
#page-html.page-html--shadow-gutter .page-content-container__main {
	margin: -2px -6px -6px;
	padding: 2px 6px 6px;
}

/* fit-window needs a window tall enough to hold header + content + footer. A short window -
   or any window under browser zoom, where the CSS viewport is a fraction of it - would crush
   the rows, so the page becomes a sticky-footer layout instead: the content row fills the
   window and grows past it when content needs more. Every 1fr below is minmax(auto, 1fr), and
   every min-height: auto undoes a min-height: 0 that would otherwise cap that growth at zero.
   Applies to mobile too: zoom reflows to mobile.
   Placed after the rules it overrides: same specificity, so source order decides. */
@media (max-height: 599px) {
	#page-html:not(.page-html--page-scroll) {
		grid-template-rows: auto 1fr;
		height: auto !important;
		min-height: 100vh;
		min-height: 100dvh;
	}

	#page-html:not(.page-html--page-scroll) > #page-content-container {
		min-height: auto;
	}

	#page-html:not(.page-html--page-scroll) .page-content-container--desktop {
		grid-template-rows: 1fr 28px;
	}

	#page-html:not(.page-html--page-scroll) .page-content-container--mobile {
		grid-template-rows: 1fr 8px;
	}

	#page-html:not(.page-html--page-scroll) .page-content-container--mobile.page-content-container--has-mobile-ad {
		grid-template-rows: auto 1fr 8px;
	}

	#page-html.page-html--content-scroll .page-content-container__main {
		overflow: visible;
		min-height: auto;
	}
}

.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. */
@media (min-height: 600px) {
	#page-html:not(.page-html--page-scroll) .page-content-container--desktop.page-content-container--has-skyscraper {
		grid-template-columns: 1fr 160px;
		grid-template-rows: 1fr 28px;
		column-gap: 16px;
	}

	#page-html:not(.page-html--page-scroll) .page-content-container--has-skyscraper .page-content-container__content-row {
		display: contents;
	}

	#page-html:not(.page-html--page-scroll) .page-content-container--has-skyscraper .page-content-container__footer {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}