/* ==========================================================================
   VIC Theme — VIC Media Split (.vic-product-showcase)

   A component placed inside a VIC container (the container provides section
   spacing, width and surface). Options from the Elementor widget
   (elementor-widgets/product-showcase.php) arrive as modifier classes and
   data attributes:

     --image-left | --image-right | --centered     layout
     --split-{50-50|45-55|40-60|55-45|60-40}       content / image share (LG+)
     --gap-{compact|default|wide}                  responsive column gap
     --align-{center|start}                        vertical alignment
     --{content|image}-first                       stacked order
     --heading-{h1|h2|h3}                          heading size
     [data-entrance] [data-media-entrance] [data-media-motion] [data-stagger] [data-duration]

   Values come from tokens.css; component-specific numbers are named
   variables below. Buttons are the VIC button system (buttons.css).
   Motion is progressive: everything is visible without JS, and a CSS
   failsafe reveals the content if the script never arms the widget.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
.vic-product-showcase {
	--vic-product-showcase-gap: var(--space-8);          /* stacked: 32 */
	--vic-product-showcase-check: var(--vic-blue);
	--vic-product-showcase-radius: var(--radius-product);
	--vic-product-showcase-duration: 600ms;
	--vic-product-showcase-stagger: 90ms;
	--vic-product-showcase-media-delay: 120ms;
	--vic-product-showcase-rise: 20px;                    /* Fade Up distance */
	--vic-product-showcase-slide: -24px;                  /* content slides in from its own side */
	--vic-product-showcase-media-slide: 24px;
	--vic-product-showcase-float: 8px;                    /* Subtle Float amplitude */
	--vic-product-showcase-parallax: 16px;                /* Subtle Parallax range */
	--vic-product-showcase-ease: var(--ease-standard);

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vic-product-showcase-gap);
	align-items: center;
}

.vic-product-showcase--gap-compact { --vic-product-showcase-gap: var(--space-6); }
.vic-product-showcase--gap-wide    { --vic-product-showcase-gap: var(--space-10); }

.vic-product-showcase--image-left {
	--vic-product-showcase-slide: 24px;
	--vic-product-showcase-media-slide: -24px;
}

.vic-product-showcase.on-dark,
:is(.surface-dark, .on-dark) .vic-product-showcase {
	--vic-product-showcase-check: var(--vic-orange); /* 7.9:1 on navy */
}

/* --------------------------------------------------------------------------
   2. Columns. Stacked below MD; equal columns on tablet; the chosen split
      from LG. Gaps step with the VIC spacing scale.
   -------------------------------------------------------------------------- */
.vic-product-showcase--image-first .vic-product-showcase__media {
	order: -1;
}

@media (min-width: 768px) {
	.vic-product-showcase                { --vic-product-showcase-gap: var(--space-10); } /* 40 */
	.vic-product-showcase--gap-compact   { --vic-product-showcase-gap: var(--space-8); }  /* 32 */
	.vic-product-showcase--gap-wide      { --vic-product-showcase-gap: var(--space-14); } /* 56 */

	.vic-product-showcase:is(.vic-product-showcase--image-left, .vic-product-showcase--image-right):not(.vic-product-showcase--no-media) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.vic-product-showcase--image-right .vic-product-showcase__media { order: 0; }
	.vic-product-showcase--image-left .vic-product-showcase__media  { order: -1; }

	.vic-product-showcase--align-start { align-items: start; }
}

@media (min-width: 1024px) {
	.vic-product-showcase                { --vic-product-showcase-gap: var(--space-16); } /* 64 */
	.vic-product-showcase--gap-compact   { --vic-product-showcase-gap: var(--space-12); } /* 48 */
	.vic-product-showcase--gap-wide      { --vic-product-showcase-gap: var(--space-24); } /* 96 */

	/* content fr · media fr; Image Left mirrors the columns. */
	.vic-product-showcase--split-45-55 { --vic-product-showcase-cols: minmax(0, 45fr) minmax(0, 55fr); --vic-product-showcase-cols-rev: minmax(0, 55fr) minmax(0, 45fr); }
	.vic-product-showcase--split-40-60 { --vic-product-showcase-cols: minmax(0, 40fr) minmax(0, 60fr); --vic-product-showcase-cols-rev: minmax(0, 60fr) minmax(0, 40fr); }
	.vic-product-showcase--split-55-45 { --vic-product-showcase-cols: minmax(0, 55fr) minmax(0, 45fr); --vic-product-showcase-cols-rev: minmax(0, 45fr) minmax(0, 55fr); }
	.vic-product-showcase--split-60-40 { --vic-product-showcase-cols: minmax(0, 60fr) minmax(0, 40fr); --vic-product-showcase-cols-rev: minmax(0, 40fr) minmax(0, 60fr); }

	/* Same specificity as the tablet rule above, so the split wins from LG. */
	.vic-product-showcase.vic-product-showcase--image-right:not(.vic-product-showcase--no-media) {
		grid-template-columns: var(--vic-product-showcase-cols, minmax(0, 1fr) minmax(0, 1fr));
	}

	.vic-product-showcase.vic-product-showcase--image-left:not(.vic-product-showcase--no-media) {
		grid-template-columns: var(--vic-product-showcase-cols-rev, minmax(0, 1fr) minmax(0, 1fr));
	}
}

@media (min-width: 1440px) {
	.vic-product-showcase                { --vic-product-showcase-gap: var(--space-20); } /* 80 */
	.vic-product-showcase--gap-wide      { --vic-product-showcase-gap: var(--space-28); } /* 112 */
}

/* Centered: one column at every size; content on a readable measure. */
.vic-product-showcase--centered .vic-product-showcase__content {
	width: 100%;
	max-width: var(--measure-body);
	margin-inline: auto;
	text-align: center;
}

.vic-product-showcase--centered .vic-product-showcase__benefits {
	justify-content: center;
}

.vic-product-showcase--centered .vic-product-showcase__benefits:not(.vic-checklist--row) {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.vic-product-showcase--centered .vic-product-showcase__actions {
	justify-content: center;
}

/* --------------------------------------------------------------------------
   3. Content
   -------------------------------------------------------------------------- */
.vic-product-showcase__content {
	min-width: 0;
}

.vic-product-showcase__content > * {
	margin: 0;
}

.vic-product-showcase__eyebrow {
	margin-block-end: var(--gap-eyebrow);
}

.vic-product-showcase__heading {
	font-size: var(--text-h2-size);
	line-height: var(--text-h2-line);
	letter-spacing: var(--text-h2-tracking);
	font-weight: var(--weight-bold);
}

.vic-product-showcase--heading-h1 .vic-product-showcase__heading {
	font-size: var(--text-h1-size);
	line-height: var(--text-h1-line);
	letter-spacing: var(--text-h1-tracking);
}

.vic-product-showcase--heading-h3 .vic-product-showcase__heading {
	font-size: var(--text-h3-size);
	line-height: var(--text-h3-line);
	letter-spacing: var(--text-h3-tracking);
	font-weight: var(--weight-semibold);
}

.vic-product-showcase__description {
	margin-block-start: var(--gap-heading);
	font-size: var(--text-body-lg-size);
	line-height: var(--text-body-lg-line);
}

.vic-product-showcase__description > * {
	margin-block: 0;
}

.vic-product-showcase__description > * + * {
	margin-block-start: var(--gap-paragraph);
}

/* Benefits: the shared checklist component (components.css); spacing + colour here. */
.vic-product-showcase__benefits {
	--vic-checklist-icon: var(--vic-product-showcase-check);

	margin-block-start: var(--space-6);
}

.vic-product-showcase__actions {
	display: flex;
	flex-wrap: wrap;            /* buttons wrap naturally on narrow screens */
	align-items: center;
	gap: var(--gap-buttons) var(--space-6);
	margin-block-start: var(--space-8);
}

/* --------------------------------------------------------------------------
   4. Media
   -------------------------------------------------------------------------- */
.vic-product-showcase__media {
	min-width: 0;
}

.vic-product-showcase--centered .vic-product-showcase__media {
	width: 100%;
	max-width: 60rem; /* 960 — a centred image never fills a wide screen */
	margin-inline: auto;
}

/* No image: keep the text on a readable measure. */
.vic-product-showcase--no-media .vic-product-showcase__content {
	max-width: var(--measure-body);
}

.vic-product-showcase__media--radius-none  { --vic-product-showcase-radius: 0; }
.vic-product-showcase__media--radius-card  { --vic-product-showcase-radius: var(--radius-card); }
.vic-product-showcase__media--radius-panel { --vic-product-showcase-radius: var(--radius-panel); }

.vic-product-showcase__frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--vic-product-showcase-radius);
}

.vic-product-showcase__media--bordered .vic-product-showcase__frame {
	border: 1px solid var(--color-border);
}

.vic-product-showcase__media--panel .vic-product-showcase__frame {
	padding: var(--space-3);
	background-color: var(--color-surface-soft);
}

.vic-product-showcase__media--panel .vic-product-showcase__image {
	border-radius: max(0px, calc(var(--vic-product-showcase-radius) - var(--space-2)));
}

:is(.surface-dark, .on-dark) .vic-product-showcase__media--bordered .vic-product-showcase__frame,
.vic-product-showcase.on-dark .vic-product-showcase__media--bordered .vic-product-showcase__frame {
	border-color: rgba(255, 255, 255, 0.14);
}

:is(.surface-dark, .on-dark) .vic-product-showcase__media--panel .vic-product-showcase__frame,
.vic-product-showcase.on-dark .vic-product-showcase__media--panel .vic-product-showcase__frame {
	background-color: rgba(255, 255, 255, 0.06);
}

.vic-product-showcase__media--shadow .vic-product-showcase__frame {
	box-shadow: var(--shadow-soft);
}

.vic-product-showcase__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* Fixed ratio: reserve the box, cover it, keep the screenshot's top-left. */
.vic-product-showcase__media--ratio-16x10 .vic-product-showcase__frame { aspect-ratio: 16 / 10; }
.vic-product-showcase__media--ratio-16x9  .vic-product-showcase__frame { aspect-ratio: 16 / 9; }
.vic-product-showcase__media--ratio-4x3   .vic-product-showcase__frame { aspect-ratio: 4 / 3; }
.vic-product-showcase__media--ratio-1x1   .vic-product-showcase__frame { aspect-ratio: 1 / 1; }

.vic-product-showcase__media:not(.vic-product-showcase__media--ratio-auto) .vic-product-showcase__image {
	height: 100%;
	object-fit: cover;
	object-position: left top;
}

/* --------------------------------------------------------------------------
   5. Image motion (continuous / interactive). Transforms only, on separate
      layers from the entrance: .media (entrance) › .motion (float/parallax)
      › .frame (hover lift).
   -------------------------------------------------------------------------- */
@keyframes vic-product-showcase-float {
	50% { transform: translateY(calc(var(--vic-product-showcase-float) * -1)); }
}

/* Float runs only while the widget is on screen (.is-visible from JS). */
.vic-product-showcase[data-media-motion="float"] .vic-product-showcase__motion {
	animation: vic-product-showcase-float 7s ease-in-out infinite;
	animation-play-state: paused;
}

.vic-product-showcase[data-media-motion="float"].is-visible .vic-product-showcase__motion {
	animation-play-state: running;
}

.vic-product-showcase[data-media-motion="parallax"] .vic-product-showcase__motion {
	transform: translate3d(0, calc(var(--vic-product-showcase-progress, 0) * var(--vic-product-showcase-parallax) * -1), 0);
}

@media (hover: hover) {
	.vic-product-showcase[data-media-motion="lift"] .vic-product-showcase__frame {
		transition:
			transform var(--motion-default) var(--ease-standard),
			box-shadow var(--motion-default) var(--ease-standard);
	}

	.vic-product-showcase[data-media-motion="lift"] .vic-product-showcase__media:hover .vic-product-showcase__frame {
		transform: translateY(calc(var(--space-1) * -1));
		box-shadow: var(--shadow-hover);
	}
}

/* --------------------------------------------------------------------------
   6. Entrance (once, when the widget enters the viewport)

     html.js … :not(.is-inview)   → start state
     .is-inview                    → keyframes; fill-mode "backwards" holds the
                                     start state during the delay, then leaves
                                     the element in its natural state.
   Editor preview (body.elementor-editor-active) shows the final state.
   -------------------------------------------------------------------------- */
.vic-product-showcase[data-duration="fast"] { --vic-product-showcase-duration: 450ms; --vic-product-showcase-stagger: 70ms; }
.vic-product-showcase[data-duration="slow"] { --vic-product-showcase-duration: 800ms; --vic-product-showcase-stagger: 110ms; }

@keyframes vic-product-showcase-fade-up { from { opacity: 0; transform: translateY(var(--vic-product-showcase-rise)); } }
@keyframes vic-product-showcase-reveal  { from { clip-path: inset(0 0 100% 0); transform: translateY(12px); } to { clip-path: inset(-10% -5% -20% -5%); } }
@keyframes vic-product-showcase-slide   { from { opacity: 0; transform: translateX(var(--vic-product-showcase-slide)); } }
@keyframes vic-product-showcase-slide-media { from { opacity: 0; transform: translateX(var(--vic-product-showcase-media-slide)); } }
@keyframes vic-product-showcase-scale   { from { opacity: 0; transform: scale(0.97); } }
@keyframes vic-product-showcase-wipe    { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes vic-product-showcase-wipe-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes vic-product-showcase-zoom-out { from { transform: scale(1.06); } }
@keyframes vic-product-showcase-failsafe { to { opacity: 1; transform: none; clip-path: none; } }

/* Start states. */
html.js body:not(.elementor-editor-active) .vic-product-showcase:not(.is-inview):not([data-entrance="none"]) .vic-product-showcase__item,
html.js body:not(.elementor-editor-active) .vic-product-showcase:not(.is-inview):not([data-media-entrance="none"]) .vic-product-showcase__media {
	opacity: 0;
}

/* Failsafe: if the script never arms the widget, show everything after 2.5s. */
html.js body:not(.elementor-editor-active) .vic-product-showcase:not(.is-armed):not(.is-inview) :is(.vic-product-showcase__item, .vic-product-showcase__media) {
	animation: vic-product-showcase-failsafe 1ms 2.5s forwards;
}

/* Content. */
.vic-product-showcase.is-inview .vic-product-showcase__item {
	animation-duration: var(--vic-product-showcase-duration);
	animation-timing-function: var(--vic-product-showcase-ease);
	animation-fill-mode: backwards;
	animation-delay: calc(var(--vic-product-showcase-step, 0) * var(--vic-product-showcase-stagger));
}

.vic-product-showcase.is-inview[data-stagger="off"] .vic-product-showcase__item { animation-delay: 0ms; }

.vic-product-showcase.is-inview[data-entrance="fade-up"] .vic-product-showcase__item { animation-name: vic-product-showcase-fade-up; }
.vic-product-showcase.is-inview[data-entrance="reveal"] .vic-product-showcase__item  { animation-name: vic-product-showcase-reveal; }
.vic-product-showcase.is-inview[data-entrance="slide"] .vic-product-showcase__item   { animation-name: vic-product-showcase-slide; }
.vic-product-showcase.is-inview[data-entrance="scale"] .vic-product-showcase__item   { animation-name: vic-product-showcase-scale; }

/* Media. */
.vic-product-showcase.is-inview .vic-product-showcase__media {
	animation-duration: calc(var(--vic-product-showcase-duration) + 100ms);
	animation-timing-function: var(--vic-product-showcase-ease);
	animation-fill-mode: backwards;
	animation-delay: var(--vic-product-showcase-media-delay);
}

.vic-product-showcase.is-inview[data-media-entrance="fade-up"] .vic-product-showcase__media { animation-name: vic-product-showcase-fade-up; }
.vic-product-showcase.is-inview[data-media-entrance="reveal"] .vic-product-showcase__media  { animation-name: vic-product-showcase-reveal; }
.vic-product-showcase.is-inview[data-media-entrance="slide"] .vic-product-showcase__media   { animation-name: vic-product-showcase-slide-media; }
.vic-product-showcase.is-inview[data-media-entrance="scale"] .vic-product-showcase__media   { animation-name: vic-product-showcase-scale; }

/* Image Reveal: a wipe from the content side + the image settling from 1.06. */
.vic-product-showcase.is-inview[data-media-entrance="image-reveal"] .vic-product-showcase__media {
	animation-name: vic-product-showcase-wipe;
	animation-duration: calc(var(--vic-product-showcase-duration) + 300ms);
}

.vic-product-showcase--image-left.is-inview[data-media-entrance="image-reveal"] .vic-product-showcase__media {
	animation-name: vic-product-showcase-wipe-rtl;
}

.vic-product-showcase.is-inview[data-media-entrance="image-reveal"] .vic-product-showcase__image {
	animation: vic-product-showcase-zoom-out calc(var(--vic-product-showcase-duration) + 500ms) var(--vic-product-showcase-ease) var(--vic-product-showcase-media-delay) backwards;
}

/* --------------------------------------------------------------------------
   7. Reduced motion: no entrance, float, parallax or lift — content as is.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.vic-product-showcase :is(.vic-product-showcase__item, .vic-product-showcase__media, .vic-product-showcase__image, .vic-product-showcase__motion, .vic-product-showcase__frame) {
		opacity: 1 !important;
		clip-path: none !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}