/* Hero Circle — "Leren is een cirkel" (Claude Design hero 05).
   Volledige specs: ~/claude-projecten/wordpress brief 2026-04-30. */

.hero-c5 {
	background: var(--tm-bg-soft);
	width: 100%;
	overflow: hidden;
}

.hero-c5__inner {
	/* Visuele content-breedte = 1264 − 2 × max(clamp) = 1200px. Dezelfde
	   visible-content-breedte gebruiken we voor de Elementor boxed-secties
	   eronder via een homepage-scoped override (zie tm-components.css
	   "Homepage gutter"). Daardoor staan hero, course-grid en hinges op
	   exact dezelfde linker-/rechterrand op elk viewport-formaat.

	   Horizontale padding via `padding-inline: clamp(16px, 4vw, 32px)`:
	   schaalt vloeiend van 16px (≤ 400vw) tot 32px (≥ 800vw). Verticale
	   padding blijft per breakpoint expliciet (zie media-queries onder). */
	max-width: 1264px;
	margin: 0 auto;
	padding-block: 56px;
	padding-inline: clamp(16px, 4vw, 32px);
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 56px;
	align-items: center;
}

/* ---------- Linkerkolom: copy ---------- */
.hero-c5__copy {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.hero-c5__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--tm-purple-deep);
	background: #fff;
	border: 1px solid #E6E4F0;
	border-radius: 999px;
	letter-spacing: 0.01em;
}
.hero-c5__eyebrow-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.hero-c5__title {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-weight: 800;
	font-size: 60px;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--tm-ink);
	margin: 0;
}
.hero-c5__title-accent {
	color: var(--tm-orange);
}
.hero-c5__title-accent-dot {
	color: var(--tm-purple);
}

.hero-c5__mantra {
	display: inline-flex;
	gap: 10px;
	align-self: flex-start;
	background: var(--tm-ink);
	color: #fff;
	padding: 12px 22px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.18em;
}
.hero-c5__mantra-sep {
	color: var(--tm-orange);
}

.hero-c5__sub {
	font-size: 18px;
	font-weight: 500;
	color: var(--tm-ink-soft);
	max-width: 460px;
	line-height: 1.55;
	margin: 0;
}

.hero-c5__ctas {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 4px;
}
/* Visuele styling van .hero-c5__cta / --primary / --secondary staat in
   tm-components.css onder "Section CTA's" — gedeeld met .tm-btn en
   .tm-hero-style-cta zodat alle standalone section-CTA's één recipe
   gebruiken (paars + shadow + 12px radius + fade-fill hover). */

/* ---------- Rechterkolom: cirkel-stage ---------- */
.hero-c5__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
}

.hero-c5__ring-outer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	animation: hero-c5-spin 60s linear infinite;
	transform-origin: 50% 50%;
}
@keyframes hero-c5-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-c5__ring-outer { animation: none; }
}

/* ---------- Step bubbles ---------- */
/* Pillen zijn `<a href="#…">` met anker-targets op hero, course-grid-hinge,
   trainer-hinge en stats-hinge (zie template-parts/hero-circle.php +
   homepage Elementor-data). text-decoration en color-inheritance reset
   omdat de generic `a {}`-rules van EduBlink anders ingrijpen. Hover
   geeft extra elevatie als affordance dat het klikbaar is. */
.hero-c5__step {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	padding: 10px 18px 10px 10px;
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(30, 27, 75, 0.10);
	border: 1px solid var(--tm-line);
	z-index: 3;
	white-space: nowrap;
	color: inherit;
	text-decoration: none;
	transition: box-shadow .2s ease;
}
.hero-c5__step:hover,
.hero-c5__step:focus-visible {
	box-shadow: 0 12px 32px rgba(30, 27, 75, 0.18);
	color: inherit;
}
.hero-c5__step:focus-visible {
	outline: 2px solid var(--tm-purple);
	outline-offset: 4px;
}

/* Smooth scroll site-wide en scroll-margin op anker-targets — zodat
   `#train`/`#leer`/`#herhaal` netjes onder de sticky header uitkomen
   en niet visueel half achter de menubalk blijven steken. */
html { scroll-behavior: smooth; }
#vraag, #train, #leer, #herhaal {
	scroll-margin-top: 100px;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
.hero-c5__step-bubble {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.hero-c5__step-bubble svg {
	width: 24px;
	height: 24px;
}
.hero-c5__step-text {
	display: flex;
	flex-direction: column;
}
.hero-c5__step-label {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1;
}
.hero-c5__step-sub {
	font-size: 11px;
	font-weight: 600;
	color: var(--tm-ink-soft);
	margin-top: 4px;
	line-height: 1;
}

/* Posities — 12 / 3 / 6 / 9 uur. Iets verder naar buiten dan 16.7/83.3
   omdat TRAIN en HERHAAL bij de oude positie over de center-medaillon
   liepen. Symmetrisch doorgevoerd voor VRAAG/LEER zodat de cirkel
   visueel in balans blijft. */
.hero-c5__step--vraag   { left: 50%;  top: 13%; }
.hero-c5__step--train    { left: 87%;  top: 50%; }
.hero-c5__step--leer    { left: 50%;  top: 87%; }
.hero-c5__step--herhaal { left: 13%;  top: 50%; }

/* Per-step kleuren (bubble + label) */
.hero-c5__step--vraag   .hero-c5__step-bubble { background: var(--tm-purple); box-shadow: 0 8px 22px rgba(91, 79, 229, 0.33); }
.hero-c5__step--vraag   .hero-c5__step-label  { color: var(--tm-purple); }
.hero-c5__step--train    .hero-c5__step-bubble { background: var(--tm-orange); box-shadow: 0 8px 22px rgba(255, 138, 31, 0.33); }
.hero-c5__step--train    .hero-c5__step-label  { color: var(--tm-orange); }
.hero-c5__step--leer    .hero-c5__step-bubble { background: var(--tm-mint); box-shadow: 0 8px 22px rgba(52, 200, 162, 0.33); }
.hero-c5__step--leer    .hero-c5__step-label  { color: var(--tm-mint); }
.hero-c5__step--herhaal .hero-c5__step-bubble { background: var(--tm-coral); box-shadow: 0 8px 22px rgba(255, 111, 97, 0.33); }
.hero-c5__step--herhaal .hero-c5__step-label  { color: var(--tm-coral); }

/* ---------- Centrum medaillon ---------- */
.hero-c5__center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 38%;
	aspect-ratio: 1 / 1;
	z-index: 2;
}
.hero-c5__center-inner {
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 8px solid var(--tm-bg-soft);
	box-shadow:
		0 12px 32px rgba(30, 27, 75, 0.12),
		inset 0 0 0 2px var(--tm-line);
}
.hero-c5__logo {
	width: 56px;
	height: 56px;
	margin-bottom: 8px;
}
/* Wordmark Plus Jakarta Sans 800 — spans expliciet targeten zodat eventuele
   parent-theme regels op `span` of `.elementor-widget span` niet overschrijven. */
.hero-c5__center-brand,
.hero-c5__center-brand .traint,
.hero-c5__center-brand .me {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-weight: 800;
	font-style: normal;
	letter-spacing: -0.025em;
	line-height: 1;
}
.hero-c5__center-brand {
	font-size: 28px;
}
.hero-c5__center-brand .traint { color: var(--tm-ink); }
.hero-c5__center-brand .me     { color: var(--tm-orange); }

/* Idem voor de H1: parent-theme heeft eigen heading-font */
.hero-c5 .hero-c5__title,
.hero-c5 .hero-c5__title .hero-c5__title-accent,
.hero-c5 .hero-c5__title .hero-c5__title-accent-dot {
	font-family: "Plus Jakarta Sans", "Montserrat", system-ui, sans-serif;
	font-weight: 800;
}

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
	.hero-c5__inner {
		grid-template-columns: 1fr;
		gap: 40px;
		padding-block: 40px;
		/* padding-inline blijft via clamp uit de basis-rule */
	}
	.hero-c5__stage {
		max-width: 520px;
		margin: 0 auto;
	}
}

@media (max-width: 767px) {
	.hero-c5__inner {
		padding-block: 32px;
		/* padding-inline blijft via clamp uit de basis-rule */
	}
	.hero-c5__title {
		font-size: 40px;
	}
	.hero-c5__mantra {
		flex-wrap: wrap;
		font-size: 12px;
		letter-spacing: 0.14em;
		padding: 10px 16px;
	}
	.hero-c5__stage {
		max-width: 100%;
	}
	.hero-c5__sub {
		font-size: 16px;
	}
}

@media (max-width: 479px) {
	/* Op smalle schermen wordt de pill-shape (bubble + tekst horizontaal) te
	   groot voor de cirkel-stage; we stacken bubble + label vertikaal en laten
	   de pil-bg/border/shadow vallen zodat ze als compacte iconen-met-onderschrift
	   in de cirkel passen. Sub-tekst valt weg, label blijft. */
	.hero-c5__step {
		flex-direction: column;
		gap: 4px;
		padding: 4px;
		background: transparent;
		border: none;
		box-shadow: none;
	}
	/* Hover/focus op mobile: pill-look terug + sub-tekst tonen.
	   Op touch blijft de hover-state na tap actief tot je elders tikt. */
	.hero-c5__step:hover,
	.hero-c5__step:focus-visible {
		flex-direction: row;
		gap: 10px;
		padding: 8px 14px 8px 8px;
		background: #fff;
		border: 1px solid var(--tm-line);
		box-shadow: 0 12px 32px rgba(30, 27, 75, 0.18);
	}
	.hero-c5__step:hover .hero-c5__step-bubble,
	.hero-c5__step:focus-visible .hero-c5__step-bubble {
		width: 40px;
		height: 40px;
	}
	.hero-c5__step:hover .hero-c5__step-bubble svg,
	.hero-c5__step:focus-visible .hero-c5__step-bubble svg {
		width: 22px;
		height: 22px;
	}
	.hero-c5__step:hover .hero-c5__step-sub,
	.hero-c5__step:focus-visible .hero-c5__step-sub {
		display: block;
	}
	.hero-c5__step:hover .hero-c5__step-label,
	.hero-c5__step:focus-visible .hero-c5__step-label {
		font-size: 13px;
	}
	.hero-c5__step-bubble {
		width: 36px;
		height: 36px;
	}
	.hero-c5__step-bubble svg {
		width: 18px;
		height: 18px;
	}
	.hero-c5__step-sub {
		display: none;
	}
	.hero-c5__step-label {
		font-size: 11px;
		letter-spacing: 0.04em;
	}
	.hero-c5__center-brand {
		font-size: 22px;
	}
	.hero-c5__logo {
		width: 44px;
		height: 44px;
	}
}