/* ==========================================================================
   50/50 Image/Copy — match 50/50 Accordion image handling.

   Goal: at desktop (1280+), the media column behaves identically to the
   50/50 Accordion's media column — section padding, fit, fill, height,
   and column padding all line up. The accordion's rules live in
   `blocks/fifty-fifty-accordion/style.css`; we mirror the same patterns
   here scoped to `.vio-fifty-fifty` so the two blocks render to the
   same visual spec without touching the (legacy) viomedspa-global.css
   rules at lines 1282–1370.
   ========================================================================== */

/* Min-width 0 on grid items so long text doesn't blow the track. */
.vio-fifty-fifty__copy,
.vio-fifty-fifty__media {
	min-width: 0;
}

@media (min-width: 1280px) {

	/* ── SECTION — 50px on all sides, sized to content ────────────── */
	.vio-section.vio-fifty-fifty,
	section.vio-section.vio-fifty-fifty {
		padding: 50px;
		overflow: visible;
		display: flex;
		flex-direction: column;
		contain: layout paint;
	}

	/* Strip the global .vio-section__inner max-width:1440 + horizontal
	   padding so the grid spans the section's full width edge-to-edge
	   (= viewport − 50px section padding). Drop the `flex: 1 1 auto`
	   so wrappers no longer pull the grid up to a forced row height —
	   the grid now sizes to its tallest column. */
	.vio-section.vio-fifty-fifty .vio-section__inner,
	section.vio-section.vio-fifty-fifty .vio-section__inner,
	.vio-section.vio-fifty-fifty .vio-section__content,
	.vio-section.vio-fifty-fifty .vio-section__body {
		flex: 0 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		max-width: none;
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
	}

	/* ── GRID — 2 columns, 100px gap, rows size to content ─────────── */
	.vio-fifty-fifty .vio-fifty-fifty__grid {
		min-height: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 100px;
		align-items: center;
	}

	/* ── MEDIA COLUMN — fixed 4:5 portrait crop at 75vh tall ─────────
	   Per VIO design — image is a hard 4:5 crop sized to 75% of the
	   viewport height. Width derives from the aspect ratio (75vh ×
	   4/5 = 60vh). `.vio-fifty-fifty__media` IS the grid cell here
	   (the actual rendered class — see render.php), so the centering
	   goes ON that element via `justify-self: center` + `align-self:
	   center`. Without those, the intrinsic-sized item defaults to
	   the start of its track and reads as "pushed left" or "pushed
	   right" depending on layout direction. */
	.vio-fifty-fifty .vio-fifty-fifty__media {
		min-height: 0;
		height: 75vh;
		height: 75dvh;
		max-height: 75dvh;
		width: 100%;
		position: relative;
		overflow: hidden;
		contain: layout paint;
		align-self: center;
	}
	/* Content column — centered vertically in the row + content
	   stack centered horizontally so the title + CTA cluster sits
	   in the middle of its half, mirroring the image's centering. */
	.vio-fifty-fifty .vio-fifty-fifty__copy {
		min-height: 0;
		align-self: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* ── STICKY MEDIA — image stays fixed while copy scrolls ────────
	   Sticky offset mirrors the 50/50 accordion exactly:
	   var(--vio-fixed-top, 96px) — uses the JS-driven fixed-header
	   height when set, falls back to 96px to match the accordion's
	   historical hardcoded value. Same var + same fallback means both
	   blocks pin to the same line under the sticky header. */
	.vio-fifty-fifty--sticky-media .vio-fifty-fifty__media {
		position: sticky;
		top: var(--vio-fixed-top, 96px);
		contain: layout;
	}
	/* Picture + image fill the media container edge to edge. */
	.vio-fifty-fifty .vio-fifty-fifty__media picture {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		aspect-ratio: auto;
		margin: 0;
	}
	.vio-fifty-fifty .vio-fifty-fifty__media .vio-fifty-fifty__image,
	.vio-fifty-fifty .vio-fifty-fifty__media .vio-fifty-fifty__video,
	.vio-fifty-fifty .vio-fifty-fifty__media > img,
	.vio-fifty-fifty .vio-fifty-fifty__media > video {
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		aspect-ratio: auto;
		margin: 0;
		object-fit: cover;
		display: block;
	}

	/* ── CONTENT COLUMN ────────────────────────────────────────────────
	   The section provides 50px padding on all edges and the grid adds a
	   100px gap between columns, so the copy column needs no horizontal
	   padding of its own. Vertical padding gives breathing room above and
	   below the content stack. */
	.vio-fifty-fifty .vio-fifty-fifty__copy {
		min-height: 0;
		padding: 50px 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		max-width: 700px;
		width: 100%;
		justify-self: center;
	}

	/* The legacy global rules at viomedspa-global.css:1336-1364 use
	   `order` to swap the copy/media columns based on
	   `.vio-fifty-fifty--align-left/right`. Grid doesn't use order in
	   the same way as flex — but the global rules ARE still in place.
	   To make sure the copy/media columns swap correctly with grid,
	   restate the same orderings here. (Grid does honor `order` for
	   auto-placement.) */
	.vio-fifty-fifty--align-left .vio-fifty-fifty__copy   { order: 1; }
	.vio-fifty-fifty--align-left .vio-fifty-fifty__media  { order: 2; }
	.vio-fifty-fifty--align-right .vio-fifty-fifty__copy  { order: 2; }
	.vio-fifty-fifty--align-right .vio-fifty-fifty__media { order: 1; }
}

/* ==========================================================================
   Per-element alignment overrides.

   When the editor picks left/center/right for a specific element in the
   Per-Element Alignment panel, the section gets a modifier class:
     .vio-fifty-fifty--{element}-{align}
   These rules apply text-align (+ flex/grid alignment for the CTA wrapper
   which is a flex container). Empty value in the editor emits no class →
   no override → the element inherits from the section's intro align.
   ========================================================================== */

/* Title */
.vio-fifty-fifty.vio-fifty-fifty--title-left   .vio-section__title { text-align: left;   }
.vio-fifty-fifty.vio-fifty-fifty--title-center .vio-section__title { text-align: center; }
.vio-fifty-fifty.vio-fifty-fifty--title-right  .vio-section__title { text-align: right;  }

/* Title 2 (a.k.a. titleAlt) */
.vio-fifty-fifty.vio-fifty-fifty--title2-left   .vio-section__title-alt { text-align: left;   }
.vio-fifty-fifty.vio-fifty-fifty--title2-center .vio-section__title-alt { text-align: center; }
.vio-fifty-fifty.vio-fifty-fifty--title2-right  .vio-section__title-alt { text-align: right;  }

/* Lead */
.vio-fifty-fifty.vio-fifty-fifty--lead-left   .vio-section__lead { text-align: left;   }
.vio-fifty-fifty.vio-fifty-fifty--lead-center .vio-section__lead { text-align: center; }
.vio-fifty-fifty.vio-fifty-fifty--lead-right  .vio-section__lead { text-align: right;  }

/* Content (body copy paragraph block) — covers section-shell's
   `.vio-section__content-copy` AND the InnerBlocks wrapper used for
   richer content. */
.vio-fifty-fifty.vio-fifty-fifty--content-left   .vio-section__content-copy { text-align: left;   }
.vio-fifty-fifty.vio-fifty-fifty--content-center .vio-section__content-copy { text-align: center; }
.vio-fifty-fifty.vio-fifty-fifty--content-right  .vio-section__content-copy { text-align: right;  }

/* CTA — flex container; need both `justify-content` and `text-align` so
   buttons (or button groups) anchor to the chosen edge regardless of
   whether they're block-level or inline. Applies to BOTH the inline
   `.vio-fifty-fifty__ctas` flex row and the stacked
   `.vio-section__cta` / `.vio-section__bottom-cta` wrappers. */
.vio-fifty-fifty.vio-fifty-fifty--cta-left .vio-section__cta,
.vio-fifty-fifty.vio-fifty-fifty--cta-left .vio-section__bottom-cta,
.vio-fifty-fifty.vio-fifty-fifty--cta-left .vio-fifty-fifty__ctas {
	justify-content: flex-start !important;
	text-align: left;
}
.vio-fifty-fifty.vio-fifty-fifty--cta-center .vio-section__cta,
.vio-fifty-fifty.vio-fifty-fifty--cta-center .vio-section__bottom-cta,
.vio-fifty-fifty.vio-fifty-fifty--cta-center .vio-fifty-fifty__ctas {
	justify-content: center !important;
	text-align: center;
}
.vio-fifty-fifty.vio-fifty-fifty--cta-right .vio-section__cta,
.vio-fifty-fifty.vio-fifty-fifty--cta-right .vio-section__bottom-cta,
.vio-fifty-fifty.vio-fifty-fifty--cta-right .vio-fifty-fifty__ctas {
	justify-content: flex-end !important;
	text-align: right;
}

/* ==========================================================================
   Items list/grid — "+ title + content" rows between lead and CTA.

   Two layouts (set via `itemsLayout` attribute):
     - `grid` (default) — 2 columns at 768+ (1 col on mobile).
       Order: 1 top-left, 2 top-right, 3 bottom-left, 4 bottom-right.
     - `list`           — always single column, stacked top to bottom.
   ========================================================================== */
.vio-fifty-fifty__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;       /* default: 1 col (mobile + list) */
	gap: var(--wp--preset--spacing--750, 28px) var(--wp--preset--spacing--1000, 40px);
	width: 100%;
}

/* Grid layout: 2 columns at 768+. */
@media (min-width: 768px) {
	.vio-fifty-fifty__items.vio-fifty-fifty__items--grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* List layout: explicit single column on every breakpoint. */
.vio-fifty-fifty__items.vio-fifty-fifty__items--list {
	grid-template-columns: 1fr;
}

.vio-fifty-fifty__item {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--wp--preset--spacing--500, 16px);
	align-items: start;
	margin: 0;
}

.vio-fifty-fifty__item-mark {
	font-size: 1.25em;
	line-height: 1;
	font-weight: 400;
	color: inherit;
	opacity: 0.8;
	user-select: none;
	margin-top: 0.15em;
}

.vio-fifty-fifty__item-body {
	min-width: 0;
}

.vio-fifty-fifty__item-title {
	margin: 0 0 var(--wp--preset--spacing--250, 6px) 0;
	font-size: var(--wp--preset--font-size--base, 18px);
	font-weight: 600;
	line-height: 1.3;
	/* Defeat any inherited uppercase heading style (some themes apply
	   `text-transform: uppercase` to h4 inside sections). Item titles
	   should render as plain mixed-case. */
	text-transform: none;
	letter-spacing: normal;
}

.vio-fifty-fifty__item-content {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm, 16px);
	line-height: 1.45;
	opacity: 0.92;
}

/* The items sit in the natural flow of the copy column. Give breathing
   room above (separating from lead/content) and below (separating from
   the CTA). */
.vio-fifty-fifty__copy > .vio-fifty-fifty__items {
	margin-top: var(--wp--preset--spacing--1000, 40px);
	margin-bottom: var(--wp--preset--spacing--1000, 40px);
}

/* Block-level alignment of the items grid itself within the copy column.
   When the intro is centered (and `items` inherits the intro align via
   `vio-fifty-fifty--items-center`), we want the WHOLE grid centered as
   a block — its leftmost edge tucked closer to the lead text above —
   not stretched edge-to-edge with item-1 hugging the column's left wall.
   Use a max-width with auto side margins so the grid stays well within
   the column on wide screens but still grows on narrow ones. */
.vio-fifty-fifty.vio-fifty-fifty--items-left .vio-fifty-fifty__items {
	margin-left: 0;
	margin-right: auto;
}
.vio-fifty-fifty.vio-fifty-fifty--items-center .vio-fifty-fifty__items {
	max-width: min(560px, 100%);
	margin-left: auto;
	margin-right: auto;
}
.vio-fifty-fifty.vio-fifty-fifty--items-right .vio-fifty-fifty__items {
	max-width: min(560px, 100%);
	margin-left: auto;
	margin-right: 0;
}

/* ==========================================================================
   Copy-as-image variant (50/50 Image/Image).
   The copy column is replaced by a second .vio-fifty-fifty__media element.
   Both columns share the same sizing/crop rules at desktop.
   ========================================================================== */
@media (min-width: 1280px) {
	.vio-fifty-fifty--copy-as-image .vio-fifty-fifty__media--copy {
		min-height: 0;
		height: 75vh;
		height: 75dvh;
		max-height: 75dvh;
		width: 100%;
		position: relative;
		overflow: hidden;
		contain: layout paint;
		align-self: center;
		padding: 0;
	}
	.vio-fifty-fifty.vio-fifty-fifty--copy-as-image .vio-fifty-fifty__media--copy picture {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		margin: 0;
	}
	.vio-fifty-fifty.vio-fifty-fifty--copy-as-image .vio-fifty-fifty__media--copy .vio-fifty-fifty__image,
	.vio-fifty-fifty.vio-fifty-fifty--copy-as-image .vio-fifty-fifty__media--copy > img {
		width: 100%;
		height: 100%;
		max-width: none;
		margin: 0;
		object-fit: cover;
		display: block;
	}
}

/* Mobile: both images stack, each gets 4:5 crop. */
@media (max-width: 1279px) {
	.vio-fifty-fifty--copy-as-image .vio-fifty-fifty__media--copy {
		aspect-ratio: 4 / 5;
		overflow: hidden;
		position: relative;
	}
	.vio-fifty-fifty--copy-as-image .vio-fifty-fifty__media--copy .vio-fifty-fifty__image,
	.vio-fifty-fifty--copy-as-image .vio-fifty-fifty__media--copy > img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* ==========================================================================
   Inline CTAs mobile fix (preserved from prior version).
   ========================================================================== */
@media (max-width: 767px) {
	.vio-fifty-fifty__ctas {
		flex-direction: column;
	}
	.vio-fifty-fifty__ctas .vio-btn {
		width: 100%;
	}
}