/* =============================================================================
   Cards — Standard, Elevated, Feature (icon + hover)
   ========================================================================== */

.wt-card {
	background: var(--wt-surface-container-lowest);
	border: 1px solid var(--wt-outline-variant);
	border-radius: var(--wt-radius-xl);
	padding: var(--wt-stack-lg);
	transition: all var(--wt-transition-base);
}

.wt-card--elevated {
	box-shadow: var(--wt-shadow-md);
}

.wt-card--hover:hover {
	transform: translateY(-4px);
	box-shadow: var(--wt-shadow-lg);
	border-color: var(--wt-primary-fixed);
}

/* Feature card — icon top-left, hover elevates + glows */
.wt-feature-card {
	position: relative;
	background: var(--wt-surface-container);
	border: 1px solid var(--wt-outline-variant);
	border-radius: var(--wt-radius-xl);
	padding: var(--wt-stack-lg);
	overflow: hidden;
	transition: all var(--wt-transition-base);
	display: flex;
	flex-direction: column;
	gap: var(--wt-stack-sm);
}
.wt-feature-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wt-shadow-lg);
	border-color: var(--wt-primary);
}
.wt-feature-card .wt-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: rgba(0, 40, 142, 0.08);
	color: var(--wt-primary);
	border-radius: var(--wt-radius-lg);
	font-size: 28px;
	margin-bottom: var(--wt-stack-sm);
	transition: transform var(--wt-transition-base);
}
.wt-feature-card:hover .wt-feature-icon {
	transform: scale(1.1) rotate(6deg);
}
.wt-feature-card h3 {
	font-size: 20px;
	color: var(--wt-primary);
	margin: 0;
}

/* Bento card variants used on homepage */
.wt-bento-card {
	position: relative;
	background: var(--wt-surface);
	border: 1px solid var(--wt-outline-variant);
	border-radius: 2rem;
	padding: var(--wt-stack-xl);
	overflow: hidden;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: all var(--wt-transition-base);
}
.wt-bento-card:hover {
	border-color: var(--wt-primary);
	transform: translateY(-4px);
	box-shadow: var(--wt-shadow-lg);
}
.wt-bento-card--inverted {
	background: var(--wt-primary);
	color: var(--wt-on-primary);
	border-color: var(--wt-primary);
}
.wt-bento-card--inverted h3 {
	color: #ffffff;
}
.wt-bento-card--inverted .wt-body-md,
.wt-bento-card--inverted p {
	color: rgba(255, 255, 255, 0.85);
}

.wt-bento-card--high {
	background: var(--wt-surface-container-high);
}

.wt-bento-card__deco {
	position: absolute;
	top: 0;
	right: 0;
	padding: var(--wt-stack-lg);
	color: rgba(0, 40, 142, 0.08);
	font-size: 120px;
	line-height: 1;
	pointer-events: none;
	transition: color var(--wt-transition-base);
}
.wt-bento-card:hover .wt-bento-card__deco {
	color: rgba(0, 40, 142, 0.16);
}
.wt-bento-card--inverted .wt-bento-card__deco {
	color: rgba(255, 255, 255, 0.05);
}
.wt-bento-card--inverted:hover .wt-bento-card__deco {
	color: rgba(255, 255, 255, 0.10);
}

.wt-bento-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: rgba(0, 40, 142, 0.08);
	color: var(--wt-primary);
	border-radius: var(--wt-radius-xl);
	font-size: 28px;
	margin-bottom: var(--wt-stack-md);
	transition: transform var(--wt-transition-base);
}
.wt-bento-card--inverted .wt-bento-card__icon {
	background: rgba(255, 255, 255, 0.10);
	color: #ffffff;
}
.wt-bento-card:hover .wt-bento-card__icon {
	transform: scale(1.1);
}

.wt-bento-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--wt-stack-sm);
	font-weight: var(--wt-fw-bold);
	color: var(--wt-primary);
	transition: gap var(--wt-transition-base);
	text-decoration: none;
}
.wt-bento-card:hover .wt-bento-card__cta {
	gap: var(--wt-stack-md);
}
.wt-bento-card--inverted .wt-bento-card__cta {
	color: var(--wt-tertiary-fixed-dim);
}

/* Pill / Badge */
.wt-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: rgba(0, 40, 142, 0.08);
	border: 1px solid rgba(0, 40, 142, 0.20);
	color: var(--wt-primary);
	border-radius: var(--wt-radius-full);
	font-family: var(--wt-font-body);
	font-size: var(--wt-fs-label-caps);
	font-weight: var(--wt-fw-bold);
	letter-spacing: var(--wt-tracking-wide);
	text-transform: uppercase;
}
.wt-pill--amber {
	background: var(--wt-amber);
	color: #0F172A;
	border-color: transparent;
}
.wt-pill--live::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	background: var(--wt-primary);
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(0, 40, 142, 0.25);
	animation: wt-ping 2s ease-out infinite;
}
@keyframes wt-ping {
	0%   { transform: scale(1);   opacity: 1;   }
	80%  { transform: scale(2.4); opacity: 0;   }
	100% { transform: scale(2.4); opacity: 0;   }
}