/* ==========================================================================
   Category pages — "Overview" section (template-parts/categories/overview.php),
   the same design as the Yoga Teacher Training page's overview: story on
   the left, highlight cards on the right. Loaded on the Retreats, Yoga
   Trek, Healing, Aerial Yoga and Singing Bowl pages (inc/category-overview.php).
   Hover: topic chips fill brand green; each highlight card lifts and takes
   its own brand colour (green, saffron, gold, sage) with a top bar sweep.
   ========================================================================== */
.cat-overview { position: relative; overflow: hidden; }
.cat-overview::before {
	content: 'ॐ';
	position: absolute;
	right: -3%;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-heading);
	font-size: clamp(14rem, 28vw, 26rem);
	line-height: 1;
	color: var(--color-primary);
	opacity: 0.04;
	pointer-events: none;
}
.cat-overview-grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 56px;
	align-items: center;
}
.cat-overview-text h2 {
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	line-height: 1.15;
	margin: 12px 0 18px;
}
.cat-overview-highlight {
	color: var(--color-primary);
	background-image: linear-gradient(transparent 64%, rgba(217, 138, 61, 0.28) 64%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.cat-overview-intro {
	margin-bottom: 24px;
	font-size: 1.05rem;
	line-height: 1.85;
	color: var(--color-text-light);
}

/* Topic chips */
.cat-overview-topics { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; padding: 0; list-style: none; }
.cat-overview-topics li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--color-primary-dark);
	cursor: default;
	transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.cat-overview-topics svg { width: 15px; height: 15px; color: var(--color-secondary); transition: color var(--transition); }
.cat-overview-topics li:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
	transform: translateY(-2px);
}
.cat-overview-topics li:hover svg { color: #f4d9a8; }
.cat-overview-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Highlight cards (2 x 2, the right column slightly offset) */
.cat-overview-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.cat-stat {
	--stat: var(--color-primary);
	--stat-text: var(--color-primary);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	min-height: 150px;
	padding: 24px 22px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.cat-stat--2 { --stat: var(--color-secondary); --stat-text: var(--color-secondary-dark); margin-top: 28px; }
.cat-stat--3 { --stat: var(--color-gold); --stat-text: #9a7a2e; }
.cat-stat--4 { --stat: var(--color-primary-light); --stat-text: var(--color-primary-light); margin-top: 28px; }
.cat-stat::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--stat);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 350ms ease;
}
.cat-stat::after {
	content: '';
	position: absolute;
	right: -30px;
	top: -30px;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: var(--stat);
	opacity: 0.08;
	transition: transform 500ms ease, opacity 500ms ease;
}
.cat-stat-value {
	position: relative;
	font-family: var(--font-heading);
	font-size: clamp(2rem, 3vw, 2.6rem);
	line-height: 1;
	color: var(--stat-text);
}
.cat-stat-label {
	position: relative;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-light);
}
.cat-stat:hover {
	transform: translateY(-6px);
	border-color: var(--stat);
	box-shadow: 0 18px 40px rgba(43, 38, 32, 0.14);
}
.cat-stat:hover::before { transform: scaleX(1); }
.cat-stat:hover::after { transform: scale(1.6); opacity: 0.14; }
.cat-overview-place {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0 0;
	font-size: 0.9rem;
	color: var(--color-text-light);
}
.cat-overview-place svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-secondary); }

@media (max-width: 1024px) {
	.cat-overview-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 520px) {
	.cat-overview::before { font-size: 12rem; right: -20%; }
	.cat-overview-stats { gap: 12px; }
	.cat-stat { min-height: 120px; padding: 18px 16px; }
	.cat-stat--2, .cat-stat--4 { margin-top: 0; }
	.cat-stat-value { font-size: 1.8rem; }
	.cat-overview-actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.cat-stat, .cat-stat::before, .cat-stat::after, .cat-overview-topics li { transition: none; }
	.cat-stat:hover, .cat-overview-topics li:hover { transform: none; }
}