/**
 * Service cards for hub pages.
 *
 * Self-contained rather than reusing the theme's `.svc-card`, whose styles live
 * in home.css and only load on the front page.
 *
 * No broad `.tkf-card a { color }` rule here: a descendant colour rule would
 * outrank the CTA styling, which is how buttons ended up magenta on magenta
 * once already.
 */

.tkf-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin-block: 1.75rem;
}

.tkf-card {
	display: flex;
	flex-direction: column;
	padding: clamp(1.15rem, 3vw, 1.6rem);
	background: var(--surface, #FFFFFF);
	border: 1px solid var(--hairline, #E7D8F2);
	border-radius: var(--r, 16px);
	box-shadow: var(--sh-sm, 0 1px 2px #1E123310, 0 2px 6px #1E12330A);
	text-decoration: none;
	color: inherit;
	transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, border-color .18s;
}

.tkf-card:hover,
.tkf-card:focus-visible {
	transform: translateY(-3px);
	border-color: var(--hairline-2, #D8C2E8);
	box-shadow: var(--sh-md, 0 2px 6px #1E123312, 0 14px 34px -10px #1E123326);
}

.tkf-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	margin-bottom: .85rem;
	border-radius: var(--r-sm, 10px);
	background: var(--violet-soft, #9B23D414);
	color: var(--violet, #9B23D4);
}

.tkf-card-icon svg {
	width: 1.35rem;
	height: 1.35rem;
}

/* Overrides the theme's `.entry h3 { margin-top: 2rem }` inside page content. */
.entry .tkf-card .tkf-card-title,
.tkf-card-title {
	margin: 0 0 .4rem;
	font-size: 1.12rem;
	font-weight: 750;
	line-height: 1.25;
	color: var(--ink, #1E1233);
}

.tkf-card-blurb {
	margin: 0 0 1rem;
	font-size: .93rem;
	line-height: 1.55;
	color: var(--ink-2, #4C3D66);
}

.tkf-card-price {
	margin: auto 0 .9rem;
	font-size: 1.15rem;
	font-weight: 750;
	color: var(--ink, #1E1233);
}

.tkf-card-from {
	margin-right: .3rem;
	font-size: .82rem;
	font-weight: 500;
	color: var(--muted, #7C6B94);
}

.tkf-card-cta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .92rem;
	font-weight: 650;
	color: var(--violet, #9B23D4);
}

.tkf-card-cta::after {
	content: "";
	width: .42rem;
	height: .42rem;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .18s ease;
}

.tkf-card:hover .tkf-card-cta::after {
	transform: rotate(45deg) translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
	.tkf-card,
	.tkf-card-cta::after {
		transition: none;
	}
}

/* ---------------- gently floating illustration ---------------- */

/*
 * Carried over from the old Divi page, which animated `bottom` on a `.hvimage`
 * class. Animating `bottom` forces layout on every frame; a transform is
 * composited instead, so this costs nothing and cannot shift surrounding
 * content. Slow and small on purpose: it should read as alive, not as motion.
 */
.tkf-float img {
	animation: tkf-float 5s ease-in-out infinite;
	will-change: transform;
}

@keyframes tkf-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
	.tkf-float img {
		animation: none;
		will-change: auto;
	}
}