/* HoliSpace "Holistische Coaching" page — extends magazine.css (same mag-*
   base as the TTC/Reiki editorial pages) with the components unique to this
   page: the five-domain grid, the Georgia/Aypril comparison, the mid-page
   callout and the A/B style quiz. Scoped under body.holispace-magazine like
   the rest of the magazine styling. */

/* Numbered steps ("Hoe een coachingsessie eruit kan zien") — magazine.css
   only styles <ul>, so an <ol> falls back to the browser's default decimal
   markers. Give it the same dash-list rhythm with a coloured number instead. */
body.holispace-magazine .mag-article ol {
	list-style: none;
	counter-reset: mag-steps;
	padding: 0;
	margin: 0 0 28px;
}
body.holispace-magazine .mag-article ol > li {
	counter-increment: mag-steps;
	position: relative;
	padding-left: 30px;
	margin-bottom: 8px;
}
body.holispace-magazine .mag-article ol > li::before {
	content: counter(mag-steps) '.';
	position: absolute; left: 0; top: 0;
	font-weight: 700; color: var(--primary);
}

/* .mag-article a (magazine.css) sets a coloured underline and var(--text)
   colour that both out-specificity .mag-btn's own color/text-decoration,
   making buttons unreadable or underlined wherever a CTA sits inside the
   article body (callout, mid-article CTA row, guide cards, quiz results). */
body.holispace-magazine .mag-article a.mag-btn {
	text-decoration: none;
}
body.holispace-magazine .mag-article a.mag-btn-primary {
	color: var(--cream);
}
body.holispace-magazine .mag-article a.mag-btn-ghost {
	color: var(--text);
}
/* The color override above out-specifies .mag-btn-ghost:hover's own color
   swap (extra "a" element pushes this above it), so ghost links inside the
   article kept var(--text) on hover too — dark text on the hover's dark
   background, i.e. invisible. Re-assert the swap at matching specificity. */
body.holispace-magazine .mag-article a.mag-btn-ghost:hover {
	color: var(--cream);
}

/* Body copy a little smaller than the shared magazine default (19px) —
   shared by this page and Over Ons, both of which load this stylesheet. */
body.holispace-magazine .mag-article > p,
body.holispace-magazine .mag-article li {
	font-size: 17px;
	line-height: 1.68;
}

/* Schijf van vijf — the branded animated diagram, in place of a plain
   bullet list. Muted/inline, plays once and holds on its last frame
   (poster is that same final frame, for the instant before/if it loads).
   A reduced-motion viewer skips the animation entirely — see the inline
   script next to the markup. The five layer names aren't shown visually
   but stay available to screen readers via the sr-only label on the
   figure. Shared by this page and Over Ons. */
body.holispace-magazine .mag-schijf-figure {
	margin: 20px 0 32px;
	max-width: 320px;
}
body.holispace-magazine .mag-schijf-video {
	display: block;
	width: 100%;
	border-radius: 16px;
}
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* On this page only, the schijf-van-vijf video sits as a badge on the right
   of the "Onze methodiek" heading instead of as a full-width block. It's a
   float, deliberately left uncleared here: that lets the two paragraphs
   right after this header (still siblings in the same block formatting
   context) keep wrapping in the space beside the image instead of only
   starting once the whole header row — including the tall image — has
   passed, which used to leave an empty gap under the heading. The float is
   cleared before .mag-domains further down so the grid isn't squeezed. */
body.holispace-magazine .holispace-holistische-coaching .mag-schijf-header {
	margin: 56px 0 0;
}
body.holispace-magazine .holispace-holistische-coaching .mag-schijf-header .mag-schijf-figure {
	float: right;
	margin: 0 0 20px 28px;
	max-width: none;
	width: 220px;
}
body.holispace-magazine .holispace-holistische-coaching .mag-schijf-header .mag-schijf-video {
	border-radius: 14px;
	box-shadow: 0 6px 16px rgba(99, 48, 26, 0.22);
}
body.holispace-magazine .holispace-holistische-coaching .mag-schijf-header h2 {
	margin: 0 0 16px;
}

/* Five-domain grid */
body.holispace-magazine .mag-domains {
	clear: both;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 24px 0 32px;
}
body.holispace-magazine .mag-domain {
	background: var(--white);
	border: 1px solid var(--beige-dark);
	border-radius: 12px;
	padding: 20px 22px 22px;
}
body.holispace-magazine .mag-domain .lbl {
	font-family: 'Playfair Display', serif;
	font-weight: 500; font-style: italic;
	font-size: 19px; color: var(--primary);
	margin-bottom: 8px;
}
body.holispace-magazine .mag-domain p {
	font-size: 16px; line-height: 1.55; margin: 0; color: var(--text); opacity: 0.85;
}
/* CTA into the quiz, styled like a domain card but set apart with a dashed
   border and tint so it doesn't read as a sixth layer. Sits on its own
   below the five-domain grid rather than as a grid cell. */
body.holispace-magazine .mag-domain-cta {
	background: var(--beige);
	border-style: dashed;
}
body.holispace-magazine .mag-domain-cta p {
	margin-bottom: 14px;
}
body.holispace-magazine .mag-domain-cta-standalone {
	margin: 0 0 40px;
}
/* .mag-domain .lbl is italic (Playfair) — keep the emoji upright, only the
   text should slant. */
body.holispace-magazine .mag-emoji {
	display: inline-block;
	font-style: normal;
}

/* Two-guide comparison — stacked, not side by side, so each guide reads as
   its own full block rather than a quick side-by-side comparison. */
body.holispace-magazine .mag-guides {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 28px 0 40px;
}
body.holispace-magazine .mag-guide {
	background: var(--white);
	border: 1px solid var(--beige-dark);
	border-radius: 16px;
	padding: 28px 26px 30px;
}
body.holispace-magazine .mag-guide-name {
	font-family: 'Playfair Display', serif; font-weight: 500;
	font-size: 26px; color: var(--text); margin: 0;
}
/* Portrait sits beside the guide's name instead of floating above it as a
   separate block — shared with the Over Ons page's own guide sections. */
body.holispace-magazine .mag-guide-header {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0 0 16px;
}
/* Portrait graphic (circular photo + hand-drawn arrow + name). Shown at its
   own transparent-PNG proportions rather than cropped, so the arrow and
   name stay intact. */
body.holispace-magazine .mag-guide-portrait {
	width: 110px;
	height: auto;
	display: block;
	margin: 0;
	flex: none;
	filter: drop-shadow(0 10px 22px rgba(99, 48, 26, 0.24));
}
body.holispace-magazine .mag-guide-sub {
	font-size: 14px; letter-spacing: 0.03em; color: var(--primary);
	opacity: 0.9; margin: 0 0 18px !important;
}
body.holispace-magazine .mag-guide p {
	font-size: 16px !important; line-height: 1.65 !important; margin: 0 0 16px !important;
}
body.holispace-magazine .mag-guide-fit {
	font-weight: 600; opacity: 0.8;
}
/* These small kopjes ("Georgia past bij je wanneer je:", "Tools") otherwise
   inherit .mag-guide p's body-copy line-height and margin, which reads as
   too loose a gap to the list/paragraph right underneath — tighten both,
   matching the compact kopje-to-text spacing used elsewhere on the site
   (e.g. .mag-info-card h4, .mag-related .lbl). */
body.holispace-magazine .mag-guide p.mag-guide-fit {
	line-height: 1.3 !important;
	margin: 0 0 8px !important;
}
body.holispace-magazine .mag-guide-focus {
	font-size: 14px !important; font-style: italic; color: var(--primary); opacity: 0.85;
}
body.holispace-magazine .mag-guide ul {
	margin: 0 0 22px !important;
}
body.holispace-magazine .mag-guide ul li {
	font-size: 15px !important; line-height: 1.55 !important;
}
body.holispace-magazine .mag-guide .mag-btn { width: 100%; text-align: center; }

/* Mid-page callout — a dashed border and an explicit "verderop op deze
   pagina" cue in the copy signal this is a link further down the page,
   not a toggle that expands the questions in place. */
body.holispace-magazine .mag-callout {
	background: var(--beige);
	border: 1px dashed var(--light-brown);
	border-radius: 16px;
	padding: 32px 36px 36px;
	margin: 40px 0 48px;
	text-align: center;
}
body.holispace-magazine .mag-callout-title {
	font-family: 'Playfair Display', serif; font-weight: 500;
	font-size: 24px; margin: 0 0 14px !important; color: var(--text);
}
body.holispace-magazine .mag-callout p {
	font-size: 16px !important; line-height: 1.6 !important;
	max-width: 52ch; margin: 0 auto 16px !important;
}
body.holispace-magazine .mag-callout-link { margin-top: 8px; }

/* Quiz — a distinct white card so it visibly stands apart from the article
   text above it (rather than reading as a continuation of the callout). */
body.holispace-magazine .mag-quiz {
	margin-top: 64px;
	background: var(--white);
	border: 1px solid var(--beige-dark);
	border-radius: 20px;
	padding: 44px 44px 48px;
	box-shadow: 0 16px 40px rgba(99, 48, 26, 0.08);
	scroll-margin-top: 130px;
}
body.holispace-magazine .mag-quiz-head { margin-bottom: 32px; }
body.holispace-magazine .mag-quiz-head h2 { margin: 10px 0 14px !important; }
body.holispace-magazine .mag-quiz-head p {
	font-size: 17px !important; opacity: 0.8; max-width: 56ch;
}
body.holispace-magazine .mag-quiz-progress { margin-bottom: 28px; }
body.holispace-magazine .mag-quiz-progress-bar {
	height: 4px; background: var(--beige-dark); border-radius: 2px;
	overflow: hidden; margin-bottom: 10px;
}
body.holispace-magazine .mag-quiz-progress-bar span {
	display: block; height: 100%; background: var(--primary);
	transition: width 0.3s ease;
}
body.holispace-magazine .mag-quiz-progress-label {
	font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
	color: var(--text); opacity: 0.55; font-feature-settings: 'tnum';
}
body.holispace-magazine .mag-quiz-q {
	border: none; padding: 0; margin: 0 0 8px;
}
body.holispace-magazine .mag-quiz-q legend {
	font-family: 'Playfair Display', serif; font-weight: 500;
	font-size: 21px; line-height: 1.35; color: var(--text); margin: 0 0 18px; padding: 0;
}
body.holispace-magazine .mag-quiz-opt {
	display: flex; align-items: flex-start; gap: 12px;
	border: 1px solid var(--beige-dark); border-radius: 12px;
	padding: 14px 18px; margin-bottom: 10px;
	cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
body.holispace-magazine .mag-quiz-opt:hover { border-color: var(--primary); }
body.holispace-magazine .mag-quiz-opt:has(input:checked) {
	border-color: var(--primary); background: var(--beige);
}
body.holispace-magazine .mag-quiz-opt input[type="radio"] {
	appearance: none; -webkit-appearance: none;
	width: 18px; height: 18px; min-width: 18px;
	border: 1.5px solid var(--beige-dark); border-radius: 50%;
	background: var(--cream); margin-top: 2px; position: relative;
	cursor: pointer; flex-shrink: 0;
}
body.holispace-magazine .mag-quiz-opt input[type="radio"]:checked {
	border-color: var(--primary);
}
body.holispace-magazine .mag-quiz-opt input[type="radio"]:checked::after {
	content: ''; position: absolute; inset: 4px;
	border-radius: 50%; background: var(--primary);
}
body.holispace-magazine .mag-quiz-opt span {
	font-size: 16px; line-height: 1.5; color: var(--text);
}
body.holispace-magazine .mag-quiz-note {
	color: var(--primary); font-size: 14px; margin: 0 0 16px !important;
}
body.holispace-magazine .mag-quiz-nav {
	display: flex; align-items: center; gap: 12px; margin-top: 8px;
}
/* .mag-btn sets display:inline-block (magazine.css), which otherwise beats
   the browser's default [hidden]{display:none} on specificity and leaves
   the "Vorige" button visible on the first step. */
body.holispace-magazine .mag-quiz-nav .mag-btn[hidden] {
	display: none;
}
body.holispace-magazine .mag-quiz-next { margin-left: auto; }
body.holispace-magazine .mag-quiz-next:disabled {
	opacity: 0.4; cursor: not-allowed;
}
body.holispace-magazine .mag-quiz-next:disabled:hover { background: var(--text); }
body.holispace-magazine .mag-quiz-retake {
	display: block; background: none; border: none; padding: 0; margin-top: 4px;
	font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--beige);
	text-decoration: underline; text-decoration-color: rgba(253, 250, 245, 0.4);
	cursor: pointer;
}
body.holispace-magazine .mag-quiz-retake:hover { text-decoration-color: var(--cream); }
body.holispace-magazine .mag-quiz-result {
	margin-top: 32px; padding: 32px 36px 36px;
	background: var(--text); color: var(--cream);
	border-radius: 16px; scroll-margin-top: 130px;
}
body.holispace-magazine .mag-quiz-result .mag-kicker { color: var(--light-brown); }
body.holispace-magazine .mag-quiz-result h3 {
	font-family: 'Playfair Display', serif; font-weight: 500;
	font-size: 26px; margin: 10px 0 14px !important; color: var(--cream);
}
body.holispace-magazine .mag-quiz-result p {
	font-size: 17px !important; line-height: 1.65 !important;
	color: var(--beige) !important; margin: 0 0 22px !important;
}
body.holispace-magazine .mag-quiz-result a { color: var(--cream); }
body.holispace-magazine .mag-quiz-result .mag-btn-primary {
	background: var(--primary); color: var(--white);
}
body.holispace-magazine .mag-quiz-result .mag-btn-primary:hover { background: #b94a1a; }

/* Mobile */
@media (max-width: 980px) {
	body.holispace-magazine .mag-domains { grid-template-columns: 1fr; }
	body.holispace-magazine .mag-callout { padding: 28px 24px 30px; }
	body.holispace-magazine .mag-quiz { padding: 28px 24px 32px; }
	body.holispace-magazine .mag-quiz-result { padding: 24px; }
}
@media (max-width: 640px) {
	body.holispace-magazine .mag-guide-header { gap: 16px; }
	body.holispace-magazine .mag-guide-portrait { width: 76px; }
	/* Floating the image next to wrapped text works fine at 220px on a
	   normal column, but on a narrow phone screen it would squeeze the
	   heading/body text into an unreadably thin strip — stack instead. */
	body.holispace-magazine .holispace-holistische-coaching .mag-schijf-header .mag-schijf-figure {
		float: none;
		width: 160px;
		margin: 0 0 20px;
	}
}