/* NewsBihar layout: fluid container instead of Bootstrap's fixed 750 / 970 / 1170px steps.
 * Fills the screen up to --nb-max, then stays centred. Gutters grow with the screen. */
:root {
	--nb-max: 1440px;
	--nb-gutter: 16px;
}
@media (min-width: 768px)  { :root { --nb-gutter: 20px; } }
@media (min-width: 1200px) { :root { --nb-gutter: 32px; } }

@media (min-width: 768px) {
	.container,
	.container-page-item-title.container,
	.woocommerce-notices-wrapper {
		width: 100%;
		max-width: var(--nb-max);
		padding-left: var(--nb-gutter);
		padding-right: var(--nb-gutter);
	}
}

/* Ad banner rows (InHype banner positions, incl. the NxtAds header slot) line up with the content */
.inhype-bb-block {
	max-width: var(--nb-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--nb-gutter);
	padding-right: var(--nb-gutter);
}

/* Equal space above and below banner rows. InHype adds a 30px bottom margin to the wrapper
   and NxtAds a 10px margin to the slot, which left 10px above vs 40px below. */
:root { --nb-banner-gap: 12px; }
@media (min-width: 768px) { :root { --nb-banner-gap: 20px; } }
/* doubled class = same weight as InHype's ".inhype-bb-block.inhype-bb-block-below_header" (30px) */
.inhype-bb-block.inhype-bb-block {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: var(--nb-banner-gap);
	padding-bottom: var(--nb-banner-gap);
}
.inhype-bb-block > .nxtads-slot.is-filled { margin-top: 0; margin-bottom: 0; }
/* The banner row already gives the space; drop the page container's own top margin (45px on
   articles) right after it so the gap is the same above and below. Not when the row is hidden. */
.inhype-bb-block-below_header:not([style*="none"]) + .content-block > .container:first-child { margin-top: 0; }