/*
	Layout — full / wide / content

	ONE horizontal system. Editors: LAYOUT.md /
	Dashboard → Net Blog Guide.

	Tokens (tune air + caps here only)
	  --nb-edge-base  desktop side air (default 3rem)
	  --nb-edge       live side air (mobile = base × 0.7)
	  --nb-wide       Align wide cap (1290)
	  --nb-content    reading / default cap (850)
	  --nb-frame-pad  brackets ↔ text
	  --nb-bleed      oversized art

	Rules
	  Full     → 100% of parent (bleed / background). No side shrink.
	  Wide     → min(wide, 100% − 2×edge), centered
	  Content  → min(content, 100% − 2×edge), centered
	  Full inside wide → 100% of that wide box (no viewport breakout)

	Air lives on wide/content — not as padding on full.
*/

/* -------------------------------------------------------------------------
	Tokens — single place to retune
------------------------------------------------------------------------- */

:root {
	--nb-edge-base: 3rem;
	--nb-edge: var(--nb-edge-base);
	--nb-wide: var(--wp--style--global--wide-size, 1290px);
	--nb-content: var(--wp--style--global--content-size, 850px);
	--nb-frame-pad: var(--wp--preset--spacing--large);
	--nb-bleed: 1510px;

	/* Compat aliases (old names → new system) */
	--nb-row: var(--nb-wide);
	--nb-row-pad: var(--nb-edge);
	--net-blog-edge: var(--nb-edge);
	--not-blog-edge: var(--nb-edge);
	--article-edge: var(--nb-edge);
	--nb-article-wide: var(--nb-wide);
	--nb-article-edge: var(--nb-edge);
}

/* Mobile: ~30% less side air — header / footer / content all follow --nb-edge */
@media (max-width: 781px) {
	:root {
		--nb-edge: calc(var(--nb-edge-base) * 0.7);
	}
}

/* -------------------------------------------------------------------------
	1. Align full — 100% of parent, never side-shrunk by the theme
------------------------------------------------------------------------- */

.alignfull {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
}

/*
	Full inside wide/content: fill that column only — no breakout.
*/
:is(.alignwide, .nb-row, .nb-row--wide, .nb-row--content) .alignfull,
:is(.alignwide, .nb-row, .nb-row--wide, .nb-row--content) > .alignfull {
	left: auto;
	margin-inline: 0;
	max-width: none;
	position: relative;
	right: auto;
	width: 100%;
}

/* -------------------------------------------------------------------------
	2. Align wide — shared page column + predictable side air
------------------------------------------------------------------------- */

.alignwide,
.nb-row,
.nb-row--wide {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: min(var(--nb-wide), calc(100% - (2 * var(--nb-edge))));
	width: 100%;
}

.is-layout-constrained > .alignwide {
	max-width: min(var(--nb-wide), calc(100% - (2 * var(--nb-edge))));
}

/* -------------------------------------------------------------------------
	3. Content / default — reading column + same air pattern
------------------------------------------------------------------------- */

.nb-row--content {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: min(var(--nb-content), calc(100% - (2 * var(--nb-edge))));
	width: 100%;
}

/*
	Constrained layouts (WP default for many templates): default children
	use content cap + edge air. Wide handled above. Full stays 100%.
*/
.is-layout-constrained
	> :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) {
	max-width: min(var(--nb-content), calc(100% - (2 * var(--nb-edge))));
}

/*
	Nested constrained: an ancestor already applied page edge (alignwide /
	outer content). Subtracting --nb-edge again collapses copy (About frame,
	Contact cards, etc.) — e.g. 230px parent → max 134px text.
*/
.is-layout-constrained
	.is-layout-constrained
	> :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) {
	max-width: min(var(--nb-content), 100%);
}

/* Wide inside an already-edged wide/content column: fill parent, no second edge. */
:is(.alignwide, .nb-row, .nb-row--wide, .nb-row--content)
	> :is(.alignwide, .nb-row, .nb-row--wide) {
	max-width: none;
	width: 100%;
}

/* -------------------------------------------------------------------------
	4. Structural fulls — L/R pad off so wide/content own the air
	   (beats leftover Medium / Gutter inline on header, About, etc.)
------------------------------------------------------------------------- */

.site-header > .wp-block-group,
header > .wp-block-group,
.site-footer .site-footer-inner,
footer .site-footer-inner,
.series-archive,
.series-archive.has-global-padding,
.editorial-feature-section:not(.vignette-stack),
.issue-transition-panel:not(.vignette-stack),
.nb-band,
.article-grid-backdrop.wp-block-cover {
	box-sizing: border-box;
	padding-inline: 0 !important;
}

/* .vignette-stack owns mobile edge via --vignette-edge (front-page.css). */

/*
	Article grid: wide inner is just .alignwide (rules above).
	Cards fill that column.
*/
.article-grid-backdrop .article-card-grid {
	box-sizing: border-box;
	width: 100%;
}

/* -------------------------------------------------------------------------
	5. Scaffold — main as full-bleed band (front page, etc.)
------------------------------------------------------------------------- */

.wp-site-blocks > main.wp-block-group.alignfull {
	box-sizing: border-box;
	max-width: none;
	width: auto;
}

.wp-site-blocks > main.wp-block-group.alignfull > .alignfull {
	max-width: none;
	width: 100%;
}

/* -------------------------------------------------------------------------
	6. Frame contract (paint in assets/blocks/core-group.css)
------------------------------------------------------------------------- */

.wp-block-group:is(
	.is-style-corner-frame,
	.is-style-thin-corner-frame,
	.is-style-purple-corner-frame
) {
	--corner-frame-inset: 0;
	--corner-frame-pad: var(--nb-frame-pad);
}