/**
 * Did You Know? — floating departmental hero fact card.
 */

.dyk {
	--dyk-accent: #c62828;
	--dyk-accent-soft: rgba(198, 40, 40, 0.14);
	--dyk-ink: #132033;
	--dyk-muted: #5c6570;
	--dyk-card: rgba(255, 255, 255, 0.96);
	--dyk-border: rgba(255, 255, 255, 0.55);
	position: absolute;
	z-index: 5;
	bottom: clamp(1rem, 3vw, 1.75rem);
	width: min(22rem, calc(100% - 2rem));
	pointer-events: none;
}

.dyk--side-end {
	right: clamp(1rem, 3.5vw, 2.25rem);
	left: auto;
}

.dyk--side-start {
	left: clamp(1rem, 3.5vw, 2.25rem);
	right: auto;
}

.dyk__card {
	position: relative;
	overflow: hidden;
	padding: 1rem 1.1rem 0.95rem;
	border: 1px solid var(--dyk-border);
	border-radius: 1rem;
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, var(--dyk-card) 55%, rgba(255, 255, 255, 0.92) 100%);
	box-shadow:
		0 18px 40px rgba(10, 18, 32, 0.22),
		0 2px 0 rgba(255, 255, 255, 0.65) inset;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--dyk-ink);
	pointer-events: auto;
	transform: translateY(8px);
	opacity: 0;
	animation: dyk-rise 0.65s ease forwards;
	animation-delay: 0.18s;
}

.dyk__glow {
	position: absolute;
	top: -40%;
	right: -20%;
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	background: radial-gradient(circle, var(--dyk-accent-soft) 0%, transparent 70%);
	pointer-events: none;
}

.dyk__head {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-bottom: 0.55rem;
}

.dyk__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 0.55rem;
	background: var(--dyk-accent-soft);
	color: var(--dyk-accent);
	flex-shrink: 0;
}

.dyk__icon {
	display: block;
}

.dyk__eyebrow {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dyk-accent);
}

.dyk__text {
	position: relative;
	margin: 0;
	font-family: var(--mara-font-heading, Manrope, sans-serif);
	font-size: clamp(0.95rem, 1.5vw, 1.05rem);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: var(--dyk-ink);
}

.dyk__meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: 0.75rem 0 0;
}

.dyk__dots {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
}

.dyk__dot {
	width: 0.35rem;
	height: 0.35rem;
	border-radius: 999px;
	background: rgba(19, 32, 51, 0.18);
}

.dyk__dot.is-active {
	width: 1rem;
	background: var(--dyk-accent);
}

/* Department tones */
.dyk--crimson { --dyk-accent: #c62828; --dyk-accent-soft: rgba(198, 40, 40, 0.14); }
.dyk--safari { --dyk-accent: #2f6b3a; --dyk-accent-soft: rgba(47, 107, 58, 0.14); }
.dyk--cyan { --dyk-accent: #0891b2; --dyk-accent-soft: rgba(8, 145, 178, 0.16); }
.dyk--amber { --dyk-accent: #c2410c; --dyk-accent-soft: rgba(194, 65, 12, 0.14); }
.dyk--electric { --dyk-accent: #ca8a04; --dyk-accent-soft: rgba(202, 138, 4, 0.18); }
.dyk--slate { --dyk-accent: #475569; --dyk-accent-soft: rgba(71, 85, 105, 0.16); }
.dyk--green { --dyk-accent: #15803d; --dyk-accent-soft: rgba(21, 128, 61, 0.14); }
.dyk--navy { --dyk-accent: #1e3a5f; --dyk-accent-soft: rgba(30, 58, 95, 0.14); }
.dyk--indigo { --dyk-accent: #4f46e5; --dyk-accent-soft: rgba(79, 70, 229, 0.14); }
.dyk--rose { --dyk-accent: #be185d; --dyk-accent-soft: rgba(190, 24, 93, 0.14); }
.dyk--blush { --dyk-accent: #a21caf; --dyk-accent-soft: rgba(162, 28, 175, 0.14); }
.dyk--teal { --dyk-accent: #0f766e; --dyk-accent-soft: rgba(15, 118, 110, 0.16); }
.dyk--calm { --dyk-accent: #0e7490; --dyk-accent-soft: rgba(14, 116, 144, 0.14); }

@keyframes dyk-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 900px) {
	.dyk,
	.dyk--side-end,
	.dyk--side-start {
		position: relative;
		inset: auto;
		right: auto;
		left: auto;
		bottom: auto;
		width: min(100%, 28rem);
		margin: 0 auto;
		padding: 0 clamp(1rem, 4vw, 1.5rem) clamp(1rem, 3vw, 1.5rem);
		z-index: 2;
	}
}

/* Give absolute cards room inside dense heroes */
@media (min-width: 901px) {
	.hosp__hero:has(.dyk),
	.tw__hero:has(.dyk),
	.ci__hero:has(.dyk),
	.me__hero:has(.dyk),
	.ee__hero:has(.dyk),
	.bc__hero:has(.dyk),
	.ag__hero:has(.dyk),
	.bs__hero:has(.dyk),
	.ls__hero:has(.dyk),
	.fd__hero:has(.dyk),
	.co__hero:has(.dyk),
	.sec__hero:has(.dyk),
	.wellness__hero:has(.dyk) {
		padding-bottom: clamp(7.5rem, 14vw, 9.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dyk__card {
		animation: none;
		opacity: 1;
		transform: none;
	}
}