/* Jacqueline Bongers — custom site CSS (utility classes not covered by theme.json) */

.site-header {
	display: flex;
	align-items: flex-start;
	max-width: 960px;
	margin: 0 auto;
	padding: 42px 0 28px;
}

.site-header > .wp-block-group {
	width: 100%;
	justify-content: flex-start;
	align-items: flex-start;
}

.site-header .wp-block-site-logo {
	flex: 0 0 50%;
}

.site-header .wp-block-site-logo img {
	width: 250px;
	height: auto;
}

.site-header .site-nav-col {
	margin-top: 22px;
}

.site-header .site-nav-col:first-of-type {
	flex: 0 0 auto;
	margin-right: 103px;
}

.site-header .site-nav-col:last-of-type {
	flex: 0 0 auto;
}

.site-nav-col {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.site-nav-col a {
	position: relative;
	display: inline-block;
	outline: none;
	font-weight: 700;
	text-decoration: none;
	color: #3c484b;
	line-height: 1.5;
}

.site-nav-col a:hover,
.site-nav-col a:focus {
	outline: none;
	color: #83a3cf;
}

.site-nav-col a::before,
.site-nav-col a::after {
	display: inline-block;
	opacity: 0;
	transition: transform 0.3s, opacity 0.2s;
}

.site-nav-col a::before {
	margin-right: 10px;
	content: "[";
	transform: translateX(20px);
}

.site-nav-col a::after {
	margin-left: 10px;
	content: "]";
	transform: translateX(-20px);
}

.site-nav-col a:hover::before,
.site-nav-col a:hover::after,
.site-nav-col a:focus::before,
.site-nav-col a:focus::after {
	opacity: 1;
	transform: translateX(0);
}

/* Hamburger. Desktop shows the links themselves, so the button only exists
   below the breakpoint — see the phone layout section at the end of the file. */
.nav-toggle {
	display: none;
	padding: 10px;
	margin: 0;
	border: none;
	background: none;
	color: #3c484b;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.nav-toggle__box {
	display: block;
	width: 24px;
	height: 16px;
	position: relative;
}

.nav-toggle__bar {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 200ms ease, opacity 150ms ease;
}

.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 7px; }
.nav-toggle__bar:nth-child(3) { top: 14px; }

/* Collapse the three bars into a cross while the menu is open. */
.is-nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.is-nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.is-nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-footer {
	max-width: 960px;
	margin: 0 auto;
	padding: 80px 0 32px;
}

.footer-row {
	column-gap: 40px !important;
}

.contact-page a {
	color: #3c484b;
}

.footer-row ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-row p {
	margin: 0 0 4px;
}

.footer-row p:last-child {
	margin-bottom: 0;
}

.footer-meta {
	margin-top: 52px;
}

/* Instagram link in the first footer column.

   The icon is a CSS background rather than inline SVG on purpose: this markup
   lives in the footer template part, which is stored in the DATABASE, and
   WordPress runs post content through KSES on save. Anything saved without the
   unfiltered_html capability loses its <svg> silently — which is exactly what
   happened on the first attempt: the text survived, the icon vanished. Keeping
   the glyph in CSS sidesteps that entirely.

   Two colour variants instead of a CSS mask, so the icon still appears on
   browsers without mask support rather than rendering as a solid block. */
.footer-instagram {
	margin: 10px 0 0;
}

.footer-instagram a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #3c484b;
	text-decoration: none;
}

.footer-instagram a::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%233c484b'%20stroke-width='2'%20stroke-linecap='round'><rect%20x='2.5'%20y='2.5'%20width='19'%20height='19'%20rx='5.5'/><circle%20cx='12'%20cy='12'%20r='4.5'/><circle%20cx='17.6'%20cy='6.4'%20r='1.35'%20fill='%233c484b'%20stroke='none'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
}

.footer-instagram a:hover,
.footer-instagram a:focus-visible {
	color: #83a3cf;
}

.footer-instagram a:hover::before,
.footer-instagram a:focus-visible::before {
	background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2383a3cf'%20stroke-width='2'%20stroke-linecap='round'><rect%20x='2.5'%20y='2.5'%20width='19'%20height='19'%20rx='5.5'/><circle%20cx='12'%20cy='12'%20r='4.5'/><circle%20cx='17.6'%20cy='6.4'%20r='1.35'%20fill='%2383a3cf'%20stroke='none'/></svg>");
}

/* Underline the label only — the anchor is inline-flex, so a decoration on it
   would draw a line under the icon as well. */
.footer-instagram a span {
	text-decoration: underline;
}

.section {
	margin: 50px 0;
}

.intro-text {
	max-width: 744px;
}

.wp-block-quote {
	margin: 0;
	padding: 0;
	border-left: none;
	font-style: italic;
}

.wp-block-quote cite {
	font-style: italic;
}

.fotos-title {
	margin: 0;
	line-height: 1.6;
}

.fotos-row {
	margin-bottom: 28px !important;
	align-items: flex-start !important;
	column-gap: 40px !important;
}

.fotos-row:first-of-type {
	margin-top: 40px !important;
}

/* Home Foto's preview covers — force one uniform landscape crop for every
   thumbnail, whatever the source photo's shape. (The Foto's page keeps its
   natural aspect ratios; this only targets .fotos-thumb, which is home-only.) */
.fotos-thumb {
	margin: 0;
}

.fotos-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Written into each caption by slider.js. Desktop keeps the numbered legend
   beside the photos, so the name is only revealed once the columns stack. */
.fotos-thumb__name {
	display: none;
}

/* Fotos thumbnails — preserve aspect ratio, fixed height */
.fotos-gallery {
	display: flex !important;
	flex-wrap: wrap;
	gap: 20px !important;
	align-content: flex-start;
}

.fotos-gallery .wp-block-image {
	position: static !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
}

.fotos-gallery .wp-block-image img {
	display: block !important;
	width: auto !important;
	height: 50px !important;
	max-width: none !important;
	opacity: 1 !important;
}

.site-content > .section:last-of-type {
	margin-bottom: 0;
}

.entry-content > .section:first-of-type {
	margin-top: 40px;
}

.entry-content > .section:last-of-type {
	margin-bottom: 0;
}

.lesrooster h2 {
	margin-bottom: 18px;
}

.lesrooster .wp-block-columns {
	margin-bottom: 4px;
}

.lesrooster p {
	margin: 0 0 6px;
	line-height: 1.5;
}

.hero video {
	display: block;
	width: 100%;
	height: auto;
}

/* Hero sound toggle.
   Browsers block autoplay WITH sound, so the film always starts muted and the
   visitor opts in via this button. */
.hero-video {
	position: relative;
	margin: 0;
}

.hero-sound {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	cursor: pointer;
	transition: background-color 180ms ease, opacity 180ms ease;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.hero-sound:hover,
.hero-sound:focus-visible {
	background: rgba(0, 0, 0, 0.7);
}

.hero-sound svg {
	display: block;
	pointer-events: none;
}

/* Show the muted icon by default; swap once sound is on. */
.hero-sound .hero-sound__on { display: none; }
.hero-sound.is-unmuted .hero-sound__off { display: none; }
.hero-sound.is-unmuted .hero-sound__on { display: block; }

@media (max-width: 781px) {
	.hero-sound {
		right: 10px;
		bottom: 10px;
		width: 38px;
		height: 38px;
	}
}

/* Announcements section (homepage, below hero) */
.announcements {
	display: grid;
	grid-template-columns: 1.4fr 0.8fr;
	gap: 16px;
	align-items: stretch;
	margin-top: 16px;
}

.announcements > * {
	margin-block-start: 0;
}

.announcements .card {
	padding: 16px 22px;
	height: 100%;
	box-sizing: border-box;
}

.announcements .card--info {
	background-color: rgba(193, 134, 185, 0.47);
}

.announcements .card--cta {
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 6px;
}

.announcements .card--cta > * {
	margin-top: 0;
	margin-bottom: 0;
}

.announcements .card--cta p.has-grey-color {
	margin-bottom: 14px;
	color: #3c484b;
}

.announcements .card__label {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #3c484b;
}

.announcements .card__label::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 8px;
	border-radius: 50%;
	background-color: #83a3cf;
	vertical-align: middle;
}

.announcements .card h2.has-medium-font-size {
	margin: 0 0 8px;
	font-size: 15px !important;
}

.announcements .card--cta h2 {
	margin-bottom: 0;
}

.announcements .facts__row {
	margin: 0;
	padding: 6px 0;
	border-top: 1px solid rgba(60, 72, 75, 0.28);
	color: #3c484b;
}

.announcements .facts__row:first-of-type {
	border-top: none;
	padding-top: 0;
}

.announcements .facts__row strong {
	display: inline-block;
	min-width: 180px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.btn,
.wp-block-button.cta-btn .wp-block-button__link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: #83a3cf;
	color: #ffffff;
	text-decoration: none;
	font-weight: 700;
	padding: 14px 26px;
	border-radius: 0;
	transition: background-color 180ms ease, transform 120ms ease;
}

.btn:hover,
.wp-block-button.cta-btn .wp-block-button__link:hover {
	background-color: #6e8fc0;
	color: #ffffff;
}

.btn:active,
.wp-block-button.cta-btn .wp-block-button__link:active {
	transform: translateY(1px);
}

.wp-block-buttons:has(.cta-btn) {
	margin-top: 14px;
}

/* ---------------------------------------------------------------------------
   Aanmeldformulier (rendered by the [aanmeldformulier] shortcode).
   A brand-new component — nothing here restyles an existing element, so the
   approved desktop design is unaffected.
   --------------------------------------------------------------------------- */
.aanmeldform {
	max-width: 520px;
}

/* These three carry an extra class on purpose. The form sits inside a
   .level-row column, and the theme's own `.level-row .wp-block-column p`
   rule zeroes paragraph margins at the same (0,2,1) specificity — which then
   wins on source order, collapsing every field in the form flush against the
   next. Qualifying with .aanmeldform reaches (0,3,1) and settles it without
   touching the approved rule or resorting to !important. */
.aanmeldform .aanmeldform__form p.aanmeldform__field {
	margin: 0 0 14px;
}

.aanmeldform .aanmeldform__form p.aanmeldform__actions {
	margin: 18px 0 0;
}

.aanmeldform .aanmeldform__form p.aanmeldform__note {
	margin: 12px 0 0;
}

.aanmeldform__field label {
	display: block;
	margin-bottom: 4px;
	font-weight: 700;
}

.aanmeldform input[type="text"],
.aanmeldform input[type="email"],
.aanmeldform input[type="tel"],
.aanmeldform select,
.aanmeldform textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 12px;
	border: 1px solid rgba(60, 72, 75, 0.35);
	border-radius: 0;
	background: #ffffff;
	color: #3c484b;
	font-family: inherit;
	/* 16px is a floor, not a preference: iOS Safari zooms the whole page in
	   when a focused field is any smaller, which throws off the layout. */
	font-size: 16px;
	line-height: 1.4;
}

.aanmeldform input:focus,
.aanmeldform select:focus,
.aanmeldform textarea:focus {
	outline: 2px solid #83a3cf;
	outline-offset: 1px;
	border-color: #83a3cf;
}

.aanmeldform textarea {
	resize: vertical;
}

.aanmeldform button.btn {
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
}

.aanmeldform__actions {
	margin: 18px 0 0;
}

.aanmeldform__note {
	margin: 12px 0 0;
	font-size: 12px;
	color: #9da3a5;
}

.aanmeldform__error {
	display: block;
	margin-top: 4px;
	color: #a3323d;
	font-weight: 700;
}

.aanmeldform__ok {
	margin: 0;
	padding: 16px 18px;
	background-color: rgba(193, 134, 185, 0.28);
}

/* Honeypot. It has to stay in the DOM and remain fillable so a bot parsing the
   HTML walks into it — display:none would let smarter bots skip it — but it
   must never be seen or tab-reachable by a person. */
.aanmeldform .aanmeldform__form p.aanmeldform__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 781px) {
	.announcements {
		grid-template-columns: 1fr;
	}
	.announcements .card {
		padding: 20px;
	}
}

/* Class info pages (Klassiek Ballet, Spitzen, Moderne Dans) */
.page-title-section {
	margin-top: 0;
	margin-bottom: 0;
}

.page-title-section h1 {
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0;
}


.img-slider {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	margin: 0 0 16px;
}

.img-slider.wp-block-gallery {
	display: block;
	gap: 0;
}

.img-slider .wp-block-image {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0;
}

.img-slider img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease;
}

.img-slider img.is-active {
	opacity: 1;
}

.level-row {
	margin-bottom: 0;
	column-gap: 40px !important;
}

/* Force every row's first column to the same fixed pixel width, regardless
   of how many columns follow it. With a plain 25% flex-basis, flexbox
   subtracts a DIFFERENT number of gaps depending on the row's total column
   count (1 gap for a 2-column row vs. 3 gaps for a 4-column row), so a
   4-column row (Prijzen, lesrooster) and a 2-column row (CTA, footer) never
   land on the same "25%" pixel width even though both say 25% — the second
   column always ends up misaligned. A fixed width sidesteps that entirely. */
.level-row > .wp-block-column:first-child,
.footer-row > .wp-block-column:first-child,
.fotos-row > .wp-block-column:first-child {
	flex: 0 0 210px !important;
}

.level-row .wp-block-column p {
	margin: 0;
}

.level-row .level-row__schedule + .level-row__schedule {
	margin-top: 12px;
}

.level-row__schedule-col {
	padding-left: 16px;
}

/* ===========================================================================
   Lightbox arrows on phones.

   GLightbox parks its prev/next buttons at `top: -100%` and only brings them
   back inside its own `@media (min-width: 769px)` block — on a phone it
   expects the visitor to swipe, and offers no visible control at all. That
   left the Foto's page looking like a dead end: a photo opens, and there is
   no way to reach the next one.

   768px is deliberate and is NOT the site's 781px breakpoint: it is the exact
   complement of GLightbox's own 769px rule, so the two never overlap or leave
   a gap. Swipe still works; this just adds a visible alternative.
   Note the doubled-up container class. GLightbox's own rule is
   `.glightbox-clean .gprev` — the same (0,2,0) specificity as the obvious
   override here, and its stylesheet is enqueued AFTER site.css, so a matching
   selector loses on source order and the arrows stay off-screen. Qualifying
   with .glightbox-container wins on specificity instead of resorting to
   !important.
   =========================================================================== */
@media (max-width: 768px) {
	.glightbox-container.glightbox-clean .gprev,
	.glightbox-container.glightbox-clean .gnext {
		top: 50%;
		transform: translateY(-50%);
		width: 44px;
		height: 56px;
	}

	.glightbox-container.glightbox-clean .gprev { left: 10px; }
	.glightbox-container.glightbox-clean .gnext { right: 10px; }
}

/* ===========================================================================
   Phone layout.

   781px is deliberate: it is the width at which WordPress core stops laying
   column blocks out side by side and stacks them. Using any smaller value
   leaves a dead band (e.g. 769–781px) where the columns have already stacked
   but these corrections have not kicked in yet.
   =========================================================================== */
@media (max-width: 781px) {

	/* --- Gutters ---------------------------------------------------------
	   A "constrained" layout only ever sets a max-width; it never adds side
	   padding. Above 960px that is invisible, but on a phone every heading
	   and paragraph ended up flush against the screen edge. Pad the text
	   wrapper, then let the two deliberately full-bleed bands — the hero
	   film and the pink notice — break back out to the edges. */
	.entry-content,
	.site-footer {
		padding-left: 20px;
		padding-right: 20px;
	}

	.entry-content > .announcements {
		margin-left: -20px;
		margin-right: -20px;
	}

	/* --- Header ----------------------------------------------------------
	   The nav is two separate <nav> columns held apart by a fixed 103px
	   spacer inside a nowrap flex row — on a 375px screen the second column
	   (Foto's, Contact) rendered at x=469, i.e. entirely off-canvas. Rather
	   than reflow the links into rows, collapse them behind the hamburger.

	   Note the navs stay direct flex siblings of the logo; the open state is
	   carried by a single class on the <header>. Wrapping them in a shared
	   container would have been the obvious move, but it breaks the desktop
	   header, which positions logo/nav/nav as siblings of one flex row. */
	.site-header {
		padding: 16px 20px;
		max-width: 100%;
	}

	.site-header > .wp-block-group {
		flex-wrap: wrap !important;
		align-items: center;
		row-gap: 0;
	}

	.site-header .wp-block-site-logo {
		flex: 0 1 auto;
	}

	.site-header .wp-block-site-logo img {
		width: 190px;
	}

	/* Scoped to .site-header on purpose. WordPress core ships
	   `.is-layout-flex > :is(*, div) { margin: 0 }`, whose specificity (0,1,1)
	   beats a bare `.nav-toggle` (0,1,0) — a plain class selector here silently
	   loses its margins and the button ends up next to the logo instead of at
	   the right edge. */
	.site-header .nav-toggle {
		display: block;
		margin-left: auto;
		/* Pull the 10px hit-area padding back out so the icon lines up with the
		   same 20px gutter as the text, while keeping a 44px touch target. */
		margin-right: -10px;
	}

	/* Hidden until the hamburger is pressed. Kept as flex (not display:none
	   → flex) so only the property that changes is `display`. */
	.site-header .site-nav-col,
	.site-header .site-nav-col:first-of-type,
	.site-header .site-nav-col:last-of-type {
		display: none;
		flex: 0 0 100%;
		flex-direction: column;
		margin: 0;
	}

	.site-header.is-nav-open .site-nav-col {
		display: flex;
	}

	/* The first open nav carries the divider and the top spacing, so the two
	   navs read as one continuous list rather than two groups. */
	.site-header.is-nav-open .site-nav-col:first-of-type {
		margin-top: 14px;
		padding-top: 12px;
		border-top: 1px solid rgba(60, 72, 75, 0.18);
	}

	/* The two navs are separate elements, so the 4px gap inside each one does
	   not apply across the seam between them. Without this the jump from
	   "Moderne Dans" to "Foto's" is 36px where every other step is 40px. */
	.site-header.is-nav-open .site-nav-col:last-of-type {
		margin-top: 4px;
		padding-bottom: 4px;
	}

	/* Comfortable touch targets once the links are stacked. */
	.site-header .site-nav-col a {
		padding: 9px 0;
		line-height: 1.3;
	}

	/* The "[ ]" hover flourish reserves ~20px of width per link even while
	   invisible, and cannot be triggered by touch at all. */
	.site-nav-col a::before,
	.site-nav-col a::after {
		display: none;
	}

	/* --- Stacked column rows --------------------------------------------
	   The fixed 210px first column above exists purely to align rows with
	   different column counts on desktop. Once the columns stack it has no
	   job left, and it was squeezing the lesson headings into a narrow
	   ribbon while every sibling ran the full width. */
	.level-row > .wp-block-column:first-child,
	.footer-row > .wp-block-column:first-child,
	.fotos-row > .wp-block-column:first-child {
		flex-basis: 100% !important;
	}

	/* Stacked, this 16px indent left the lesson times sitting slightly in
	   from the address directly beneath them. */
	.level-row__schedule-col {
		padding-left: 0;
	}

	.level-row {
		column-gap: 24px !important;
	}

	/* --- Prices ----------------------------------------------------------
	   Durations and amounts are two parallel columns of a single table. Left
	   to stack they became eight durations followed by eight amounts, so no
	   price sat next to the duration it belonged to. Keep this one row's
	   last two columns side by side.

	   The row is identified by structure rather than a hand-added class:
	   it is the only 4-column row that has a .level-row__schedule-col but
	   no .level-row__schedule paragraph inside it (the lesson rows have
	   both). If that ever stops matching, the row simply stacks again —
	   the failure mode is today's layout, not a broken one. */
	.level-row:has(.level-row__schedule-col):not(:has(.level-row__schedule))
		> .wp-block-column:nth-child(n + 3) {
		flex: 1 1 0 !important;
	}

	/* --- Pink notice -----------------------------------------------------
	   The 180px label column left too little room for the value beside it,
	   so "Studio Huis Conny Janssen Danst · Kop van Zuid" wrapped back
	   underneath the label and restarted at the far left edge. Give each
	   value its own line instead. */
	.announcements .facts__row strong {
		display: block;
		min-width: 0;
		margin-bottom: 2px;
	}

	/* --- Home page Foto's preview ----------------------------------------
	   The numbered legend column is redundant once each photo carries its own
	   name (added by slider.js), and stacked it just repeats the same six
	   titles a screen away from the pictures they refer to. */
	.fotos-row__label {
		display: none;
	}

	.fotos-thumb figcaption {
		margin-top: 6px;
		font-weight: 700;
		color: #3c484b;
		text-align: left;
	}

	.fotos-thumb__name {
		display: inline;
		margin-left: 0.35em;
		font-weight: 400;
	}

	/* --- Vertical rhythm -------------------------------------------------
	   50px between sections reads as a comfortable pause on a 960px page,
	   but on a phone the columns inside each section have already stacked,
	   so that same gap arrives on top of a much taller block and the page
	   turns into a lot of scrolling past empty space. */
	.section {
		margin: 30px 0;
	}

	.entry-content > .section:first-of-type {
		margin-top: 24px;
	}

	.site-footer {
		padding-top: 48px;
	}

	/* --- Nested column blocks --------------------------------------------
	   These layouts pad themselves out with trailing empty columns to push
	   content into the left part of the grid. Once stacked, each empty
	   column still claims a full-width flex line and contributes a row-gap,
	   so they were quietly adding dead vertical space to most sections. */
	.level-row .wp-block-column > .wp-block-columns > .wp-block-column:empty {
		display: none;
	}

	/* --- Tariff table (Contact) ------------------------------------------
	   Same "prices under the times" problem as the lesson pages, but a
	   different shape: here the durations and amounts are a nested
	   .wp-block-columns inside the second column of a 2-column .level-row,
	   so the selector used for the lesson pages does not reach it.

	   Matched by shape — exactly two columns carrying content — because
	   that is what makes a pair of parallel lists rather than a gallery.
	   Merchandise on this same page is three populated columns and must
	   keep stacking; the CTA is one populated column followed by two empty
	   spacers. Both fall outside this, as does anything Jacqueline adds a
	   third column to later, which then simply stacks as it does today. */
	.level-row .wp-block-column:not(.cta-row__wrap) > .wp-block-columns:has(> .wp-block-column:nth-child(2):not(:empty)):not(:has(> .wp-block-column:nth-child(3):not(:empty))) > .wp-block-column:not(:empty) {
		flex: 1 1 0 !important;
	}
}