/**
 * Media CTA — full-bleed image + 9-position content anchor + gradient overlay.
 *
 * Strategy:
 *   - The full-bleed escape lives on `.vio-media-cta__innerLayout` (NOT the
 *     section). This bypasses any width/grid/padding constraints the
 *     `vio_render_section_shell` wrappers (`__inner` → `__content` →
 *     `__body`) impose on their children — the innerLayout breaks out to
 *     `100vw` regardless of how narrow its grandparents are.
 *   - The image (`.vio-media-cta__media`, position: absolute, inset: 0
 *     via global rule) fills the innerLayout.
 *   - The content stack (`.vio-section__inner.vio-media-cta__inner`) is
 *     also absolutely positioned and anchored to one of 9 edges.
 *   - The `::after` gradient on the image inherits the same direction.
 */

/* ── FULL-BLEED: kill the 100px section padding from the global
   `.vio-section` rule, break out of the constrained-layout column
   via 100vw + negative-margin, and pin position:relative so the
   absolute children anchor against the section box. */
section.vio-section.vio-media-cta:not(.vio-treatment-hero),
.vio-section.vio-media-cta:not(.vio-treatment-hero),
section.vio-section.vio-media-cta.vio-hero-overlap:not(.vio-treatment-hero) {
	box-sizing: border-box !important;
	width: 100vw !important;
	max-width: 100vw !important;
	min-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding: 0 !important;
	display: block !important;
	position: relative !important;
	overflow: hidden !important;
	min-height: min(70vh, 800px);
	max-height: 100vh;
	max-height: 100dvh;
}
.vio-section.vio-media-cta:not(.vio-treatment-hero) > .vio-section__inner,
.vio-section.vio-media-cta:not(.vio-treatment-hero) > .vio-section__inner > .vio-section__content,
.vio-section.vio-media-cta:not(.vio-treatment-hero) > .vio-section__inner > .vio-section__content > .vio-section__body {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	height: 100% !important;
	min-height: inherit;
	overflow: visible !important;
	grid-template-columns: none !important;
}

.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__innerLayout {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: min(70vh, 800px);
	z-index: 2;
}

/* ── IMAGE FULL-BLEED — neutralize ALL `isContained` framing ───────
   Global (viomedspa-global.css:2343-2347) sets on `.isContained`:
     padding: 50px; max-width: wide-size (~1440px); margin: 0 auto;
   And `.isContained::before { margin: 50px }`. Strip every one. */
.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media.isContained {
	position: absolute !important;
	inset: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	max-height: none !important;
	left: 0 !important;
	right: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
}
.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media::before,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media.isContained::before {
	margin: 0 !important;
	padding: 0 !important;
	inset: 0 !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
}
/* The picture / img / video inside must also fill the box without
   honoring the global's `object-fit: contain` toggle. */
.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media picture,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media .vio-media-cta__image,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media .vio-media-cta__video,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media img,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__media video {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Horizontal mirror — flips the rendered image left-to-right.
   Apply to the <img> only (NOT the <picture> parent too, or the two
   scaleX(-1)s compose to identity and you get the original orientation). */
.vio-media-cta__media .vio-media-cta__image.is-mirrored {
	transform: scaleX(-1);
}

/* ── GRADIENT OVERLAY — dark scrim radiating from content anchor ────
   The gradient uses a radial/linear approach: a linear gradient coming
   from the anchor edge so text over the image is readable. Three
   intensities: light (0.3), medium (0.55), heavy (0.8).

   The ::after sits on .vio-media-cta__innerLayout which already carries
   the anchor class (vio-media-cta--anchor-{pos}). We combine the
   gradient modifier with the anchor to pick the direction. */

/* Base ::after setup for all gradient variants */
.vio-media-cta__innerLayout[class*="vio-media-cta--gradient-"]::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* ── Opacity by intensity ────────────────────────────────────────── */
/* Light */
.vio-media-cta--gradient-light::after  { --vio-grad-end: 0.45; }
/* Medium */
.vio-media-cta--gradient-medium::after { --vio-grad-end: 0.7; }
/* Heavy */
.vio-media-cta--gradient-heavy::after  { --vio-grad-end: 0.9; }

/* ── Direction by anchor ─────────────────────────────────────────── */
/* Bottom anchors: gradient from bottom */
.vio-media-cta--anchor-bottom-left[class*="--gradient-"]::after,
.vio-media-cta--anchor-bottom-center[class*="--gradient-"]::after,
.vio-media-cta--anchor-bottom-right[class*="--gradient-"]::after {
	background: linear-gradient(to top, rgba(3,3,3,var(--vio-grad-end)) 0%, transparent 70%);
}
/* Top anchors: gradient from top */
.vio-media-cta--anchor-top-left[class*="--gradient-"]::after,
.vio-media-cta--anchor-top-center[class*="--gradient-"]::after,
.vio-media-cta--anchor-top-right[class*="--gradient-"]::after {
	background: linear-gradient(to bottom, rgba(3,3,3,var(--vio-grad-end)) 0%, transparent 70%);
}
/* Middle-left: gradient from left */
.vio-media-cta--anchor-middle-left[class*="--gradient-"]::after {
	background: linear-gradient(to right, rgba(3,3,3,var(--vio-grad-end)) 0%, transparent 70%);
}
/* Middle-right: gradient from right */
.vio-media-cta--anchor-middle-right[class*="--gradient-"]::after {
	background: linear-gradient(to left, rgba(3,3,3,var(--vio-grad-end)) 0%, transparent 70%);
}
/* Middle-center: radial vignette */
.vio-media-cta--anchor-middle-center[class*="--gradient-"]::after {
	background: radial-gradient(ellipse at center, rgba(3,3,3,var(--vio-grad-end)) 0%, transparent 70%);
}

/* ── TITLE IMAGE — stretch to fill the content area width ──────────
   The base `.vio-section__title-image` rule only sets `max-width:100%`,
   so the image renders at its natural size. Inside the media-cta
   content stack (capped at 640px / 80vw) we want it to span edge to
   edge for large wordmarks like the ClubVIO lockup. */
.vio-section.vio-media-cta .vio-section__title-image {
	width: 100%;
	height: auto;
}

/* ── CONTENT STACK — anchored to one of 9 edges/corners ─────────────
   The global rule at viomedspa-global.css:2475 forces
   `.vio-media-cta .vio-section__inner { display:grid; align-items:center;
   height:100% }` — that makes the content stack fill the full innerLayout
   and vertically-center its children regardless of our `bottom: 0`
   anchor. Override aggressively so the stack hugs its anchor edge. */
.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-section__inner.vio-media-cta__inner {
	position: absolute !important;
	display: block !important;
	height: auto !important;
	width: auto !important;
	max-width: min(640px, 80vw) !important;
	padding: 50px !important;
	margin: 0 !important;
	align-items: initial !important;
	justify-items: initial !important;
	z-index: 3;
}
.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-media-cta__inner > .vio-section__content {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	justify-self: stretch !important;
	margin: 0 !important;
}
/* Force text alignment to match the contentAlign class — global only
   sets `justify-self` (grid placement) which has no effect now that
   the inner is `display: block`. Also override the intro's own
   `vio-section__intro--center/left/right` alignment (which controls
   the CTA wrapper's flex-justify) so the CTA button anchors to the
   same edge as the title rather than honoring `introAlign`. */
.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentLeft,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentLeft *,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentLeft .vio-section__content,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentLeft .vio-section__intro,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentLeft .vio-section__cta {
	text-align: left !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	justify-self: start !important;
	align-self: start !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}
.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentCenter,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentCenter *,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentCenter .vio-section__content,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentCenter .vio-section__intro,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentCenter .vio-section__cta {
	text-align: center !important;
	justify-content: center !important;
	align-items: center !important;
	justify-self: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentRight,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentRight *,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentRight .vio-section__content,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentRight .vio-section__intro,
.vio-section.vio-media-cta:not(.vio-treatment-hero) .contentRight .vio-section__cta {
	text-align: right !important;
	justify-content: flex-end !important;
	align-items: flex-end !important;
	justify-self: end !important;
	align-self: end !important;
	margin-left: auto !important;
	margin-right: 0 !important;
}

/* Vertical anchoring */
.vio-media-cta--anchor-top-left > .vio-media-cta__inner,
.vio-media-cta--anchor-top-center > .vio-media-cta__inner,
.vio-media-cta--anchor-top-right > .vio-media-cta__inner   { top: 0; }

.vio-media-cta--anchor-middle-left > .vio-media-cta__inner,
.vio-media-cta--anchor-middle-center > .vio-media-cta__inner,
.vio-media-cta--anchor-middle-right > .vio-media-cta__inner {
	top: 50%;
	transform: translateY(-50%);
}

.vio-media-cta--anchor-bottom-left > .vio-media-cta__inner,
.vio-media-cta--anchor-bottom-center > .vio-media-cta__inner,
.vio-media-cta--anchor-bottom-right > .vio-media-cta__inner { bottom: 0; }

/* Horizontal anchoring */
.vio-media-cta--anchor-top-left > .vio-media-cta__inner,
.vio-media-cta--anchor-middle-left > .vio-media-cta__inner,
.vio-media-cta--anchor-bottom-left > .vio-media-cta__inner { left: 0; right: auto; text-align: left; }

.vio-media-cta--anchor-top-center > .vio-media-cta__inner,
.vio-media-cta--anchor-middle-center > .vio-media-cta__inner,
.vio-media-cta--anchor-bottom-center > .vio-media-cta__inner {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	text-align: center;
}
.vio-media-cta--anchor-middle-center > .vio-media-cta__inner {
	transform: translate(-50%, -50%);
}

.vio-media-cta--anchor-top-right > .vio-media-cta__inner,
.vio-media-cta--anchor-middle-right > .vio-media-cta__inner,
.vio-media-cta--anchor-bottom-right > .vio-media-cta__inner { right: 0; left: auto; text-align: right; }

/* ── SECONDARY INNER — self-anchor ──────────────────────────────────
   The block can optionally render a second .vio-media-cta__inner with
   its OWN anchor independent of the primary's parent-level anchor
   class (`vio-media-cta--anchor-*` on .vio-media-cta__innerLayout).
   Because the parent-anchor selector matches ALL direct .vio-media-cta__inner
   children (including the secondary), the secondary needs higher-specificity
   self-anchor rules that overwrite top/bottom/left/right/transform/text-align
   to its own anchor. The doubled-class selector below (specificity 0,3,0)
   beats the parent-anchor rule (0,2,0). */

/* Vertical */
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-left,
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-center,
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-right    { top: 0; bottom: auto; }

.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-left,
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-center,
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-right { top: 50%; bottom: auto; }

.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-left,
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-center,
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-right { top: auto; bottom: 0; }

/* Horizontal + text-align */
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-left,
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-left,
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-left  { left: 0; right: auto; text-align: left; }

.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-center,
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-center,
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-center { left: 50%; right: auto; text-align: center; }

.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-right,
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-right,
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-right { right: 0; left: auto; text-align: right; }

/* Transforms (only the centers need translate to be visually centered;
   the corner anchors reset to none so the primary's translate doesn't
   bleed into the secondary). */
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-left,
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-right,
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-left,
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-right { transform: none; }

.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-top-center,
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-bottom-center { transform: translateX(-50%); }

.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-left,
.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-right  { transform: translateY(-50%); }

.vio-media-cta__inner--secondary.vio-media-cta__inner--anchor-middle-center { transform: translate(-50%, -50%); }

/* ── GRADIENT — directional fade overlay over the image ─────────────
   Color is driven by `--vio-mediacta-gradient-rgb` (three comma-
   separated RGB ints) so the same anchor rules work for both dark and
   light text schemes:
     - Default = black (0,0,0) → dark text would be unreadable on white
       backgrounds, so this scrim darkens the image behind LIGHT text.
     - `.vio-section--text-dark` flips it to lotion (254,255,249) → the
       scrim now LIGHTENS the image behind DARK text, preserving
       contrast.
   The scope class on .vio-section--text-dark below cascades into the
   ::after pseudo because custom properties inherit. */
.vio-media-cta .vio-media-cta__media::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	--vio-mediacta-gradient-rgb: 0, 0, 0;
}

.vio-section.vio-section--text-dark .vio-media-cta__media::after {
	--vio-mediacta-gradient-rgb: 254, 255, 249; /* vio-lotion */
}

.vio-media-cta--anchor-top-left .vio-media-cta__media::after {
	background: linear-gradient(to bottom right, rgba(var(--vio-mediacta-gradient-rgb), 0.65) 0%, rgba(var(--vio-mediacta-gradient-rgb), 0.20) 45%, rgba(var(--vio-mediacta-gradient-rgb), 0) 75%);
}
.vio-media-cta--anchor-top-center .vio-media-cta__media::after {
	background: linear-gradient(to bottom, rgba(var(--vio-mediacta-gradient-rgb), 0.65) 0%, rgba(var(--vio-mediacta-gradient-rgb), 0.20) 45%, rgba(var(--vio-mediacta-gradient-rgb), 0) 75%);
}
.vio-media-cta--anchor-top-right .vio-media-cta__media::after {
	background: linear-gradient(to bottom left, rgba(var(--vio-mediacta-gradient-rgb), 0.65) 0%, rgba(var(--vio-mediacta-gradient-rgb), 0.20) 45%, rgba(var(--vio-mediacta-gradient-rgb), 0) 75%);
}
.vio-media-cta--anchor-middle-left .vio-media-cta__media::after {
	background: linear-gradient(to right, rgba(var(--vio-mediacta-gradient-rgb), 0.65) 0%, rgba(var(--vio-mediacta-gradient-rgb), 0.20) 45%, rgba(var(--vio-mediacta-gradient-rgb), 0) 75%);
}
.vio-media-cta--anchor-middle-center .vio-media-cta__media::after {
	background: radial-gradient(circle at center, rgba(var(--vio-mediacta-gradient-rgb), 0.55) 0%, rgba(var(--vio-mediacta-gradient-rgb), 0.15) 55%, rgba(var(--vio-mediacta-gradient-rgb), 0) 85%);
}
.vio-media-cta--anchor-middle-right .vio-media-cta__media::after {
	background: linear-gradient(to left, rgba(var(--vio-mediacta-gradient-rgb), 0.65) 0%, rgba(var(--vio-mediacta-gradient-rgb), 0.20) 45%, rgba(var(--vio-mediacta-gradient-rgb), 0) 75%);
}
.vio-media-cta--anchor-bottom-left .vio-media-cta__media::after {
	background: linear-gradient(to top right, rgba(var(--vio-mediacta-gradient-rgb), 0.85) 0%, rgba(var(--vio-mediacta-gradient-rgb), 0.55) 30%, rgba(var(--vio-mediacta-gradient-rgb), 0.25) 55%, rgba(var(--vio-mediacta-gradient-rgb), 0) 85%);
}
.vio-media-cta--anchor-bottom-center .vio-media-cta__media::after {
	background: linear-gradient(to top, rgba(var(--vio-mediacta-gradient-rgb), 0.65) 0%, rgba(var(--vio-mediacta-gradient-rgb), 0.20) 45%, rgba(var(--vio-mediacta-gradient-rgb), 0) 75%);
}
.vio-media-cta--anchor-bottom-right .vio-media-cta__media::after {
	background: linear-gradient(to top left, rgba(var(--vio-mediacta-gradient-rgb), 0.65) 0%, rgba(var(--vio-mediacta-gradient-rgb), 0.20) 45%, rgba(var(--vio-mediacta-gradient-rgb), 0) 75%);
}

.vio-media-cta.vio-media-cta--no-gradient .vio-media-cta__media::after {
	display: none;
}

/* ── MOBILE — push content below sticky header ───────────────────────
   The sticky nav height is tracked in --vio-fixed-top (defaults ~96px).
   On smaller screens the 50px padding is not enough to clear it, so
   we bump the top padding to account for the header plus breathing room. */
@media (max-width: 1023px) {
	.vio-section.vio-media-cta:not(.vio-treatment-hero) .vio-section__inner.vio-media-cta__inner {
		padding-top: calc(var(--vio-fixed-top, 96px) + 24px) !important;
	}
}