/* ─────────────────────────────────────────────────────────────────────
   Before / After + Testimonials combo block
   50/50 split, single section.
   ───────────────────────────────────────────────────────────────────── */

/* ── Full-bleed section — escapes the theme's content container ───
   The block lives inside `.wp-block-post-content` which is normally
   clamped to theme.json contentSize. The 100vw + negative margin
   pattern breaks the section out to the full viewport width so the
   50/50 grid actually spans edge-to-edge.

   `!important` on width / max-width is needed to beat the global
   `body:not(.editor-styles-wrapper) .wp-block-post-content
   .vio-section:not(.wp-block-group)` rule in viomedspa-global.css
   which already promotes some vio-sections to 100vw — making it
   explicit here means the rule applies whether or not the block
   sits inside .wp-block-post-content (e.g. the homepage routing). */
.vio-section.vio-bat,
section.vio-section.vio-bat {
	background: var(--wp--preset--color--vio-lotion, #FEFFF9);
	color: var(--wp--preset--color--vio-ink, #030303);
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	box-sizing: border-box;
	/* The inner `.vio-bat__inner` already applies the 50px design
	   padding on every side. Without zeroing the outer .vio-section's
	   default 50px padding (set globally in viomedspa-global.css), the
	   block ends up with 100px of effective padding on each side — the
	   content panel sits inside a doubled gutter. */
	padding: 0 !important;
}

/* `.vio-section__inner` has a global max-width: 1440px cap from
   viomedspa-global.css. Without unsetting it here, the section
   reads full-bleed (bg edge-to-edge) but the GRID inside stays at
   1440px wide and centered — so each column is only ~620px instead
   of ~860px, and the content sits in a too-narrow box that visually
   reads as "shifted toward the gap" relative to the full viewport
   halves. !important to beat the global rule's specificity. */
.vio-bat__inner,
.vio-section.vio-bat .vio-bat__inner,
.vio-section.vio-bat .vio-section__inner.vio-bat__inner {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	/* 50px padding on every side per the design — no fluid clamps. */
	padding: 50px !important;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.vio-bat__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 6vw, 100px);
	align-items: start;
	width: 100%;
}

/* Each column is one half of the grid track. justify-items: center on
   the grid ensures column CONTENT (which doesn't fill the column
   width) sits centered within the column's track. Vertical centering
   is handled by the column's flex below. */
.vio-bat__grid {
	justify-items: center;
}

.vio-bat__col {
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* Vertically center the title + content cluster within the
	   column. align-items: center centers any non-stretched children
	   horizontally inside the flex column. */
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 100%;
}
/* Title spans the column width with text-align center.
   The carousel wrap + testimonials track are CAPPED at their natural
   content width and centered within the column via margin auto —
   that way each half's content sits in the middle of its grid track
   instead of stretched across the full column width. */
.vio-bat__col > .vio-bat__title {
	width: 100%;
	align-self: stretch;
}
/* Content max-widths live with the wrap declarations below now
   (line ~131 / ~270) so the cap survives the source-order battle
   with the layout-specific rules that follow. */

/* ─── Column titles ─────────────────────────────────────────────────
   Each title carries BOTH `.vio-section__title` (required by the
   global `:has()` safelist rule in viomedspa-global.css that hides
   "empty" sections) AND `.vio-bat__title` for our custom Cormorant
   treatment. Chained selector below out-specifies the global rule. */
.vio-section__title.vio-bat__title,
.vio-bat__title {
	margin: 0 0 32px;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 400;
	font-size: clamp(32px, 4vw, 56px);
	line-height: 1.1;
	color: var(--wp--preset--color--vio-ink, #030303);
	text-align: center;
}
/* The design uses period-terminated titles with the last word bold —
   editor wraps that word in <strong> in the input field. */
.vio-bat__title strong,
.vio-bat__title b {
	font-weight: 700;
}

/* ─── Left column: Before / After ────────────────────────────────
   The embedded viomedspa/before-after-global block renders inside
   .vio-bat__ba-wrap. Two layers of fixes:

   1. UNSET inherited section chrome
      The embedded block carries its own .vio-section wrapper. The
      global rule in viomedspa-global.css promotes ANY .vio-section
      inside .wp-block-post-content to width:100vw + negative
      margin. We need to undo that on the embedded section so it
      stays scoped to our column.

   2. SHRINK the carousel's pixel offsets
      The B/A block's CSS uses fixed-px sizes for the active card
      (454px) + peek cards (283px at ±391px / ±697px). Those work
      at full-section widths; in a half-width column the peeks fall
      entirely outside the visible area. Override to smaller values
      so a slight peek (~50px on each side) shows inside the
      column.

   overflow:hidden on the wrap clips any residual bleed at the
   column edges so the peeks don't leak into the testimonials
   column. */
.vio-bat__ba-wrap,
.vio-bat .vio-bat__col .vio-bat__ba-wrap,
.vio-section.vio-bat .vio-bat__col--ba .vio-bat__ba-wrap {
	position: relative !important;
	/* Brute-force the centering — every previous attempt was being
	   silently overridden by a later same-specificity rule. !important
	   + multiple selector chains guarantees this wins regardless of
	   what else lands. Numbers can be tuned without losing the cap. */
	width: 700px !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	overflow: hidden !important;
}

/* Undo the global full-bleed promotion on the embedded section. */
.vio-bat__ba-wrap .vio-section,
.vio-bat__ba-wrap > .vio-section,
body:not(.editor-styles-wrapper) .wp-block-post-content .vio-bat__ba-wrap .vio-section,
body:not(.editor-styles-wrapper) .entry-content .vio-bat__ba-wrap .vio-section {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
.vio-bat__ba-wrap .vio-section__inner {
	padding: 0 !important;
	max-width: none !important;
}

/* The B/A block's render.php now honours `hideTitle: true` (we
   pass it from the combo block's render), so no CSS suppression
   is needed for the inner title. */

/* ── Resize the embedded carousel for the half-width column ────
   Active card 440px, peek 280px (≈63% of active, matching the
   original B/A block's 283/454 ratio). Offset ±410px puts the
   peek's right edge 50px past the active's left edge (=  active
   half 220 + gap 50 + peek half 140 = 410). With a typical 670px
   column that gives ~95px of each peek visible at the edges,
   reading as a clean "slight peek" of the next slides with
   comfortable separation from the active card.

   Track height matches the active card height so the section
   doesn't jitter when the active slide changes.

   Selectors chain `.vio-bat__ba-wrap` to out-specify the B/A
   block's own carousel rules without using !important. */
.vio-bat__ba-wrap .vio-before-after__track {
	height: 440px;
}
.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide {
	width: 440px;
	height: 440px;
}
.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-active {
	width: 440px;
	height: 440px;
}
.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev,
.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next {
	width: 280px;
	height: 280px;
}
.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev {
	transform: translate(calc(-50% - 410px), -50%);
}
.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next {
	transform: translate(calc(-50% + 410px), -50%);
}

/* Push the far peeks well off-screen — they're not needed in the
   compact embedded layout. */
.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev-2,
.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next-2 {
	width: 280px;
	height: 280px;
}
.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev-2 {
	transform: translate(calc(-50% - 700px), -50%);
}
.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next-2 {
	transform: translate(calc(-50% + 700px), -50%);
}

/* Tablet (≤900px) — proportionally smaller. Active 320, peek 200
   (62.5%), offset ±300 (50px gap between active and peek edges). */
@media (max-width: 900px) {
	.vio-bat__ba-wrap .vio-before-after__track {
		height: 320px;
	}
	.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide,
	.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-active {
		width: 320px;
		height: 320px;
	}
	.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev,
	.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next {
		width: 200px;
		height: 200px;
	}
	.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev {
		transform: translate(calc(-50% - 300px), -50%);
	}
	.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next {
		transform: translate(calc(-50% + 300px), -50%);
	}
}

/* ─── Right column: Testimonials vertical auto-scroll ───────────
   The track holds the testimonials twice — CSS animation translates
   it by -50% so the second copy lands exactly where the first
   started, giving a seamless infinite loop. Mask-image fades the
   top + bottom edges so cards entering / leaving the viewport read
   smoothly instead of popping. */
.vio-bat__testimonials,
.vio-bat .vio-bat__col .vio-bat__testimonials,
.vio-section.vio-bat .vio-bat__col--testimonials .vio-bat__testimonials {
	position: relative !important;
	height: clamp(420px, 60vh, 720px);
	overflow: hidden !important;
	/* Same brute-force pattern as .vio-bat__ba-wrap. */
	width: 540px !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 12%,
		#000 88%,
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 12%,
		#000 88%,
		transparent 100%
	);
}

.vio-bat__testimonials-track {
	display: flex;
	flex-direction: column;
	gap: 36px;
	animation: vio-bat-scroll var(--vio-bat-scroll-duration, 30s) linear infinite;
	will-change: transform;
}
.vio-bat__testimonials:hover .vio-bat__testimonials-track,
.vio-bat__testimonials:focus-within .vio-bat__testimonials-track {
	animation-play-state: paused;
}

@keyframes vio-bat-scroll {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.vio-bat__testimonials-track {
		animation: none;
	}
}

/* Individual testimonial card */
.vio-bat__testimonial {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.vio-bat__testimonial-eyebrow {
	margin: 0;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 400;
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1;
	color: #B29D92; /* VIO/Mouse */
}
.vio-bat__testimonial-quote {
	margin: 0;
	font-family: "Nunito", system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	color: var(--wp--preset--color--vio-ink, #030303);
	max-width: 56ch;
}
.vio-bat__testimonial-name {
	margin: 0;
	font-family: "Nunito", system-ui, sans-serif;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--vio-ink, #030303);
}

.vio-bat__empty {
	font-style: italic;
	color: #888;
}

/* Dark section variant */
.vio-section.vio-bat.vio-bg--vio-ink {
	background: var(--wp--preset--color--vio-ink, #141414);
	color: var(--wp--preset--color--vio-lotion, #FEFFF9);
}
.vio-section.vio-bat.vio-bg--vio-ink .vio-bat__title,
.vio-section.vio-bat.vio-bg--vio-ink .vio-bat__testimonial-quote,
.vio-section.vio-bat.vio-bg--vio-ink .vio-bat__testimonial-name {
	color: var(--wp--preset--color--vio-lotion, #FEFFF9);
}

/* ─── Tablet / mobile — stack to single column ───────────────────── */
@media (max-width: 900px) {
	.vio-bat__inner {
		padding: 56px clamp(16px, 5vw, 40px);
	}
	.vio-bat__grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}
	.vio-bat__title {
		margin-bottom: 24px;
	}
	.vio-bat__testimonials {
		height: clamp(360px, 70vh, 560px);
	}
}

@media (max-width: 600px) {
	.vio-bat__inner {
		padding: 40px 16px;
	}
	.vio-bat__testimonial-eyebrow {
		font-size: 28px;
	}
}

/* ─── Phone: full-bleed carousel with visible side peeks ────────────
   On desktop the 50/50 grid needs overflow:hidden on the BA wrap to
   keep peeks from leaking into the testimonials column. On mobile the
   grid stacks, so that constraint can be lifted. Strip the inner side
   padding so the carousel track spans the full viewport, then use
   vw-based sizing so the prev/next slides peek ~18vw on each edge. */
@media (max-width: 767px) {
	/* Kill BOTH padding layers: the global .vio-section 40px AND the
	   .vio-bat__inner 50px so the carousel track is truly 100vw. */
	.vio-section.vio-bat,
	section.vio-section.vio-bat {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.vio-section.vio-bat .vio-bat__inner,
	.vio-section.vio-bat .vio-section__inner.vio-bat__inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Breathing room for everything that ISN'T the carousel. */
	.vio-bat__title {
		padding-left: 24px;
		padding-right: 24px;
	}
	.vio-bat__col--testimonials {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* Lift the desktop overflow clip - stacked layout has no column leak. */
	.vio-bat__ba-wrap,
	.vio-bat .vio-bat__col .vio-bat__ba-wrap,
	.vio-section.vio-bat .vio-bat__col--ba .vio-bat__ba-wrap {
		overflow: visible !important;
		width: 100% !important;
	}
	.vio-bat__col--ba {
		overflow: visible;
	}

	/* vw-based carousel sizing (matches standalone before-after-global
	   mobile rules). With the track at full viewport width, peeks show
	   ~18vw on each screen edge. */
	.vio-bat__ba-wrap .vio-before-after__track {
		height: 58vw;
		min-height: 200px;
		max-height: 420px;
		contain: layout;
	}
	.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide,
	.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-active {
		width: 58vw;
		height: 58vw;
		min-width: 200px;
		min-height: 200px;
		max-width: 420px;
		max-height: 420px;
	}
	.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev,
	.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next {
		width: 52vw;
		height: 52vw;
		min-width: 170px;
		min-height: 170px;
		max-width: 380px;
		max-height: 380px;
		opacity: 1;
	}
	.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev {
		transform: translate(calc(-50% - 58vw), -50%);
	}
	.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next {
		transform: translate(calc(-50% + 58vw), -50%);
	}
	.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-prev-2,
	.vio-bat__ba-wrap .vio-before-after__carousel .vio-before-after__slide.is-next-2 {
		opacity: 0;
		pointer-events: none;
	}

	.vio-bat__ba-wrap .vio-before-after__active-caption {
		padding-left: 24px;
		padding-right: 24px;
	}
	.vio-bat__ba-wrap .vio-before-after__nav {
		padding-left: 24px;
		padding-right: 24px;
	}
}