/* Horizontal Scroll Cards
   Every rule is scoped under .spark-hsc, so nothing here affects the rest of the site.
   See README.md in this folder for what each class/variable controls. */

/* ==========================================================================
   1. BASE: quick settings (colours, sizes, fonts)
   ========================================================================== */

.spark-hsc {
	--hsc-accent: var(--e-global-color-accent, #FFC300);
	--hsc-gold: #C9A227;
	--hsc-text: var(--e-global-color-text, #1A1919);
	--hsc-muted: #5B5A58;
	--hsc-border: #E6E3DD;
	--hsc-card-bg: #FFFFFF;
	--hsc-highlight-bg: #FFF8DF;
	--hsc-highlight-border: #F0CF63;
	--hsc-track-bg: #E6E3DD;
	--hsc-card-width: 331px;
	--hsc-gap: 22px;
	--hsc-heading-font: var(--e-global-typography-secondary-font-family, "Cooper Light BT"), "Cooper Lt BT", Georgia, "Times New Roman", serif;
	--hsc-number-font: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--hsc-body-font: var(--e-global-typography-text-font-family, "SF Pro Display"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	position: relative;
	box-sizing: border-box;
	padding: 72px 0 90px;
	color: var(--hsc-text);
	font-family: var(--hsc-body-font);
}

.spark-hsc *,
.spark-hsc *::before,
.spark-hsc *::after {
	box-sizing: border-box;
}

/* Long words never push the layout wider than the screen. */
.spark-hsc .spark-hsc__title,
.spark-hsc .spark-hsc__sub,
.spark-hsc .spark-hsc__card-title,
.spark-hsc .spark-hsc__card-text {
	overflow-wrap: break-word;
}

.spark-hsc--bg {
	background:
		radial-gradient(55% 60% at 100% 0%, rgba(255, 195, 0, 0.09), transparent 70%),
		radial-gradient(45% 55% at 0% 100%, rgba(255, 195, 0, 0.07), transparent 70%),
		#FFFDF9;
}

/* No side padding on any device: the Elementor container around the widget provides the
   same side spacing as the site header, so the section lines up with the header. */
.spark-hsc__inner {
	max-width: 1334px;
	margin: 0 auto;
	padding: 0;
}

/* ==========================================================================
   2. HEADER: label, heading, subheading
   ========================================================================== */
.spark-hsc__header {
	text-align: center;
}

.spark-hsc__badge {
	display: inline-block;
	padding: 9px 20px;
	border: 1px solid var(--hsc-border);
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--hsc-text);
	font-family: var(--hsc-body-font);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	vertical-align: middle;
}

.spark-hsc .spark-hsc__title {
	margin: 24px auto 0;
	color: var(--hsc-text);
	font-family: var(--hsc-body-font);
	font-size: 34px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
}

.spark-hsc .spark-hsc__sub {
	max-width: 780px;
	margin: 12px auto 0;
	color: var(--hsc-muted);
	font-family: var(--hsc-body-font);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: center;
}

/* ==========================================================================
   3. CARDS ROW
   ========================================================================== */

/* Default (mobile / editor / no JS): native horizontal swipe. */
.spark-hsc__viewport {
	margin-top: 44px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.spark-hsc__viewport::-webkit-scrollbar {
	display: none;
}

.spark-hsc__track {
	display: flex;
	gap: var(--hsc-gap);
	width: max-content;
}

/* Sticky mode. The wrapper is made taller by the script; the section sticks inside it.
   Note: sticky stops working if a parent container has overflow: hidden/auto. */
.spark-hsc-scroller {
	position: relative;
}

.spark-hsc-scroller--bg {
	background: #FFFDF9;
}

.spark-hsc.is-pinned {
	position: sticky;
	z-index: 1;
}

/* JS moves the track, so hide the native scroll. */
.spark-hsc.is-pinned .spark-hsc__viewport {
	overflow: hidden;
	scroll-snap-type: none;
}

.spark-hsc.is-pinned .spark-hsc__track {
	will-change: transform;
}

/* ==========================================================================
   4. CARD: card, icon, number, heading, text
   ========================================================================== */
.spark-hsc .spark-hsc__card {
	display: flex;
	flex: 0 0 var(--hsc-card-width);
	flex-direction: column;
	width: var(--hsc-card-width);
	padding: 32px;
	border: 1px solid var(--hsc-border);
	border-radius: 16px;
	background: var(--hsc-card-bg);
	color: var(--hsc-text);
	text-decoration: none;
	scroll-snap-align: start;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.spark-hsc .spark-hsc__card--highlight {
	border-color: var(--hsc-highlight-border);
	background: var(--hsc-highlight-bg);
}

.spark-hsc a.spark-hsc__card:hover,
.spark-hsc a.spark-hsc__card:focus-visible {
	box-shadow: 0 10px 30px rgba(26, 25, 25, 0.06);
}

.spark-hsc__card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 24px;
}

.spark-hsc__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--hsc-border);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.7);
	color: var(--hsc-gold);
	font-size: 17px;
	line-height: 1;
}

.spark-hsc__icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.spark-hsc__num {
	margin-top: 8px;
	color: var(--hsc-gold);
	font-family: var(--hsc-number-font);
	font-size: 24px;
	font-style: normal;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	font-variant-numeric: oldstyle-nums;
}

.spark-hsc .spark-hsc__card-title {
	margin: 0 0 12px;
	color: var(--hsc-text);
	font-family: var(--hsc-heading-font);
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
}

.spark-hsc .spark-hsc__card-text {
	margin: 0;
	color: var(--hsc-muted);
	font-family: var(--hsc-body-font);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
}

/* ==========================================================================
   5. PROGRESS BAR
   ========================================================================== */
.spark-hsc__progress {
	height: 6px;
	margin-top: 65px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--hsc-track-bg);
}

.spark-hsc__progress-fill {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--hsc-accent);
	transform: scaleX(0.08);
	transform-origin: left center;
}

/* ==========================================================================
   RESPONSIVE — same breakpoints as Elementor:
     Desktop  1025px and up   → desktop design (sections 1–5)
     Tablet   768px – 1024px  → section 7 (in-between values)
     Mobile   767px and below → section 8 (mobile design)
   Sticky scroll runs from 768px up; below that the cards are swiped.
   ========================================================================== */

/* ==========================================================================
   6. STICKY SPACING (768px and up)
   ========================================================================== */

/* Pinned on desktop: the whole section must fit between the fixed header and the bottom of
   the screen, so vertical spacing shrinks with the screen height (e.g. 13" laptops). */
@media (min-width: 768px) {
	.spark-hsc.is-pinned {
		padding-top: clamp(24px, 5vh, 72px);
		padding-bottom: clamp(24px, 5vh, 90px);
	}

	.spark-hsc.is-pinned .spark-hsc__sub {
		margin-top: clamp(8px, 1.2vh, 12px);
	}

	.spark-hsc.is-pinned .spark-hsc__viewport {
		margin-top: clamp(20px, 4vh, 44px);
	}
}

/* ==========================================================================
   7. TABLET (768px – 1024px): between the desktop and mobile designs
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
	.spark-hsc {
		--hsc-card-width: 300px;
		--hsc-gap: 20px;
		padding: 64px 0 72px;
	}


	.spark-hsc .spark-hsc__sub {
		max-width: 620px;
	}

	.spark-hsc .spark-hsc__card {
		padding: 28px;
	}

	.spark-hsc .spark-hsc__card-title {
		font-size: 21px;
	}

	.spark-hsc__progress {
		margin-top: 48px;
	}
}

/* ==========================================================================
   8. MOBILE (767px and below): one full-width card per swipe
   ========================================================================== */
@media (max-width: 767px) {
	.spark-hsc {
		--hsc-gap: 16px;
		padding: 48px 0;
	}


	.spark-hsc .spark-hsc__title {
		font-size: 20px;
	}

	/* The desktop line break doesn't suit narrow screens: let the heading wrap naturally. */
	.spark-hsc .spark-hsc__title br {
		display: none;
	}

	.spark-hsc .spark-hsc__sub {
		margin-top: 8px;
		font-size: 12px;
		line-height: 20px;
	}

	.spark-hsc__viewport {
		margin-top: 24px;
	}

	/* Card is exactly as wide as the visible row. */
	.spark-hsc__track {
		width: auto;
	}

	.spark-hsc .spark-hsc__card {
		flex: 0 0 100%;
		width: 100%;
		padding: 24px;
		border-radius: 20px;
	}

	.spark-hsc .spark-hsc__card-title {
		font-size: 20px;
	}

	.spark-hsc__progress {
		margin-top: 32px;
	}
}

/* Small phones (e.g. iPhone SE, 320–375px wide). */
@media (max-width: 374px) {
	.spark-hsc .spark-hsc__card {
		padding: 20px;
	}

	.spark-hsc .spark-hsc__card-title {
		font-size: 19px;
	}
}