/* ==========================================================================
   Home "Why Students Trust [Site Name]" quick-links grid
   (template-parts/home/home-key-features.php, inc/key-features-data.php) —
   a pill eyebrow + gradient heading + an om divider, a numbered grid of
   resource cards, and a "Still have a question?" strip.
   Every card has its own colour (--kf-accent, set per card in the data
   file). Hover: the card lifts, a colour bar sweeps across the top, the
   border, glow, number and title take the card's colour, the background
   picks up a light tint and the icon badge tilts.
   ========================================================================== */
.kf-section {
	position: relative;
	overflow: hidden;
}
.kf-section::before,
.kf-section::after {
	content: '';
	position: absolute;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(217, 138, 61, 0.10), transparent 70%);
	pointer-events: none;
	z-index: 0;
}
.kf-section::before { top: -120px; left: -120px; }
.kf-section::after { bottom: -140px; right: -100px; background: radial-gradient(circle, rgba(47, 93, 80, 0.08), transparent 70%); }
.kf-section .container { position: relative; z-index: 1; }

.kf-head { max-width: 820px; }

.eyebrow--pill {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: 8px 22px;
	box-shadow: var(--shadow-sm);
	margin-bottom: 20px;
}
.eyebrow--pill::before,
.eyebrow--pill::after {
	content: '';
	width: 16px;
	height: 2px;
	background: var(--color-secondary);
	border-radius: 2px;
}

.text-gradient {
	background: linear-gradient(135deg, var(--color-secondary), var(--color-gold));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.kf-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 28px;
}
.kf-divider span {
	width: 90px;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--color-border));
}
.kf-divider span:last-child { background: linear-gradient(to left, transparent, var(--color-border)); }
.kf-divider svg { width: 22px; height: 22px; color: var(--color-secondary); }

/* ---- Cards ---- */
.kf-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.kf-card {
	--kf-accent: var(--color-secondary);
	--kf-ease: cubic-bezier(.2, .7, .2, 1);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 30px 28px 28px;
	text-align: left;
	color: var(--color-text);
	box-shadow: var(--shadow-sm);
	transition: opacity 700ms ease, transform 400ms var(--kf-ease), box-shadow 400ms ease, border-color 400ms ease, background-color 400ms ease;
}
.kf-card > * { position: relative; z-index: 1; }
/* Colour bar across the top — sweeps in on hover. */
.kf-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	z-index: 2;
	background: var(--kf-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 450ms var(--kf-ease);
}
/* Soft circle of the card's colour in the corner. */
.kf-card::after {
	content: '';
	position: absolute;
	top: -46px;
	right: -46px;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: var(--kf-accent);
	opacity: 0.07;
	transition: transform 600ms var(--kf-ease), opacity 400ms ease;
}
.kf-number {
	position: absolute;
	top: 22px;
	right: 24px;
	font-family: var(--font-heading);
	font-size: 0.95rem;
	color: var(--color-text-light);
	opacity: 0.55;
	transition: color 350ms ease, opacity 350ms ease, transform 400ms var(--kf-ease);
}
.kf-icon {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.55rem;
	margin-bottom: 18px;
	background: var(--kf-accent);
	background: linear-gradient(145deg, var(--kf-accent), color-mix(in srgb, var(--kf-accent) 72%, #000));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), var(--shadow-sm);
	transition: transform 500ms var(--kf-ease), box-shadow 400ms ease;
}
.kf-card h3 { font-size: 1.08rem; margin-bottom: 8px; transition: color 350ms ease; }
.kf-card p { color: var(--color-text-light); font-size: 0.92rem; margin-bottom: 0; line-height: 1.6; }
.kf-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 18px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-primary-dark);
	color: color-mix(in srgb, var(--kf-accent) 70%, #1b1b1b);
}
.kf-arrow { display: inline-block; transition: transform 350ms var(--kf-ease); }

.kf-card:hover,
a.kf-card:focus-visible {
	transform: translateY(-8px);
	color: var(--color-text);
	text-decoration: none;
	border-color: var(--kf-accent);
	background-color: color-mix(in srgb, var(--kf-accent) 5%, var(--color-surface));
	box-shadow: 0 22px 44px rgba(43, 38, 32, 0.12), 0 10px 26px color-mix(in srgb, var(--kf-accent) 22%, transparent);
}
.kf-card:hover::before,
a.kf-card:focus-visible::before { transform: scaleX(1); }
.kf-card:hover::after,
a.kf-card:focus-visible::after { transform: scale(1.5); opacity: 0.13; }
.kf-card:hover .kf-number,
a.kf-card:focus-visible .kf-number { color: var(--kf-accent); opacity: 1; transform: scale(1.15); }
.kf-card:hover .kf-icon,
a.kf-card:focus-visible .kf-icon {
	transform: rotate(-8deg) scale(1.08);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 12px 24px color-mix(in srgb, var(--kf-accent) 40%, transparent);
}
.kf-card:hover h3,
a.kf-card:focus-visible h3 { color: color-mix(in srgb, var(--kf-accent) 72%, #1b1b1b); }
.kf-card:hover .kf-arrow,
a.kf-card:focus-visible .kf-arrow { transform: translateX(5px); }
a.kf-card:focus-visible { outline: 3px solid var(--kf-accent); outline-offset: 3px; }

/* ---- "Still have a question?" strip ---- */
.kf-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px 32px;
	margin-top: 40px;
	padding: 26px 32px;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	box-shadow: var(--shadow-md);
	color: #fff;
}
.kf-cta p { margin: 0; color: rgba(255, 255, 255, 0.86); font-size: 1rem; }
.kf-cta p strong { display: block; margin-bottom: 2px; font-family: var(--font-heading); font-size: 1.3rem; color: #fff; }
.kf-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.kf-cta .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.6); background: transparent; }
.kf-cta .btn-outline:hover,
.kf-cta .btn-outline:focus-visible { background: #fff; border-color: #fff; color: var(--color-primary-dark); }

/* ---- Responsive & reduced motion ---- */
@media (max-width: 900px) {
	.kf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.kf-grid { grid-template-columns: 1fr; }
	.kf-cta { flex-direction: column; align-items: stretch; text-align: center; padding: 24px 22px; }
	.kf-cta-actions { justify-content: center; }
	.kf-cta-actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.kf-card, .kf-card::before, .kf-card::after, .kf-number, .kf-icon, .kf-arrow { transition: none; }
	.kf-card:hover, a.kf-card:focus-visible,
	.kf-card:hover .kf-icon, .kf-card:hover .kf-number, .kf-card:hover .kf-arrow { transform: none; }
}