/* Card grid + base card styles (homepage, About). Loaded on every page. */

/* ==========================================================================
   Card grid (services / industries / why-us / certifications)
   ========================================================================== */
.card-grid {
	display: grid;
	gap: var(--space-md);
}
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	box-shadow: var(--shadow-card);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-card-lg);
}
.card--service:hover,
.card--why:hover,
.card--certification.card--featured:hover {
	transform: translateY(-10px);
}
.card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	background: var(--color-off-white);
	margin-bottom: 0.5rem;
}
.card__icon img { width: 26px; height: 26px; object-fit: contain; }
.card__icon--fallback {
	color: var(--color-accent-dark);
	background: rgba(79,209,217,0.18);
	font-weight: 800;
	font-size: 1.1rem;
	text-transform: uppercase;
}
.card__icon--svg svg { width: 22px; height: 22px; }
.card__icon--svg { color: var(--color-navy-text); }
.card__icon--dark { background: var(--color-navy-950); color: var(--color-white); }
.card__icon--blue   { background: #e7edfd; color: #3b5bdb; }
.card__icon--orange { background: #fdeee0; color: #e8763d; }
.card__icon--green   { background: #e2f7ec; color: #1f9d5a; }
.card__icon--purple  { background: #f2e9fb; color: #8b3fd1; }
.card__icon--yellow  { background: #fdf3d9; color: #c9922a; }
.card__icon--cyan    { background: #e0f7f8; color: #1a9ba3; }

.card__title { font-size: 1.1rem; margin-bottom: 0.25rem; }
.card__description { font-size: 0.92rem; }

.card--why {
	transition: box-shadow 0.25s ease, transform 0.25s ease;
	border-radius: 14px;
}
.card--why .card__icon {
	border-radius: 12px;
	transition: background 0.25s ease, color 0.25s ease;
}
.card--why .card__icon svg { width: 26px; height: 26px; }
.card--why:hover {
	box-shadow: 0px 10px 24px 0px rgba(22,32,88,0.18);
}
.card--why:hover .card__icon {
	background: var(--color-navy-950);
	color: var(--color-white);
}

@media (max-width: 960px) {
	.card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.card-grid--3, .card-grid--4 { grid-template-columns: 1fr; }
}