/**
 * Homepage category cards + mid-page icon strip.
 */

.cs-category-card-link {
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.cs-category-card-link:hover,
.cs-category-card-link:focus-visible {
	opacity: 0.92;
	transform: translateY(-2px);
	outline: 2px solid rgba(24, 193, 184, 0.55);
	outline-offset: 3px;
}

/*
 * White frame around homepage category images.
 * Spectra/UAGB cards are inconsistent (some blocks have a border in the editor,
 * others don't) — force the same thin white frame on every card image.
 */
.cs-category-card-link .cs-category-card-media,
.cs-category-card-link .wp-block-image,
.cs-category-card-link .uagb-image-gallery__image-wrapper,
.cs-category-card-link .uagb-block-image,
.cs-category-card-link figure,
.cs-category-card-link .uagb-infobox-image-content {
	box-sizing: border-box !important;
	border: 2px solid #ffffff !important;
}

.cs-category-card-link .cs-category-card-media img,
.cs-category-card-link .wp-block-image img,
.cs-category-card-link figure img,
.cs-category-card-link img.cs-category-card-media,
.cs-category-card-link .uagb-image__source {
	box-sizing: border-box !important;
	border: 0 !important;
	outline: none !important;
}

/* Fallback when the image itself is the only media node */
.cs-category-card-link > img,
.cs-category-card-link img.cs-category-card-media {
	border: 2px solid #ffffff !important;
}

/* ---- Mid-page category icon strip ---- */
.cs-home-icon-strip-host,
.uagb-block-fb8631e5,
.uagb-block-fb8631e5.wp-block-uagb-container,
.uagb-block-fb8631e5.uagb-layout-grid {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #e8eef3 !important;
	box-sizing: border-box !important;
	/* Kill Spectra grid that collapses children on desktop */
	grid-template-columns: none !important;
	grid-template-rows: none !important;
}

.uagb-block-fb8631e5 .uagb-container-inner-blocks-wrap,
.cs-home-icon-strip-host .uagb-container-inner-blocks-wrap {
	display: block !important;
	width: 100% !important;
	max-width: min(1200px, 100%) !important;
	margin: 0 auto !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	grid-template-columns: none !important;
}

.cs-home-icon-strip {
	display: block !important;
	width: 100% !important;
	max-width: min(1200px, 100%);
	margin: 0 auto;
	padding: 0.85rem 1rem;
	box-sizing: border-box;
}

.cs-home-icon-strip__viewport {
	display: block !important;
	width: 100% !important;
	min-width: 0;
	overflow: visible;
}

.cs-home-icon-strip__track {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 0.5rem;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	box-sizing: border-box;
}

.cs-home-icon-strip__track::-webkit-scrollbar {
	display: none;
}

.cs-home-icon-strip__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 0.65rem;
}

.cs-home-icon-strip__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 2px solid #18c1b8;
	border-radius: 999px;
	background: #18c1b8;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(24, 193, 184, 0.3);
	transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.cs-home-icon-strip__btn:hover:not(:disabled) {
	background: #0d9e97;
	border-color: #0d9e97;
	transform: translateY(-1px);
}

.cs-home-icon-strip__btn:disabled {
	opacity: 0.35;
	cursor: default;
	box-shadow: none;
	transform: none;
}

.cs-home-icon-strip__item {
	position: relative !important;
	flex: 1 1 0 !important;
	min-width: 96px !important;
	max-width: none !important;
	width: auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0.45rem;
	padding: 0.4rem 0.35rem;
	margin: 0 !important;
	float: none !important;
	text-decoration: none !important;
	color: #1a2436 !important;
	text-align: center;
	box-sizing: border-box;
	transition: color 0.15s ease, transform 0.15s ease;
}

.cs-home-icon-strip__item:hover,
.cs-home-icon-strip__item:focus-visible {
	color: #0d9e97 !important;
	transform: translateY(-1px);
}

.cs-home-icon-strip__icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	color: inherit;
}

.cs-home-icon-strip__svg {
	width: 100%;
	height: 100%;
	display: block;
}

.cs-home-icon-strip__label {
	display: block !important;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.01em;
	max-width: 8.5rem;
	overflow: visible;
}

/* Desktop / tablet+: evenly spaced row, no overlapping */
@media (min-width: 768px) {
	.cs-home-icon-strip__viewport {
		overflow: visible;
	}

	.cs-home-icon-strip__track {
		justify-content: space-between !important;
		overflow-x: visible;
		gap: 0.75rem;
	}

	.cs-home-icon-strip__item {
		flex: 1 1 0 !important;
		min-width: 0 !important; /* equal columns, but content centered */
		padding: 0.5rem 0.4rem;
	}

	/* Prevent SVG/text from escaping the equal column and stacking */
	.cs-home-icon-strip__item .cs-home-icon-strip__icon,
	.cs-home-icon-strip__item .cs-home-icon-strip__label {
		max-width: 100%;
		overflow: hidden;
	}

	.cs-home-icon-strip__icon {
		width: 52px;
		height: 52px;
	}

	.cs-home-icon-strip__label {
		font-size: 0.78rem;
		max-width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
}

/* Native Spectra/Elementor fill */
.cs-home-icon-strip--native {
	padding: 0.75rem 0.5rem !important;
}

.cs-home-icon-strip--native .uagb-container-inner-blocks-wrap,
.cs-home-icon-strip--native {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	gap: 0.5rem;
	-webkit-overflow-scrolling: touch;
}

.cs-home-icon-strip--native img,
.cs-home-icon-strip--native svg,
.cs-home-icon-strip--native .elementor-icon-box-icon i,
.cs-home-icon-strip--native .elementor-icon {
	width: 40px !important;
	height: 40px !important;
	font-size: 40px !important;
	max-width: none !important;
}

.cs-home-icon-strip--native .uagb-ifb-title,
.cs-home-icon-strip--native .uagb-heading-text,
.cs-home-icon-strip--native .elementor-icon-box-title,
.cs-home-icon-strip--native .elementor-icon-box-title span,
.cs-home-icon-strip--native p,
.cs-home-icon-strip--native span {
	font-size: 0.68rem !important;
	line-height: 1.2 !important;
}

/* ---- Mobile: compact so more icons fit; arrows only when overflow ---- */
@media (max-width: 767px) {
	.cs-home-icon-strip-host,
	.uagb-block-fb8631e5 {
		background: #e8eef3 !important;
		padding: 0.2rem 0 !important;
	}

	.uagb-block-fb8631e5 .uagb-container-inner-blocks-wrap,
	.cs-home-icon-strip-host .uagb-container-inner-blocks-wrap {
		padding: 0 !important;
	}

	.cs-home-icon-strip {
		padding: 0.55rem 0.4rem 0.45rem;
	}

	.cs-home-icon-strip__viewport {
		width: 100%;
		overflow: hidden;
	}

	.cs-home-icon-strip__track {
		justify-content: flex-start !important;
		gap: 0.25rem;
		padding: 0;
		overflow-x: auto;
	}

	.cs-home-icon-strip__item {
		flex: 0 0 auto !important;
		min-width: 64px !important;
		max-width: 72px !important;
		gap: 0.2rem;
		padding: 0.2rem 0.1rem;
	}

	.cs-home-icon-strip__icon {
		width: 34px;
		height: 34px;
	}

	.cs-home-icon-strip__label {
		font-size: 0.58rem;
		font-weight: 600;
		line-height: 1.15;
		max-width: 4.6rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}

	.cs-home-icon-strip__nav {
		margin-top: 0.4rem;
		gap: 0.85rem;
	}

	.cs-home-icon-strip__btn {
		width: 30px;
		height: 30px;
		font-size: 0.75rem;
		border-width: 1.5px;
		box-shadow: none;
	}

	.cs-home-icon-strip--native {
		padding: 0.55rem 0.35rem !important;
	}

	.cs-home-icon-strip--native .uagb-container-inner-blocks-wrap > *,
	.cs-home-icon-strip--native > * {
		flex: 0 0 auto !important;
		min-width: 64px !important;
		width: auto !important;
		max-width: 76px !important;
	}

	.cs-home-icon-strip--native img,
	.cs-home-icon-strip--native svg,
	.cs-home-icon-strip--native .elementor-icon-box-icon i,
	.cs-home-icon-strip--native .elementor-icon {
		width: 34px !important;
		height: 34px !important;
		font-size: 34px !important;
	}

	.cs-home-icon-strip--native .uagb-ifb-title,
	.cs-home-icon-strip--native .uagb-heading-text,
	.cs-home-icon-strip--native .elementor-icon-box-title,
	.cs-home-icon-strip--native .elementor-icon-box-title span,
	.cs-home-icon-strip--native p,
	.cs-home-icon-strip--native span {
		font-size: 0.58rem !important;
		font-weight: 600 !important;
		line-height: 1.15 !important;
	}
}

/* Extra-narrow phones: even tighter */
@media (max-width: 400px) {
	.cs-home-icon-strip__item {
		min-width: 56px !important;
		max-width: 64px !important;
	}

	.cs-home-icon-strip__icon {
		width: 30px;
		height: 30px;
	}

	.cs-home-icon-strip__label {
		font-size: 0.52rem;
		max-width: 4rem;
	}

	.cs-home-icon-strip__btn {
		width: 28px;
		height: 28px;
	}
}