/* ==========================================================================
   SUV PAGE BUILDER COMPATIBILITY

   The builder wraps everything in structural divs:

     .spb-row > .spb-row-inner > .spb-col > .spb-col-inner > .spb-el* > content

   The section design (sections.css) styles real children - .chapter is a flex
   row of .ch-no + .ch-name, .gaze is a grid of two columns with the pivot drawn
   between them, and so on - so those wrappers have to stop counting for layout.
   display:contents does exactly that: the element still carries its classes and
   still matches selectors, but it no longer forms a box, so its children become
   the children of the design's grid or flex container.

   This is deliberately TARGETED. Only wrappers that belong to one of the
   design's own structures are flattened. A plain row or column the client adds
   later behaves like a normal builder row, and Design options keep working
   everywhere, because those are written against .spb-u-<id> on .spb-col-inner
   and .spb-el, which this file never touches.
   ========================================================================== */

/* The builder's own 24px "gap between elements" is replaced by the design's
   explicit margins throughout a band. */
.masm-band {
	--spb-el-gap: 0px;
}

/* --------------------------------------------------------------------------
   1 - the section row itself
   The band is full-bleed (spb_row full_width="stretch") and the width of the
   content is set by .wrap, not by the builder's 1140px container.
   -------------------------------------------------------------------------- */
.masm-band.spb-row {
	--spb-gap: 0px;
}

.masm-band.spb-row > .spb-row-inner {
	display: contents;
}

.masm-band.spb-row > .spb-row-inner > .spb-col.wrap {
	display: block;
	flex: none;
	/* Width, centring and the side gutter all come from .masm-band .wrap
	   (--masm-max / --masm-gut), so max-width and padding are left alone here.
	   The builder's own column gutter is already nil because --spb-gap is 0. */
}

/* .wrap's own max-width + auto margins do the centring. */
.masm-band.spb-row > .spb-row-inner > .spb-col.wrap > .spb-col-inner {
	display: block;
}

/* --------------------------------------------------------------------------
   2 - rows that ARE one of the design's grids
   The row element keeps its class and becomes the grid; .spb-row-inner is
   flattened so the columns are the grid items.
   -------------------------------------------------------------------------- */
.masm-band .sec-head > .spb-row-inner,
.masm-band .split > .spb-row-inner,
.masm-band .gaze > .spb-row-inner,
.masm-band .origin-grid > .spb-row-inner,
.masm-band .relation > .spb-row-inner,
.masm-band .charcha-grid > .spb-row-inner,
.masm-band .strands > .spb-row-inner,
.masm-band .author-grid > .spb-row-inner,
.masm-band .details > .spb-row-inner {
	display: contents;
}

/* The columns of those rows are the grid items. Nothing is forced on them:
   the builder's flex sizing is ignored by a grid container, its gutter is
   already nil because gap is 0, and the design's own box (.strand, .gaze-col,
   .card, .portrait) keeps its padding, background and display. Only a column
   the design does not style gets a plain block box back, because .spb-col is
   display:flex and that changes how its children space themselves. */
.masm-band .sec-head > .spb-row-inner > .spb-col,
.masm-band .split > .spb-row-inner > .spb-col,
.masm-band .origin-grid > .spb-row-inner > .spb-col,
.masm-band .relation > .spb-row-inner > .spb-col,
.masm-band .charcha-grid > .spb-row-inner > .spb-col,
.masm-band .strands > .spb-row-inner > .spb-col,
.masm-band .author-grid > .spb-row-inner > .spb-col {
	/* The builder sizes columns with a percentage max-width, which a grid item
	   resolves against its own track and so shrinks to a fraction of it. The
	   track widths come from the design's grid-template-columns. Nothing else is
	   overridden here, so the design's padding, background and display survive. */
	max-width: none;
}

.masm-band .is-plain-col.spb-col {
	display: block;
}

/* --------------------------------------------------------------------------
   3 - text elements whose content is the design's structure
   .chapter is a flex row of two paragraphs, .define holds the eyebrow, the pull
   quote and the body column, .charcha-cta and .partners lay out their children.
   The .spb-text wrapper in between is flattened.
   -------------------------------------------------------------------------- */
.masm-band .chapter > .spb-text,
.masm-band .define > .spb-text,
.masm-band .detail > .spb-text,
.masm-band .charcha-cta > .spb-text,
.masm-band .partners > .spb-text,
.masm-band .portrait-cap > .spb-text {
	display: contents;
}

/* --------------------------------------------------------------------------
   4 - headings
   The builder's Heading element escapes HTML, so every heading that needs a
   line break or an italic phrase is a Text block carrying .h2. This keeps the
   builder's own reset from flattening the design's heading margins.
   -------------------------------------------------------------------------- */
.masm-band .spb-heading {
	margin: 0;
}

.masm-band .h2 > .spb-text {
	display: contents;
}

/* --------------------------------------------------------------------------
   5 - images
   The design styles .wp-block-image figures; the builder emits .spb-image.
   -------------------------------------------------------------------------- */
.masm-band .spb-image,
.masm-band .spb-image figure {
	margin: 0;
}

.masm-band .shot-wide .spb-image img,
.masm-band .portrait .spb-image img {
	display: block;
	width: 100%;
	height: auto;
}
/* --------------------------------------------------------------------------
   6 - spacing between the design's own blocks
   The builder resets the top margin of the first element in a Text block
   (.spb-text > :first-child { margin-top: 0 }). The section design carries its
   vertical rhythm on exactly those elements, so the values from sections.css
   are restored here. Keep these in step with sections.css if they change there;
   none of them is overridden in a media query, so a single value is enough.
   -------------------------------------------------------------------------- */
.masm-band .spb-text > .gaze:first-child {
	margin-top: clamp(34px, 4.5vw, 52px);
}

.masm-band .spb-text > .define:first-child,
.masm-band .spb-text > .relation:first-child {
	margin-top: clamp(40px, 4.6vw, 64px);
}

.masm-band .spb-text > .strands:first-child {
	margin-top: 40px;
}

.masm-band .spb-text > .details:first-child {
	margin-top: 28px;
}
/* --------------------------------------------------------------------------
   7 - selectors that expected .wrap to be a direct child of the band
   In the builder the band is a row, so .wrap sits one level deeper, inside
   .spb-row-inner. Only the Charcha band relies on this (it lifts .wrap above
   the skyline graphic drawn by .masm-charcha::after).
   -------------------------------------------------------------------------- */
.masm-band.masm-charcha > .spb-row-inner > .wrap {
	position: relative;
	z-index: 1;
}
/* --------------------------------------------------------------------------
   8 - columns the design lays out as flex boxes
   .strand is a flex column whose gap and auto margins space its heading, text
   and status line. As a builder column its content sits three wrappers deep,
   which would leave the flex box with a single child, so those wrappers are
   flattened and the three elements become flex children again.
   (.card, .portrait and the origin / author columns are ordinary blocks and
   need none of this.)
   -------------------------------------------------------------------------- */
.masm-band .strand.spb-col > .spb-col-inner,
.masm-band .strand.spb-col > .spb-col-inner > .spb-el-text,
.masm-band .strand.spb-col > .spb-col-inner > .spb-el-text > .spb-text {
	display: contents;
}
/* --------------------------------------------------------------------------
   9 - the neutral stack inside every Text block
   The builder clears the top margin of a Text block's first element and the
   bottom margin of its last. The section design carries its spacing on exactly
   those elements, so each Text block's content is wrapped in .masm-stack: the
   reset lands on the wrapper, and the wrapper adds no box of its own.
   -------------------------------------------------------------------------- */
.masm-band .masm-stack {
	display: contents;
}

/* --------------------------------------------------------------------------
   10 - the hero
   A slide is a builder column carrying .masm-hero-slide, holding an Image
   element (.hero-media) and a Text block (.hero-copy). hero.css is written
   against those classes, so all that is needed here is to take the builder's
   structural wrappers out of the layout: the slides have to be the hero's own
   children for the crossfade (a CSS grid stack), and .hero-media and
   .hero-copy have to be the slide's children for the overlay to sit right.
   .hero-copy itself stays a real box - it is the padded, centred column.
   -------------------------------------------------------------------------- */
/* The builder puts 24px between two elements in the same column; in a hero
   slide the image is positioned behind the copy, so that gap only pushes the
   copy down. The design sets its own spacing. */
.masm-hero {
	--spb-el-gap: 0px;
}

.masm-hero.spb-row > .spb-row-inner,
.masm-hero .masm-hero-slide > .spb-col-inner,
.masm-hero .hero-copy > .spb-text,
.masm-hero .masm-stack {
	display: contents;
}

/* The builder sizes a column with a percentage max-width, which would shrink
   the slide inside the hero's grid. */
.masm-hero .masm-hero-slide {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
/* --------------------------------------------------------------------------
   11 - the page head
   The image is positioned against the page head itself (top of the band to its
   foot, right half). The builder makes every column position:relative, which
   would otherwise make the column the reference and leave the image a thin
   strip beside the text, so the column is put back to static here. The row is
   already position:relative, which is what .ph-art then measures against.
   -------------------------------------------------------------------------- */
.page-head.spb-row > .spb-row-inner > .spb-col {
	position: static;
}