/**
 * Finewerk Feature Grid
 *
 * Scoped, BEM-style styles for the feature card grid widget: a big
 * centered heading (with an italic-serif <em> accent) above a responsive
 * grid of white, rounded, softly-shadowed feature cards (icon, title,
 * description). All custom properties are namespaced with --fw-fg- to avoid
 * collisions.
 *
 * Hover is split in two. The geometry (a fast, reserved-in-advance widen) and
 * the content micro-vibration are pure CSS on `:hover`. The hovered card's
 * surface is not: it comes from the site-wide `fw-bg-gradient`
 * utilities, which feature-grid.js adds on pointer enter and removes on leave,
 * because a utility class cannot be applied by a CSS state alone. This file
 * never paints that gradient or that grain itself — see "Hovered card
 * surface" below.
 */

/* ------------------------------------------------------------------
 * Typography defaults (see assets/css/fonts.css)
 *
 * Hubot Sans for headings/titles/stat numbers, Archivo for everything
 * else. Declared at single-class specificity — the tag group through a
 * zero-specificity :where() — so an explicit Elementor Typography
 * control (which Elementor writes at element-id specificity) always
 * overrides it. No !important anywhere.
 * ---------------------------------------------------------------- */

.finewerk-feature-grid {
	font-family: var(--fw-font-body);
}

.finewerk-feature-grid :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--fw-font-title);
}

/* Form controls do not inherit the document font: the UA sheet gives
   button/input/select/textarea their own `font: 400 13.33px Arial`.
   Opt them back into the component's face. */
.finewerk-feature-grid :where(button, input, select, textarea, optgroup) {
	font-family: inherit;
}

.finewerk-feature-grid {
	--fw-fg-columns: 3;
	--fw-fg-gap: 24px;
	--fw-fg-heading-gap: 48px;
	--fw-fg-icon-size: 26px;
	--fw-fg-icon-gap: 22px;
	--fw-fg-hover-grow: 8px;
	--fw-fg-hover-duration: 120ms;
	--fw-fg-hover-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--fw-fg-hover-surface: #123F3A;
	--fw-fg-hover-color: #FFFFFF;
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 56px 0 64px;
	background-color: #FFFFFF;
}

/* ---------- Heading ---------- */

.finewerk-feature-grid__heading {
	margin: 0 auto var(--fw-fg-heading-gap);
	max-width: 720px;
	color: #0F0F10;
	font-family: var(--fw-font-title);
	font-size: clamp(32px, 5vw, 52px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-align: center;
}

/* Accent word(s): the title face set in italic, as in the reference "nothing". */
.finewerk-feature-grid__heading em,
.finewerk-feature-grid__heading i {
	font-family: var(--fw-font-title);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
}

/* ---------- Grid ---------- */

.finewerk-feature-grid__grid {
	display: grid;
	grid-template-columns: repeat(var(--fw-fg-columns), minmax(0, 1fr));
	gap: var(--fw-fg-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Card ---------- */

.finewerk-feature-grid__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 26px;
	background-color: #FFFFFF;
	border-radius: 14px;
	box-shadow: 0 18px 30px -18px rgba(15, 23, 42, 0.35);
	text-align: left;
}

/* ---------- Icon ---------- */

.finewerk-feature-grid__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--fw-fg-icon-gap);
	color: #0F0F10;
	font-size: var(--fw-fg-icon-size);
	line-height: 1;
}

.finewerk-feature-grid__icon svg {
	display: block;
	width: var(--fw-fg-icon-size);
	height: var(--fw-fg-icon-size);
	fill: currentColor;
}

/* ---------- Title ---------- */

.finewerk-feature-grid__title {
	margin: 0 0 6px;
	color: #0F0F10;
	font-family: var(--fw-font-title);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

/* ---------- Description ---------- */

.finewerk-feature-grid__description {
	margin: 0;
	color: #8A8F98;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

/* ---------- Card hover ---------- */

/*
 * GEOMETRY — the growth is reserved up front rather than added on the fly:
 * every card sits inset by half the growth inside its grid track and the grid
 * gap is shrunk by that same amount. On hover the card drops its inset and
 * fills its track, gaining exactly --fw-fg-hover-grow without shifting its
 * neighbours, resizing the grid or spilling past the section — so no reflow
 * and no horizontal overflow, even for the last card in a row.
 *
 * At rest the visible gutter between cards is unchanged (16px gap + 2 x 4px
 * inset = the original 24px); the only drift is each card being a couple of
 * pixels narrower and the row sitting 4px inside the section edges, which is
 * the price of never letting a hovered card escape its own container.
 *
 * TIMING — the widen is deliberately snappy: 120ms on an ease-out curve that
 * spends most of its travel in the first frames, so the card is essentially
 * at full width the moment the pointer lands and only the last sliver of the
 * movement eases. Still a transition, never a jump.
 *
 * Gated behind `hover: hover` so touch devices keep the layout untouched;
 * feature-grid.js applies the same gate before it touches any class.
 */
@media (hover: hover) {
	.finewerk-feature-grid__grid {
		gap: max(0px, calc(var(--fw-fg-gap) - var(--fw-fg-hover-grow)));
	}

	.finewerk-feature-grid__card {
		margin-inline: calc(var(--fw-fg-hover-grow) / 2);
		transition:
			margin var(--fw-fg-hover-duration) var(--fw-fg-hover-ease),
			background-color var(--fw-fg-hover-duration) var(--fw-fg-hover-ease);
	}

	/* `:hover` keeps the widen working with JavaScript disabled; the class is
	   what feature-grid.js sets, and both mean exactly the same state. */
	.finewerk-feature-grid__card:hover,
	.finewerk-feature-grid__card.is-fw-fg-hovered {
		margin-inline: 0;
	}

	/*
	 * Micro-vibration on the card's own children (icon, title, description) so
	 * the movement stays inside the card and never nudges the grid. Sub-pixel
	 * amplitude keeps the text perfectly readable; the transition lets the
	 * content ease back to rest the moment the animation is removed.
	 *
	 * Every descendant, not just the direct children, and the paint properties
	 * ride along here: this is the SINGLE place a card descendant gets a
	 * `transition`, so the shorthand can never be reset by a second rule of
	 * equal weight further down the file. That matters because `.card > *` and
	 * `.card *` are both one class plus a universal — identical specificity —
	 * so two separate rules would be settled by source order alone, and
	 * whichever lost would silently drop its half of the animation. Deep nodes
	 * (a <strong> or a <span> inside the description, an <svg> shape) need the
	 * colour crossfade just as much as the direct children do.
	 */
	.finewerk-feature-grid__card * {
		transition:
			transform 220ms ease-out,
			color var(--fw-fg-hover-duration) var(--fw-fg-hover-ease),
			fill var(--fw-fg-hover-duration) var(--fw-fg-hover-ease),
			stroke var(--fw-fg-hover-duration) var(--fw-fg-hover-ease);
	}

	.finewerk-feature-grid__card:hover > *,
	.finewerk-feature-grid__card.is-fw-fg-hovered > * {
		animation: fw-fg-content-vibrate 1.6s ease-in-out infinite;
	}
}

/* ---------- Hovered card surface ---------- */

/*
 * While hovered, the card wears the site-wide `fw-bg-gradient` utility, added
 * and removed by feature-grid.js (the same contract the FAQ item follows).
 * The theme owns that gradient and that grain: nothing below paints either
 * one, it only gets out of their way and recolours the content.
 *
 * The one background declaration here is a FLAT fallback, not a gradient: the
 * card's resting surface is white, so if it stayed white for even a frame — or
 * on a build where the theme utilities are not loaded at all — the white copy
 * below would be invisible. `#123F3A` is the same deep green the FAQ and the
 * CTA fall back to, and the real gradient paints straight over it.
 *
 * The doubled utility class is deliberate: Elementor's own Card colour control
 * compiles to a three-class selector and is emitted after this file, so
 * anything less would lose the hover surface to the resting colour set in the
 * editor. It is a `background-color` longhand, so it sits UNDER the utility's
 * gradient image rather than replacing it.
 */
.finewerk-feature-grid__card.fw-bg-gradient.fw-bg-gradient {
	background-color: var(--fw-fg-hover-surface);
}

/*
 * ALL card copy turns white — the card itself and every descendant, so the
 * title, the description, a nested <strong>/<span>/<a>, a label, a stat
 * figure and anything the card grows later are all covered by one rule
 * instead of a list that has to be kept in sync with the markup.
 *
 * WHY `!important`, which the rest of this file avoids
 * ---------------------------------------------------------------------------
 * Three separate things outrank a plain rule here, and the hover state has to
 * beat all of them:
 *
 *   1. Elementor's generated post CSS. `{{WRAPPER}}` expands to
 *      `.elementor-145 .elementor-element.elementor-element-5d314b7` — THREE
 *      classes — so the widget's own Title / Description / Icon colour
 *      controls compile to four-class selectors and are emitted after this
 *      stylesheet. They are written from the control DEFAULTS, so they exist
 *      on every page even if nobody touched a colour in the editor. Matching
 *      that with more classes is a losing race: the wrapper grows a class the
 *      moment the widget is nested differently.
 *   2. Inline `style="color: …"` on a repeater item or on markup pasted into
 *      a field, which no selector can outweigh.
 *   3. Theme and global-style rules on the raw tags underneath.
 *
 * The escape hatch is kept: the value is a custom property, so the hover
 * colour is still retargetable from Elementor Custom CSS or a parent element
 * by setting `--fw-fg-hover-color`, without touching this file.
 *
 * Scope is deliberately narrow — the declaration only exists while the card
 * carries the two material classes, which is only while the pointer is on it.
 */
.finewerk-feature-grid__card.fw-bg-gradient,
.finewerk-feature-grid__card.fw-bg-gradient * {
	color: var(--fw-fg-hover-color) !important;
}

/*
 * The icon, whichever way Elementor rendered it. An icon font (<i class="fas
 * …">) and a Font Awesome inline SVG (whose paths carry no paint attribute
 * and inherit `fill: currentColor` from this file) are both already white via
 * the `color` rule above. These two rules exist for the SVG paint Elementor
 * writes directly — its Icon colour control emits `fill` onto the <svg> — and
 * for a custom uploaded SVG that hardcodes its own fill or stroke.
 *
 * `:not([fill="none"])` also matches shapes with no fill attribute at all —
 * exactly the ones whose fill defaults to black — while leaving a stroke-only
 * icon's `fill="none"` alone, so an outline icon is never filled in solid.
 */
.finewerk-feature-grid__card.fw-bg-gradient .finewerk-feature-grid__icon svg,
.finewerk-feature-grid__card.fw-bg-gradient .finewerk-feature-grid__icon svg :not([fill="none"]) {
	fill: var(--fw-fg-hover-color) !important;
}

/* Stroke is only repainted where a stroke is actually declared — writing it
   onto every shape would outline icons that were never meant to have one. */
.finewerk-feature-grid__card.fw-bg-gradient .finewerk-feature-grid__icon svg [stroke]:not([stroke="none"]) {
	stroke: var(--fw-fg-hover-color) !important;
}

@keyframes fw-fg-content-vibrate {
	0%,
	100% {
		transform: translate3d(0, 0, 0);
	}

	25% {
		transform: translate3d(0.4px, -0.3px, 0);
	}

	50% {
		transform: translate3d(-0.2px, 0.4px, 0);
	}

	75% {
		transform: translate3d(-0.4px, -0.2px, 0);
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.finewerk-feature-grid,
	.finewerk-feature-grid * {
		transition: none !important;
		animation: none !important;
	}

	/* No continuous movement at all: the card still widens on hover, it just
	   does so instantly, and the content vibration never runs. */
	.finewerk-feature-grid__card:hover > *,
	.finewerk-feature-grid__card.is-fw-fg-hovered > * {
		animation: none !important;
	}
}

/* ---------- Responsive ---------- */

/* Tablet */
@media (max-width: 1024px) {
	.finewerk-feature-grid {
		--fw-fg-columns: 2;
		--fw-fg-gap: 20px;
		--fw-fg-heading-gap: 40px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.finewerk-feature-grid {
		--fw-fg-columns: 1;
		--fw-fg-gap: 16px;
		--fw-fg-heading-gap: 32px;
		padding: 40px 20px 48px;
	}

	.finewerk-feature-grid__card {
		padding: 22px;
	}
}