/*** Module: Media + Accordion ***/

.module.media-accordion {
	overflow-x: clip;
	padding-block: var(--module-spacing-large);
}

.module.media-accordion:is(.bg-white, .bg-parchment) {
	--bg-offset: calc(var(--container-outer-margin) + var(--container-outer-padding) + 2 * (var(--one-column-width) + var(--gap)));
	isolation: isolate;
	padding: 100px 0 80px;
	position: relative;
}

/* Panel needs breath above it, but only when the editor left spacing unset — any
   .margin-spacing-* class owns margin-top itself and must not be overridden. */
.module.media-accordion:is(.bg-white, .bg-parchment):not([class*="margin-spacing-"]) {
	margin-top: var(--text-spacing-small);
}

/* Offset panel — bleeds to the content-side viewport edge but stops ~col 3 on
   the media side so the media card overlaps it, rather than a full-width band. */
.module.media-accordion:is(.bg-white, .bg-parchment)::before {
	content: "";
	inset-block: 0;
	position: absolute;
	z-index: -1;
}

.module.media-accordion.bg-white::before {
	background: var(--white);
}

.module.media-accordion.bg-parchment::before {
	background: var(--parchment);
}

.module.media-accordion:is(.bg-white, .bg-parchment).image-left::before {
	left: var(--bg-offset);
	right: 0;
}

.module.media-accordion:is(.bg-white, .bg-parchment).image-right::before {
	left: 0;
	right: var(--bg-offset);
}

/* No media — nothing overlaps the gutter, so the panel spans the full width. */
.module.media-accordion:is(.bg-white, .bg-parchment):not(:has(.media))::before {
	left: 0;
	right: 0;
}

/* Closed card is 72px tall: 16px + a 40px toggle + 16px. The toggle therefore sits
   16px from the top, bottom, and right edge (padding-right 16px). */
.module.media-accordion .accordion.boxed {
	padding: var(--text-spacing-xsmall) var(--text-spacing-xsmall) var(--text-spacing-xsmall) var(--text-spacing-small);
}

.module.media-accordion .accordion.boxed .accordion-toggle {
	padding: 13px;
}

/* On the parchment panel the default parchment cards vanish — lift them to white,
   and the open card to a hair off-white so the active state still reads. */
.module.media-accordion.bg-parchment .accordion.boxed {
	background: var(--white);
}

.module.media-accordion.bg-parchment .accordion.boxed.active {
	background: #f9f9f7;
}

/* Page Default (no module bg): the open card lifts from the global parchment to
   white, rather than the global off-white active. */
.module.media-accordion:not(.bg-white):not(.bg-parchment) .accordion.boxed.active {
	background: var(--white);
}

.module.media-accordion .container {
	align-items: start;
}

.module.media-accordion .content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	margin: auto 0;
}

.module.media-accordion .content > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.module.media-accordion .content > * + [data-accordion-exclusive] {
	margin-top: var(--text-spacing-medium);
}

/* Intro tracks the heading size: 20px under the large heading (heading-3), 18px
   under the small heading (heading-4). */
.module.media-accordion .content:has(.heading-4) .intro,
.module.media-accordion .content:has(.heading-4) .intro p {
	font-size: calc(18rem / 16);
}

.module.media-accordion [data-accordion-exclusive] {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
}

/* Portrait override of the global .media 16:9 default. Product media opts out so
   the global .media.product treatment (contained screenshot + padding + shadow)
   wins — overflow:hidden here would otherwise clip its drop-shadow. */
.module.media-accordion .media:not(.product) {
	aspect-ratio: 748 / 756;
	overflow: hidden;
}

.module.media-accordion .media:not(.product) img,
.module.media-accordion .media:not(.product) video {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Pin row 1 so image-left works regardless of DOM order — sparse auto-placement would otherwise bump the media to row 2. */
.module.media-accordion .content,
.module.media-accordion .media {
	grid-row: 1;
}

/* Pin the media when it's shorter than the accordions beside it, so it stays in
   view as the taller column scrolls past. The section's overflow-x: clip is
   sticky-safe (clip creates no scroll container). Offset clears the sticky header. */
.module.media-accordion .media {
	--sticky-menu-clearance: 0px;
	position: sticky;
	top: calc(var(--header-height) + var(--text-spacing-large) + var(--sticky-menu-clearance));
}

body.admin-bar .module.media-accordion .media {
	top: calc(var(--header-height) + var(--wp-admin-bar-height) + var(--text-spacing-large) + var(--sticky-menu-clearance));
}

/* A pinned sticky-menu (56px) parks under the header — clear it too. Carried as a
   custom property so the admin-bar offset above composes instead of competing. */
body:has(.sticky-menu) .module.media-accordion .media {
	--sticky-menu-clearance: 56px;
}

.module.media-accordion.image-right .content {
	grid-column: 1 / span 6;
}

/* width drops by the inner clearance so the right edge keeps its breakout bleed. */
.module.media-accordion.image-right .media {
	grid-column: 7 / span 6;
	justify-self: start;
	margin-left: var(--module-spacing-medium);
	width: calc(100% - var(--container-breakout) - var(--module-spacing-medium));
}

.module.media-accordion.image-left .media {
	grid-column: 1 / span 6;
	margin-left: var(--container-breakout);
	margin-right: var(--module-spacing-medium);
}

.module.media-accordion.image-left .content {
	grid-column: 7 / span 6;
}

.module.media-accordion:not(:has(.media)) .content {
	grid-column: 1 / span 8;
}

/* Video play button treatment (sharp triangle + colour-shift hover) is shared with
   content-media — see `.module:is(.media-accordion, .content-media) .media.video` in
   style.css. */

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	/* The bespoke 100/80 is a desktop figure — drop to the scaling token once stacked. */
	.module.media-accordion:is(.bg-white, .bg-parchment) {
		padding-block: var(--module-spacing-medium);
	}

	/* Stacked — the offset panel becomes a simple full-width band. */
	.module.media-accordion:is(.bg-white, .bg-parchment).image-left::before,
	.module.media-accordion:is(.bg-white, .bg-parchment).image-right::before {
		left: 0;
		right: 0;
	}

	/* :is(.image-left, .image-right) matches the desktop variants' specificity so the stack wins. */
	.module.media-accordion .content,
	.module.media-accordion .media,
	.module.media-accordion:is(.image-left, .image-right) .content,
	.module.media-accordion:is(.image-left, .image-right) .media,
	.module.media-accordion:not(:has(.media)) .content {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.module.media-accordion .media,
	.module.media-accordion:is(.image-left, .image-right) .media {
		grid-row: 1;
		margin: 0;
		position: relative;
		top: 0;
		width: 100%;
	}

	/* Image leads the stack regardless of the content-first DOM order. */
	.module.media-accordion:has(.media) .content {
		grid-row: 2;
	}

}