/**
 * Intelliguard Elements — Feature Cards widget.
 *
 * Canonical icon-card grid. Consolidates the mira*-advantages, about-values,
 * careers-why and miraintell-why "icon card grid" widgets.
 *
 * Brand tokens (ported from src/index.css) are declared on the .ig-fc wrapper
 * so the widget is self-contained. All selectors use the `ig-fc-` prefix to
 * avoid theme collisions.
 */

/* =========================================================================
   Wrapper + brand tokens
   ========================================================================= */
.ig-fc {
	--ig-navy: hsl(225 70% 17%);
	--ig-navy-light: hsl(225 50% 30%);
	--ig-gold: hsl(38 91% 55%);
	--ig-gold-light: hsl(38 91% 70%);
	--ig-teal: hsl(174 60% 42%);
	--ig-teal-light: hsl(174 50% 60%);
	--ig-background: var(--ig-surface, hsl(0 0% 100%));
	--ig-foreground: var(--ig-ink, hsl(225 70% 17%));
	--ig-muted: hsl(220 20% 96%);
	--ig-muted-foreground: hsl(220 10% 46%);
	--ig-border: hsl(220 20% 90%);
	--ig-card: hsl(0 0% 100%);
	--ig-radius: 0.75rem;

	/* Icon tint pairs, switched by the icon-color modifier. */
	--ig-icon-bg: hsl(38 91% 55% / 0.15);
	--ig-icon-bg-hover: hsl(38 91% 55% / 0.25);
	--ig-icon-fg: var(--ig-gold);

	/* Icon tile shape, switched by the icon-shape modifier. */
	--ig-icon-radius: 0.75rem;

	/* Grid columns (overridden inline per instance). */
	--ig-fc-cols: 3;
	--ig-fc-cols-tablet: 2;
	--ig-fc-cols-mobile: 1;

	padding: 5rem 0;
	background: var(--ig-background);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	box-sizing: border-box;
}

.ig-fc * {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Section background modifiers
   ------------------------------------------------------------------------- */
.ig-fc--bg-none {
	background: var(--ig-background);
}

.ig-fc--bg-muted {
	background: var(--ig-muted);
}

.ig-fc--bg-navy {
	background: var(--ig-navy);
}

.ig-fc__container {
	width: 100%;
	max-width: 72rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* =========================================================================
   Header
   ========================================================================= */
.ig-fc__head {
	text-align: center;
	max-width: 48rem;
	margin: 0 auto 3.5rem;
}

.ig-fc__eyebrow {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ig-gold);
	margin: 0 0 0.75rem;
}

.ig-fc__heading {
	font-size: clamp(1.875rem, 4vw, 2.25rem);
	font-weight: 700;
	color: var(--ig-navy);
	line-height: 1.2;
	margin: 0;
}

.ig-fc__intro {
	margin: 1.25rem 0 0;
	color: var(--ig-muted-foreground);
	line-height: 1.7;
}

/* Header colors on a navy section. */
.ig-fc--bg-navy .ig-fc__heading {
	color: hsl(0 0% 100%);
}

.ig-fc--bg-navy .ig-fc__intro {
	color: rgba(255, 255, 255, 0.8);
}

.ig-fc--bg-navy .ig-fc__eyebrow {
	color: var(--ig-gold-light);
}

/* =========================================================================
   Grid
   ========================================================================= */
.ig-fc__grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(var(--ig-fc-cols-mobile, 1), minmax(0, 1fr));
}

@media (min-width: 640px) {
	.ig-fc__grid {
		grid-template-columns: repeat(var(--ig-fc-cols-tablet, 2), minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ig-fc__grid {
		grid-template-columns: repeat(var(--ig-fc-cols, 3), minmax(0, 1fr));
	}
}

/* =========================================================================
   Card
   ========================================================================= */
.ig-fc__card {
	border-radius: 1rem;
	padding: 2rem;
	text-align: center;
	transition: box-shadow 0.2s ease, opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Card style: light (shadow, no border). */
.ig-fc--cardstyle-light .ig-fc__card {
	background: var(--ig-card);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Card style: bordered. */
.ig-fc--cardstyle-bordered .ig-fc__card {
	background: var(--ig-card);
	border: 1px solid var(--ig-border);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Card style: navy. */
.ig-fc--cardstyle-navy .ig-fc__card {
	background: var(--ig-navy);
	border: 1px solid var(--ig-navy-light);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.ig-fc__card:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.12);
}

/* -------------------------------------------------------------------------
   Icon tile
   ------------------------------------------------------------------------- */
.ig-fc--icon-gold {
	--ig-icon-bg: hsl(38 91% 55% / 0.15);
	--ig-icon-bg-hover: hsl(38 91% 55% / 0.25);
	--ig-icon-fg: var(--ig-gold);
}

.ig-fc--icon-teal {
	--ig-icon-bg: hsl(174 60% 42% / 0.1);
	--ig-icon-bg-hover: hsl(174 60% 42% / 0.2);
	--ig-icon-fg: var(--ig-teal);
}

.ig-fc--iconshape-rounded {
	--ig-icon-radius: 0.75rem;
}

.ig-fc--iconshape-circle {
	--ig-icon-radius: 9999px;
}

.ig-fc--iconshape-square {
	--ig-icon-radius: 0;
}

.ig-fc__icon {
	width: 3.5rem;
	height: 3.5rem;
	flex-shrink: 0;
	margin: 0 auto 1.25rem;
	border-radius: var(--ig-icon-radius);
	background: var(--ig-icon-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, transform 0.3s ease;
}

.ig-fc__card:hover .ig-fc__icon {
	background: var(--ig-icon-bg-hover);
}

.ig-fc__icon svg,
.ig-fc__icon i {
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1.75rem;
	color: var(--ig-icon-fg);
}

.ig-fc__icon svg {
	fill: currentColor;
}

/* -------------------------------------------------------------------------
   Card text
   ------------------------------------------------------------------------- */
.ig-fc__card-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--ig-navy);
	margin: 0 0 0.75rem;
}

.ig-fc__card-desc {
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--ig-muted-foreground);
	margin: 0;
}

.ig-fc__card-link {
	display: inline-block;
	margin-top: 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ig-teal);
	text-decoration: none;
}

.ig-fc__card-link:hover {
	text-decoration: underline;
}

/* Navy cards invert text colors. */
.ig-fc--cardstyle-navy .ig-fc__card-title {
	color: hsl(0 0% 100%);
}

.ig-fc--cardstyle-navy .ig-fc__card-desc {
	color: rgba(255, 255, 255, 0.8);
}

.ig-fc--cardstyle-navy .ig-fc__card-link {
	color: var(--ig-gold);
}

/* =========================================================================
   Layout: icon on left (inline)
   ========================================================================= */
.ig-fc--layout-left .ig-fc__card {
	display: flex;
	gap: 1rem;
	text-align: left;
	align-items: flex-start;
}

.ig-fc--layout-left .ig-fc__icon {
	width: 3rem;
	height: 3rem;
	margin: 0;
}

.ig-fc--layout-left .ig-fc__icon svg,
.ig-fc--layout-left .ig-fc__icon i {
	width: 1.5rem;
	height: 1.5rem;
	font-size: 1.5rem;
}

.ig-fc--layout-left .ig-fc__card-title {
	margin-bottom: 0.5rem;
}

/* =========================================================================
   Reveal-on-scroll (respects prefers-reduced-motion)
   ========================================================================= */
.ig-fc--animate .ig-fc__card {
	opacity: 0;
	transform: translateY(30px);
}

.ig-fc--animate .ig-fc__card.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.ig-fc--animate .ig-fc__card {
		opacity: 1;
		transform: none;
		transition: box-shadow 0.2s ease;
	}

	.ig-fc__icon,
	.ig-fc__card {
		transition: none;
	}
}