/**
 * Finewerk Steps
 *
 * Scoped, BEM-style styles for the process step cards widget: a wrapping
 * row of glass / gradient cards, each with an automatically numbered white
 * "STEP : 01" pill badge (with a speech-bubble tail), a large light title
 * and a softer description. Pure CSS — no JavaScript. All custom
 * properties are namespaced with --fw-steps- to avoid collisions.
 *
 * The card surface itself (background, blur, rim, grain) is painted by the
 * global materials `finewerk-liquid-glass` or `fw-bg-gradient` +
 * this file deliberately sets NO card background or border
 * so those materials stay the single source of truth.
 */

/* ------------------------------------------------------------------
 * 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-steps {
	font-family: var(--fw-font-body);
}

.finewerk-steps :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-steps :where(button, input, select, textarea, optgroup) {
	font-family: inherit;
}

.finewerk-steps {
	--fw-steps-gap: 32px;
	--fw-steps-card-min: 250px;
	--fw-steps-badge-gap: 72px;
	--fw-steps-title-gap: 18px;
	--fw-steps-badge-bg: #FFFFFF;
	display: block;
	width: 100%;
	box-sizing: border-box;
}

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

/* Wrapping flex row: up to 4 cards per row (each card's flex-basis is a
   quarter of the row), wrapping earlier whenever a quarter would fall
   below the minimum card width. Extra cards always wrap onto new rows —
   they can never overflow the container horizontally. */
.finewerk-steps__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fw-steps-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.finewerk-steps__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	flex: 1 1 calc((100% - (var(--fw-steps-gap) * 3)) / 4);
	min-width: min(var(--fw-steps-card-min), 100%);
	max-width: 100%;
	margin: 0;
	padding: 34px 34px 40px;
	min-height: 300px;
	border-radius: 18px;
	text-align: left;
}

/* ---------- Step badge ---------- */

.finewerk-steps__badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-bottom: var(--fw-steps-badge-gap);
	padding: 10px 22px;
	background-color: var(--fw-steps-badge-bg);
	border-radius: 999px;
	color: #1F4634;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	/* One soft shadow around the combined pill + tail silhouette. */
	filter: drop-shadow(0 6px 14px rgba(8, 28, 20, 0.18));
}

/* Speech-bubble tail: a rotated square peeking out under the pill. It
   shares the pill color, so the overlap is invisible. */
.finewerk-steps__badge::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -5px;
	width: 12px;
	height: 12px;
	background-color: var(--fw-steps-badge-bg);
	border-radius: 2px;
	transform: translateX(-50%) rotate(45deg);
}

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

.finewerk-steps__title {
	margin: 0 0 var(--fw-steps-title-gap);
	color: #F7F5EF;
	font-family: var(--fw-font-title);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

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

.finewerk-steps__description {
	margin: 0;
	color: rgba(244, 242, 236, 0.78);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
}

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

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

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

/* Mobile: a single vertical column of full-width cards, with the
   reference proportions gently compacted rather than squeezed. */
@media (max-width: 767px) {
	.finewerk-steps {
		--fw-steps-gap: 20px;
		--fw-steps-badge-gap: 48px;
	}

	.finewerk-steps__grid {
		flex-direction: column;
	}

	.finewerk-steps__card {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		min-height: 0;
		padding: 30px 26px 34px;
	}
}

/* ==========================================================================
   Version 2 (steps-v2.png)
   --------------------------------------------------------------------------
   Tall cards with the global 20px panel radius, stacking a plain periwinkle
   "01." number top-left, the title + description block pushed toward the
   bottom, and an arrow-button CTA row pinned underneath. Like Version 1,
   the surface is painted by whichever global material the widget's shared
   "Card background" control put on the card
   (finewerk-liquid-glass / fw-bg-gradient), so this file sets no background
   or border there and the material stays the single source of truth. The
   navy base + per-card glow below is only the fallback for a card that
   carries no material class. All Version 2 rules are scoped to the
   .finewerk-steps--v2 modifier, so Version 1 rendering is untouched.
   ========================================================================== */

.finewerk-steps--v2 {
	--fw-steps2-card-bg: #10143C;
	--fw-steps2-card-border: rgba(255, 255, 255, 0.16);
	--fw-steps2-glow: #2B4B60;
	--fw-steps2-number-gap: 56px;
	--fw-steps2-cta-gap: 56px;
	--fw-steps2-btn-bg: #5660D6;
	--fw-steps2-btn-size: 48px;
	--fw-steps2-btn-radius: 14px;
}

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

/* Geometry only. Three cards per row (vs four in Version 1); extra cards
   wrap onto new rows exactly like Version 1, so nothing can overflow
   horizontally. */
.finewerk-steps--v2 .finewerk-steps__card {
	flex-basis: calc((100% - (var(--fw-steps-gap) * 2)) / 3);
	justify-content: flex-start;
	min-height: 560px;
	padding: 56px 60px 60px;
	border-radius: 20px;
}

/* Fallback surface: the navy base + per-card glow, drawn only when the card
   wears neither global material. The :not() guards matter — this selector
   outweighs the single-class material rules, so an unguarded background here
   would hide fw-bg-gradient's gradient and give finewerk-liquid-glass an
   opaque backdrop with nothing left to refract. `overflow: hidden` belongs
   to this branch too: it clips the glow to the radius, but it would also
   clip the glass material's outer drop shadow, which Version 1 shows. */
.finewerk-steps--v2 .finewerk-steps__card:not(.finewerk-liquid-glass):not(.fw-bg-gradient) {
	border: 1px solid var(--fw-steps2-card-border);
	background:
		radial-gradient(140% 72% at 50% 100%, var(--fw-steps2-glow) 0%, rgba(0, 0, 0, 0) 100%)
		var(--fw-steps2-card-bg);
	overflow: hidden;
}

/* ---------- Step number ---------- */

.finewerk-steps__number {
	display: block;
	color: #5660D6;
	font-family: var(--fw-font-title);
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
}

/* ---------- Title + description block ---------- */

/* The card height pushes the number and the text block apart; the padding
   guarantees a minimum gap when the card is content-sized (mobile). */
.finewerk-steps__body {
	margin-top: auto;
	padding-top: var(--fw-steps2-number-gap);
}

.finewerk-steps--v2 .finewerk-steps__title {
	font-family: var(--fw-font-title);
	font-size: 42px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.finewerk-steps--v2 .finewerk-steps__description {
	font-size: 19px;
	line-height: 1.65;
}

/* ---------- Arrow-button CTA ---------- */

.finewerk-steps__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 16px;
	margin-top: var(--fw-steps2-cta-gap);
	text-decoration: none;
	cursor: pointer;
}

/* Non-linked cards render the row as a <div>; the pointer cursor is only
   honest on the real links. */
div.finewerk-steps__cta {
	cursor: default;
}

.finewerk-steps__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--fw-steps2-btn-size);
	height: var(--fw-steps2-btn-size);
	background-color: var(--fw-steps2-btn-bg);
	border-radius: var(--fw-steps2-btn-radius);
	color: #FFFFFF;
	transition: filter 160ms ease;
}

.finewerk-steps__cta-icon svg {
	width: 20px;
	height: 20px;
	transition: transform 160ms ease;
}

.finewerk-steps__cta-label {
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

a.finewerk-steps__cta:hover .finewerk-steps__cta-icon {
	filter: brightness(1.12);
}

a.finewerk-steps__cta:hover .finewerk-steps__cta-icon svg {
	transform: translateX(2px);
}

a.finewerk-steps__cta:focus-visible {
	outline: 2px solid var(--fw-steps2-btn-bg);
	outline-offset: 4px;
	border-radius: 6px;
}

/* ---------- Optional Finewerk background panel ---------- */

/* Painted by the site-wide fw-bg-gradient utility; this
   rule only supplies fallbacks for the padding/radius controls. */
.finewerk-steps__bg {
	box-sizing: border-box;
	padding: 48px;
	border-radius: 20px;
}

/* ---------- Version 2 responsive ---------- */

/* Tablet: keep three-up as long as the minimum card width allows, with the
   reference proportions gently compacted. */
@media (max-width: 1024px) {
	.finewerk-steps--v2 .finewerk-steps__card {
		min-height: 500px;
		padding: 44px 40px 48px;
	}

	.finewerk-steps--v2 .finewerk-steps__title {
		font-size: 36px;
	}

	.finewerk-steps--v2 .finewerk-steps__description {
		font-size: 17px;
	}
}

/* Mobile: a single column of content-sized cards. These overrides must be
   repeated at Version 2 specificity — the Version 1 mobile rules above are
   a lower-specificity selector and would lose to the Version 2 base rule. */
@media (max-width: 767px) {
	.finewerk-steps--v2 .finewerk-steps__card {
		min-height: 0;
		padding: 40px 32px 44px;
	}

	.finewerk-steps--v2 .finewerk-steps__title {
		font-size: 32px;
	}

	.finewerk-steps--v2 .finewerk-steps__body {
		padding-top: 44px;
	}

	.finewerk-steps--v2 .finewerk-steps__cta {
		margin-top: 40px;
	}

	.finewerk-steps__bg {
		padding: 24px;
	}
}