/* =====================================================================
 * WorkSmarter — Zones
 * Each practice area has its own colour identity, applied via a body
 * class (see ws_body_classes in functions.php) and per-card --z-* vars.
 *
 *   Chabit ........... teal    (logo colour)
 *   Coaching ......... violet
 *   IT Consultancy ... green   (with professional-blue gradient)
 *   Productivity ..... amber / orange
 * ===================================================================== */

/* --- Chabit: teal --- */
.zone-chabit {
	--accent: #0fb5ae;
	--accent-strong: #0a8c86;
	--accent-ink: #ffffff;
	--accent-soft: #e4f8f6;
	--accent-ring: rgba(15, 181, 174, 0.35);
	--accent-grad: linear-gradient(135deg, #2dd4bf, #0e8f89);
}

/* --- Coaching: violet --- */
.zone-coaching {
	--accent: #7c3aed;
	--accent-strong: #6d28d9;
	--accent-ink: #ffffff;
	--accent-soft: #f1eafe;
	--accent-ring: rgba(124, 58, 237, 0.32);
	--accent-grad: linear-gradient(135deg, #a855f7, #6d28d9);
}

/* --- IT & Software Consultancy: green over professional blue --- */
.zone-it {
	--accent: #16a34a;
	--accent-strong: #15803d;
	--accent-ink: #ffffff;
	--accent-soft: #e6f7ec;
	--accent-ring: rgba(22, 163, 74, 0.3);
	--accent-grad: linear-gradient(135deg, #2563eb, #16a34a);
}

/* --- Productivity: amber / orange --- */
.zone-productivity {
	--accent: #f97316;
	--accent-strong: #ea580c;
	--accent-ink: #ffffff;
	--accent-soft: #fff0e4;
	--accent-ring: rgba(249, 115, 22, 0.32);
	--accent-grad: linear-gradient(135deg, #f59e0b, #f97316);
}

/* --- Brand default (home / general / blue) --- */
.zone-brand,
body:not([class*="zone-"]) {
	--accent: #2563eb;
	--accent-strong: #1d4ed8;
	--accent-soft: #eaf1fe;
	--accent-ring: rgba(37, 99, 235, 0.35);
	--accent-grad: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

/* =====================================================================
 * Per-card accent helpers (usable on the front page regardless of zone)
 * Set --z-accent and --z-grad, then reuse the same component styles.
 * ===================================================================== */
.z-brand { --z-accent: #2563eb; --z-grad: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.z-chabit { --z-accent: #0fb5ae; --z-grad: linear-gradient(135deg, #2dd4bf, #0e8f89); }
.z-coaching { --z-accent: #7c3aed; --z-grad: linear-gradient(135deg, #a855f7, #6d28d9); }
.z-it { --z-accent: #16a34a; --z-grad: linear-gradient(135deg, #2563eb, #16a34a); }
.z-productivity { --z-accent: #f97316; --z-grad: linear-gradient(135deg, #f59e0b, #f97316); }

/* Cards carrying their own accent should also drive focus/accent locally */
.ws-zone-card.z-chabit:hover { border-color: #b8ece8; }

/* =====================================================================
 * Zone hero variant: full-bleed tinted hero with accent glow
 * ===================================================================== */
.ws-hero--zone {
	background:
		radial-gradient(900px 420px at 82% -12%, var(--accent-soft), transparent 62%),
		linear-gradient(180deg, #fff, var(--ws-bg-alt));
	border-bottom: 1px solid var(--ws-line);
}

.ws-hero--zone .ws-hero__lede { color: var(--ws-body); }

/* Decorative floating shapes (colourful, subtle) */
.ws-hero__deco {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.ws-hero__deco span {
	position: absolute;
	border-radius: 50%;
	filter: blur(2px);
	opacity: 0.5;
}
.ws-hero__deco span:nth-child(1) {
	width: 220px; height: 220px; top: -60px; right: 8%;
	background: var(--accent-soft);
}
.ws-hero__deco span:nth-child(2) {
	width: 120px; height: 120px; bottom: -30px; left: 6%;
	background: var(--accent-soft);
}
.ws-hero__deco span:nth-child(3) {
	width: 60px; height: 60px; top: 34%; left: 44%;
	background: var(--accent-soft);
}
.ws-hero__grid { position: relative; z-index: 1; }

/* Two-column content + media */
.ws-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}

.ws-split--reverse .ws-split__media { order: -1; }

@media (max-width: 860px) {
	.ws-split { grid-template-columns: 1fr; }
	.ws-split--reverse .ws-split__media { order: 0; }
}

/* Media panel used in zone split sections */
.ws-panel {
	background: var(--accent-soft);
	border-radius: var(--ws-radius-lg);
	padding: clamp(24px, 3vw, 40px);
	border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.ws-panel { border-color: var(--accent-soft); }
}

.ws-panel--dark {
	background: var(--ws-bg-dark);
	color: rgba(255, 255, 255, 0.85);
}
.ws-panel--dark h3, .ws-panel--dark h4 { color: #fff; }

.ws-panel__quote {
	font-family: var(--ws-font-head);
	font-weight: 700;
	font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
	line-height: 1.3;
	color: var(--ws-ink);
}
.ws-panel--dark .ws-panel__quote { color: #fff; }

/* Inline stat row inside a panel */
.ws-panel__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin-top: 24px;
}
.ws-panel__stat__value {
	font-family: var(--ws-font-head);
	font-weight: 800;
	font-size: 2rem;
	color: var(--accent);
	line-height: 1;
}
.ws-panel__stat__label { font-size: 0.86rem; color: var(--ws-muted); margin-top: 4px; }
.ws-panel--dark .ws-panel__stat__value { color: #fff; }
.ws-panel--dark .ws-panel__stat__label { color: rgba(255,255,255,0.7); }

/* App store / device callout */
.ws-store-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ws-store-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--ws-ink);
	color: #fff;
	border-radius: 14px;
	padding: 12px 20px;
	font-family: var(--ws-font-head);
	font-weight: 700;
	box-shadow: var(--ws-shadow-sm);
	transition: transform 0.15s ease, background 0.2s ease;
}
.ws-store-btn:hover { transform: translateY(-2px); background: var(--ws-ink-2); color: #fff; }
.ws-store-btn small { display: block; font-size: 0.68rem; font-weight: 500; opacity: 0.8; }
.ws-store-btn .ws-icon { width: 26px; height: 26px; flex: none; }