/*
	Issue vignettes + transition art.
	Vignette stack / split frames / corner-frame joins + stacked-shape underlaps.
*/

/* ==========================================
	HOMEPAGE ISSUE VIGNETTES — MOBILE
	Root: .vignette-stack (all issues share this).

	Contract going forward:
	  Desktop — lay out freely in Gutenberg to match Figma
	            (grid columns, overlaps, inline placement OK).
	  Mobile  — every direct child of the editorial-feature
	            shell collapses to one full-width column, DOM order.
	            !important beats Gutenberg inline grid-* from desktop.

	Tokens on the stack:
	  --vignette-edge       viewport → brackets (padding-inline)
	  --vignette-frame-pad  brackets → content (same for thin + thick)
	  --vignette-stack-gap  image → bracket box

	Modifiers on the stack:
	  .vignette-stack--image-end     columns: image is 2nd → reverse
	  .vignette-stack--split-frames  two frames → flatten + join

	Join marks on the frame groups (mobile only):
	  .corner-frame--join-start  ┌┐ only
	  .corner-frame--join-end    └┘ only
========================================== */

@media (max-width: 781px) {
	.vignette-stack {
		--vignette-edge: calc(2rem * 0.7);
		--vignette-frame-pad: 2rem;
		--vignette-stack-gap: 2em;
		box-sizing: border-box;
		max-width: none !important;
		width: 100% !important;
		margin-inline: 0 !important;
		/* layout.css excludes .vignette-stack from structural pad-zero */
		padding-inline: var(--vignette-edge);
		overflow-x: clip;
	}

	/*
		Shared fill unlock — beats WP contentSize + margin: auto !important.
		Extras (flex, frame pad, bleed) stay on the rules below.
	*/
	.vignette-stack > .wp-block-columns,
	.vignette-stack .wp-block-columns,
	.vignette-stack .wp-block-column,
	.vignette-stack.alignwide,
	.vignette-stack > .alignwide,
	.vignette-stack .alignwide,
	.vignette-stack.is-layout-constrained > *,
	.vignette-stack .is-layout-constrained > *,
	.vignette-stack .is-layout-constrained,
	.vignette-stack
		.wp-block-group:is(
			.is-style-corner-frame,
			.is-style-thin-corner-frame,
			.is-style-purple-corner-frame
		),
	.vignette-stack
		:is(
			.is-style-editorial-feature-image-left,
			.is-style-editorial-feature-image-right
		),
	.vignette-stack--split-frames > .is-style-default,
	.vignette-stack--split-frames .wp-block-group:has(> .wp-block-quote) {
		max-width: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/*
		WP columns default to align-items: center — when stacked, that
		shrink-wraps each column to content. Issue 01 uses a grid (full
		width); 02/03 use columns → brackets looked too narrow.
	*/
	.vignette-stack > .wp-block-columns,
	.vignette-stack .wp-block-columns {
		align-items: stretch !important;
		flex-wrap: wrap !important;
		gap: var(--vignette-stack-gap) !important;
	}

	.vignette-stack .wp-block-column {
		align-self: stretch !important;
		box-sizing: border-box;
		flex-basis: 100% !important;
		min-width: 0 !important;
	}

	/*
		Frame pad must beat core-group.css (.wp-block-group:is(...)).
		Thin vs thick = stroke only; edge + pad match every vignette.
		Solid ground so transition art underlaps without killing copy.
	*/
	.vignette-stack
		.wp-block-group:is(
			.is-style-corner-frame,
			.is-style-thin-corner-frame,
			.is-style-purple-corner-frame
		) {
		--corner-frame-pad: var(--vignette-frame-pad);
		--corner-frame-length: 1.5rem;
		align-self: stretch !important;
		background-color: var(--wp--preset--color--page-white);
		box-sizing: border-box;
		justify-self: stretch;
		min-width: 100% !important;
	}

	.vignette-stack .wp-block-image {
		box-sizing: border-box;
		justify-self: stretch;
		margin-block-start: 0 !important;
		margin-inline: calc(-1 * var(--vignette-edge)) !important;
		max-width: none !important;
		width: calc(100% + (2 * var(--vignette-edge))) !important;
	}

	.vignette-stack .wp-block-image img {
		display: block;
		height: auto;
		max-width: none;
		width: 100%;
	}

	.vignette-stack
		:is(
			.is-style-editorial-feature-image-left,
			.is-style-editorial-feature-image-right
		) {
		grid-auto-columns: unset;
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: var(--vignette-stack-gap);
	}

	/*
		Flatten every shell child — image, frame, quote, plus wrappers.
		!important: editors will keep desktop Figma coords as inline
		grid-column / grid-row; those must not invent mobile tracks.
		Width left off images so the bleed rule above still wins.
	*/
	.vignette-stack
		:is(
			.is-style-editorial-feature-image-left,
			.is-style-editorial-feature-image-right
		)
		> * {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
		justify-self: stretch !important;
		margin-block-start: 0 !important;
	}

	.vignette-stack
		:is(
			.is-style-editorial-feature-image-left,
			.is-style-editorial-feature-image-right
		)
		> *:not(.wp-block-image) {
		max-width: none !important;
		width: 100% !important;
	}

	.vignette-stack .wp-block-button__link {
		display: inline-flex !important;
		align-items: center;
		gap: 0.5em;
		justify-content: space-between !important;
		text-align: left !important;
	}

	.vignette-stack
		:is(.wp-block-button.has-custom-width, .wp-block-button__width-100) {
		width: 100%;
	}

	.vignette-stack .wp-block-button__width-100 .wp-block-button__link {
		width: 100%;
	}

	/* Image is the trailing column in the DOM → lead with it on mobile */
	.vignette-stack--image-end > .wp-block-columns {
		flex-direction: column-reverse !important;
	}

	/*
		Split-bracket vignette: flatten columns, image first, then
		meta frame, intro frame, quote. Join marks via
		.corner-frame--join-start / --join-end.
	*/
	.vignette-stack--split-frames {
		align-items: stretch;
		display: flex;
		flex-direction: column;
	}

	.vignette-stack--split-frames > .wp-block-columns,
	.vignette-stack--split-frames > .wp-block-columns > .wp-block-column {
		display: contents;
	}

	.vignette-stack--split-frames .wp-block-image {
		order: 1;
	}

	.vignette-stack--split-frames .wp-block-columns .is-style-corner-frame {
		order: 2;
		margin-block-start: var(--vignette-stack-gap);
	}

	.vignette-stack--split-frames .wp-block-group:has(> .wp-block-quote) {
		order: 3;
		box-sizing: border-box;
	}

	.vignette-stack--split-frames .wp-block-column {
		padding-top: 0 !important;
	}

	/*
		Dual-bracket join — beat core-group.css paint
		(.wp-block-group:is(.is-style-corner-frame)::before).
	*/
	.vignette-stack
		.wp-block-group.is-style-corner-frame.corner-frame--join-start::before {
		background:
			linear-gradient(
				var(--corner-frame-color),
				var(--corner-frame-color)
			) top left / var(--corner-frame-length) var(--corner-frame-stroke)
				no-repeat,
			linear-gradient(
				var(--corner-frame-color),
				var(--corner-frame-color)
			) top right / var(--corner-frame-length) var(--corner-frame-stroke)
				no-repeat;
	}

	.vignette-stack
		.wp-block-group.is-style-corner-frame.corner-frame--join-start::after {
		background:
			linear-gradient(
				var(--corner-frame-color),
				var(--corner-frame-color)
			) top left / var(--corner-frame-stroke) var(--corner-frame-length)
				no-repeat,
			linear-gradient(
				var(--corner-frame-color),
				var(--corner-frame-color)
			) top right / var(--corner-frame-stroke) var(--corner-frame-length)
				no-repeat;
	}

	.vignette-stack
		.wp-block-group.is-style-corner-frame.corner-frame--join-end::before {
		background:
			linear-gradient(
				var(--corner-frame-color),
				var(--corner-frame-color)
			) bottom left / var(--corner-frame-length) var(--corner-frame-stroke)
				no-repeat,
			linear-gradient(
				var(--corner-frame-color),
				var(--corner-frame-color)
			) bottom right / var(--corner-frame-length) var(--corner-frame-stroke)
				no-repeat;
	}

	.vignette-stack
		.wp-block-group.is-style-corner-frame.corner-frame--join-end::after {
		background:
			linear-gradient(
				var(--corner-frame-color),
				var(--corner-frame-color)
			) bottom left / var(--corner-frame-stroke) var(--corner-frame-length)
				no-repeat,
			linear-gradient(
				var(--corner-frame-color),
				var(--corner-frame-color)
			) bottom right / var(--corner-frame-stroke) var(--corner-frame-length)
				no-repeat;
	}

	/*
		Transition art: shapes sit mid-canvas inside a tall SVG, and
		Issue-2 had a viewBox clipPath that cropped extending strokes.
		On mobile: full band width, zoom into the dense cluster, taller
		overlap under vignette + quote (not a floating mid strip).
	*/
	.issue-transition-sequence {
		overflow-x: clip;
	}

	.issue-transition-sequence > .issue-transition-art,
	.issue-transition-art.alignwide,
	.issue-transition-art.alignfull {
		box-sizing: border-box;
		left: auto !important;
		right: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
		overflow: hidden;
		position: relative;
		width: 100% !important;
	}

	.issue-transition-art img {
		display: block;
		height: auto;
		/* Zoom past empty SVG margins so shapes span the band */
		margin-left: -32% !important;
		max-width: none !important;
		width: 164% !important;
	}

	.issue-transition-sequence {
		/* Peek under bracket bottom — frames own an opaque ground */
		--transition-art-pull-up: clamp(2.5rem, 12vw, 5rem);
		--transition-art-pull-bottom: clamp(2rem, 12vw, 8rem);
	}

	.issue-transition-art--after-issue-3 {
		--after-issue-3-pull-up: clamp(2rem, 12vw, 6rem);
		--after-issue-3-pull-bottom: clamp(2rem, 10vw, 5rem);
	}
}

/* ==========================================
	ISSUE 2–3 TRANSITION SEQUENCE
========================================== */

.issue-transition-sequence {
	--transition-art-max-width: var(--nb-bleed, 1510px);

	/* Pull artwork upward into Issue 2 (lower = shapes sit farther down) */
	--transition-art-pull-up: 36rem;

	/* Pull Issue 3 upward over the SVG's lower empty canvas */
	--transition-art-pull-bottom: 36rem;

	position: relative;
	overflow-x: clip;
}

.issue-transition-panel {
	box-sizing: border-box;
	position: relative;
	z-index: 2;
}

/*
	Text / bracket units above images — same stacking as editorial-feature
	(core-group.css). Split-frames title slot needs it too: the image sits
	later in the DOM and pulls up under the CTA.
*/
.vignette-stack .wp-block-image {
	position: relative;
	z-index: 0;
}

.vignette-stack
	:is(
		.is-style-corner-frame,
		.is-style-thin-corner-frame,
		.is-style-purple-corner-frame
	) {
	position: relative;
	z-index: 1;
}

/*
	Art pulls under following blocks via negative margin. Panels already
	stack above it; lead-in quotes / spacers need the same so copy isn't
	painted under the SVG (e.g. Issue 02 → quote).
*/
.issue-transition-sequence > .wp-block-group {
	position: relative;
	z-index: 2;
}

.issue-transition-art {
	position: relative;
	left: auto;
	z-index: 0;

	/* % not vw — same scrollbar-gutter issue as article-grid-backdrop */
	width: 100%;
	max-width: var(--transition-art-max-width);

	/* Negative pulls fight block gap / align margins from core */
	margin-top: calc(-1 * var(--transition-art-pull-up)) !important;
	margin-right: auto;
	margin-bottom: calc(-1 * var(--transition-art-pull-bottom)) !important;
	margin-left: auto;
}

.issue-transition-art img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

/* ==========================================
	COMPACT DESKTOP
========================================== */

@media (max-width: 1280px) {
	.issue-transition-sequence {
		--transition-art-pull-up: 28rem;
		--transition-art-pull-bottom: 36rem;
	}
}

/* ==========================================
	AFTER ISSUE 3 ARTWORK
========================================== */

.issue-transition-art--after-issue-3 {
	/*
	* Pull the new artwork upward behind Issue 3.
	* The bottom pull moves the following content upward
	* over the SVG's lower canvas.
	*/
	--after-issue-3-pull-up: clamp(3rem, 20vw, 12rem);
	--after-issue-3-pull-bottom: clamp(4rem, 10vw, 8rem);

	margin-top:
		calc(-1 * var(--after-issue-3-pull-up)) !important;

	margin-bottom:
		calc(-1 * var(--after-issue-3-pull-bottom)) !important;
}


/* ==========================================
	COMPACT DESKTOP
========================================== */

@media (max-width: 1280px) {
	.issue-transition-art--after-issue-3 {
		--after-issue-3-pull-up: clamp(8rem, 18vw, 22rem);
		--after-issue-3-pull-bottom: clamp(3rem, 8vw, 6rem);
	}
}


/* ==========================================
	STACKED LAYOUT
	(legacy / unused path — keep for reference)
========================================== */

@media (max-width: 781px) {
	.issue-transition-art--after-issue-3 {
		--after-issue-3-pull-up: clamp(4rem, 18vw, 8rem);
		--after-issue-3-pull-bottom: clamp(2rem, 10vw, 4rem);
	}
}