/* ==========================================================================
   VIC Theme — VIC Grid (.vic-feature-grid)

   A CSS Grid of features (header: VIC Section Header widget). Loaded only on pages that use
   the widget (elementor-widgets/features.php).

     --minimal | --card | --bordered | --divided | --icon-left | --numbered     feature style
     --media-left                                                 icon/image beside the text (any style)
     __item--on-dark                                              one card with light text (own dark bg)
     --hover-{none|lift|border|background|icon|scale}
     --icon-{none|square|rounded|circle}                         icon shape
     [data-vic-reveal]                                            entrance (reveal.js)

   Style-tab controls set the --vic-feature-* variables or style the parts
   directly; empty controls leave the token defaults below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
.vic-feature-grid {
	--vic-feature-columns: 3;
	--vic-feature-col-gap: var(--space-6);        /* 24 → 32 (LG) */
	--vic-feature-row-gap: var(--space-10);       /* 40 → 48 (LG) */
	--vic-feature-align: left;
	--vic-feature-valign: flex-start;
	--vic-feature-media-gap: var(--space-5);
	--vic-feature-icon-size: var(--space-8);      /* 32 */
	--vic-feature-icon-box: auto;
	--vic-feature-image-ratio: 16 / 10;
	--vic-feature-divider-color: var(--color-border);
	--vic-feature-divider-width: 1px;
	--vic-feature-divider-style: solid;
	--vic-feature-motion: var(--motion-default) var(--ease-standard); /* 240ms */
}

@media (min-width: 1024px) {
	.vic-feature-grid {
		--vic-feature-col-gap: var(--space-8);
		--vic-feature-row-gap: var(--space-12);
	}
}

/* --------------------------------------------------------------------------
   3. Grid + feature
   -------------------------------------------------------------------------- */
.vic-feature-grid__items {
	display: grid;
	grid-template-columns: repeat(var(--vic-feature-columns), minmax(0, 1fr));
	gap: var(--vic-feature-row-gap) var(--vic-feature-col-gap);
}

.vic-feature-grid__item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: var(--vic-feature-valign);
	min-width: 0;
	text-align: var(--vic-feature-align);
	transition:
		transform var(--vic-feature-motion),
		border-color var(--vic-feature-motion),
		background-color var(--vic-feature-motion),
		box-shadow var(--vic-feature-motion);
}

.vic-feature-grid__media {
	margin-block-end: var(--vic-feature-media-gap);
	transition: transform var(--vic-feature-motion);
}

.vic-feature-grid__body {
	display: flex;
	flex-direction: column;
	align-items: var(--vic-feature-items, flex-start);
	min-width: 0;
}

.vic-feature-grid__body > * {
	margin: 0;
	max-width: 100%;
}

.vic-feature-grid__title {
	margin-block-end: var(--space-2);
	color: var(--color-heading);
	font-size: var(--text-h5-size);
	font-weight: var(--weight-semibold);
	line-height: var(--text-h5-line);
	overflow-wrap: anywhere;                       /* long product words never overflow */
	transition: color var(--vic-feature-motion);
}

.vic-feature-grid__text {
	font-size: var(--text-body-size);
	line-height: var(--text-body-line);
}

.vic-feature-grid__text:not(:last-child) {
	margin-block-end: var(--space-4);
}

.vic-feature-grid__badge {
	display: inline-block;
	margin-block-end: var(--space-3);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background-color: var(--color-surface-muted);
	color: var(--color-heading);
	font-size: var(--text-caption-size);
	font-weight: var(--weight-semibold);
	line-height: var(--text-caption-line);
}

/* Alignment: centre / right also moves the media and inline parts. */
.vic-feature-grid__item .vic-feature-grid__media {
	display: flex;
	justify-content: var(--vic-feature-justify, flex-start);
}

/* --------------------------------------------------------------------------
   4. Media
   -------------------------------------------------------------------------- */
.vic-feature-grid__icon {
	display: inline-grid;
	place-items: center;
	box-sizing: content-box;
	width: var(--vic-feature-icon-box);
	height: var(--vic-feature-icon-box);
	color: var(--vic-blue);
	font-size: var(--vic-feature-icon-size);
	line-height: 1;
}

.vic-feature-grid__icon :is(svg, i) {
	display: block;
	width: var(--vic-feature-icon-size);
	height: var(--vic-feature-icon-size);
	font-size: var(--vic-feature-icon-size);
}

/* Font icons rendered as SVG and SVGs without their own fill take the icon colour;
   outline SVGs (fill="none", stroke="currentColor") keep their own paint. */
.vic-feature-grid__icon :where(svg:not([fill])) {
	fill: currentColor;
}

.vic-feature-grid__icon img {
	width: var(--vic-feature-icon-size);
	height: auto;
}

/* Shapes: none (default) · square · rounded · circle. */
.vic-feature-grid--icon-square .vic-feature-grid__icon,
.vic-feature-grid--icon-rounded .vic-feature-grid__icon,
.vic-feature-grid--icon-circle .vic-feature-grid__icon {
	--vic-feature-icon-box: calc(var(--vic-feature-icon-size) * 1.75);
	background-color: var(--color-surface-soft);
}

.vic-feature-grid--icon-rounded .vic-feature-grid__icon { border-radius: var(--radius-card); }
.vic-feature-grid--icon-circle .vic-feature-grid__icon  { border-radius: var(--radius-pill); }

.vic-feature-grid__image-wrap {
	width: 100%;
	overflow: hidden;
	border-radius: var(--radius-card);
	aspect-ratio: var(--vic-feature-image-ratio);
	background-color: var(--color-surface-soft);
}

.vic-feature-grid__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vic-feature-grid__number {
	display: block;
	color: var(--vic-blue);
	font-size: var(--text-h4-size);
	font-weight: var(--weight-semibold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   5. Feature styles
   -------------------------------------------------------------------------- */

/* Card: a light surface; padding / radius / border from tokens. */
.vic-feature-grid--card .vic-feature-grid__item {
	padding: var(--card-pad);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background-color: var(--color-background);
}

/* Numbered: a large figure leads each feature. */
.vic-feature-grid--numbered .vic-feature-grid__number {
	font-size: var(--text-h2-size);
	font-weight: var(--weight-bold);
	letter-spacing: var(--text-h2-tracking);
}

.vic-feature-grid--numbered .vic-feature-grid__media {
	padding-block-end: var(--space-4);
	border-block-end: 1px solid var(--color-border);
}

/* Bordered Card: outline only (no fill), so it sits on any section surface.
   The border is a step stronger than the Card's hairline. */
.vic-feature-grid--bordered .vic-feature-grid__item {
	padding: var(--card-pad);
	border: 1px solid color-mix(in srgb, var(--color-border) 70%, var(--color-muted));
	border-radius: var(--radius-card);
	background-color: transparent;
}

:is(.surface-dark, .on-dark) .vic-feature-grid--bordered .vic-feature-grid__item {
	border-color: rgba(255, 255, 255, 0.24);
}

/* Icon Left (style) / Icon Position: Left (any style): [media] beside [title / text]. */
:is(.vic-feature-grid--icon-left, .vic-feature-grid--media-left) .vic-feature-grid__item {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--vic-feature-media-gap);
	text-align: left;
}

:is(.vic-feature-grid--icon-left, .vic-feature-grid--media-left) .vic-feature-grid__media {
	flex: none;
	margin: 0;
}

:is(.vic-feature-grid--icon-left, .vic-feature-grid--media-left) .vic-feature-grid__image-wrap {
	width: calc(var(--vic-feature-icon-size) * 2.5);
}

:is(.vic-feature-grid--icon-left, .vic-feature-grid--media-left) .vic-feature-grid__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* Numbered + left: the figure's underline would sit beside the text — drop it. */
.vic-feature-grid--numbered.vic-feature-grid--media-left .vic-feature-grid__media {
	padding-block-end: 0;
	border-block-end: 0;
}

/* Divided Grid: hairlines between features, never around the outside, for
   any column count. Each feature draws its top + left line; the grid is
   pulled out by one line + half a gap and clipped, so the outermost lines
   fall outside and the first column lines up with the container edge. */
.vic-feature-grid--divided .vic-feature-grid__clip {
	display: flow-root; /* own formatting context: the grid's negative top margin must not collapse through */
	overflow: hidden;
	overflow: clip;
}

.vic-feature-grid--divided .vic-feature-grid__items {
	--vic-feature-pad-x: calc(var(--vic-feature-col-gap) / 2);
	--vic-feature-pad-y: calc(var(--vic-feature-row-gap) / 2);

	gap: 0;
	margin:
		calc((var(--vic-feature-pad-y) + var(--vic-feature-divider-width)) * -1)
		calc((var(--vic-feature-pad-x) + var(--vic-feature-divider-width)) * -1);
}

.vic-feature-grid--divided .vic-feature-grid__item {
	padding: var(--vic-feature-pad-y) var(--vic-feature-pad-x);
	border-block-start: var(--vic-feature-divider-width) var(--vic-feature-divider-style) var(--vic-feature-divider-color);
	border-inline-start: var(--vic-feature-divider-width) var(--vic-feature-divider-style) var(--vic-feature-divider-color);
}

.vic-feature-grid--lines-v .vic-feature-grid__item { border-block-start-color: transparent; }
.vic-feature-grid--lines-h .vic-feature-grid__item { border-inline-start-color: transparent; }

/* Dark sections: soft surfaces stay subtle. */
:is(.surface-dark, .on-dark) .vic-feature-grid {
	--vic-feature-divider-color: rgba(255, 255, 255, 0.16);
}

:is(.surface-dark, .on-dark) .vic-feature-grid:not(.vic-feature-grid--card) :is(.vic-feature-grid__icon, .vic-feature-grid__number) {
	color: var(--vic-orange);
}

:is(.surface-dark, .on-dark) .vic-feature-grid:not(.vic-feature-grid--card) .vic-feature-grid__title {
	color: var(--color-on-dark);
}

/* A card is always a light surface, even inside a dark section. */
.vic-feature-grid--card .vic-feature-grid__item {
	--vic-button-brand: var(--vic-blue);
	--vic-button-brand-dark: var(--vic-blue-dark);
	--color-focus-ring: var(--vic-blue);

	color: var(--color-body);
}

/* One card set to "Light text" (its own dark Card Background). */
.vic-feature-grid .vic-feature-grid__item--on-dark {
	--vic-button-brand: var(--color-on-dark);
	--vic-button-brand-dark: var(--color-surface-muted);
	--vic-button-on-brand: var(--vic-blue);
	--color-focus-ring: var(--color-on-dark);

	color: var(--color-on-dark-muted);
}

.vic-feature-grid .vic-feature-grid__item--on-dark :is(.vic-feature-grid__title, .vic-feature-grid__icon, .vic-feature-grid__number) {
	color: var(--color-on-dark);
}

.vic-feature-grid .vic-feature-grid__item--on-dark .vic-feature-grid__badge {
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--color-on-dark);
}

.vic-feature-grid--bordered .vic-feature-grid__item--on-dark,
.vic-feature-grid--card .vic-feature-grid__item--on-dark {
	border-color: transparent;
}

/* --------------------------------------------------------------------------
   6. Links: title link, CTA, or the whole feature (stretched title link —
      no nested anchors, one tab stop).
   -------------------------------------------------------------------------- */
.vic-feature-grid__link {
	color: inherit;
	text-decoration: none;
}

.vic-feature-grid__link:hover {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.vic-feature-grid__item--clickable {
	cursor: pointer;
}

.vic-feature-grid__item--clickable .vic-feature-grid__link:hover {
	text-decoration: none;
}

.vic-feature-grid__item--clickable .vic-feature-grid__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

@supports selector(:has(*)) {
	.vic-feature-grid__item--clickable .vic-feature-grid__link:focus-visible {
		outline: none;
	}

	.vic-feature-grid__item--clickable:has(.vic-feature-grid__link:focus-visible) {
		outline: var(--focus-ring-width) solid var(--color-focus-ring);
		outline-offset: calc(var(--focus-ring-width) * -1 - 2px); /* inside: never clipped (Divided Grid) */
	}
}

/* --------------------------------------------------------------------------
   7. Hover / focus. Movement on real hover devices only; keyboard focus gets
      the non-moving cue (border, background, arrow).
   -------------------------------------------------------------------------- */
.vic-feature-grid--hover-border:is(.vic-feature-grid--card, .vic-feature-grid--bordered) .vic-feature-grid__item:is(:hover, :focus-within) {
	border-color: var(--vic-blue);
}

.vic-feature-grid--hover-border:not(.vic-feature-grid--card, .vic-feature-grid--bordered) .vic-feature-grid__item:is(:hover, :focus-within) .vic-feature-grid__title {
	color: var(--vic-blue);
}

.vic-feature-grid--hover-background .vic-feature-grid__item:is(:hover, :focus-within) {
	background-color: var(--color-surface-soft);
}

.vic-feature-grid__item:focus-within .vic-feature-grid__cta .icon {
	transform: translateX(var(--space-1));
}

@media (hover: hover) {
	.vic-feature-grid--hover-lift .vic-feature-grid__item:hover {
		transform: translateY(calc(var(--space-1) * -1));            /* −4px */
	}

	.vic-feature-grid--hover-scale .vic-feature-grid__item:hover {
		transform: scale(1.015);
	}

	.vic-feature-grid--hover-icon .vic-feature-grid__item:hover .vic-feature-grid__media {
		transform: translateY(-3px);
	}

	/* Entire item clickable: the CTA follows the item hover. */
	.vic-feature-grid__item--clickable:hover .vic-feature-grid__cta .icon {
		transform: translateX(var(--space-1));
	}

	.vic-feature-grid__item--clickable:hover .vic-feature-grid__cta .vic-button__label::after {
		transform: scaleX(1);
	}
}

/* --------------------------------------------------------------------------
   8. Entrance (once; reveal.js adds .is-armed, then .is-inview)
   -------------------------------------------------------------------------- */
@keyframes vic-feature-fade-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes vic-feature-fade    { from { opacity: 0; } }
@keyframes vic-feature-scale   { from { opacity: 0; transform: scale(0.97); } }
@keyframes vic-feature-failsafe { to { opacity: 1; } }

html.js body:not(.elementor-editor-active) .vic-feature-grid[data-vic-reveal]:not(.is-inview) .vic-feature-grid__item {
	opacity: 0;
}

html.js body:not(.elementor-editor-active) .vic-feature-grid[data-vic-reveal]:not(.is-armed):not(.is-inview) .vic-feature-grid__item {
	animation: vic-feature-failsafe 1ms 2.5s forwards;
}

.vic-feature-grid.is-inview .vic-feature-grid__item {
	animation-duration: 600ms;
	animation-timing-function: var(--ease-standard);
	animation-fill-mode: backwards;
}

.vic-feature-grid.is-inview .vic-feature-grid__item { animation-delay: 100ms; }
.vic-feature-grid.is-inview[data-vic-reveal="stagger"] .vic-feature-grid__item {
	animation-delay: calc(100ms + var(--vic-feature-index, 0) * 80ms); /* feature 1 first, then +80ms each */
}

.vic-feature-grid.is-inview:is([data-vic-reveal="fade-up"], [data-vic-reveal="stagger"]) .vic-feature-grid__item { animation-name: vic-feature-fade-up; }
.vic-feature-grid.is-inview[data-vic-reveal="fade"] .vic-feature-grid__item  { animation-name: vic-feature-fade; }
.vic-feature-grid.is-inview[data-vic-reveal="scale"] .vic-feature-grid__item { animation-name: vic-feature-scale; }

/* --------------------------------------------------------------------------
   9. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.vic-feature-grid :is(.vic-feature-grid__item, .vic-feature-grid__media, .vic-feature-grid__cta .icon) {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}