/* ==========================================================================
   HERO USPs — three white cards floating over the hero / Who We Are seam.
   Markup: template-parts/sections/section-hero-usps.php

   The wrapper is transparent so the hero and Who We Are backgrounds meet
   behind the cards. Negative margins pull the strip up over the hero and
   let Who We Are paint behind the bottom half of the cards.
   ========================================================================== */

.hero-usps-section,
.hero-usps {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	padding: 0 !important;
	margin-top: -60px !important;
	margin-bottom: -60px !important; /* Pulls Who We Are background up behind bottom half of cards */
	position: relative !important;
	z-index: 20 !important;
}

.hero-usps.section-bg-image::before,
.hero-usps-section.section-bg-image::before {
	display: none !important;
}

.hero-usps__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

/* ---------------- Card ---------------- */
.hero-usp-card {
	background: #ffffff !important;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	padding: 20px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	border: 1px solid rgba(0, 0, 0, 0.04);
}

.hero-usp-card__icon {
	width: 60px;
	height: 60px;
	min-width: 60px;
	background: var(--color-primary, #03193C);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
}

.hero-usp-card__icon svg {
	width: 28px;
	height: 28px;
}

.hero-usp-card__icon img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	display: block;
}

.hero-usp-card__body {
	min-width: 0;
}

.hero-usp-card__title {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	color: #111827;
	margin: 0 0 6px;
}

.hero-usp-card__desc {
	font-size: 13px;
	color: #6b7280;
	line-height: 1.4;
	margin: 0;
}

.hero-usps__dots {
	display: none;
}

/* ---------------- Tablet / mobile ≤768px ---------------- */
@media (max-width: 768px) {
	.hero-usps-section,
	.hero-usps {
		background: transparent !important;
		background-color: transparent !important;
		position: relative !important;
		z-index: 20 !important;
		margin-top: -50px !important;
		margin-bottom: -50px !important;
		padding: 0 !important;
	}

	.hero-usps .container {
		padding: 0 20px !important;
		overflow: hidden !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.hero-usps__track,
	.hero-usps__grid {
		display: flex !important;
		width: 100% !important;
		gap: 0 !important;
		grid-template-columns: none !important;
		transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
	}

	.hero-usp-card {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 100% !important;
		margin: 0 !important;
		box-sizing: border-box !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
		padding: 16px 18px;
		gap: 12px;
	}

	.hero-usp-card:nth-child(3) {
		grid-column: auto;
		margin: 0 !important;
	}

	.hero-usps__dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 14px;
	}

	.hero-usps__dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: rgba(61, 94, 142, 0.3);
		border: none;
		padding: 0;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.hero-usps__dot.is-active {
		width: 22px;
		border-radius: 10px;
		background: var(--color-accent, #FE5C08);
	}

	.hero-usp-card__icon {
		width: 52px;
		height: 52px;
		min-width: 52px;
	}
}