/* Industries Hover
   Every rule is scoped under .spark-ind, 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-ind {
	--ind-text: #1A1919;
	--ind-muted: #3D3C3A;
	--ind-card-text: #6D6B67;
	--ind-card-bg: #FFFFFF;
	--ind-card-border: #FFE18D;
	--ind-active-bg: #FDF4E0;
	--ind-active-border: #FFC300;
	--ind-detail-bg: #FBF1DE;
	--ind-detail-border: #F2C75C;
	--ind-button-bg: #F7C548;
	--ind-button-text: #1A1919;
	--ind-cols: 4;
	--ind-gap: 20px;
	--ind-card-width: 200px;
	--ind-card-height: 120px;
	--ind-icon: 38px;
	--ind-body-font: var(--e-global-typography-text-font-family, "SF Pro Display"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	box-sizing: border-box;
	padding: 72px 0 96px;
	color: var(--ind-text);
	font-family: var(--ind-body-font);
}

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

.spark-ind .spark-ind__title,
.spark-ind .spark-ind__sub,
.spark-ind .spark-ind__card-title,
.spark-ind .spark-ind__detail-title,
.spark-ind .spark-ind__detail-text {
	overflow-wrap: break-word;
}

/* 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-ind__inner {
	max-width: 1404px;
	margin: 0 auto;
	padding: 0;
}

/* ==========================================================================
   2. HEADER: heading, subheading (Spark section standard)
   ========================================================================== */
.spark-ind__header {
	text-align: center;
}

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

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

/* ==========================================================================
   3. LAYOUT: card grid + large detail card
   ========================================================================== */
.spark-ind__body {
	display: grid;
	/* The large card never gets narrower than 340px: on small laptops the cards shrink instead. */
	grid-template-columns: minmax(0, calc(var(--ind-cols) * var(--ind-card-width) + (var(--ind-cols) - 1) * var(--ind-gap))) minmax(340px, 1fr);
	gap: 24px;
	margin-top: 44px;
}

.spark-ind .spark-ind__grid {
	display: grid;
	grid-template-columns: repeat(var(--ind-cols), minmax(0, var(--ind-card-width)));
	gap: var(--ind-gap);
	align-content: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spark-ind .spark-ind__item {
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   4. CARD: icon, title (gold while hovered; the clicked card has no special look)
   ========================================================================== */
.spark-ind .spark-ind__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 100%;
	min-height: var(--ind-card-height);
	padding: 12px;
	border: 1.5px solid var(--ind-card-border);
	border-radius: 12px;
	background: var(--ind-card-bg);
	color: var(--ind-card-text);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

@media (min-width: 1025px) {
	.spark-ind .spark-ind__card:hover,
	.spark-ind .spark-ind__card:focus-visible {
		border-color: var(--ind-active-border);
		background: var(--ind-active-bg);
		color: var(--ind-text);
	}

	.spark-ind__card:hover .spark-ind__card-icon,
	.spark-ind__card:focus-visible .spark-ind__card-icon {
		opacity: 1;
	}
}

.spark-ind .spark-ind__card:focus-visible {
	outline: 2px solid var(--ind-active-border);
	outline-offset: 3px;
}

.spark-ind__card-icon,
.spark-ind__detail-icon {
	display: grid;
	place-items: center;
	color: var(--ind-text);
	line-height: 1;
}

.spark-ind__card-icon {
	width: var(--ind-icon);
	height: var(--ind-icon);
	font-size: calc(var(--ind-icon) * 0.8);
	opacity: 0.8;
	transition: opacity 0.25s ease;
}

.spark-ind__card-icon svg,
.spark-ind__detail-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Uploaded line icons (stroke-only SVGs) keep their own fill. */
.spark-ind__card-icon svg[fill="none"],
.spark-ind__detail-icon svg[fill="none"] {
	fill: none;
}

.spark-ind .spark-ind__card-title {
	color: inherit;
	font-family: var(--ind-body-font);
	font-size: 22px;
	font-weight: 400;
	line-height: 38px;
	letter-spacing: 0;
}

/* ==========================================================================
   5. LARGE DETAIL CARD
   ========================================================================== */
.spark-ind__detail {
	display: flex;
	margin: 20px 0;
	padding: 32px 40px;
	border: 1px solid var(--ind-detail-border);
	border-radius: 20px;
	background: var(--ind-detail-bg);
}

.spark-ind__panel {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.spark-ind__panel[hidden] {
	display: none;
}

.spark-ind__panel.is-entering {
	animation: spark-ind-fade 0.3s ease both;
}

@keyframes spark-ind-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

.spark-ind__detail-icon {
	width: 50px;
	height: 50px;
	margin-bottom: 20px;
	font-size: 40px;
}

.spark-ind .spark-ind__detail-title {
	align-self: stretch;
	margin: 0 0 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ind-detail-border);
	color: var(--ind-text);
	font-family: var(--ind-body-font);
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: 38px;
	letter-spacing: 0;
}

.spark-ind .spark-ind__detail-text {
	margin: 0 0 32px;
	color: var(--ind-text);
	font-family: var(--ind-body-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0;
}

.spark-ind .spark-ind__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	padding: 12px 28px;
	border-radius: 999px;
	background: var(--ind-button-bg);
	color: var(--ind-button-text);
	font-family: var(--ind-body-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	transition: filter 0.2s ease;
}

.spark-ind .spark-ind__button:hover {
	filter: brightness(0.96);
}

.spark-ind .spark-ind__button:focus-visible {
	outline: 2px solid var(--ind-text);
	outline-offset: 3px;
}

/* ==========================================================================
   RESPONSIVE — same breakpoints as Elementor:
     Desktop  1025px and up   → desktop design (sections 1–5)
     Tablet   768px – 1024px  → section 6 (touch: grid only, 3 per row)
     Mobile   767px and below → section 7 (mobile design)
   ========================================================================== */

/* Smaller desktops / laptops: keep the cards readable. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.spark-ind {
		--ind-gap: 16px;
		--ind-icon: 34px;
	}

	/* Long names may wrap here; a tighter line keeps the card 120px tall. */
	.spark-ind .spark-ind__card-title {
		font-size: 18px;
		line-height: 1.3;
	}

	.spark-ind__detail {
		padding: 32px 28px;
	}

	.spark-ind .spark-ind__detail-text {
		font-size: 16px;
		line-height: 28px;
	}
}

/* ==========================================================================
   6. TABLET (768px – 1024px): touch screens have no hover, so no detail card
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
	.spark-ind {
		--ind-cols: 3;
		--ind-gap: 16px;
		--ind-card-width: 1fr;
		--ind-card-height: 112px;
		--ind-icon: 34px;
		--ind-card-text: var(--ind-text);
		padding: 64px 0 72px;
	}


	.spark-ind__body {
		display: block;
	}

	.spark-ind__detail {
		display: none;
	}

	.spark-ind__card-icon {
		opacity: 1;
	}

	.spark-ind .spark-ind__card-title {
		font-size: 18px;
		line-height: 1.3;
	}
}

/* ==========================================================================
   7. MOBILE (767px and below): 2 per row, last odd card centred
   ========================================================================== */
@media (max-width: 767px) {
	.spark-ind {
		--ind-cols: 2;
		--ind-gap: 14px;
		--ind-card-width: 1fr;
		--ind-card-height: 104px;
		--ind-icon: 32px;
		--ind-card-text: var(--ind-text);
		padding: 48px 0;
	}


	.spark-ind .spark-ind__title {
		font-size: 20px;
	}

	/* Desktop line breaks don't suit narrow screens: let the text wrap naturally. */
	.spark-ind .spark-ind__title br,
	.spark-ind .spark-ind__sub br {
		display: none;
	}

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

	.spark-ind__body {
		display: block;
		margin-top: 24px;
	}

	.spark-ind .spark-ind__grid {
		row-gap: 14px;
	}

	.spark-ind .spark-ind__item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - var(--ind-gap)) / 2);
	}

	.spark-ind__detail {
		display: none;
	}

	.spark-ind .spark-ind__card {
		gap: 10px;
		padding: 14px 8px;
		border-radius: 14px;
	}

	.spark-ind__card-icon {
		opacity: 1;
	}

	.spark-ind .spark-ind__card-title {
		font-size: 16px;
		line-height: 1.3;
	}
}

/* Small phones (320–374px wide). */
@media (max-width: 374px) {
	.spark-ind {
		--ind-gap: 10px;
	}

	.spark-ind .spark-ind__card-title {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spark-ind__panel.is-entering {
		animation: none;
	}

	.spark-ind .spark-ind__card,
	.spark-ind__card-icon {
		transition: none;
	}
}