/* HoliSpace "Over Ons" page — extends magazine.css / holistische-coaching.css
   with the handful of components unique to this page: a shorter hero photo
   (no dark overlay, since it's a friendly team portrait, not a mood shot),
   a portrait-next-to-heading treatment for Georgia/Aypril's own sections,
   a pill row and compact session list, and a couple of readability aids
   (2-column list, checkmark boxes) that break up the long personal
   sections. Scoped under body.holispace-magazine like the rest of the
   magazine styling. */

/* Portrait photo is noticeably shorter than the default 4/5 hero ratio so
   its top edge sits closer to the (facts-less, shorter) text column next
   to it — the two are vertically centered, so a tall photo otherwise
   leaves a visible gap above the crumbs/kicker/title. */
body.holispace-magazine .holispace-over-ons .mag-hero-img {
	aspect-ratio: 1 / 1;
}
/* This is a warm team portrait, not a mood/atmosphere shot — skip the
   dark gradient the other hero photos use for text-over-image contrast. */
body.holispace-magazine .holispace-over-ons .mag-hero-img::before {
	display: none;
}

/* Extra breathing room between the hero and the first article heading. */
body.holispace-magazine .holispace-over-ons .mag-article > h2:first-child {
	margin-top: 12px;
}

/* DM Sans now loads a real 700 cut (functions.php) instead of leaving
   <strong> to the browser's synthesized "bolder" — noticeably heavier. */
body.holispace-magazine .holispace-over-ons .mag-article strong {
	font-weight: 700;
}

/* Georgia/Aypril's own section: portrait sits right next to their name
   instead of floating above it as a separate block. The shared header/
   portrait sizing lives in holistische-coaching.css (that page reuses the
   same layout); only the extra top margin before an <h2> is specific here. */
body.holispace-magazine .holispace-over-ons .mag-guide-header {
	margin-top: 56px;
}
body.holispace-magazine .holispace-over-ons .mag-guide-header h2 {
	margin: 0;
}

/* Long "wat je er vindt" lists (Georgia/Aypril) get the checkmark
   treatment already used elsewhere in the magazine pages. Laid out with
   CSS columns rather than the shared component's row-major grid: with a
   grid, two items of different heights end up in the same row and every
   following row shifts, so the gap between checkmarks looks inconsistent.
   Columns let each item keep its own fixed spacing regardless of what's
   next to it. */
body.holispace-magazine .holispace-over-ons .mag-signals {
	margin: 8px 0 40px;
	display: block;
	columns: 2;
	column-gap: 48px;
}
body.holispace-magazine .holispace-over-ons .mag-signals h3 {
	column-span: all;
}
body.holispace-magazine .holispace-over-ons .mag-signal {
	break-inside: avoid;
}
body.holispace-magazine .holispace-over-ons .mag-signal p {
	font-size: 15px;
	line-height: 1.5;
}

/* Plain lists that are still prose (not a boxed callout) run two columns
   on wider screens so they read as a block instead of a long single
   column — same content, less scroll. */
body.holispace-magazine .holispace-over-ons .mag-list-2col {
	columns: 2;
	column-gap: 32px;
}
body.holispace-magazine .holispace-over-ons .mag-list-2col li {
	break-inside: avoid;
}

/* Sessions — a tidy linked list (label + one line + arrow) instead of
   bordered cards with two buttons each; booking happens via the CTAs
   elsewhere on the page, so each row only needs to lead to more info. */
body.holispace-magazine .holispace-over-ons .mag-session-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 24px 0 40px;
}
body.holispace-magazine .holispace-over-ons .mag-session-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 22px;
	border: 1px solid var(--beige-dark);
	border-radius: 12px;
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}
body.holispace-magazine .holispace-over-ons .mag-session-row:hover {
	border-color: var(--primary);
	background: var(--beige);
}
body.holispace-magazine .holispace-over-ons .mag-session-row .name {
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 18px;
	color: var(--text);
	margin-bottom: 3px;
}
body.holispace-magazine .holispace-over-ons .mag-session-row .desc {
	font-size: 14px;
	line-height: 1.4;
	color: var(--text);
	opacity: 0.7;
}
body.holispace-magazine .holispace-over-ons .mag-session-row .arrow {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--primary);
	color: var(--cream);
	display: grid;
	place-items: center;
	transition: background 0.15s;
}
body.holispace-magazine .holispace-over-ons .mag-session-row:hover .arrow {
	background: #7a2f0e;
}

@media (max-width: 640px) {
	body.holispace-magazine .holispace-over-ons .mag-list-2col {
		columns: 1;
	}
	body.holispace-magazine .holispace-over-ons .mag-signals {
		columns: 1;
	}
}

@media (max-width: 980px) {
	body.holispace-magazine .holispace-over-ons .mag-hero-img {
		aspect-ratio: 5 / 4;
	}
}

/* The bottom mag-cta-strip sits outside <main>, so it's scoped off the body
   class instead of the .holispace-over-ons wrapper. The inline "de test"
   link needs contrast against the strip's solid --primary background. */
body.holispace-over-ons .mag-cta-strip p a {
	color: inherit;
	text-decoration-color: rgba(244, 223, 201, 0.5);
}
body.holispace-over-ons .mag-cta-strip p a:hover {
	text-decoration-color: rgba(244, 223, 201, 0.9);
}