/**
 * Icon Cards Block
 *
 * Three feature cards with icon, title, and description.
 * Per Specification 7 (roadrunner-specs.md).
 * Figma: Desktop 6095:541, 6137:1110 | Tablet 6143:3891 | Mobile 6144:6342
 *
 * KEY FEATURES:
 * - Fixed 3 cards, Navy or Light Blue section background
 * - White card bodies with aqua blue icon area
 * - Responsive: horizontal on tablet/desktop, stacked on mobile
 */

/* ==========================================================================
   BASE STYLES - MOBILE FIRST
   ========================================================================== */

.icons-cards {
	position: relative;
	top: -1px;
}

.icons-cards--homepage {
	padding-top: 0;
}

.icons-card-flex {
	row-gap: 15px;
	justify-content: center;
}

.icons-card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.icons-card__img {
	margin: 0 auto;
	width: 100px;
	height: 89px;
	border-radius: var(--border-radius);
	background: var(--primary-color);
	box-shadow: 0 0 20px 0 rgba(3, 2, 39, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.icons-card__img img,
.icons-card__icon {
	width: 80%;
	height: auto;
	max-height: 80%;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.icons-card__details {
	padding: 17px 20px;
	text-align: center;
	color: var(--text-color);
}

/* Card content stays dark on white card body (override section bg text color) */
.icons-cards.bg-dark-blue .icons-card__details,
.icons-cards.bg-light-blue .icons-card__details {
	color: var(--text-color);
}

h4.icons-card__title {
	color: var(--secondary-color);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.20em;
	margin-bottom: 9px;
}

.icons-cards.bg-dark-blue h4.icons-card__title,
.icons-cards.bg-light-blue h4.icons-card__title {
	color: var(--secondary-color);
}

.icons-card__description {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
}

.icons-card::before {
	content: '';
	position: absolute;
	z-index: -1;
	width: 100%;
	height: calc(100% - 66px);
	bottom: 0;
	left: 0;
	background: var(--white);
	border-radius: var(--border-radius);
}

.icons-cards .container {
	position: relative;
}

/* ==========================================================================
   TABLET BREAKPOINT (768px+)
   ========================================================================== */

@media (min-width: 768px) {
	.icons-card__details {
		padding: 26px 32px;
	}

	.icons-card::before {
		height: calc(100% - 52px);
	}

	h4.icons-card__title {
		margin-bottom: 14px;
	}
}

/* ==========================================================================
   DESKTOP BREAKPOINT (1200px+)
   ========================================================================== */

@media (min-width: 1200px) {
	.icons-card-flex {
		row-gap: 33px;
	}

	.icons-card__img {
		width: 202px;
		height: 180px;
	}

	.icons-card__img img,
	.icons-card__icon {
		width: 80%;
		max-height: 80%;
	}

	.icons-card__details {
		padding: 32px 33px;
	}

	.icons-card::before {
		height: calc(100% - 148px);
	}

	h4.icons-card__title {
		font-size: 35px;
		margin-bottom: 18px;
	}

	.icons-card__description {
		font-size: 18px;
	}
}