/* LAYOUT FOUNDATION V1.1 - reusable grid, single-boundary whitespace and composition patterns.
 * Values come only from canonical Visual System v3 tokens.
 * 12 columns desktop -> 8 tablet -> 4 mobile. Surfaces opt in explicitly.
 */

/* A section owns horizontal frame geometry only.
 * Vertical rhythm belongs to the parent flow so adjacent sections never double-space.
 */
:where(.mahamu-layout-section,.mahamu-layout-flow .mahamu-story-section){
	--mahamu-layout-gutter:var(--wp--custom--space--gutter-desktop);
	position:relative;
	padding-inline:var(--mahamu-layout-gutter);
}

/* SURFACE roots neutralize inherited horizontal padding so one shared frame owns outer gutters. */
.mahamu-layout-surface{padding-inline:0!important}

/* Single-boundary flow: one gap belongs to each boundary, never both adjacent sections. */
.mahamu-layout-flow{
	--mahamu-layout-flow-boundary:var(--wp--custom--space--xxl);
	--mahamu-layout-flow-edge:var(--wp--custom--space--section-commerce);
	padding-block:var(--mahamu-layout-flow-edge);
}
.mahamu-layout-flow > :where(.mahamu-layout-section,.mahamu-layout-flow .mahamu-story-section){
	margin-block:0;
	padding-block:0;
}
.mahamu-layout-flow > :where(.mahamu-layout-section,.mahamu-layout-flow .mahamu-story-section):not(:first-child){
	margin-block-start:var(--mahamu-layout-boundary-before,var(--mahamu-layout-flow-boundary));
}
.mahamu-layout-section--major{--mahamu-layout-boundary-before:var(--wp--custom--space--section-commerce)}
.mahamu-layout-section--brand{--mahamu-layout-boundary-before:var(--wp--custom--space--section-brand)}

/* Dividers are opt-in. They sit inside the existing boundary whitespace and add no spacing. */
.mahamu-layout-section--divided::before{
	content:"";
	position:absolute;
	top:calc(-1 * var(--wp--custom--space--lg));
	left:50%;
	width:min(calc(100% - var(--mahamu-layout-gutter) - var(--mahamu-layout-gutter)),var(--wp--custom--layout--content-brand));
	transform:translateX(-50%);
	border-top:1px solid var(--wp--custom--color--border--soft);
}

:where(.mahamu-layout-frame,.mahamu-story-frame){
	--mahamu-layout-frame-max:var(--wp--custom--layout--content-brand);
	width:min(100%,var(--mahamu-layout-frame-max));
	margin-inline:auto;
}
.mahamu-layout-frame--commerce{--mahamu-layout-frame-max:var(--wp--custom--layout--content-commerce)}
.mahamu-layout-frame--guttered{
	--mahamu-layout-gutter:var(--wp--custom--space--gutter-desktop);
	/*
	 * WordPress/parent-theme alignwide rules may assign their own width after
	 * block markup is rendered. This class is the explicit outer-frame owner,
	 * so it must win that external specificity boundary without changing
	 * component internals.
	 */
	width:min(calc(100% - var(--mahamu-layout-gutter) - var(--mahamu-layout-gutter)),var(--mahamu-layout-frame-max)) !important;
	max-width:none !important;
}
/*
 * Source-owned SURFACE roots can themselves sit inside Gutenberg root padding.
 * Anchor their guttered frames to the viewport while keeping the frame centered
 * on the surface root, so root padding cannot become a second gutter owner.
 */
.mahamu-layout-surface .mahamu-layout-frame--guttered{
	position:relative;
	left:50%;
	width:min(calc(100vw - var(--mahamu-layout-gutter) - var(--mahamu-layout-gutter)),var(--mahamu-layout-frame-max)) !important;
	margin-inline:0 !important;
	transform:translateX(-50%);
}
:where(.mahamu-layout-grid,.mahamu-story-grid){
	--mahamu-layout-grid-columns:12;
	--mahamu-layout-grid-gap:var(--wp--custom--space--content-gap);
	display:grid;
	grid-template-columns:repeat(var(--mahamu-layout-grid-columns),minmax(0,1fr));
	column-gap:var(--mahamu-layout-grid-gap);
	row-gap:var(--mahamu-layout-grid-gap);
}
.mahamu-layout-prose{max-width:var(--wp--custom--layout--content-reading)}
.mahamu-layout-stack{
	display:flex;
	flex-direction:column;
	gap:var(--mahamu-layout-stack-gap,var(--wp--custom--space--lg));
}
.mahamu-layout-stack--tight{--mahamu-layout-stack-gap:var(--wp--custom--space--md)}
.mahamu-layout-stack--loose{--mahamu-layout-stack-gap:var(--wp--custom--space--xl)}

/* Reusable composition patterns.
 * Apply the pattern modifier to a .mahamu-layout-grid and semantic role classes to its children.
 */
.mahamu-layout-pattern--hero > .mahamu-layout-pattern__primary{grid-column:1 / span 7}
.mahamu-layout-pattern--hero > .mahamu-layout-pattern__secondary{grid-column:10 / -1}

.mahamu-layout-pattern--chapter > .mahamu-layout-pattern__lead{grid-column:1 / span 3}
.mahamu-layout-pattern--chapter > .mahamu-layout-pattern__body{grid-column:4 / span 6}
.mahamu-layout-pattern--chapter > .mahamu-layout-pattern__aside{grid-column:4 / span 6}

.mahamu-layout-pattern--split > .mahamu-layout-pattern__primary{grid-column:1 / span 6}
.mahamu-layout-pattern--split > .mahamu-layout-pattern__secondary{grid-column:7 / -1}

.mahamu-layout-pattern--evidence > .mahamu-layout-pattern__intro{grid-column:1 / span 3}
.mahamu-layout-pattern--evidence > .mahamu-layout-pattern__evidence{grid-column:4 / -1}
.mahamu-layout-pattern--evidence > .mahamu-layout-pattern__caption{grid-column:4 / -1}

@media (max-width:1024px){
	:where(.mahamu-layout-section,.mahamu-layout-flow .mahamu-story-section){--mahamu-layout-gutter:var(--wp--custom--space--gutter-tablet)}
	.mahamu-layout-frame--guttered{--mahamu-layout-gutter:var(--wp--custom--space--gutter-tablet)}
	:where(.mahamu-layout-grid,.mahamu-story-grid){
		--mahamu-layout-grid-columns:8;
		--mahamu-layout-grid-gap:var(--wp--custom--space--md);
	}

	.mahamu-layout-pattern--hero > .mahamu-layout-pattern__primary{grid-column:1 / span 5}
	.mahamu-layout-pattern--hero > .mahamu-layout-pattern__secondary{grid-column:6 / -1}

	.mahamu-layout-pattern--chapter > .mahamu-layout-pattern__lead{grid-column:1 / span 3}
	.mahamu-layout-pattern--chapter > .mahamu-layout-pattern__body,
	.mahamu-layout-pattern--chapter > .mahamu-layout-pattern__aside{grid-column:4 / -1}

	.mahamu-layout-pattern--split > .mahamu-layout-pattern__primary{grid-column:1 / span 4}
	.mahamu-layout-pattern--split > .mahamu-layout-pattern__secondary{grid-column:5 / -1}

	.mahamu-layout-pattern--evidence > .mahamu-layout-pattern__intro{grid-column:1 / span 3}
	.mahamu-layout-pattern--evidence > .mahamu-layout-pattern__evidence,
	.mahamu-layout-pattern--evidence > .mahamu-layout-pattern__caption{grid-column:1 / -1}
}
@media (max-width:640px){
	:where(.mahamu-layout-section,.mahamu-layout-flow .mahamu-story-section){--mahamu-layout-gutter:var(--wp--custom--space--gutter-mobile)}
	.mahamu-layout-frame--guttered{--mahamu-layout-gutter:var(--wp--custom--space--gutter-mobile)}
	.mahamu-layout-flow{
		--mahamu-layout-flow-boundary:var(--wp--custom--space--section-mobile);
		--mahamu-layout-flow-edge:var(--wp--custom--space--section-mobile);
	}
	.mahamu-layout-section--major,
	.mahamu-layout-section--brand{--mahamu-layout-boundary-before:var(--wp--custom--space--section-mobile)}
	:where(.mahamu-layout-grid,.mahamu-story-grid){
		--mahamu-layout-grid-columns:4;
		--mahamu-layout-grid-gap:var(--wp--custom--space--md);
	}

	.mahamu-layout-pattern--hero > .mahamu-layout-pattern__primary,
	.mahamu-layout-pattern--hero > .mahamu-layout-pattern__secondary,
	.mahamu-layout-pattern--chapter > .mahamu-layout-pattern__lead,
	.mahamu-layout-pattern--chapter > .mahamu-layout-pattern__body,
	.mahamu-layout-pattern--chapter > .mahamu-layout-pattern__aside,
	.mahamu-layout-pattern--split > .mahamu-layout-pattern__primary,
	.mahamu-layout-pattern--split > .mahamu-layout-pattern__secondary,
	.mahamu-layout-pattern--evidence > .mahamu-layout-pattern__intro,
	.mahamu-layout-pattern--evidence > .mahamu-layout-pattern__evidence,
	.mahamu-layout-pattern--evidence > .mahamu-layout-pattern__caption{
		grid-column:1 / -1;
	}
}
/* LAYOUT FOUNDATION V1.1 END */