/* Celyus Theme */

/* ── Layer order ─────────────────────────────────────── */
@layer reset, base, layout, components, sections, utilities;

/* ── Tokens — outside layers, always available ───────── */
:root {
	/* Colors */
	--color-primary: #216295;
	--color-secondary: #00acab;
	--color-accent: #bd2126;
	--color-text: #1a1a1a;
	--color-bg: #efeeed;
	--color-white: #ffffff;
	--color-border: #e0e0e0;
	
	/* Gradient */
	--gradient-brand: linear-gradient(to right, var(--color-primary), var(--color-secondary));
	
	/* Typography */
	--font-primary: 'Roboto', system-ui, sans-serif;
	--font-secondary: 'PT Serif', Georgia, serif;
	--font-regular: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-extrabold: 800;
	
	/* Type scale */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1.125rem;
	/* Base raised to 18px for editorial readability; lg coincides with base
	(Tailwind-derived scale has no clean step between 18px and 20px). */
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: 3rem;
	
	/* Spacing (8px rhythm) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	
	/* Border radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 20px;
	--radius-full: 9999px;
	
	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
	--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.3);
	
	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-base: 0.25s ease;
	--transition-slow: 0.35s ease;
	
	/* Z-index */
	--z-header: 100;
	--z-overlay: 199;
	--z-drawer: 200;
	--z-modal: 300;
	--z-toast: 400;
	
	/* Section backgrounds */
	--color-bg-light: #f3f9fd;
	
	/* Logo widths */
	--logo-footer-width: 140px;
	
	/* Layout */
	--container-max: 1280px;
	--container-padding: 2rem;
	--header-height: 70px;
}

@media (max-width: 768px) {
	:root {
		--header-height: 60px;
		--container-padding: 1.25rem;
	}
}

/* ── Reset ───────────────────────────────────────────── */
@layer reset {
	
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	
	body {
		margin: 0;
	}
	
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;
		font-size: inherit;
		font-weight: inherit;
	}
	
	p {
		margin: 0;
	}
	
	ul,
	ol {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	
	a {
		text-decoration: none;
		color: inherit;
	}
	
	img,
	video {
		max-width: 100%;
		height: auto;
		display: block;
	}
	
	button {
		cursor: pointer;
		border: none;
		background: none;
		font: inherit;
		padding: 0;
	}
	
	input,
	textarea,
	select {
		font: inherit;
	}
}

/* ── Base ────────────────────────────────────────────── */
@layer base {
	html {
		scroll-behavior: smooth;
	}

	@media (prefers-reduced-motion: reduce) {
		html { scroll-behavior: auto; }
	}

	body {
		font-family: var(--font-primary);
		font-size: var(--text-base);
		font-weight: var(--font-regular);
		color: var(--color-text);
		line-height: 1.3;
		-webkit-font-smoothing: antialiased;
	}
	
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--font-primary);
		line-height: 1.2;
		color: var(--color-primary);
	}
	
	h1 {
		font-size: var(--text-5xl);
		font-weight: var(--font-extrabold);
		margin-bottom: var(--space-6);
	}
	
	h2 {
		font-size: var(--text-4xl);
		font-weight: var(--font-bold);
		margin-bottom: var(--space-4);
	}
	
	h3 {
		font-size: var(--text-2xl);
		font-weight: var(--font-semibold);
		margin-bottom: var(--space-3);
	}
	
	h4 {
		font-size: var(--text-xl);
		font-weight: var(--font-semibold);
		margin-bottom: var(--space-2);
	}
	
	p {
		margin-bottom: var(--space-4);
	}
	
	p:last-child {
		margin-bottom: 0;
	}
	
	/* Editorial link look for section content. Course pages (archive + single)
	   are app-like UI whose links are styled per component — excluded here. */
	p a,
	main:not(.course-archive-page):not(.course-single) section a:not(.btn) {
		color: var(--color-secondary);
		text-decoration: underline;
		transition: color var(--transition-fast);
	}

	p a:hover,
	main:not(.course-archive-page):not(.course-single) section a:hover {
		color: var(--color-primary);
	}
	
	blockquote {
		font-family: var(--font-secondary);
		font-style: italic;
		font-weight: var(--font-bold);
		font-size: var(--text-xl);
		color: var(--color-primary);
		margin: 0;
	}
	
	/* Editorial lists — #main-content wraps ALL page content, sections included
	(CelyusPageLoader::renderPost() echoes it), so this turquoise circle marker
	applies to every list inside it; sidebar/WPForms lists opt out via content:none.
	The dot is flex-centered on the line (no absolute top offset, which drifted
	across font-sizes/line-heights). */
	#main-content ul {
		list-style: none;
		padding-left: 0;
		margin-bottom: var(--space-4);
	}
	
	#main-content ul li {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		margin-bottom: var(--space-2);
	}
	
	#main-content ul li::before {
		content: '';
		flex-shrink: 0;
		width: 12px;
		height: 12px;
		border-radius: var(--radius-full);
		background: var(--color-secondary);
	}
	
	/* Editorial (the_content) blockquote — brand gradient pull-quote box. */
	#main-content blockquote {
		color: var(--color-white);
		font-family: var(--font-secondary);
		font-style: italic;
		font-weight: var(--font-bold);
		font-size: var(--text-2xl);
		text-align: center;
		padding: var(--space-12) var(--space-8);
		margin-block: var(--space-8);
	}
	#main-content blockquote p:last-child {
		margin-bottom: 0;
	}
	/* [celyus_quote] shortcode — same patterned background as the breadcrumb strip. */
	.celyus-quote {
		background-image: url('../img/breadcrumbs-bg.png');
		background-size: cover;
		background-position: top left;
		background-repeat: no-repeat;
	}
	
	@media (max-width: 768px) {
		h1 {
			font-size: var(--text-3xl);
		}
		
		h2 {
			font-size: var(--text-3xl);
		}
		
		h3 {
			font-size: var(--text-xl);
		}
	}
}

/* ── Layout ──────────────────────────────────────────── */
@layer layout {
	.container {
		max-width: var(--container-max);
		margin: 0 auto;
		padding: 0 var(--container-padding);
	}
}

/* ── Components ──────────────────────────────────────── */
@layer components {
	
	/* Header */
	.site-header {
		position: relative;
		background: var(--color-white);
		border-bottom: 1px solid var(--color-border);
		z-index: var(--z-header);
	}
	
	.header-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: var(--container-max);
		margin: 0 auto;
		padding: 0 var(--container-padding);
		height: var(--header-height);
	}
	
	.site-logo img {
		width: var(--logo-width, 120px);
		height: auto;
	}
	
	@media (max-width: 768px) {
		.site-logo img {
			width: var(--logo-mobile-width, 110px);
		}
	}
	
	.mobile-nav-logo img {
		width: var(--logo-mobile-width, 110px);
		height: auto;
	}
	
	/* Desktop nav */
	.primary-nav ul {
		display: flex;
		align-items: center;
	}
	
	.primary-nav li+li::before {
		content: '|';
		color: var(--color-border);
		padding: 0 0.75rem;
		pointer-events: none;
		user-select: none;
	}
	
	.primary-nav a {
		position: relative;
		color: var(--color-text);
		font-size: var(--text-base);
		font-weight: var(--font-medium);
		padding: 0.25rem 0;
		white-space: nowrap;
		transition: color var(--transition-fast);
	}
	
	.primary-nav a::after {
		content: '';
		position: absolute;
		bottom: -2px;
		left: 0;
		right: 0;
		height: 2px;
		background: var(--color-secondary);
		transform: scaleX(0);
		transform-origin: center;
		transition: transform var(--transition-base);
	}
	
	.primary-nav a:hover { color: var(--color-secondary); }
	.primary-nav a:hover::after { transform: scaleX(1); background: var(--color-secondary); }
	
	.primary-nav .current-menu-item > a        { color: var(--color-secondary); }
	.primary-nav .current-menu-item > a::after { transform: scaleX(1); background: var(--color-secondary); }

	/* Dropdown: WP sub-menu as a white box of stacked links that inherit the
	   main-nav link look/behaviour (the .primary-nav a underline animation).
	   Fades in/out via opacity+visibility; opens on hover and keyboard focus. */
	.primary-nav .menu-item-has-children {
		position: relative;
	}

	.primary-nav .sub-menu {
		position: absolute;
		top: 140%;
		left: 0;
		display: block;
		min-width: 420px;
		background: var(--color-white);
		border-radius: var(--radius-sm);
		box-shadow: var(--shadow-xl);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--transition-base), visibility var(--transition-base), border-left var(--transition-base);
		z-index: var(--z-header);
		padding: var(--space-2) var(--space-6) var(--space-4) var(--space-6);
		border-left: 5px solid #c9d5de;
	}
	.primary-nav .sub-menu:hover {
		border-left: 5px solid var(--color-secondary);
	}

	.primary-nav .menu-item-has-children:hover > .sub-menu,
	.primary-nav .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
	}

	.primary-nav .sub-menu li+li::before {
		content: none;
	}

	.primary-nav .sub-menu a:first-child {
		margin-top: var(--space-2);
	}
	.primary-nav .sub-menu a {
		color: #7a848c;
		display: inline-block;
		padding: var(--space-2) 0;
		font-size: 1rem;
	}
	.primary-nav .sub-menu:hover a {
		color: var(--color-text);
	}

	/* Hamburger */
	.nav-toggle {
		display: none;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		padding: 6px;
		width: 36px;
		height: 36px;
	}
	
	.nav-toggle span {
		display: block;
		width: 24px;
		height: 2px;
		background: var(--color-text);
		border-radius: var(--radius-full);
		transform-origin: center;
		transition: transform var(--transition-base), opacity var(--transition-fast);
	}
	
	.nav-toggle.is-open span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	
	.nav-toggle.is-open span:nth-child(2) {
		opacity: 0;
		transform: scaleX(0);
	}
	
	.nav-toggle.is-open span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
	
	/* Mobile drawer */
	.mobile-nav {
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		height: 100%;
		width: min(320px, 85vw);
		background: var(--color-white);
		box-shadow: var(--shadow-lg);
		transform: translateX(100%);
		transition: transform var(--transition-slow);
		z-index: var(--z-drawer);
		padding: var(--space-8) var(--space-6);
		flex-direction: column;
		overflow-y: auto;
	}
	.mobile-nav .sub-menu {
		padding-left: 1.3rem;
		margin-top: var(--space-2);
	}
	
	.mobile-nav.is-open {
		transform: translateX(0);
	}
	
	.mobile-nav-close {
		position: absolute;
		top: var(--space-4);
		right: var(--space-4);
		width: 32px;
		height: 32px;
		opacity: 0.45;
		transition: opacity var(--transition-fast);
	}
	
	.mobile-nav-close:hover {
		opacity: 0.75;
	}
	
	.mobile-nav-close::before,
	.mobile-nav-close::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 18px;
		height: 2px;
		background: var(--color-text);
		border-radius: var(--radius-full);
	}
	
	.mobile-nav-close::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	
	.mobile-nav-close::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	
	.mobile-nav ul {
		margin-top: var(--space-6);
		display: flex;
		flex-direction: column;
	}
	
	.mobile-nav a {
		display: block;
		padding: var(--space-3) 0;
		border-bottom: 1px solid var(--color-border);
		color: var(--color-text);
		font-size: var(--text-base);
		font-weight: var(--font-medium);
		transition: color var(--transition-fast);
	}
	
	.mobile-nav a:hover {
		color: var(--color-primary);
	}
	
	/* Overlay */
	.nav-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--transition-slow), visibility var(--transition-slow);
		z-index: var(--z-overlay);
	}
	
	.nav-overlay.is-open {
		opacity: 1;
		visibility: visible;
	}
	
	@media (max-width: 1024px) {
		.primary-nav {
			display: none;
		}

		.nav-toggle {
			display: flex;
		}

		.mobile-nav {
			display: flex;
		}
	}
}

/* ── Footer ──────────────────────────────────────────── */
@layer components {
	
	/* color és font-size örökölnek innen — nem kell ismételni a gyerekekben */
	.site-footer {
		background: var(--color-primary);
		color: var(--color-white);
		font-size: var(--text-base);
	}
	
	.footer-main {
		padding: var(--space-12) 0;
	}
	
	.footer-grid {
		display: grid;
		grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
		gap: var(--space-8);
		align-items: start;
	}
	
	.footer-logo {
		display: inline-block;
		margin-bottom: var(--space-1);
	}
	
	.footer-logo img {
		width: var(--logo-footer-width, 140px);
		height: auto;
	}
	
	@media (max-width: 768px) {
		.footer-logo img {
			width: var(--logo-mobile-width, 110px);
		}
	}
	
	.footer-col .widget-title {
		display: none;
	}
	
	.footer-col p {
		line-height: 1.2;
		margin-bottom: 0;
	}
	
	.footer-col ul {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}
	
	.footer-col a {
		text-decoration: underline;
		text-underline-offset: 3px;
		transition: color var(--transition-fast);
		color: var(--color-white);
	}
	
	.footer-col a:hover {
		color: var(--color-secondary);
	}
	
	/* Bottom bar */
	.footer-bottom {
		background: var(--color-secondary);
		padding: var(--space-4) 0;
	}
	
	.footer-bottom .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--space-3);
	}
	
	.footer-copyright {
		font-weight: var(--font-semibold);
		margin: 0;
	}
	
	.footer-legal ul {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.footer-legal li + li::before {
		content: '-';
		padding: 0 var(--space-2);
		opacity: 0.6;
	}
	
	.footer-legal a {
		position: relative;
		transition: color var(--transition-fast);
		font-weight: var(--font-semibold);
	}
	
	.footer-legal a::after {
		content: '';
		position: absolute;
		bottom: -2px;
		left: 0;
		right: 0;
		height: 1px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: center;
		transition: transform var(--transition-base);
	}
	
	.footer-legal a:hover::after {
		transform: scaleX(1);
	}
	
	@media (max-width: 768px) {
		.footer-grid {
			grid-template-columns: 1fr 1fr;
		}
		
		.footer-col--brand {
			grid-column: 1 / -1;
		}
		
		.footer-bottom .container {
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-2);
		}
		
		.footer-copyright {
			margin-bottom: 10px;
		}
		
		.footer-legal ul {
			flex-direction: column;
			align-items: flex-start;
		}
		
		.footer-legal li + li::before {
			display: none;
		}
	}
}

/* ── Buttons ─────────────────────────────────────────── */
@layer components {
	
	.btn {
		color: var(--color, inherit);
		background: var(--bgcolor, inherit);
		border-color: var(--brdcolor, inherit);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-3) var(--space-8);
		font-weight: var(--font-bold);
		font-size: var(--text-xl);
		border-radius: var(--radius-md);
		border: 2px solid transparent;
		transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
		white-space: wrap;
	}
	.btn:hover {
		color: var(--color-hover, inherit);
		background: var(--bgcolor-hover, inherit);
		border-color: var(--brdcolor-hover, inherit);
	}
	
	.btn--accent {
		background: var(--color-accent);
		color: var(--color-white);
	}

	.btn--accent:hover {
		background: var(--color-white);
		color: var(--color-accent);
		border: 2px solid var(--color-accent);
	}

	.btn--accent-bordered {
		background: var(--color-accent);
		color: var(--color-white);
		border-color: var(--color-white);
	}

	.btn--accent-bordered:hover {
		background: var(--color-white);
		color: var(--color-accent);
		border-color: var(--color-accent);
	}

	.btn--outline {
		background: transparent;
		color: var(--color-white);
		border-color: var(--color-white);
	}

	.btn--outline:hover {
		background: var(--color-white);
		color: var(--color-primary);
	}

	.btn--secondary {
		background: var(--color-secondary);
		color: var(--color-white);
	}

	.btn--secondary:hover {
		background: var(--color-white);
		color: var(--color-secondary);
		border-color: var(--color-secondary);
	}

	.btn--secondary-outline {
		background: transparent;
		color: var(--color-secondary);
		border-color: var(--color-secondary);
	}

	.btn--secondary-outline:hover {
		background: var(--color-secondary);
		color: var(--color-white);
	}

	.btn--outline-dark {
		background: transparent;
		color: var(--color-text);
		border-color: var(--color-text);
	}

	.btn--outline-dark:hover {
		background: var(--color-text);
		color: var(--color-white);
	}
	
	.btn--white {
		--bgcolor: var(--color-white);
		--color: var(--color-primary);
		--brdcolor: var(--color-secondary);
		--bgcolor-hover: var(--color-secondary);
		--color-hover: var(--color-white);
		--brdcolor-hover: var(--color-secondary);
	}
	
	@media (max-width: 768px) {
		.btn {
			width: 100%;
			justify-content: center;
		}
	}
}

/* ── Sections ────────────────────────────────────────── */
@layer sections {
	
	/* Hero */
	.hero {
		--hero-min-height: 560px;
		position: relative;
		overflow: hidden;
		min-height: var(--hero-min-height);
		background: var(--color-primary);
	}
	
	.hero-image {
		position: absolute;
		inset: 0;
	}
	
	.hero-image .celyus-img-wrap {
		width: 50%;
		min-height: var(--hero-min-height);
		height: 100%;
	}
	
	.hero-content {
		position: relative;
		z-index: 1;
		width: 62%;
		min-height: var(--hero-min-height);
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-6);
		padding: var(--space-20) var(--space-12);
		padding-left: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
		color: var(--color-white);
	}
	
	/* Flex gap handles spacing; the heading inherits the container's white (instead of base primary) */
	.hero-content :where( h1, h2, h3, h4, h5, h6 ) {
		color: inherit;
		margin: 0;
	}
	
	.hero-content::before {
		content: '';
		position: absolute;
		inset: 0;
		background: var(--color-primary);
		clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
		z-index: -1;
	}
	
	.hero-content p {padding-right: 5%;}
	
	.hero-actions {
		display: flex;
		gap: var(--space-4);
		flex-wrap: wrap;
	}
	
	@media (max-width: 768px) {
		.hero {
			display: flex;
			flex-direction: column;
			min-height: auto;
		}
		
		.hero-image {
			--image-height: 350px;
			position: relative;
			inset: auto;
			height: var(--image-height);
			flex-shrink: 0;
			float: none;
		}
		.hero-image img {
			height: var(--image-height);
		}
		
		.hero-image .celyus-img-wrap {
			width: 100%;
			float: none;
		}
		.hero-image .celyus-img { --cimg-pos-m: center top; }
		
		.hero-content {
			width: 100%;
			min-height: auto;
			padding: var(--space-10) var(--container-padding);
		}
		
		.hero-content::before {
			clip-path: none;
		}
	}
	@media (min-width: 1920px) {
		.hero-content p,
		.hero-content h1 {padding-right: 10%;}
	}
	
	/* Features */
	.features {
		background: var(--color-white);
		padding: var(--space-12) 0;
	}
	
	.features-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		max-width: var(--container-max);
		margin: 0 auto;
		padding: 0 var(--container-padding);
	}
	
	.features-item {
		position: relative;
		padding: var(--space-6) var(--space-8);
		text-align: center;
	}
	
	.features-item:not(:first-child)::before {
		content: '';
		position: absolute;
		left: 0;
		top: var(--space-12);
		bottom: var(--space-12);
		width: 2px;
		background: #d2dfe9;
	}
	
	.features-icon {
		margin: 0 auto var(--space-4);
	}
	
	.features-icon img {
		width: 72px;
		height: 72px;
		object-fit: contain;
		margin: 0 auto;
	}
	
	.features-item h3 {
		color: var(--color-primary);
		font-size: var(--text-xl);
		font-weight: var(--font-extrabold);
		line-height: 1.3;
		margin-bottom: var(--space-3);
	}
	
	.features-item p {
		color: var(--color-text);
		font-size: var(--text-base);
		margin-bottom: 0;
	}
	
	@media (max-width: 768px) {
		.features-grid {
			display: flex;
			flex-direction: column;
		}
		
		.features-item {
			padding: var(--space-6) var(--space-4);
		}
		
		.features-item:not(:first-child)::before {
			top: 0;
			bottom: auto;
			left: var(--space-4);
			right: var(--space-4);
			width: auto;
			height: 1px;
		}
	}
	
	/* imgtext / textimg — reusable image+text section layouts */
	.imgtext,
	.textimg {
		--section-min-height: 560px;
		position: relative;
		overflow: hidden;
		min-height: var(--section-min-height);
		background: var(--color-white);
	}
	
	.imgtext-video {
		position: relative;
		aspect-ratio: 16 / 9;
		border-radius: var(--radius-md);
		overflow: hidden;
	}
	
	.imgtext-video iframe {
		width: 100%;
		height: 100%;
		display: block;
	}
	
	.imgtext-image,
	.textimg-image {
		position: absolute;
		inset: 0;
	}
	
	.imgtext-image .celyus-img-wrap,
	.textimg-image .celyus-img-wrap {
		width: 52%;
		min-height: var(--section-min-height);
		height: 100%;
	}
	
	.imgtext-content,
	.textimg-content {
		position: relative;
		z-index: 1;
		width: 60%;
		min-height: var(--section-min-height);
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-4);
		padding-top: var(--space-20);
		padding-bottom: var(--space-20);
	}
	
	.imgtext-actions {
		display: flex;
		gap: var(--space-4);
		flex-wrap: wrap;
	}
	
	/* imgtext: image left, content right */
	.imgtext-content {
		margin-left: auto;
		padding-left: 11%;
		padding-right: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
		background: linear-gradient(to left, var(--color-white) 82%, transparent);
	}
	
	/* textimg: content left, image right */
	.textimg-content {
		margin-right: auto;
		padding-left: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
		padding-right: 11%;
		background: linear-gradient(to right, var(--color-white) 82%, transparent);
	}
	
	/* ── Split layout (2-column grid, no overlap/gradient) ── */
	.imgtext--split,
	.textimg--split {
		min-height: 0;
		overflow: visible;
		display: grid;
		grid-template-columns: var(--split-cols, 1fr 1fr);
		align-items: var(--split-align, center);
		gap: var(--split-gap, var(--space-8));
		padding-top: var(--space-16);
		padding-bottom: var(--space-16);
		padding-left: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
		padding-right: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
	}
	
	.imgtext--split .imgtext-image,
	.textimg--split .textimg-image {
		position: relative;
		inset: auto;
	}
	
	.imgtext--split .imgtext-image .celyus-img-wrap,
	.textimg--split .textimg-image .celyus-img-wrap {
		width: 100%;
		height: auto;
		min-height: 0;
	}
	.imgtext--split .imgtext-image .celyus-img,
	.textimg--split .textimg-image .celyus-img {
		height: auto;
		border-radius: var(--radius-md);
	}
	
	.imgtext--split .imgtext-content,
	.textimg--split .textimg-content {
		position: static;
		width: auto;
		min-height: 0;
		margin: 0;
		padding: 0;
		background: none;
	}
	
	/* textimg--split: image right (swap column order) */
	.textimg--split .textimg-image {
		order: 2;
	}
	
	.textimg--split .textimg-content {
		order: 1;
	}
	
	/* Typography */
	.imgtext-content h2,
	.textimg-content h2 {
		color: var(--color-primary);
		font-weight: var(--font-extrabold);
		margin: 0;
	}
	
	/* Bullet list — styled for both layouts */
	.imgtext-body ul,
	.textimg-body ul {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding: 0;
		margin: 0;
		margin-top: 25px;
		margin-bottom: 20px;
	}
	
	.imgtext-body ul li,
	.textimg-body ul li {
		display: flex;
		align-items: center;
		gap: var(--space-3);
	}
	
	.imgtext-body ul li::before,
	.textimg-body ul li::before {
		content: '';
		flex-shrink: 0;
		width: 14px;
		height: 14px;
		border-radius: var(--radius-full);
		background: var(--color-secondary);
	}
	
	@media (max-width: 768px) {
		.imgtext,
		.textimg {
			display: flex;
			flex-direction: column;
			min-height: auto;
		}
		
		.imgtext-image,
		.textimg-image {
			position: relative;
			inset: auto;
			height: 350px;
			flex-shrink: 0;
		}
		
		.imgtext-image .celyus-img-wrap,
		.textimg-image .celyus-img-wrap {
			width: 100%;
		}
		
		.imgtext-content,
		.textimg-content {
			width: 100%;
			min-height: auto;
			margin: 0;
			padding: var(--space-10) var(--container-padding);
			background: var(--color-white);
		}
		
		.imgtext--split,
		.textimg--split {
			display: grid;
			grid-template-columns: 1fr;
			gap: var(--space-6);
		}
		
		.imgtext--split .imgtext-image,
		.textimg--split .textimg-image {
			height: auto;
		}
		
		.textimg--split .textimg-image,
		.textimg--split .textimg-content {
			order: unset;
		}
	}
	
	/* Showcase 3 icons */
	.showcase-3icons {
		background: var(--color-bg-light);
		padding: var(--space-16) 0;
	}
	
	.showcase-3icons-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-2);
		text-align: center;
		margin-bottom: var(--space-12);
	}
	
	.showcase-3icons-header h2 {
		color: var(--color-primary);
	}
	
	.showcase-3icons-header h2 .text-accent {
		color: var(--color-accent);
	}
	
	.showcase-3icons-subtitle {
		font-size: var(--text-xl);
		font-weight: var(--font-regular);
		color: var(--color-primary);
	}
	
	.showcase-3icons-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: var(--space-8);
		justify-content: center;
	}
	
	.icon-box {
		display: flex;
		align-items: flex-start;
		gap: var(--space-6);
	}
	
	.icon-box-icon {
		flex-shrink: 0;
	}
	
	.icon-box-icon img {
		width: 80px;
		height: 80px;
		object-fit: contain;
	}
	
	.icon-box-body {
		border-left: 2px solid var(--color-primary);
		padding-left: var(--space-6);
	}
	
	.icon-box-title {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		margin-bottom: var(--space-3);
	}
	
	.icon-box-title-top {
		font-size: var(--text-3xl);
		font-weight: var(--font-extrabold);
		color: var(--color-primary);
		line-height: 1;
	}
	
	.icon-box-title-bottom {
		font-size: var(--text-base);
		font-weight: var(--font-bold);
		color: var(--color-primary);
	}
	
	.icon-box-body > p {
		color: var(--color-text);
		font-size: var(--text-base);
	}
	
	/* showcase-3icons — optional stat boxes + mid/footer text (e.g. "Comment renouveler") */
	.showcase-3icons-stats {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-4);
		margin: 0 auto var(--space-6);
	}
	
	.stat-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-2);
		width: 210px;
		padding: var(--space-6) var(--space-12);
		background: var(--color-white);
		border: 2px solid var(--color-secondary);
		border-radius: var(--radius-lg);
		text-align: center;
	}
	
	.stat-box-value {
		font-size: var(--text-3xl);
		font-weight: var(--font-extrabold);
		color: var(--color-secondary);
		line-height: 1;
	}
	
	.stat-box-label {
		font-size: var(--text-base);
		font-weight: var(--font-bold);
		color: var(--color-text);
	}
	
	.stat-box-sep {
		color: var(--color-text);
		font-size: var(--text-sm);
	}
	
	.showcase-3icons-midtext,
	.showcase-3icons-footer {
		text-align: center;
		color: var(--color-primary);
		font-weight: var(--font-bold);
		font-size: var(--text-xl);
		margin-bottom: var(--space-10);
	}
	
	.showcase-3icons-footer {
		max-width: 750px;
		margin: var(--space-10) auto 0;
		text-align: center;
	}
	
	@media (max-width: 768px) {
		.showcase-3icons-grid {
			grid-template-columns: 1fr;
			gap: var(--space-6);
		}
		
		.icon-box-title-top {
			font-size: var(--text-2xl);
		}
	}
	
	/* Plans 3col */
	.plans-3col {
		padding: var(--space-20) 0;
		background: var(--color-bg-light);
	}
	
	.plans-header {
		text-align: center;
		margin-bottom: var(--space-12);
	}
	
	.plans-header h2 {
		color: var(--color-primary);
		margin-bottom: var(--space-1);
	}
	
	.plans-header h2 .text-accent {
		color: var(--color-accent);
	}
	
	.plans-subtitle {
		color: var(--color-primary);
		font-size: var(--text-lg);
		font-weight: var(--font-semibold);
	}
	
	.plans-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-6);
	}
	
	.plan-card {
		background: var(--color-white);
		border: 2px solid var(--color-secondary);
		border-radius: var(--radius-lg);
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	
	.plan-card-badge {
		display: flex;
		justify-content: center;
		padding: var(--space-6) var(--space-6) 0;
	}
	
	.plan-card-badge img {
		width: auto;
		height: auto;
		max-width: var(--badge-size, 100%);
	}
	
	.plan-card-body {
		padding: var(--space-6);
		display: flex;
		flex-direction: column;
		flex: 1;
		text-align: center;
	}
	
	.plan-card-title {
		color: var(--color-primary);
		margin-bottom: var(--space-3);
		text-align: center;
		font-weight: var(--font-extrabold);
		font-size: var(--text-3xl);
	}
	
	.plan-card-text {
		color: var(--color-text);
		font-size: var(--text-base);
		flex: 1;
		margin-bottom: var(--space-4);
	}
	
	.plan-card-price {
		font-size: var(--text-3xl);
		font-weight: var(--font-semibold);
		color: var(--color-primary);
		margin-bottom: var(--space-6);
	}
	
	@media (max-width: 768px) {
		.plans-grid {
			grid-template-columns: 1fr;
		}
	}
	
	/* Sessions list */
	.sessions-list {
		padding: var(--space-16) 0;
		background: var(--color-white);
	}
	
	.sessions-inner {
		display: grid;
		grid-template-columns: 280px 1fr;
		gap: var(--space-8);
		align-items: start;
	}
	
	.sessions-left {
		background: var(--color-secondary);
		border-radius: var(--radius-lg);
		padding: var(--space-8);
		display: flex;
		flex-direction: column;
		gap: var(--space-6);
	}
	
	.sessions-left-icon {
		width: 56px;
		height: 56px;
		object-fit: contain;
		margin: 0 auto;
	}

	.sessions-left-text {
		color: var(--color-white);
		font-size: var(--text-base);
	}

	.sessions-left .btn {
		--color: var(--color-secondary);
		--brdcolor-hover: var(--color-white);
		padding-inline: 10px;
		font-size: var(--text-base);
	}

	.sessions-table {
		list-style: none;
		margin: 0 0 var(--space-4) 0;
		padding: 0;
	}

	.session-row {
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: var(--space-6);
		align-items: start;
		padding: var(--space-4) 0;
		border-bottom: 1px solid var(--color-border);
	}
	.session-row:before {content: none}

	.session-info {
		display: grid;
		gap: var(--space-2);
	}

	.session-name {
		margin: 0 0 var(--space-2) 0;
		color: var(--color-text);
	}

	.session-nom {
		font-weight: var(--font-bold);
		color: var(--color-primary);
	}

	.session-data {
		display: flex;
		gap: var(--space-8);
		margin: 0;
		font-size: var(--text-sm);
		font-weight: var(--font-bold);
		color: var(--color-primary);
	}

	/* Session date links to the course single (like the e-learning titles). */
	a.session-date { color: inherit; cursor: pointer; }
	a.session-date:hover { color: var(--color-secondary); }

	.session-places.is-soon {
		color: var(--color-secondary);
	}

	.session-cta {
		align-self: start;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 84px;
		height: 44px;
		border-radius: var(--radius-md);
		background: var(--color-secondary);
		color: var(--color-white);
		font-size: var(--text-xl);
		transition: background var(--transition-fast);
		flex-shrink: 0;
	}
	
	.session-cta:hover {
		background: var(--color-primary);
	}
	
	.sessions-view-all {
		display: inline-block;
		margin-top: var(--space-4);
		color: var(--color-secondary);
		font-weight: var(--font-bold);
		text-decoration: underline;
		transition: color var(--transition-fast);
	}
	
	.sessions-view-all:hover {
		color: var(--color-primary);
	}
	
	@media (max-width: 768px) {
		.sessions-inner {
			grid-template-columns: 1fr;
		}
	}
	
	/* CelyusImage — egységes kép-megjelenítés (object-fit/position) */
	.celyus-img-wrap { display: block; }
	.celyus-img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: var(--cimg-fit, cover);
		object-position: var(--cimg-pos, center);
	}
	.celyus-img-fill {
		position: absolute;
		inset: 0;
		z-index: 0;
	}
	.celyus-img-fill .celyus-img-wrap,
	.celyus-img-fill .celyus-img { height: 100%; }
	@media (max-width: 768px) {
		.celyus-img {
			object-fit: var(--cimg-fit-m, var(--cimg-fit, cover));
			object-position: var(--cimg-pos-m, var(--cimg-pos, center));
		}
	}
	
	/* CTA banner */
	.cta-banner {
		position: relative;
		overflow: hidden;
		background: var(--gradient-brand);
		padding: var(--space-20) 0;
		text-align: center;
	}
	.cta-banner > .container { position: relative; z-index: 1; }
	
	.cta-banner h2 {
		color: var(--color-white);
		margin-bottom: var(--space-1);
	}
	
	.cta-banner-subtitle {
		color: var(--color-white);
		font-size: var(--text-xl);
		max-width: 640px;
		margin: 0 auto var(--space-8);
		font-weight: var(--font-semibold);
	}
	
	/* CTA banner — split layout (szöveg balra, gomb jobbra) */
	.cta-banner--split {
		text-align: left;
	}
	
	.cta-banner--split .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-12);
	}
	
	.cta-banner--split .cta-banner-subtitle {
		margin: var(--space-2) 0 0;
		max-width: none;
	}
	
	.cta-banner--split .btn {
		flex-shrink: 0;
	}
	
	/* CTA banner — dark téma (állítható navy) */
	.cta-banner--dark {
		background: #0e3550;
	}
	
	/* CTA banner — light téma (világoskék háttér, navy szöveg) */
	.cta-banner--light {
		background: var(--color-bg-light);
	}
	
	.cta-banner--light h2 {
		color: var(--color-primary);
	}
	
	.cta-banner--light .cta-banner-subtitle {
		color: var(--color-primary);
	}
	
	@media (max-width: 768px) {
		.cta-banner--split .container {
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-6);
		}
	}
	
	/* Quote banner */
	.quote-banner {
		position: relative;
		overflow: hidden;
		background-color: var(--color-primary);
	}
	.quote-banner-inner { position: relative; z-index: 1; }
	
	.quote-banner-inner {
		padding: var(--space-24) 0;
		text-align: center;
	}
	
	.quote-banner blockquote {
		color: var(--color-white);
		font-size: var(--text-4xl);
		max-width: 820px;
		margin: 0 auto;
	}
	
	@media (max-width: 768px) {
		.quote-banner blockquote {
			font-size: var(--text-2xl);
		}
	}
	
	/* Page head */
	.page-head {
		position: relative;
		overflow: hidden;
	}
	.page-head > .container { position: relative; z-index: 1; }
	
	/* Text CTA */
	.text-cta {
		padding: var(--space-20) 0;
		background: var(--color-white);
	}
	
	.text-cta-content {
		margin: 0 auto;
		text-align: center;
	}
	
	.text-cta h2 {
		color: var(--color-primary);
		margin-bottom: var(--space-6);
	}
	
	.text-cta h2 .text-accent {
		color: var(--color-accent);
	}
	
	.text-cta-body {
		margin-bottom: var(--space-8);
	}
	
	/* Text + logos */
	.text-logos {
		background: var(--color-bg-light);
		border-top: 4px solid var(--color-secondary);
		padding: var(--space-20) 0 var(--space-16) 0;
	}
	
	.text-logos-content {
		margin: 0 auto;
		text-align: center;
	}
	
	.text-logos h2 {
		color: var(--color-primary);
		margin-bottom: var(--space-6);
	}
	
	.text-logos h2 .text-accent {
		color: var(--color-accent);
	}
	
	.text-logos-body {
		margin-bottom: var(--space-10);
	}
	
	.logo-row {
		overflow: hidden;
		margin-top: 80px;
	}

	.logo-row-track {
		display: flex;
		width: 100%;
	}

	.logo-row-group {
		display: flex;
		gap: var(--space-8);
		justify-content: space-between;
		width: 100%;
		flex-shrink: 0;
	}

	.logo-row-group-duplicate {
		display: none;
	}

	.logo-row-item {
		flex-shrink: 0;
		display: flex;
		align-items: center;
	}

	.logo-row-item img {
		height: auto;
		width: 210px;
		object-fit: contain;
	}

	@media (max-width: 768px) {
		.logo-row-track {
			width: max-content;
			animation: marquee 25s linear infinite;
		}
		.logo-row-group {
			width: auto;
			justify-content: flex-start;
			padding-right: var(--space-8);
		}
		.logo-row-group-duplicate {
			display: flex;
		}
		@keyframes marquee {
			0% { transform: translateX(0); }
			100% { transform: translateX(-50%); }
		}
	}
	
	/* Legal Page */
	.legal-header {
		position: relative;
		background-color: var(--color-primary);
		background-image: var(--gradient-brand);
		background-size: cover;
		background-position: center;
		color: var(--color-white);
		padding: var(--space-16) 0;
		min-height: 180px;
		display: flex;
		align-items: center;
		overflow: hidden;
	}
	
	.legal-header-overlay {
		position: absolute;
		inset: 0;
		background-color: rgba(33, 99, 149, 0.4);
		z-index: 1;
	}
	
	.legal-header .container {
		position: relative;
		z-index: 2;
		width: 100%;
	}
	
	.legal-header-inner {
		text-align: center;
	}
	
	.legal-header h1 {
		font-size: var(--text-4xl);
		font-weight: var(--font-extrabold);
		line-height: 1.2;
		color: var(--color-white);
		margin: 0;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	}
	
	
	.legal-body {
		padding: var(--space-16) 0;
		background-color: var(--color-white);
	}
	
	/* Editorial prose (long-form the_content) — comfortable line-height + heading
	rhythm. Scoped to the prose wrappers, NOT #main-content: that also wraps the
	reusable sections (CelyusPageLoader echoes <main id="main-content">, and the
	blog-single hero/CTA are inside it), whose typography must stay untouched. */
	.post-content,
	.legal-content {
		line-height: 1.6;
	}
	.post-content h2,
	.legal-content h2 {
		margin-top: var(--space-12);
	}
	.post-content h3,
	.legal-content h3 {
		margin-top: var(--space-8);
	}
	.post-content :is(h2, h3, h4):first-child,
	.legal-content :is(h2, h3, h4):first-child {
		margin-top: 0;
	}
	.post-content ol {
		list-style: auto;
		padding-left: 2.5rem;
	}
	.post-content a {color: var(--color-secondary);}
	.post-content a:hover {text-decoration: underline;}
	
	.legal-content {
		max-width: 800px;
		margin: 0 auto;
		font-size: var(--text-base);
		color: var(--color-text);
	}
	
	.legal-content h2 {
		font-size: var(--text-2xl);
		font-weight: var(--font-bold);
		color: var(--color-primary);
		margin-bottom: var(--space-4);
	}
	
	.legal-content h3 {
		font-size: var(--text-xl);
		font-weight: var(--font-semibold);
		color: var(--color-primary);
		margin-bottom: var(--space-3);
	}
	
	.legal-content p {
		margin-bottom: var(--space-4);
	}
	
	/* .legal-content ul: the turquoise circle marker comes from the global `#main-content ul`. */
	
	.legal-content ol {
		list-style-type: decimal;
		padding-left: var(--space-6);
		margin-bottom: var(--space-4);
	}
	
	.legal-content li {
		margin-bottom: var(--space-2);
	}
	
	.legal-content li::marker {
		color: var(--color-secondary);
	}
	
	.legal-content table {
		width: 100%;
		border-collapse: collapse;
		margin: var(--space-8) 0;
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.legal-content th,
	.legal-content td {
		padding: var(--space-3) var(--space-4);
		text-align: left;
		border-bottom: 1px solid var(--color-border);
		vertical-align: top;
	}
	
	.legal-content th {
		font-weight: var(--font-bold);
		color: var(--color-primary);
		border-bottom: 2px solid var(--color-primary);
		background-color: var(--color-bg-light);
	}
	
	.legal-content tr:nth-child(even) {
		background-color: rgba(0, 0, 0, 0.01);
	}
	
	@media (max-width: 768px) {
		.legal-header {
			padding: var(--space-12) 0;
			min-height: 140px;
		}
		
		.legal-header h1 {
			font-size: var(--text-2xl);
		}
		
		
		.legal-body {
			padding: var(--space-10) 0;
		}
		
		.post-content h2,
		.legal-content h2 {
			margin-top: var(--space-8);
		}
		
		.post-content h3,
		.legal-content h3 {
			margin-top: var(--space-6);
		}
		
		.legal-content h2 {
			font-size: var(--text-xl);
		}
		
		.legal-content h3 {
			font-size: var(--text-lg);
		}
	}
	
	/* Page strip (decorative band) */
	.page-strip {
		position: relative;
		min-height: 110px;
		background: var(--gradient-brand);
		overflow: hidden;
	}

	/* Strip breadcrumbs — shared by blog single + course single (sits on .page-strip). */
	.strip-breadcrumbs {
		display: flex;
		align-items: center;
		padding-block: var(--space-6);
		background-image: url('../img/breadcrumbs-bg.png');
		background-size: cover;
		background-position: top left;
		background-repeat: no-repeat;
	}
	.strip-breadcrumbs .container { position: relative; z-index: 1; width: 100%; }
	.strip-breadcrumbs-trail {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		color: var(--color-white);
		font-size: var(--text-m);
		font-weight: var(--font-semibold);
	}
	.strip-breadcrumbs-trail li { display: flex; align-items: center; gap: var(--space-2); }
	.strip-breadcrumbs-trail li + li::before { content: '›'; opacity: 0.8; }
	.strip-breadcrumbs-trail a { color: var(--color-white); text-decoration: none; }
	.strip-breadcrumbs-trail a:hover { text-decoration: underline; }
	.strip-breadcrumbs-trail [aria-current="page"] { opacity: 0.85; }

	@media (max-width: 1024px) {
		/* On mobile keep the trail on a single line: let it overflow past the
		right edge of the strip and scroll horizontally instead of wrapping.
		A right-edge mask fades the breadcrumb out softly as it runs off-screen. */
		.strip-breadcrumbs .container { padding-right: 0; }
		.strip-breadcrumbs-trail {
			--mask-width: 65px;
			flex-wrap: nowrap;
			white-space: nowrap;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
			/* End gutter so the last crumb isn't flush to the screen edge when
			scrolled fully right — it stays comfortably readable. */
			padding-right: var(--space-8);
			-webkit-mask-image: linear-gradient(to right, var(--color-primary) calc(100% - var(--mask-width)), transparent);
			mask-image: linear-gradient(to right, var(--color-primary) calc(100% - var(--mask-width)), transparent);
		}
		.strip-breadcrumbs-trail::-webkit-scrollbar { display: none; }
		.strip-breadcrumbs-trail li { flex: 0 0 auto; }
	}

	/* 404 page */
	.strip-breadcrumbs.notfound-strip { padding-block: var(--space-20); padding-bottom: 7rem; background-position: top center; }
	.notfound-content { max-width: 640px; color: var(--color-white); }
	.notfound-content :where(h1, h2) { color: inherit; text-align: center; }
	.notfound-code { font-style: italic; font-size: clamp(8rem, 10vw, 10rem); }
	.notfound-content .hero-actions { margin-top: var(--space-6); }

	@media (max-width: 1024px) {
		.notfound-strip .container { padding-right: var(--container-padding); }
	}

	@media (min-width: 769px) {
		.notfound-content .hero-actions { flex-wrap: nowrap; }
		.notfound-content .hero-actions .btn { flex: 1 1 auto; }
	}

	/* Big image banner */
	.big-image {
		--big-image-min-height: 500px;
		position: relative;
		min-height: var(--big-image-min-height);
		overflow: hidden;
	}
	
	/* Info badge card */
	.info-badge-card {
		border: 2px solid var(--color-secondary);
		border-radius: var(--radius-md);
		padding: var(--space-6);
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-3);
	}
	.info-badge-icon { width: 4rem; height: auto; }
	.info-badge-title { font-weight: var(--font-extrabold); color: var(--color-primary); margin: 0; font-size: var(--text-3xl);}
	
	/* Formation sur mesure — page layout */
	.formation-body { padding-block: var(--space-12); }
	.formation-grid {
		display: grid;
		grid-template-columns: 1fr 300px;
		gap: var(--space-12);
		align-items: start;
	}
	.formation-form { padding-block: var(--space-12); }
	
	@media (max-width: 900px) {
		.formation-grid { grid-template-columns: 1fr; }
	}
	
	/* ── Blog post (single) ─────────────────────────────── */
	/* Blog post reuses HeroSection but with a white wedge + standard blue text. */
	.blog-single .hero {
		background: var(--color-white);
		/* Definite height AND min-height, both 1px shorter than the inner content/image,
		so overflow:hidden clips the sub-pixel bottom row where the image's blue edge
		would otherwise peek out below the white clip-path wedge. */
		min-height: calc(var(--hero-min-height) - 1px);
	}
	@media screen and (min-width: 1024px) {
		.blog-single .hero {
			height: calc(var(--hero-min-height) - 1px);
		}
	}
	.blog-single .hero-content { color: var(--color-primary); }
	.blog-single .hero-content::before { background: var(--color-white); }
	
	.post-layout {
		display: grid;
		grid-template-columns: 1fr 300px;
		gap: var(--space-12);
		align-items: start;
		padding-block: var(--space-16);
	}
	
	.post-sidebar { display: flex; flex-direction: column; gap: var(--space-10); }
	.sidebar-widget-title {
		font-size: var(--text-xl);
		padding-bottom: var(--space-3);
		margin-bottom: var(--space-4);
		border-top: 2px solid var(--color-secondary);
		padding-top: var(--space-3);
	}
	
	/* Sidebar lists opt out of the global editorial marker/indent (#main-content ul li). */
	#main-content .post-sidebar ul li {
		padding-left: 0;
		margin-bottom: 0;
	}
	#main-content .post-sidebar ul li::before { content: none; }
	
	/* Categories keep a small dedicated turquoise dot (design). */
	.sidebar-categories ul { display: flex; flex-direction: column; gap: var(--space-2); }
	.sidebar-categories a { color: var(--color-text); }
	.sidebar-categories .is-current > a { color: var(--color-secondary); font-weight: var(--font-bold); }
	
	.post-sidebar a:not(.btn):hover { color: var(--color-secondary);}
	.sidebar-recent ul { display: flex; flex-direction: column; gap: var(--space-4); }
	.sidebar-recent-item { display: flex; gap: var(--space-3); align-items: flex-start; }
	.sidebar-recent-thumb { flex: 0 0 64px; }
	.sidebar-recent-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
	.sidebar-recent-link { display: block; font-weight: var(--font-bold); color: var(--color-primary); text-decoration: none; line-height: 1.3; }
	.sidebar-recent-date { font-size: var(--text-sm); color: #94a3b8; }
	.sidebar-recent-all { display: block; text-align: center; margin-top: var(--space-4); font-weight: var(--font-bold); color: var(--color-primary); text-decoration: none; }
	
	.sidebar-cta-card {
		border: 2px solid var(--color-secondary);
		border-radius: var(--radius-md);
		padding: var(--space-6);
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-3);
	}
	.sidebar-cta-icon { width: 56px; height: auto; }
	.sidebar-cta-title { font-weight: var(--font-bold); color: var(--color-primary); font-size: var(--text-2xl); margin: 0; }
	.sidebar-cta-text { font-size: var(--text-sm); margin: 0; }
	
	@media (max-width: 900px) {
		.post-layout { grid-template-columns: 1fr; }
	}
}

/* ── Contact & Formation pages + blog newsletter popup (unlayered WPForms-overrides) ── */
.contact-page .contact-body {
	background-color: var(--color-bg-light);
	padding-block: 60px;
}
.contact-page .wpforms-container,
.formation-page .wpforms-container {
	max-width: 700px;
	margin-inline: auto;
}
/* WPForms renders its choice fields (e.g. privacy checkbox) inside a <ul> — keep them
out of the global editorial circle marker/indent (#main-content ul li). */
.contact-page .wpforms-container ul li::before,
.formation-page .wpforms-container ul li::before,
.course-modal--form .wpforms-container ul li::before {
	content: none;
}
.contact-page .wpforms-container ul li,
.formation-page .wpforms-container ul li,
.course-modal--form .wpforms-container ul li {
	padding-left: 0;
}
.contact-page .wpforms-form,
.contact-page div.wpforms-container-full input[type=text],
.contact-page div.wpforms-container-full input[type=email],
.contact-page div.wpforms-container-full textarea,
.formation-page .wpforms-form,
.formation-page div.wpforms-container-full input[type=text],
.formation-page div.wpforms-container-full input[type=email],
.formation-page div.wpforms-container-full textarea,
.course-modal--form div.wpforms-container-full input[type=text],
.course-modal--form div.wpforms-container-full input[type=email],
.course-modal--form div.wpforms-container-full textarea {
	border: 1px solid var(--color-secondary);
	border-radius: 5px;
	background-color: white;
}
.contact-page .wpforms-form,
.formation-page .wpforms-form {
	padding: 15px 30px 40px 30px;
}
.contact-page div.wpforms-container-full input[type=text],
.contact-page div.wpforms-container-full input[type=email],
.contact-page div.wpforms-container-full textarea,
.formation-page div.wpforms-container-full input[type=text],
.formation-page div.wpforms-container-full input[type=email],
.formation-page div.wpforms-container-full textarea,
.course-modal--form div.wpforms-container-full input[type=text],
.course-modal--form div.wpforms-container-full input[type=email],
.course-modal--form div.wpforms-container-full textarea {
	max-width: 100%;
}
.contact-page div.wpforms-container-full input[type=checkbox]:before,
.formation-page div.wpforms-container-full input[type=checkbox]:before,
.course-modal--form div.wpforms-container-full input[type=checkbox]:before {
	border-color: var(--color-secondary);
}
.contact-page .wpforms-submit-container,
.formation-page .wpforms-submit-container,
.course-modal--form .wpforms-submit-container {
	text-align: right;
}
.contact-page div.wpforms-container-full button[type=submit]:not(:hover):not(:active),
.formation-page div.wpforms-container-full button[type=submit]:not(:hover):not(:active),
.course-modal--form div.wpforms-container-full button[type=submit]:not(:hover):not(:active) {
	box-sizing: border-box;
	background: var(--color-secondary);
	border: 2px solid var(--color-secondary);
	font-weight: var(--font-bold);
	padding-inline: 35px;
}
.contact-page div.wpforms-container-full button[type=submit]:hover,
.formation-page div.wpforms-container-full button[type=submit]:hover,
.course-modal--form div.wpforms-container-full button[type=submit]:hover {
	box-sizing: border-box;
	background: var(--color-white);
	border: 2px solid var(--color-secondary);
	font-weight: var(--font-bold);
	padding-inline: 35px;
	color: var(--color-secondary);
}

/* WPForms caps "medium" inputs and multi-column rows (e.g. first/last name) at 60% with a
(0,3,0) selector — match it with .wpforms-container in the chain so the fields fill the dialog. */
.course-modal--form .wpforms-container input.wpforms-field-medium,
.course-modal--form .wpforms-container .wpforms-field-row.wpforms-field-medium {
	max-width: 100%;
}
/* The dialog already provides the vertical breathing room; (0,3,0) beats the plugin's
div.wpforms-container-full:not(:empty) { margin: 24px auto }. */
.course-modal--form .wpforms-container.wpforms-container-full {
	margin-block: 0;
}

/* ── Utilities ───────────────────────────────────────── */
@layer utilities {
	/* Make the `hidden` attribute reliable: the top layer beats any lower-layer
	   display rule (e.g. .session-row{display:grid}) without !important. */
	[hidden] { display: none; }
	.text-primary    { color: var(--color-primary); }
	.text-accent     { color: var(--color-accent); }
	.text-secondary  { color: var(--color-secondary); }
	.link-secondary {color: var(--color-secondary);}
	.link-secondary:hover {text-decoration: underline;}
}

/* ── Blog list page (moved into @layer sections; themed --color-* tokens) ── */
@layer sections {
	/* Blog List Page */
	.blog-list-page { padding-bottom: 0; }
	.blog-list-page .hero-content::before {background-color: var(--color-white);}
	.blog-list-page .hero-content {color: var(--color-primary);}
	.blog-list-page .hero + .cta-banner {padding: var(--space-8) 0;}
	.blog-list-page .hero + .cta-banner .cta-banner-subtitle {margin-bottom: 0;}
	.blog-grid { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-10); padding-top: 60px; padding-bottom: var(--space-20); align-items: start; }
	
	.blog-archive-back { margin-bottom: var(--space-6); }
	.btn-back { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-secondary); text-decoration: none; font-size: var(--text-base); font-weight: var(--font-semibold); transition: color var(--transition-fast); }
	.btn-back:hover { color: var(--color-primary); }
	
	/* Sidebar — the top three groups form one card; the CTA card sits below it with a gap. */
	.blog-sidebar { position: sticky; top: 100px; }
	.sidebar-card { margin-bottom: var(--space-8); }
	.sidebar-card .sidebar-block:last-child { margin-bottom: 0; }
	.sidebar-block { margin-bottom: var(--space-8); border-bottom: 1px solid var(--color-secondary); padding-bottom: var(--space-8) }
	.sidebar-title { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-primary); }
	
	.sidebar-list { list-style: none; padding: 0; margin: 0; }
	/* Plain category list — kill the editorial #main-content turquoise dot + flex,
	add a faint divider between items. (ID-level override to beat #main-content ul li.) */
	#main-content .sidebar-list li { display: block; margin: 0; padding: var(--space-2) 0; border-bottom: 1px solid #e5e9ee; }
	#main-content .sidebar-list li:last-child { border-bottom: none; }
	#main-content .sidebar-list li::before { content: none; }
	.sidebar-list a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); font-weight: var(--font-semibold); }
	.sidebar-list a:hover, .sidebar-list .current-cat a { color: var(--color-secondary); }
	
	.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
	.tag-link { padding: 6px 16px; border: 1px solid var(--color-secondary); border-radius: var(--radius-md); color: var(--color-secondary); text-decoration: none; font-size: var(--text-sm); font-weight: var(--font-semibold); transition: all var(--transition-fast); }
	.tag-link:hover, .tag-link.current-tag { background: var(--color-secondary); color: var(--color-white); }
	
	/* Search — square field with a Secondary border; REST autocomplete popup (no button). */
	.blog-search-form { position: relative; }
	.blog-search-input { width: 100%; padding: 10px 14px; border: 1px solid var(--color-secondary); border-radius: 0; background: var(--color-white); color: var(--color-text); font-size: 15px; }
	.blog-search-input:focus { outline: none; border-color: var(--color-primary); }
	
	.blog-search-results { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-overlay); margin: 6px 0 0; padding: 0; list-style: none; background: var(--color-white); border: 1px solid var(--color-secondary); border-radius: 6px; max-height: 340px; overflow-y: auto; box-shadow: var(--shadow-md); }
	#main-content .blog-search-results li { display: block; margin: 0; padding: 0; border-bottom: 1px solid #f0f0f0; }
	#main-content .blog-search-results li:last-child { border-bottom: none; }
	#main-content .blog-search-results li::before { content: none; }
	.blog-search-results a { display: block; padding: 10px 14px; text-decoration: none; }
	.blog-search-results a:hover { background: var(--color-bg-light); }
	.blog-search-title { display: block; font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--color-primary); }
	.blog-search-snippet { display: block; margin-top: 2px; font-size: var(--text-xs); color: #94a3b8; }
	.blog-search-empty { padding: 10px 14px; color: #94a3b8; font-size: var(--text-sm); }
	
	/* Blog Cards */
	.blog-posts-list { display: flex; flex-direction: column; gap: var(--space-8); }
	.blog-card { display: grid; grid-template-columns: 170px 1fr; gap: var(--space-6); background: var(--color-white); align-items: start; border-bottom: 1px solid #d1d1d1; }
	.blog-card:last-child { padding-bottom: 0; border-bottom: none; }
	
	.blog-card-image { height: 185px; overflow: hidden; }
	.blog-card-image a { display: block; height: 100%; }
	.blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
	/* Category badge sits at the top of the content column, above the title (clean image). */
	.blog-card-badge { display: inline-block; background: var(--color-primary); color: var(--color-white); padding: var(--space-1) 14px; border-radius: 6px; font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
	
	.blog-card-title { font-size: var(--text-2xl); font-weight: var(--font-bold); margin-bottom: var(--space-3); margin-top: var(--space-1); line-height: 1.3; }
	.blog-card-title a { color: inherit; text-decoration: none; }
	.blog-card-title a:hover { color: var(--color-secondary); }
	
	.blog-card-excerpt { font-size: 15px; line-height: 1.6; margin-bottom: var(--space-6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.blog-card-content {margin-bottom: 10px}

	.blog-card-meta { display: flex; align-items: center; gap: var(--space-6); font-size: var(--text-xs); color: #605f61; font-weight: var(--font-medium); margin-top: auto; }
	.blog-meta-icon { width: 15px; height: 15px; margin-right: var(--space-1); vertical-align: -2px; color: var(--color-text); }
	.blog-card-link { margin-left: auto; color: var(--color-secondary); font-weight: var(--font-bold); font-size: 16px; }
	.blog-card-link:hover {text-decoration: underline}
	
	/* Pagination */
	.pagination { display: flex; justify-content: center; gap: var(--space-2); margin-top: 60px; }
	/* the_posts_pagination() nests the numbers in .nav-links — make THAT the flex row
	(otherwise the block-level .page-numbers stack vertically). */
	.blog-list-page .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); }
	.page-numbers { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border: 1px solid #e2e8f0; color: var(--color-primary); text-decoration: none; font-weight: var(--font-semibold); transition: all var(--transition-fast); }
	.page-numbers:hover, .page-numbers.current { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-white); }
	.page-numbers svg { width: 16px; height: 16px; }
	
	@media (max-width: 1024px) {
		.blog-grid { grid-template-columns: 1fr; }
		.blog-sidebar { position: static; order: 2; }
		.blog-main { order: 1; }
		.blog-card { grid-template-columns: 1fr; gap: 20px; }
		.blog-card-image { height: 240px; }
	}
}

/* ── Courses (single + archive) ──────────────────────── */
@layer sections {

	/* Breadcrumb reuses the shared .page-strip .strip-breadcrumbs styling. */

	/* ── Course single — two-column main ── */
	.course-main { padding: var(--space-16) 0; background: var(--color-white); }
	.course-main-grid {
		display: grid;
		grid-template-columns: 1fr 360px;
		gap: var(--space-12);
		align-items: start;
	}
	.course-aside { position: sticky; top: var(--space-8); display: grid; gap: var(--space-6); }

	@media (max-width: 900px) {
		.course-main-grid { grid-template-columns: 1fr; }
		.course-aside { position: static; }
	}

	/* ── Course single — hero (textimg overlap, course-tuned) ── */
	.course-hero { --section-min-height: 420px; }
	.course-hero .textimg-image .celyus-img-wrap { margin-left: auto; }
	.course-hero-title { font-size: var(--text-4xl); margin: 0 }
	.course-hero .textimg-body { font-size: var(--text-lg); max-width: 46ch; }

	/* ── Course single — stats band ── */
	.course-stats { background: var(--color-bg-light); padding: var(--space-10) 0; }
	.course-stats-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-6);
		text-align: center;
	}
	.course-stat { padding: 0 var(--space-4); }
	.course-stat + .course-stat { border-left: 1px solid var(--color-border); }
	.course-stat-icon { width: 72px; height: 72px; margin: 0 auto var(--space-3) auto;}
	.course-stat-label { font-weight: var(--font-bold); color: var(--color-primary); margin-bottom: var(--space-3) }
	.course-stat-value { max-width: 200px; margin: 0 auto; }
	@media (max-width: 768px) {
		.course-stats-grid { grid-template-columns: repeat(2, 1fr); }
		.course-stat:nth-child(odd) { border-left: 0; }
	}

	/* ── Course single — left content ── */
	.course-content { display: grid; gap: var(--space-10); }
	.course-content ul li:before { content: none; }
	.course-block h2 { font-size: var(--text-3xl); }
	.course-block-row { display: flex; gap: var(--space-3); align-items: flex-start; }
	.course-block-row p { margin: 0; }

	.course-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
	.course-checklist li { display: flex; gap: var(--space-3); align-items: flex-start; padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
	.course-checklist li:last-child { border-bottom: 0; padding-bottom: 0; }

	/* Teal circle + checkmark (pure CSS, no asset) */
	.course-check { flex: 0 0 auto; width: 26px; height: 26px; border: 2px solid var(--color-secondary); border-radius: 50%; position: relative; }
	.course-check::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid var(--color-secondary); border-width: 0 2px 2px 0; transform: rotate(45deg); }

	.course-program-list { list-style: none; margin: 0; padding: 0; display: grid; }

	/* Pack contents — low rows (code – title – duration – arrow) divided by
	   light separator lines, like the classe virtuelle session list. The
	   pack-course-* prefix avoids the ALUR .course-pack-* card classes. */
	.pack-courses-list { list-style: none; margin: 0; padding: 0; }
	.pack-course-row { display: flex; align-items: center; column-gap: var(--space-6); padding: var(--space-3) 0; }
	.pack-course-row + .pack-course-row { border-top: 1px solid var(--color-border); }
	.pack-course-info { display: flex; align-items: baseline; column-gap: var(--space-6); margin: 0; flex: 1; font-weight: var(--font-semibold); color: var(--color-primary); }
	.pack-course-name { color: inherit; text-decoration: none; max-width: 80%; }
	.pack-course-name:hover { color: var(--color-secondary); }
	.pack-course-duration { flex: 1 1 auto; text-align: right; }
	@media (max-width: 768px) {
		/* Bold title on top, code + duration as small chips underneath. */
		.pack-course-info { display: grid; grid-template-areas: "name name" "code duration"; grid-template-columns: auto 1fr; row-gap: var(--space-2); column-gap: var(--space-2); }
		.pack-course-name { grid-area: name; max-width: 100%; }
		.pack-course-code, .pack-course-duration { background: var(--color-bg); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); font-weight: var(--font-medium); }
		.pack-course-code { grid-area: code; }
		.pack-course-duration { grid-area: duration; flex: none; text-align: left; justify-self: start; }
	}

	.course-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
	.course-actions .btn { font-size: var(--text-base); }
	.course-actions .btn--outline-dark {}

	/* In-company quote banner (live-online, left column) */
	.course-incompany { display: flex; gap: var(--space-6); background: var(--color-secondary); color: var(--color-white); border-radius: var(--radius-md); padding: var(--space-6) var(--space-8); }
	.course-incompany-icon { flex: 0 0 auto; width: 72px; height: 72px; }
	.course-incompany-body { display: grid; gap: var(--space-4); justify-items: start; }
	.course-incompany-text { font-weight: var(--font-bold); }

	/* ── Course single — sidebar widgets ── */
	.course-appointment { display: block; text-decoration: none; background: var(--color-secondary); color: var(--color-white); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); font-weight: var(--font-bold); }
	a.course-appointment:hover { filter: brightness(1.05); }
	.course-appointment-seats { font-weight: var(--font-medium); margin-top: var(--space-1); }
	.course-incompany-cta {
		--color: var(--color-secondary);
    	--brdcolor-hover: var(--color-white);
		margin-left: auto;
	}

	/* Organisme / Formateur trust boxes (above the CTA card) */
	.course-person {
		border: 2px solid var(--color-secondary);
		border-radius: var(--radius-lg);
		padding: var(--space-4) var(--space-6);
		text-align: center;
	}
	.course-person-title { font-size: var(--text-2xl); font-weight: var(--font-extrabold); margin-bottom: var(--space-1); }
	.course-person-name, .course-person-sub { color: var(--color-primary); font-weight: var(--font-bold); }

	.course-cta-card {
		border: 2px solid var(--color-secondary);
		border-radius: var(--radius-lg);
		padding: var(--space-8) var(--space-6);
	}
	.course-cta-icon { width: 64px; height: 64px; margin: 0 auto; margin-bottom: var(--space-4); }
	.course-cta-title { font-size: var(--text-2xl); font-weight: var(--font-extrabold); margin-bottom: var(--space-6); }
	.course-cta-bullets {margin-bottom: var(--space-6);}
	.course-cta-bullets li { font-size: var(--text-sm); font-weight: var(--font-semibold); margin-bottom: var(--space-4); }
	.course-cta-card .btn { width: 100%; font-size: var(--text-base); }
	.course-cta-card .course-cta-enrol { margin-bottom: var(--space-4); }

	.course-rating { text-align: center; display: grid; gap: var(--space-1); margin-top: var(--space-3);}
	.course-rating-stars { color: var(--color-secondary); font-size: var(--text-2xl); letter-spacing: 7px; }
	.course-rating-text { color: var(--color-primary); font-weight: var(--font-bold); }
	.rating-value { font-size: var(--text-2xl); }

	/* ── Course single — reviews carousel (left column card) ── */
	.course-reviews { background: var(--color-bg-light); padding: var(--space-8); text-align: center; border-top: 4px solid var(--color-secondary); border-bottom: 4px solid var(--color-secondary)}
	.course-carousel-title { color: var(--color-primary); font-size: var(--text-3xl); font-weight: var(--font-bold); margin-bottom: var(--space-6); }
	.course-carousel-slide { display: none; font-style: normal; font-family: var(--font-primary); font-size: var(--text-lg); font-weight: var(--font-regular); color: var(--color-text); margin: 0; padding-block: var(--space-2) }
	.course-carousel-slide.is-active { display: block; animation: course-fade 1s ease; }
	@keyframes course-fade { from { opacity: 0; } to { opacity: 1; } }
	.course-carousel-dots { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-6); }
	.course-carousel-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-secondary); background: transparent; cursor: pointer; padding: 0; }
	.course-carousel-dot.is-active { background: var(--color-secondary); }

	/* ── Course single — complementary courses (left column rows) ── */
	.course-complementaires-title { color: var(--color-primary); font-size: var(--text-3xl); font-weight: var(--font-semibold); margin-bottom: var(--space-6); }
	.course-comp-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
	.course-comp-row:last-child { border-bottom: 0; }
	.course-comp-info { display: grid; gap: var(--space-1); }
	.course-comp-name { color: var(--color-primary); font-weight: var(--font-semibold) }
	.course-comp-name:hover { text-decoration: underline; }
	.course-comp-name strong, .course-comp-meta strong { color: var(--color-primary); }
	.course-comp-add { white-space: nowrap; }
	@media (max-width: 768px) {
		.course-comp-row { flex-direction: column; align-items: flex-start; }
	}

	/* ── Course single — ALUR packs ── */
	.course-packs { background: var(--color-bg-light); padding: var(--space-16) 0; }
	.course-packs-title { text-align: center; color: var(--color-primary); font-size: var(--text-4xl); font-weight: var(--font-extrabold); }
	.course-packs-subtitle { text-align: center; color: var(--color-primary); font-weight: var(--font-medium); margin: var(--space-2) auto var(--space-10); max-width: 50ch; }
	.course-packs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
	.course-pack-card { background: var(--color-white); border: 1px solid var(--color-secondary); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); text-align: center; display: grid; gap: var(--space-3); justify-items: center; }
	.course-pack-icon { width: 84px; height: 84px; }
	.course-pack-name { color: var(--color-primary); font-size: var(--text-xl); font-weight: var(--font-bold); margin: 0; }
	.course-pack-desc { font-size: var(--text-sm); margin: 0; }
	.course-pack-price { color: var(--color-primary); font-size: var(--text-2xl); font-weight: var(--font-extrabold); }
	.course-pack-btn { width: 100%; }
	@media (max-width: 768px) {
		.course-packs-grid { grid-template-columns: 1fr; }
	}

	/* ── Course single — enrolment redirect modal ── */
	.course-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-6); opacity: 0; transition: opacity var(--transition-slow); }
	.course-modal[hidden] { display: none; }
	.course-modal.is-open { opacity: 1; }
	.course-modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
	.course-modal-dialog { position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-10); text-align: center; transform: translateY(12px); transition: transform var(--transition-slow); }
	.course-modal.is-open .course-modal-dialog { transform: none; }
	.course-modal-x { position: absolute; top: var(--space-3); right: var(--space-4); font-size: var(--text-2xl); line-height: 1; color: var(--color-text); }
	.course-modal-title { color: var(--color-primary); font-size: var(--text-2xl); font-weight: var(--font-bold); margin-bottom: var(--space-4); }
	.course-modal-text { text-align: left; }
	.course-modal-visual { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin: var(--space-6) 0; }
	.course-modal-visual img { width: 200px; max-width: 40%; height: auto; border-radius: var(--radius-md); }
	.course-modal-arrow { flex: 0 0 auto; color: var(--color-secondary); font-size: var(--text-3xl); }
	.course-modal-note { text-align: left; }
	.course-modal-cta { margin-top: var(--space-6); }
	/* Form popup variant (blog newsletter CTA): the WPForms markup wants left-aligned text. */
	.course-modal--form .course-modal-dialog { text-align: left; }

	/* --- Archive page --- */
	.course-archive {
		padding-block: var(--space-16);
	}
	.course-archive-title {
		margin-bottom: var(--space-8);
		color: var(--color-primary);
	}
	.course-filters {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3);
		margin-bottom: var(--space-6);
	}
	.course-grid {
		display: grid;
		gap: var(--space-6);
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}
	.course-card {
		display: grid;
		gap: var(--space-2);
		text-decoration: none;
		background: var(--color-white);
		border-radius: var(--radius-lg);
		overflow: hidden;
		box-shadow: var(--shadow-sm);
		transition: box-shadow var(--transition-fast);
	}
	.course-card:hover {
		box-shadow: var(--shadow-md);
	}
	.course-card img {
		width: 100%;
		height: 180px;
		object-fit: cover;
	}
	.course-card-title {
		font-size: var(--text-xl);
		font-weight: var(--font-bold);
		color: var(--color-primary);
		padding-inline: var(--space-4);
		margin-bottom: var(--space-2);
	}
	.course-card-price {
		font-size: var(--text-base);
		font-weight: var(--font-semibold);
		color: var(--color-secondary);
		padding-inline: var(--space-4);
		padding-bottom: var(--space-4);
	}
	.course-pagination {
		margin-top: var(--space-10);
		display: flex;
		justify-content: center;
	}
	.course-empty {
		padding-block: var(--space-12);
		text-align: center;
	}

	/* --- Responsive --- */
	@media (max-width: 768px) {
		.course-grid {
			grid-template-columns: 1fr;
		}
	}

	/* --- Catalogue archive (listing page) --- */
	.course-archive-strip {
		background-image: url('../img/breadcrumbs-bg.png');
		background-size: cover;
		background-position: top left;
		background-repeat: no-repeat;
	}

	.course-intro {
		background: var(--color-white);
		padding-block: var(--space-12);
	}
	
	.course-archive-hero-title,
	.course-intro-text {
		max-width: 650px;
	}
	.course-tabs {
		background: var(--color-bg-light);
		border-bottom: 4px solid var(--color-secondary);
	}
	.course-tabs-inner {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--space-24);
		padding-block: var(--space-12);
	}
	.course-tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-3);
		color: var(--color-primary);
	}
	/* Vertical rule between row items; equal flex gap on both sides keeps spacing even. */
	.horizontal-separator {
		width: 2px;
		align-self: stretch;
		background: var(--color-primary);
	}
	.course-tab-icon {
		width: 72px;
		height: 72px;
	}
	.course-tab-label {
		margin-bottom: 0;
		transition: color var(--transition-base);
		font-weight: var(--font-bold);
	}
	.course-tab:hover .course-tab-label {
		color: var(--color-secondary);
	}
	.course-tab.is-active .course-tab-label {
		color: var(--color-secondary);
	}
	/* Tablet and below: tabs stack centered, separators drop out. */
	@media (max-width: 768px) {
		.course-tabs-inner { flex-direction: column; }
		.horizontal-separator { display: none; }
	}

	.course-archive-body {
		padding-block: var(--space-12) var(--space-20);
	}
	.course-archive-grid {
		display: grid;
		grid-template-columns: 240px 1fr;
		gap: var(--space-12);
		align-items: start;
	}

	.course-sidebar {
		display: grid;
		gap: var(--space-8);
	}
	.course-filter-title {
		font-size: var(--text-xs);
		font-weight: var(--font-bold);
		color: var(--color-primary);
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}
	.course-search {
		width: 100%;
		margin-top: var(--space-2);
	}
	.course-filter-list {
		list-style: none;
		margin: var(--space-3) 0 0;
		padding: 0;
		display: grid;
		gap: var(--space-2);
		font-size: var(--text-sm);
	}
	.course-filter-bands {
		flex-direction: row;
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
	}
	.course-band {
		border: 1px solid var(--color-border);
		border-radius: var(--radius-full);
		padding: var(--space-1) var(--space-3);
		font-size: var(--text-sm);
		color: var(--color-primary);
		transition: color var(--transition-base), border-color var(--transition-base);
	}
	.course-band.is-active {
		color: var(--color-secondary);
		border-color: var(--color-secondary);
		font-weight: var(--font-bold);
	}

	/* Sidebar facet links (link-styled): pointer + active state matching the blog sidebar. */
	.course-facet { cursor: pointer; }
	.sidebar-list a.is-active { color: var(--color-secondary); font-weight: var(--font-bold); }
	.tag-link.is-active { background: var(--color-secondary); color: var(--color-white); }

	/* Filter feedback: the list fades out briefly while the JS re-filters. */
	.course-list {
		transition: opacity var(--transition-fast);
	}
	.course-list.is-filtering {
		opacity: 0;
	}

	.course-section {
		margin-bottom: var(--space-16);
	}
	.course-section-title {
		color: var(--color-primary);
		margin-bottom: var(--space-6);
	}
	.course-section-intro {
		margin-bottom: var(--space-6);
	}
	.course-sidebar li::before {
		content: none;
	}
	.course-section a:not(.session-cta):hover {
		color: var(--color-secondary);
	}

	.is-overflow {
		display: none;
	}
	/* "…" hint: more items exist; JS hides it (and the button) when nothing is left. */
	.course-more {
		color: var(--color-primary);
		font-size: var(--text-2xl);
		line-height: 1;
	}
	.course-load-more {
		margin-top: var(--space-2);
		padding: var(--space-2) var(--space-12);
	}

	.course-section .session-row {
		display: block;
	}
	.course-section .session-name {
		margin-bottom: var(--space-2);
	}
	.session-item-line {
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: var(--space-6);
		align-items: center;
		padding: var(--space-3) 0;
	}
	.session-item-line:not(:last-child) {
		border-bottom: 1px dashed var(--color-border);
	}

	/* Filter toolbar above the list: desktop shows it only while a filter is
	   active (clear button); mobile always shows it (drawer opener). */
	.course-filter-bar {
		display: none;
		align-items: center;
		gap: var(--space-4);
		margin-bottom: var(--space-10);
	}
	.course-filter-bar.has-active {
		display: flex;
	}
	/* Button-element reset; the link look comes from .btn-back (blog back-link). */
	.course-filter-clear {
		background: none;
		border: 0;
		padding: 0;
		font-family: inherit;
		cursor: pointer;
	}
	.course-filter-open,
	.course-filters-close {
		display: none;
	}

	@media (max-width: 1024px) {
		.course-archive-grid {
			grid-template-columns: 1fr;
		}

		.course-filter-bar {
			display: flex;
		}
		.course-filter-open {
			display: inline-block;
		}

		/* Sidebar becomes a right slide-in drawer (same pattern as .mobile-nav). */
		.course-filters {
			position: fixed;
			top: 0;
			right: 0;
			height: 100%;
			width: min(320px, 85vw);
			margin: 0;
			padding: var(--space-10) var(--space-6) var(--space-8);
			background: var(--color-white);
			box-shadow: var(--shadow-lg);
			transform: translateX(100%);
			transition: transform var(--transition-slow);
			z-index: var(--z-drawer);
			overflow-y: auto;
		}
		.course-filters.is-open {
			transform: translateX(0);
		}
		.course-filters .sidebar-search {
			width: 100%;
		}
		.course-filters-close {
			display: block;
			position: absolute;
			top: var(--space-4);
			right: var(--space-4);
			background: none;
			border: 0;
			font-size: var(--text-2xl);
			line-height: 1;
			color: var(--color-text);
			cursor: pointer;
			opacity: 0.45;
			transition: opacity var(--transition-fast);
		}
		.course-filters-close:hover {
			opacity: 0.75;
		}
	}
}