/* Additions on top of the old theme CSS (public/theme/theme.css, imported from WordPress).
   Only for blocks that did not exist in the theme: the i-Reserve booking block and the charter request. */
.booking-block mokumboot-booking { display: block; max-width: 480px; margin: 1.5rem auto 0; }
.charter-request ul { list-style: disc; padding-left: 1.25em; }

/* ============================================================
   Target design (mokumboot-design), block by block.
   Blocks that moved to the target design carry the .mb class; everything inside
   uses the tokens from brands/mokumboot/tokens/ (loaded in BaseLayout.astro).
   Prefixed with mb- so nothing clashes with the old theme CSS.
   Moved so far: reviews, faq, map (boarding locations).
   ============================================================ */
.mb { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text); }
.mb *, .mb *::before, .mb *::after { box-sizing: border-box; }
.mb :where(h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; padding: 0; }
.mb :where(ul, ol) { list-style: none; }
.mb :where(p, li, blockquote, summary) { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; } /* the old theme sizes p for a 10px root */
.mb a { color: var(--color-link); }
.mb a:hover { color: var(--color-link-hover); }
.mb :focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }

.mb-section { padding-block: var(--section-y); background: var(--color-surface); }
.mb-section--alt { background: var(--color-surface-alt); }
.mb-container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.mb-stack { display: flex; flex-direction: column; gap: var(--space-6); }
.mb-intro { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--prose-max); }
.mb-overline { font-size: var(--text-small); font-weight: var(--weight-bold); letter-spacing: 0; text-transform: none; color: var(--color-accent-strong); }
.mb-h2, .mb .mb-h2 { font-family: var(--font-heading); font-weight: var(--heading-weight); text-transform: var(--heading-transform); letter-spacing: var(--heading-tracking); line-height: var(--leading-heading); font-size: var(--text-h2); color: var(--color-heading); }
.mb-h4, .mb .mb-h4 { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-h4); line-height: var(--leading-tight); text-transform: none; letter-spacing: 0; color: var(--color-heading); }
.mb-lead { font-size: var(--text-lead); }
.mb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }

.mb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 var(--space-5); border: 2px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--text-button); font-weight: var(--weight-bold); line-height: var(--leading-tight); text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease); }
.mb .mb-btn--primary { background: var(--color-accent); color: var(--color-on-accent); }
.mb .mb-btn--primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.mb .mb-btn--secondary { background: var(--color-secondary); color: var(--color-on-secondary); }
.mb .mb-btn--secondary:hover { background: var(--color-secondary-hover); color: var(--color-on-secondary); }
.mb .mb-btn--tertiary { min-height: var(--tap-min); padding: 0 var(--space-1); border: 0; background: transparent; color: var(--color-link); text-decoration: underline; text-underline-offset: 0.2em; }
.mb .mb-btn--tertiary:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }
.mb .mb-btn--on-dark { background: transparent; color: var(--color-on-inverse); border-color: var(--color-on-inverse); }
.mb .mb-btn--on-dark:hover { background: rgb(0 0 0 / 0.28); color: var(--color-on-inverse); }
.mb-on-dark :focus-visible { outline-color: var(--color-focus-on-dark); }
.mb-btn:disabled { cursor: progress; opacity: 0.7; }

.mb-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--color-signal); color: var(--color-on-signal); font-size: var(--text-caption); font-weight: var(--weight-bold); line-height: 1; white-space: nowrap; }
.mb-badge--neutral { background: var(--color-surface-alt); color: var(--color-ink); }

.mb-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mb-chips[hidden] { display: none; }
.mb-chip { min-height: var(--tap-min); padding: 0 var(--space-4); border: 1px solid var(--color-border-control); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink); font: inherit; font-weight: var(--weight-bold); cursor: pointer; }
.mb-chip[aria-pressed="true"] { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-on-inverse); }

/* ---- Reviews ---- */
.mb-reviews__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: var(--grid-gap); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--space-1) var(--space-1) var(--space-4); margin: calc(-1 * var(--space-1)); }
@media (min-width: 768px) { .mb-reviews__list { grid-auto-columns: calc((100% - var(--grid-gap)) / 2); } }
@media (min-width: 1024px) { .mb-reviews__list { grid-auto-columns: calc((100% - 2 * var(--grid-gap)) / 3); } }
.mb-review { scroll-snap-align: start; display: flex; }
.mb-review figure { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; padding: var(--card-pad); border-radius: var(--radius-card); background: var(--color-surface-card); box-shadow: var(--shadow-sm); }
.mb-review__stars { display: flex; gap: 2px; }
.mb-review__stars svg { width: 20px; height: 20px; fill: var(--color-accent-strong); }
.mb-review__stars svg.is-empty { fill: var(--color-border); }
.mb-review__text { font-size: var(--text-lead); color: var(--color-ink); white-space: pre-line; }
.mb-review__author { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-small); }
.mb-review__author strong { display: block; color: var(--color-ink); }
.mb-review__source { color: var(--color-text-muted); font-size: var(--text-caption); }
/* Location pages: the point's own Google profile score under the intro (links to the profile). */
.mb-reviews--place .mb-review figure { gap: var(--space-3); }
.mb-reviews--place .mb-review__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.mb-reviews--place .mb-review__text.is-open { display: block; }
.mb .mb-review__more { justify-self: start; align-self: flex-start; padding: 0; border: 0; background: none; color: var(--color-heading); font: inherit; font-size: var(--text-small); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.mb .mb-reviews__score { width: fit-content; align-self: flex-start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); justify-self: start; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--color-surface-card); box-shadow: var(--shadow-sm); color: var(--color-text-muted); font-size: var(--text-small); text-decoration: none; }
.mb-reviews__score-stars { color: #FBBC04; font-size: var(--text-body); letter-spacing: 1px; }
.mb-reviews__score strong { color: var(--color-heading); font-size: var(--text-lead); }
.mb-reviews__score span:last-child { text-decoration: underline; text-underline-offset: .2em; }
.mb .mb-reviews__score:hover span:last-child { color: var(--color-heading); }
.mb-review__avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-round); background: var(--color-ink); color: var(--color-on-inverse); font-weight: var(--weight-bold); }

/* ---- FAQ ---- */
.mb-faq__grid { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: flex-start; }
.mb-faq__aside { flex: 1 1 300px; max-width: 400px; display: flex; flex-direction: column; gap: var(--space-5); }
.mb-faq__list { flex: 999 1 520px; min-width: 0; border-top: 2px solid var(--color-ink); }
.mb-faq__contact { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--card-pad); border-radius: var(--radius-card); background: var(--color-surface-inverse); color: var(--color-on-inverse); font-size: var(--text-small); }
.mb-faq__contact .mb-h4 { color: var(--color-on-inverse); }
.mb-faq__item { border-bottom: 1px solid var(--color-border); }
.mb-faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 64px; padding: var(--space-4) 0; cursor: pointer; list-style: none; }
.mb-faq__question::-webkit-details-marker { display: none; }
.mb .mb-faq__q { font-family: var(--font-body); font-size: var(--text-h4); font-weight: var(--weight-bold); line-height: var(--leading-tight); text-transform: none; letter-spacing: 0; color: var(--color-heading); }
.mb-faq__icon { position: relative; flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--radius-round); background: var(--color-surface-alt); transition: background-color var(--duration) var(--ease); }
.mb-faq__icon::before, .mb-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--color-ink); border-radius: 1px; transition: transform var(--duration) var(--ease); }
.mb-faq__icon::after { transform: rotate(90deg); }
.mb-faq__item[open] .mb-faq__icon { background: var(--color-accent); }
.mb-faq__item[open] .mb-faq__icon::before, .mb-faq__item[open] .mb-faq__icon::after { background: var(--color-on-accent); }
.mb-faq__item[open] .mb-faq__icon::after { transform: rotate(0deg); }
.mb-faq__answer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); max-width: var(--prose-max); padding: 0 var(--space-8) var(--space-5) 0; }
.mb-faq__answer p + p { margin-top: var(--space-3); }
.mb-faq__answer ul { list-style: disc; padding-left: 1.25em; }

/* ---- Boarding locations + map ---- */
.mb-locations__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-5); }
.mb-locations__body { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: stretch; }
.mb-locations__list { flex: 1 1 340px; min-width: 0; max-height: 640px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); padding-right: var(--space-2); }
.mb-location { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); cursor: pointer; }
.mb-location[hidden] { display: none; }
.mb-location.is-active { border: 2px solid var(--color-accent-strong); background: var(--color-accent-tint); }
.mb-location__pin, .mb-map__pin, .mb-map__marker { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-round); background: var(--color-ink); color: var(--color-on-inverse); font-family: var(--font-body); font-size: var(--text-small); font-weight: var(--weight-bold); }
.mb-location__pin { flex: 0 0 auto; }
.mb-location.is-active .mb-location__pin, .mb-map__pin.is-active, .mb-map__marker.is-active { background: var(--color-accent); color: var(--color-on-accent); }
.mb-location__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.mb-location__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mb-location__address { font-size: var(--text-small); }
.mb-location__links { display: flex; flex-wrap: wrap; column-gap: var(--space-4); font-size: var(--text-small); }
.mb-map { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.mb-map__canvas { position: relative; flex: 1 1 auto; min-height: 420px; border-radius: var(--radius-card); overflow: hidden; background: var(--color-surface-alt); z-index: 0; }
.mb-map__pin { position: absolute; transform: translate(-50%, -50%); border: 2px solid var(--color-surface); box-shadow: var(--shadow-sm); cursor: pointer; padding: 0; }
.mb-map__pin[hidden] { display: none; }
/* Phones: smaller pins, and the "show map" button in the empty top-right corner instead of over the De Pijp pin, so
   every pin stays fully tappable. */
@media (max-width: 600px) {
  .mb-map__pin { width: 28px; height: 28px; font-size: var(--text-caption); }
  .mb-map__load { top: var(--space-4); right: var(--space-4); bottom: auto; left: auto; transform: none; }
}
.mb-map__load { position: absolute; }
@media (min-width: 601px) { .mb-map__load { left: 50%; bottom: var(--space-5); transform: translateX(-50%); } }
.mb-map .mb-map__marker { display: flex; border: 2px solid var(--color-surface); box-shadow: var(--shadow-sm); } /* beats Leaflet's display: block */
.mb-map__marker[hidden] { display: none; }
.mb-map__note { font-size: var(--text-caption); color: var(--color-text-muted); }

@media (max-width: 767px) {
  /* Phones: the list becomes one swipeable row like the places strip, instead of nine stacked cards. */
  .mb-locations__list { flex-basis: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 85%; gap: var(--space-3); max-height: none; overflow-x: auto; overflow-y: hidden; padding: var(--space-1) 0 var(--space-2); scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .mb-locations__list::-webkit-scrollbar { display: none; }
  .mb-location { scroll-snap-align: start; }
  .mb-location__links { column-gap: var(--space-3); }
  .mb-location__links .mb-btn--tertiary { min-height: 36px; padding-inline: 0; }
  .mb-map__canvas { min-height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .mb *, .mb *::before, .mb *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   Booking tools: private cruise (CharterRequestBlock.astro + scripts/charter-tool.ts) and boat rental
   (BoatBookingBlock.astro + scripts/boat-booking.ts). Shared wrapper .book-tool, components .mb-book-*.
   Target design (mokumboot-design): tokens only. Choice tiles, form fields and buttons
   follow tokens/base/components.css (.choice, .input, .step, .btn), prefixed mb-book-.
   ============================================================ */
.book-tool { padding: var(--section-y) var(--gutter); background: var(--color-surface); scroll-margin-top: 80px; }
.book-tool__inner { max-width: var(--container-max); margin: 0 auto; }
.book-tool__header { margin-bottom: var(--space-7); }
.mb .book-tool__header .mb-h2 { margin: 0 0 var(--space-3); font-size: var(--text-h1); } /* h1 on the booking page: no theme h1 margins */
.book-tool__loading, .book-tool__error { padding: var(--card-pad); border-radius: var(--radius-card); background: var(--color-surface-alt); }
.book-tool [hidden] { display: none !important; }

/* One width for the right column: the place card in the header and the summary below line up exactly */
.book-tool { --book-aside: 380px; }
.mb-book { display: grid; grid-template-columns: minmax(0, 1fr) var(--book-aside); gap: var(--space-8); align-items: start; }
.mb-book__main { display: flex; flex-direction: column; min-width: 0; }

/* Steps: big Block Berthold headings, separated by a line (white page, like the rest of the site) */
.mb-book-step { display: block; padding: var(--space-6) 0; border-top: 1px solid var(--color-border); min-width: 0; }
.mb-book-step:first-child { padding-top: 0; border-top: 0; }
.mb .mb-book-step__title { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--heading-weight); line-height: var(--leading-heading); letter-spacing: var(--heading-tracking); text-transform: var(--heading-transform); color: var(--color-heading); }
.mb-book-step__nr { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-round); background: var(--color-secondary); color: var(--color-on-secondary); font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--weight-bold); }
/* The steps as one form: a card with a thin outline, the step numbers joined by a rail. A step with a choice made
   gets a green number (and rail), an open step an outlined one, so what is left to do stands out. */
.mb-book__main { padding: var(--space-7); border: 1px solid var(--color-border); border-radius: calc(var(--radius-card) * 1.5); background: var(--color-surface-card); box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.04), 0 12px 32px -12px rgb(var(--shadow-rgb) / 0.12); }
.mb-book__main .mb-book-step__nr { border: 2px solid var(--color-border); background: var(--color-surface-card); color: var(--color-heading); transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease); }
.mb-book__main .mb-book-step:has(:checked, [aria-checked="true"], [data-persons]) .mb-book-step__nr { border-color: var(--color-accent-strong); background: var(--color-accent-strong); color: var(--color-surface-card); }
@media (min-width: 601px) {
  .mb-book__main .mb-book-step { position: relative; padding: 0 0 var(--space-7) 56px; border-top: 0; }
  .mb-book__main .mb-book-step:last-child { padding-bottom: 0; }
  .mb-book__main .mb-book-step__nr { position: absolute; left: 0; top: 0; }
  .mb .mb-book__main .mb-book-step__title { min-height: 36px; }
  .mb-book__main .mb-book-step:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 44px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--color-border); }
  .mb-book__main .mb-book-step:has(:checked, [aria-checked="true"], [data-persons]):not(:last-child)::before { background: color-mix(in srgb, var(--color-accent-strong) 45%, var(--color-border)); }
}
@media (max-width: 600px) {
  .mb-book__main { padding: var(--space-4); border-radius: var(--radius-card); }
}
@media (prefers-reduced-motion: reduce) { .mb-book__main .mb-book-step__nr { transition: none; } }
/* Invite (scripts/book-invite.ts): the first step number hops and sends out rings when the form comes into view. */
.book-tool.is-inviting .mb-book__main .mb-book-step:first-child .mb-book-step__nr { animation: mb-invite-hop 1.6s var(--ease) 3; }
.book-tool.is-inviting .mb-book__main .mb-book-step:first-child .mb-book-step__nr::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 3px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 18%, transparent); pointer-events: none; animation: mb-invite-ring 1.6s ease-out 3; }
@media (max-width: 600px) { .book-tool.is-inviting .mb-book__main .mb-book-step:first-child .mb-book-step__nr { position: relative; } }
@keyframes mb-invite-hop { 0%, 30%, 100% { transform: none; } 12% { transform: scale(1.14); } }
@keyframes mb-invite-ring { 0% { transform: scale(1); opacity: 1; } 75%, 100% { transform: scale(2); opacity: 0; } }
.mb-book-subtitle { margin: var(--space-5) 0 var(--space-3); font-weight: var(--weight-bold); color: var(--color-heading); }
.mb-book-subtitle:first-child { margin-top: 0; }
.mb-book-note { margin: var(--space-3) 0 0; color: var(--color-text-muted); }
.mb-book-note:empty { display: none; }
.mb-book-note--warn { color: var(--color-danger); font-weight: var(--weight-bold); }
.mb-book-alt { display: grid; justify-items: start; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-accent-tint); }
.mb-book-alt p { margin: 0; color: var(--color-heading); font-weight: var(--weight-bold); }
.mb-book-alt__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Alternative boarding point with free boats: an invitation card, map beside the text (stacks on narrow screens) */
.mb-book-alt--card { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-4); padding: var(--space-3); background: var(--color-accent-tint); }
.mb-book-alt__map { position: relative; display: block; flex: 1 1 220px; min-height: 180px; max-width: 100%; overflow: hidden; border-radius: var(--radius-media); box-shadow: var(--shadow-sm); }
.mb-book-alt__map img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.6) contrast(1.06) brightness(1.04); transition: filter var(--duration) var(--ease); }
.mb-book-alt__map:hover img { filter: saturate(1.9) contrast(1.08) brightness(1.05); }
.mb-book-alt__map:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 2px; }
/* Overview map with two points: cover-sized (--rw/--rh) and shifted so the centre between the points (--mx/--my, % of
   the map) sits in the middle where the edges allow (--ox/--oy). Container units resolve in the children. */
.mb-book-alt__map--overview {
  container-type: size;
  --rw: max(100cqw, 100cqh * var(--ar));
  --rh: max(100cqh, 100cqw / var(--ar));
  --ox: clamp(100cqw - var(--rw), 50cqw - var(--mx) / 100 * var(--rw), 0px);
  --oy: clamp(100cqh - var(--rh), 50cqh - var(--my) / 100 * var(--rh), 0px);
}
/* Stacked above the text the map's height would come from min-height, which container units ignore: fix it. */
.mb-book-alt--card:has(.mb-book-alt__map--overview) { container-type: inline-size; }
@container (width < 500px) { .mb-book-alt__map--overview { flex-basis: 100%; height: 200px; } }
.mb-book-alt__map--overview img { inset: auto; left: var(--ox); top: var(--oy); width: var(--rw); height: var(--rh); max-width: none; object-fit: fill; }
.mb-book-alt__dot { position: absolute; left: calc(var(--ox) + var(--u) / 100 * var(--rw)); top: calc(var(--oy) + var(--v) / 100 * var(--rh)); width: 20px; height: 20px; border: 3px solid var(--color-surface-card); border-radius: var(--radius-round); transform: translate(-50%, -50%); box-shadow: var(--shadow-sm); }
.mb-book-alt__dot--free { z-index: 1; background: var(--color-accent-strong); box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-accent-strong) 22%, transparent), var(--shadow-sm); }
.mb-book-alt__dot--full { background: var(--color-text-muted); }
.mb-book-alt__dot > span { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-surface-card); color: var(--color-heading); font-size: var(--text-small); font-weight: var(--weight-bold); line-height: 1.4; white-space: nowrap; box-shadow: var(--shadow-sm); }
.mb-book-alt__dot--full > span { top: calc(100% + 6px); bottom: auto; color: var(--color-text-muted); font-weight: var(--weight-regular, 400); }
.mb-book-alt__body { display: grid; align-content: center; justify-items: start; gap: var(--space-2); flex: 1 1 260px; min-width: 0; padding: var(--space-1) var(--space-1) var(--space-1) 0; }
.mb-book-alt p.mb-book-alt__eyebrow { color: var(--color-text-muted); font-size: var(--text-small); font-weight: var(--weight-regular); }
.mb-book-alt p.mb-book-alt__title { font-family: var(--font-heading); font-size: var(--text-h3); line-height: 1.15; text-transform: uppercase; color: var(--color-heading); }
.mb-book-alt p.mb-book-alt__meta { display: grid; gap: 2px; font-weight: var(--weight-bold); }
.mb-book-alt__meta span { color: var(--color-text-muted); font-size: var(--text-small); font-weight: var(--weight-regular); }
.mb-book-alt__times { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.mb .mb-book-alt__time { min-height: 40px; min-width: 64px; padding: 0 var(--space-3); border: 2px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-surface-card); color: var(--color-heading); font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--weight-bold); cursor: pointer; transition: background-color var(--duration) var(--ease); }
.mb .mb-book-alt__time:hover { background: var(--color-accent); color: var(--color-on-accent); }
.mb .mb-book-alt__time:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 2px; }
.mb-book-alt__more { color: var(--color-text-muted); font-size: var(--text-small); }
.mb-book-alt--card .mb-book-alt__actions { margin-top: var(--space-1); }
.mb .mb-book-alt__geo { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-link); font-family: var(--font-body); font-size: var(--text-small); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mb .mb-book-alt__geo:hover { color: var(--color-link-hover); }
.mb-book-alt p.mb-book-alt__status { color: var(--color-text-muted); font-size: var(--text-small); font-weight: var(--weight-regular); }
.mb-book-alt p.mb-book-alt__status:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .mb-book-alt__map img { transition: none; } }
/* Online closes before departure, but calling or WhatsApp always works */
.mb-book-alt p.mb-book-contact, .mb-book-contact { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-small); font-weight: var(--weight-regular); }
/* {call} / {whatsapp} in tool texts (scripts/contact-links.ts): clear, tappable links */
.mb .mb-contact-link { color: var(--color-link); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.mb .mb-contact-link:hover { color: var(--color-link-hover); }
/* Boarding point without free boats this week: its page books at the nearest open point (lib/boat-season.ts) */
.mb-book-closed { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--color-accent-tint); color: var(--color-heading); font-weight: var(--weight-bold); }
.book-tool input[type="radio"], .book-tool input[type="checkbox"] { accent-color: var(--color-accent-strong); }

/* Tiles: sand, no grey outline; selected = solid green with dark text, like the site's buttons */
.mb-book-pill > span, .mb-book-option, .mb-book-time, .mb-book-food-group { border: 2px solid transparent; background: var(--color-surface-alt); color: var(--color-text); transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease), color var(--duration) var(--ease); }
.mb-book-pill:hover > span, .mb-book-option:hover, .mb-book-time:hover { border-color: var(--color-ink); }
.mb-book-pill input:checked + span, .mb-book-option:has(input:checked), .mb-book-time.is-active { border-color: var(--color-accent-strong); background: var(--color-accent); color: var(--color-on-accent); } /* accent-strong border: >= 3:1 selected state (WCAG 1.4.11) */
.mb-book-pill input:checked + span *, .mb-book-option:has(input:checked) :is(strong, small, em, span) { color: var(--color-on-accent); }
.mb-book-card:has(input:focus-visible), .mb-book-pill input:focus-visible + span, .mb-book-option:has(input:focus-visible) { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }

/* Boat cards: big photo, name in Block Berthold, price up front, green check when chosen */
.mb-book-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-4); }
.mb-book-card { position: relative; display: flex; flex-direction: column; border: 3px solid transparent; border-radius: var(--radius-card); overflow: hidden; background: var(--color-surface-card); box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.mb-book-card:hover { box-shadow: var(--shadow-md); }
.mb-book-card input { position: absolute; opacity: 0; pointer-events: none; }
.mb-book-card:has(input:checked) { border-color: var(--color-accent-strong); }
.mb-book-card:has(input:checked)::after { content: ""; position: absolute; top: var(--space-3); right: var(--space-3); width: 36px; height: 36px; border-radius: var(--radius-round); background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003333' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: var(--shadow-sm); }
.mb-book-card__img { display: block; aspect-ratio: 4 / 3; background: var(--color-surface-alt); }
.mb-book-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mb-book-card__body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5) var(--space-5); }
.mb .mb-book-card__body strong { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--heading-weight); line-height: var(--leading-heading); text-transform: var(--heading-transform); color: var(--color-heading); }
.mb-book-card__text { color: var(--color-text); }
.mb-book-card__meta { font-size: var(--text-small); color: var(--color-text-muted); }
.mb-book-card__price { margin-top: var(--space-2); font-size: var(--text-small); color: var(--color-text-muted); }
.mb-book-card__price b { margin: 0 2px; font-size: var(--text-price); line-height: 1.2; color: var(--color-price); }

/* Duration tiles */
.mb-book-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); }
.mb-book-pill { position: relative; cursor: pointer; }
.mb-book-pill input { position: absolute; opacity: 0; pointer-events: none; }
.mb-book-pill > span { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-card); line-height: var(--leading-tight); }
.mb-book-pill strong { font-size: var(--text-h4); color: var(--color-heading); }
.mb-book-pill small { font-weight: var(--weight-bold); color: var(--color-price); }

/* Option tiles (boarding, drinks) */
.mb-book-options { display: grid; gap: var(--space-2); }
.mb-book-option { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); cursor: pointer; }
.mb-book-option input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--color-on-accent); }
.mb-book-option > span { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; font-weight: var(--weight-bold); color: var(--color-heading); }
.mb-book-option small { font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.mb-book-option em { flex: none; font-style: normal; font-weight: var(--weight-bold); color: var(--color-price); white-space: nowrap; }
.mb-book-check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); margin-top: var(--space-3); cursor: pointer; font-weight: var(--weight-bold); color: var(--color-heading); }
.mb-book-check input { width: 22px; height: 22px; margin: 0; }

/* Fields (.field / .input) */
.mb-book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.mb-book-field { display: grid; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--text-label); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--color-heading); }
.mb-book-grid .mb-book-field { margin-top: 0; }
.mb-book-field input, .mb-book-field textarea { width: 100%; min-height: var(--control-height); padding: 0 var(--space-4); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); background: var(--color-surface-field); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--weight-regular); transition: border-color var(--duration) var(--ease); }
.mb-book-field textarea { min-height: 120px; padding: var(--space-3) var(--space-4); resize: vertical; }
.mb-book-field input:hover, .mb-book-field textarea:hover { border-color: var(--color-ink); }
.mb-book-field input:focus-visible, .mb-book-field textarea:focus-visible { border-color: var(--color-focus); outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 0; }
.mb-book-field--date { max-width: 280px; margin-top: 0; }
.mb-book-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Times */
.mb-book-times { margin-top: var(--space-5); }
.mb-book-time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--space-2); }
.mb-book-time { min-height: var(--control-height); border-radius: var(--radius-control); font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--weight-bold); cursor: pointer; }
.mb-book-time:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }

/* Steppers */
.mb-book-stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-border-control); border-radius: var(--radius-pill); background: var(--color-surface-field); overflow: hidden; }
.mb-book-stepper button { width: var(--tap-min); height: var(--tap-min); border: 0; background: transparent; color: var(--color-heading); font-family: var(--font-body); font-size: var(--text-h4); line-height: 1; cursor: pointer; }
.mb-book-stepper button:hover { background: var(--color-surface-alt); }
.mb-book-stepper input { width: 48px; height: var(--tap-min); border: 0; background: transparent; color: var(--color-heading); text-align: center; font-family: var(--font-body); font-size: var(--text-body); -moz-appearance: textfield; }
.mb-book-stepper input::-webkit-outer-spin-button, .mb-book-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mb-book-stepper--large button { width: var(--control-height); height: var(--control-height); }
.mb-book-stepper--large input { width: 72px; height: var(--control-height); font-size: var(--text-h3); font-weight: var(--weight-bold); }

/* Food */
.mb-book-food-group { margin-top: var(--space-3); border-radius: var(--radius-card); overflow: hidden; }
.mb-book-food-group summary { display: flex; align-items: center; min-height: var(--control-height); padding: 0 var(--space-4); font-weight: var(--weight-bold); color: var(--color-heading); cursor: pointer; }
.mb-book-food-group__count { margin-left: var(--space-1); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.mb-book-food-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); background: var(--color-surface); }
.mb-book-food-item__text { display: flex; flex-direction: column; gap: 2px; color: var(--color-text); }
.mb-book-food-item__text strong { color: var(--color-heading); }
.mb-book-food-item__text small { font-size: var(--text-small); color: var(--color-text-muted); }
.mb-book-food-item__price { font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-price); white-space: nowrap; }

/* Summary: light card with a green top edge; total in the price colour, one green button */
.mb-book__summary { position: sticky; top: 100px; }
.mb-book-head--place { display: grid; grid-template-columns: minmax(0, 1fr) var(--book-aside); gap: var(--space-8); align-items: stretch; margin-bottom: var(--space-7); }
.mb-book-head--place .book-tool__header { margin-bottom: 0; }
/* The intro is its own full-width sand band under the site header; the booking steps follow on white. */
.boat-tool.book-tool { padding-top: 0; }
.boat-tool .mb-book-head { margin-bottom: var(--space-7); padding-block: var(--space-7) var(--space-8); background: var(--color-surface-alt); box-shadow: 0 0 0 100vmax var(--color-surface-alt); clip-path: inset(0 -100vmax); }
.boat-tool .mb-book-head > .book-tool__header { margin-bottom: 0; }
.mb-book-trust { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.mb .mb-book-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); justify-self: start; color: var(--color-text-muted); font-size: var(--text-small); text-decoration: none; }
.mb-book-rating__stars { color: var(--color-accent-strong); font-size: var(--text-body); letter-spacing: 1px; }
.mb-book-rating strong { color: var(--color-heading); font-size: var(--text-body); }
.mb-book-rating span:last-child { text-decoration: underline; text-underline-offset: .2em; }
.mb .mb-book-rating:hover span:last-child { color: var(--color-heading); }
.mb .mb-book-usps { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; }
.mb .mb-book-usps li { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: 0; color: var(--color-text); font-size: var(--text-small); line-height: 1.5; }
/* A feature with contact links reads as one sentence over the full width */
.mb .mb-book-usps li.mb-book-usps__wide { grid-column: 1 / -1; }
.mb .mb-book-usps li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; background: var(--color-accent-strong); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4L16 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Location pages: the photo hero and the tool's intro are one section, in three zones. Left: H1, lead, Google score,
   the four reassurances as icon tiles and the button to the steps with the intro beside it. Right: the white place
   card (with the route note). Along the bottom: a white bar with the four practical facts, each with an icon.
   On phones only H1, lead and score show; the rest opens with "Lees meer", so the booking steps come right after. */
.boat-tool:has(.mb-book-head--hero) { overflow-x: clip; }
.boat-tool .mb-book-head--hero { position: relative; isolation: isolate; align-items: center; row-gap: var(--space-7); padding-block: var(--space-8) var(--space-6); background: none; box-shadow: none; }
.mb-book-head__photo, .mb-book-head--hero::before { position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; }
.mb-book-head__photo { z-index: -2; max-width: none; object-fit: cover; }
.mb-book-head--hero::before { content: ""; background: linear-gradient(90deg, rgb(0 0 0 / 0.75) 0%, rgb(0 0 0 / 0.58) 45%, rgb(0 0 0 / 0.55) 100%); }
.mb-book-head--hero .book-tool__header { gap: var(--space-4); max-width: none; }
.mb .mb-book-head--hero .mb-book-head__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-h1); font-weight: var(--heading-weight); line-height: var(--leading-heading); letter-spacing: var(--heading-tracking); text-transform: var(--heading-transform); color: var(--color-on-inverse); text-wrap: balance; text-shadow: 0 1px 12px rgb(0 0 0 / 0.25); }
.mb .mb-book-head--hero .mb-lead { max-width: 52ch; margin: 0; color: var(--color-on-inverse); }
.mb .mb-book-head--hero .mb-book-rating, .mb .mb-book-head--hero .mb-book-rating strong, .mb .mb-book-head--hero .mb-book-rating:hover span:last-child { color: var(--color-on-inverse); }
.mb-book-head--hero .mb-book-rating__stars { color: #FBBC04; }
.mb .mb-book-perks { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--space-2) var(--space-6); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.mb .mb-book-perks li { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0; color: var(--color-on-inverse); font-size: var(--text-body); line-height: 1.4; }
.mb-book-perks__icon, .mb-book-facts__icon { display: inline-flex; flex: none; }
.mb-book-perks__icon { color: var(--color-accent); }
.mb-book-perks__icon .mb-icon, .mb-book-facts__icon .mb-icon { width: 20px; height: 20px; }
/* Jump to the booking steps: phones only, where the steps start below the fold. */
.mb .mb-btn.mb-book-cta { display: none; }
.mb .mb-book-head--hero .mb-book-more, .mb .mb-book-head--hero .mb-book-more:hover { color: var(--color-on-inverse); }
.mb-book-head--hero .mb-book-place { box-shadow: var(--shadow-md); }
/* The practical lines sit straight on the photo, quieter than the location card: white text, thin light rules. */
.mb .mb-book-facts { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-6); margin: 0; padding: var(--space-5) 0 0; border-top: 1px solid rgb(255 255 255 / 0.2); list-style: none; }
.mb .mb-book-facts li { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: 0; color: var(--color-on-inverse); font-size: var(--text-small); line-height: 1.4; }
.mb-book-facts__icon { color: var(--color-accent); }
.mb .mb-book-facts a, .mb .mb-book-facts a:hover { color: var(--color-on-inverse); }
/* Wide screens: the practical lines as a third column beside the location card instead of a row below, so the hero
   stays low. */
@media (min-width: 1280px) {
  .boat-tool .mb-book-head--hero { grid-template-columns: minmax(0, 1fr) 270px 300px; column-gap: var(--space-7); padding-block: var(--space-7); }
  .mb-book-head--hero > .book-tool__header { grid-area: 1 / 1; }
  .mb .mb-book-head--hero > .mb-book-facts { grid-area: 1 / 2; }
  .mb-book-head--hero > .mb-book-place { grid-area: 1 / 3; }
  .boat-tool .mb-book-head--hero { align-items: stretch; }
  .mb-book-head--hero .book-tool__header { align-self: center; }
  .mb .mb-book-head--hero .mb-book-facts { grid-column: auto; grid-template-columns: minmax(0, 1fr); align-self: center; gap: 0; padding: 0; border-top: 0; }
  .mb .mb-book-head--hero .mb-book-facts li { padding: var(--space-3) 0; }
  .mb .mb-book-head--hero .mb-book-facts li + li { border-top: 1px solid rgb(255 255 255 / 0.2); }
}
#boat-booking-steps { scroll-margin-top: 96px; }
.mb-book-sub:has(.mb-book-closed) { margin-bottom: var(--space-6); }
.mb-book-place { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-card); box-shadow: var(--shadow-sm); }
.mb-book-place__map { position: relative; flex: 1 1 auto; min-height: 150px; border-bottom: 1px solid var(--color-border); }
/* Location card media: photo left, map right, split at --pos by a draggable handle (BoatBookingBlock script). Each
   side keeps its subject centred; the map turns into a Leaflet map (.mb-compare__live) on first touch or zoom. */
.mb-compare { overflow: hidden; background: var(--color-surface-alt); }
.mb-compare__map, .mb-compare__photo { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.mb-compare__map { left: 0; right: 0; }
.mb-compare--split .mb-compare__map { left: var(--pos); }
.mb-compare__photo { left: 0; width: var(--pos); }
.mb-compare__photo img, .mb-compare__map > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mb-compare__map > img { filter: saturate(1.6) contrast(1.06) brightness(1.04); }
.mb-compare__live { position: absolute; inset: 0; z-index: 0; background: var(--color-surface-alt); opacity: 0; transition: opacity var(--duration) var(--ease); }
.mb-compare__map.is-live .mb-compare__live { opacity: 1; }
.mb-compare__map.is-live > .mb-book-place__pin { display: none; }
.mb-compare__marker { border: 3px solid var(--color-surface-card); border-radius: var(--radius-round); background: var(--color-accent-strong); box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-accent-strong) 22%, transparent), var(--shadow-sm); }
.mb-compare__handle { position: absolute; top: 0; bottom: 0; left: clamp(20px, var(--pos), calc(100% - 20px)); z-index: 3; width: 40px; transform: translateX(-50%); cursor: ew-resize; touch-action: none; }
.mb-compare__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); background: var(--color-surface-card); box-shadow: 0 0 6px rgb(var(--shadow-rgb) / 0.35); }
.mb-compare__grip { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-round); background: var(--color-surface-card); color: var(--color-heading); box-shadow: var(--shadow-md); transform: translate(-50%, -50%); transition: transform var(--duration) var(--ease); }
.mb-compare__handle:hover .mb-compare__grip, .mb-compare.is-dragging .mb-compare__grip { transform: translate(-50%, -50%) scale(1.08); }
.mb-compare__handle:focus-visible { outline: none; }
.mb-compare__handle:focus-visible .mb-compare__grip { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 2px; }
.mb-compare.is-dragging { user-select: none; cursor: ew-resize; }
.mb-compare__zoom { position: absolute; top: 8px; right: 8px; z-index: 3; display: grid; overflow: hidden; border-radius: var(--radius-control); background: var(--color-surface-card); box-shadow: var(--shadow-sm); }
.mb-compare__zoom button { width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--color-heading); font-size: 18px; font-weight: var(--weight-bold); line-height: 1; cursor: pointer; }
.mb-compare__zoom button + button { border-top: 1px solid var(--color-border); }
.mb-compare__zoom button:hover { background: var(--color-surface-alt); }
.mb-compare__zoom button:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: -3px; }
.mb-compare .mb-book-place__credit { z-index: 3; }
.mb-book-place__map.mb-compare { min-height: 180px; }
.mb-book-place__pin { position: absolute; width: 22px; height: 22px; border: 3px solid var(--color-surface-card); border-radius: var(--radius-round); background: var(--color-accent-strong); box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-accent-strong) 22%, transparent), var(--shadow-sm); transform: translate(-50%, -50%); }
.mb .mb-book-place__credit { position: absolute; right: 0; bottom: 0; padding: 4px 8px; border-top-left-radius: 4px; background: color-mix(in srgb, var(--color-surface-card) 80%, transparent); color: var(--color-text-muted); font-size: 10px; line-height: 16px; text-decoration: none; }
.mb-book-place__body { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.mb-book-place__thumb { flex: none; width: 48px; height: 48px; border-radius: var(--radius-control); object-fit: cover; }
.mb .mb-book-place__text { display: grid; flex: 1; min-width: 0; margin: 0; color: var(--color-text-muted); font-size: var(--text-small); line-height: 1.4; }
.mb-book-place__text strong { color: var(--color-heading); font-size: var(--text-body); }
.mb .mb-book-route ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0 var(--space-4) var(--space-4); list-style: none; }
.mb .mb-book-route li { margin: 0; padding: 0; }
.mb .mb-book-route a { display: grid; justify-items: center; gap: 2px; padding: var(--space-2) var(--space-1); border-radius: var(--radius-control); background: var(--color-surface-alt); color: var(--color-heading); font-size: var(--text-caption); font-weight: var(--weight-bold); line-height: 1.3; text-align: center; text-decoration: none; transition: background-color var(--duration) var(--ease); }
.mb .mb-book-route a:hover { background: var(--color-accent-tint); }
.mb .mb-book-route a:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 2px; }
.mb-book-route svg { color: var(--color-accent-strong); }
.mb .mb-book-switch { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap-min); margin: 0; padding: 0 var(--space-4); border: 0; border-top: 1px solid var(--color-border); background: none; color: var(--color-link); font-family: var(--font-body); font-size: var(--text-small); font-weight: var(--weight-bold); cursor: pointer; transition: background-color var(--duration) var(--ease); }
.mb .mb-book-switch::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.mb .mb-book-switch:hover { background: var(--color-surface-alt); color: var(--color-link-hover); }
.mb .mb-book-switch:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: -3px; }
/* Location picker: centred dialog on desktop, bottom sheet on mobile. */
html:has(.mb-picker[open]) { overflow: hidden; scrollbar-gutter: stable; }
.mb-picker { width: min(480px, calc(100vw - 2 * var(--space-4))); max-height: min(640px, calc(100dvh - 2 * var(--space-6))); padding: 0; border: 0; border-radius: var(--radius-card); background: var(--color-surface-card); color: var(--color-text); box-shadow: var(--shadow-md); overflow: hidden; }
.mb-picker[open] { display: flex; flex-direction: column; animation: mb-picker-in var(--duration) var(--ease); }
.mb-picker::backdrop { background: rgb(0 0 0 / 0.45); }
.mb-picker__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border); }
.mb .mb-picker__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--heading-weight); line-height: var(--leading-heading); letter-spacing: var(--heading-tracking); text-transform: var(--heading-transform); color: var(--color-heading); }
.mb .mb-picker__close { display: grid; place-items: center; flex: none; width: var(--tap-min); height: var(--tap-min); padding: 0; border: 0; border-radius: var(--radius-round); background: var(--color-surface-alt); color: var(--color-heading); cursor: pointer; }
.mb .mb-picker__close:hover { background: var(--color-accent-tint); }
.mb .mb-picker__list { display: grid; gap: var(--space-1); margin: 0; padding: var(--space-2); overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.mb .mb-picker__list li { margin: 0; padding: 0; }
.mb .mb-picker__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); color: var(--color-text); text-decoration: none; transition: background-color var(--duration) var(--ease); }
.mb .mb-picker__item::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted); transform: rotate(-45deg); }
.mb .mb-picker__item:hover { background: var(--color-surface-alt); }
.mb .mb-picker__item:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: -2px; }
.mb .mb-picker__item[aria-current] { background: var(--color-accent-tint); }
.mb .mb-picker__item[aria-current]::after { display: none; }
.mb-picker__item img, .mb-picker__thumb { flex: none; width: 56px; height: 56px; border-radius: var(--radius-control); object-fit: cover; background: var(--color-surface-alt); }
.mb-picker__thumb--icon { display: grid; place-items: center; background: var(--color-accent); color: var(--color-ink); }
.mb-picker__thumb--icon .mb-icon { width: 24px; height: 24px; }
.mb .mb-picker__item--all { margin-bottom: var(--space-2); border: 1px solid var(--color-border); }
.mb-picker__text { display: grid; min-width: 0; font-size: var(--text-small); line-height: 1.4; color: var(--color-text-muted); }
.mb-picker__text strong { color: var(--color-heading); font-size: var(--text-body); }
.mb-picker__rating { font-size: var(--text-caption); }
.mb-picker__rating > span { color: #FBBC04; }
.mb .mb-picker__text em { justify-self: start; margin-top: 4px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--color-accent-strong); color: var(--color-on-inverse); font-size: var(--text-caption); font-style: normal; font-weight: var(--weight-bold); }
@keyframes mb-picker-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 767px) {
  .mb-picker { width: 100%; max-width: none; max-height: 85dvh; margin: auto 0 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
  @keyframes mb-picker-in { from { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) { .mb-picker[open] { animation: none; } }
.mb .mb-book-more { display: none; }
@media (prefers-reduced-motion: reduce) { .mb-book-place__map img { transition: none; } }
.mb-book-summary { overflow: hidden; border-top: 6px solid var(--color-accent); border-radius: var(--radius-card); background: var(--color-surface-card); color: var(--color-text); box-shadow: var(--shadow-md); }
.mb-book-summary__toggle { display: none; }
.mb-book-summary__body { padding: var(--card-pad); }
.mb .mb-book-summary h3 { margin: 0 0 var(--space-4); font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--heading-weight); line-height: var(--leading-heading); letter-spacing: var(--heading-tracking); text-transform: var(--heading-transform); color: var(--color-heading); }
.mb-book-summary__lines { margin: 0; padding: 0; list-style: none; }
.mb-book-summary__lines li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.mb-book-summary__lines li span:last-child { white-space: nowrap; font-weight: var(--weight-bold); color: var(--color-heading); }
.mb .mb-book-summary__rating { display: block; margin-top: 2px; color: var(--color-text-muted); font-size: var(--text-small); text-decoration: underline; text-underline-offset: .2em; }
.mb .mb-book-summary__rating:hover { color: var(--color-heading); }
.mb-book-summary__rating span { color: var(--color-accent-strong); }
.mb-book-summary__rating strong { color: var(--color-heading); }
.mb-book-summary__total { display: flex; justify-content: space-between; align-items: baseline; margin: var(--space-4) 0 var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-accent-tint); font-weight: var(--weight-bold); color: var(--color-heading); }
.mb-book-summary__total strong { font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--heading-weight); line-height: 1.1; color: var(--color-price); }
.mb-book-summary__meta { margin: var(--space-2) 0 0; font-size: var(--text-small); color: var(--color-text-muted); }
.mb-book-summary__missing { margin: var(--space-3) 0 0; font-size: var(--text-small); color: var(--color-text); }
.mb-book-summary__missing::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--space-2); border-radius: var(--radius-round); background: var(--color-signal); }
.mb-book-summary__missing:empty, .mb-book-summary__error:empty { display: none; }
.mb-book-summary__actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
.mb-book-summary__actions .mb-btn { width: 100%; }
.mb-book-summary__actions .mb-btn--secondary { margin-top: var(--space-3); }
.mb-book-summary__actions .mb-btn:disabled { opacity: 0.6; cursor: progress; }
.mb-book-summary__note { margin: 0; font-size: var(--text-caption); color: var(--color-text-muted); text-align: center; }
.mb-book-summary__error { margin: var(--space-4) 0 0; padding: var(--space-3); border-radius: var(--radius-control); border: 1px solid var(--color-danger); background: var(--color-surface); color: var(--color-danger); font-size: var(--text-small); font-weight: var(--weight-bold); }

.mb-book-done { max-width: 640px; padding: var(--card-pad); border-radius: var(--radius-card); background: var(--color-surface-card); box-shadow: var(--shadow-sm); }
.mb .mb-book-done h3 { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--heading-weight); text-transform: var(--heading-transform); color: var(--color-heading); }

@media (min-width: 961px) { body:has(.mb-book__summary) .book-now { display: none; } } /* the theme's call bubble would cover the sticky summary */
@media (max-width: 960px) {
  .book-tool { padding-bottom: calc(var(--section-y) + 72px); }
  .mb-book { grid-template-columns: minmax(0, 1fr); }
  .mb-book-step { padding: var(--space-5) 0; }
  .mb-book-grid { grid-template-columns: minmax(0, 1fr); }
  /* The summary becomes a bar at the bottom of the screen that opens upward. */
  .mb-book__summary { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 50; }
  .mb-book-head--place { display: block; }
  .boat-tool .mb-book-head--place > .book-tool__header { margin-bottom: var(--space-5); }
  .boat-tool .mb-book-head { padding-block: var(--space-6); }
  .boat-tool .mb-book-head--hero { padding-block: var(--space-7) var(--space-5); }
  .mb-book-head--hero::before { background: linear-gradient(180deg, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0.75) 100%); }
  .mb .mb-btn.mb-book-cta { display: flex; width: 100%; margin-top: var(--space-2); }
  .mb .mb-book-perks { grid-template-columns: minmax(0, 1fr); }
  .mb .mb-book-perks li { font-size: var(--text-small); }
  .mb .mb-book-facts { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--space-4); padding: 0; border-top: 0; }
  .mb .mb-book-facts li { padding: var(--space-3) 0; }
  .mb .mb-book-facts li + li { border-top: 1px solid rgb(255 255 255 / 0.2); }
  .mb-book-place__map, .mb-book-place__thumb { display: none; }
  .mb .mb-book-geo__note:not([data-kind]) { display: none; }
  .mb .mb-book-geo .mb-book-geo__note { flex-basis: 100%; }
  .mb .mb-book-more { display: inline-flex; align-items: center; gap: var(--space-1); justify-self: start; padding: 0; border: 0; background: none; color: var(--color-link); font-family: var(--font-body); font-size: var(--text-small); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
  .mb .mb-book-more[hidden] { display: none; }
  .mb .mb-book-more::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .mb .mb-book-more[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .mb .mb-book-more:hover { color: var(--color-link-hover); }
  .mb-book-head.is-collapsed .mb-book-extra { display: none; }
  .mb-book-head.is-collapsed .mb-book-place.mb-book-extra { display: flex; }
  .mb-book-head.is-collapsed .mb-book-place > :not(.mb-book-switch) { display: none; }
  .mb .mb-book-head.is-collapsed .mb-book-switch { justify-content: space-between; border-top: 0; }
  .mb-book-place { box-shadow: none; }
  .mb .mb-book-usps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); }
  .mb-book-summary { border-radius: var(--radius-card) var(--radius-card) 0 0; border-top-width: 4px; box-shadow: 0 -8px 20px rgb(var(--shadow-rgb) / 0.12); }
  .mb-book-summary__toggle { display: flex; width: 100%; min-height: 60px; justify-content: space-between; align-items: center; padding: 0 var(--space-4); border: 0; background: transparent; color: var(--color-heading); font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--weight-bold); cursor: pointer; }
  .mb-book-summary__toggle strong { margin-left: var(--space-2); color: var(--color-price); font-size: var(--text-h4); }
  .mb-book-summary__toggle-label { font-size: var(--text-small); color: var(--color-link); text-decoration: underline; }
  .mb-book-summary__body { display: none; max-height: 70vh; overflow-y: auto; padding: 0 var(--space-4) var(--space-4); }
  .book-tool.is-summary-open .mb-book-summary__body { display: block; }
  body:has(.mb-book__summary) .site-footer__whatsapp { bottom: 76px; } /* keep the WhatsApp button above the summary bar */
  body:has(.book-tool.is-summary-open) .site-footer__whatsapp { display: none; }
  .mb-book-food-item { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 600px) {
  /* Boat cards side by side: photo left, text right, so both boats fit on one screen */
  .mb-book-card { flex-direction: row; }
  .mb-book-card__img { flex: 0 0 40%; aspect-ratio: auto; min-height: 140px; }
  .mb-book-card__body { justify-content: center; padding: var(--space-3) var(--space-4); }
  .mb .mb-book-card__body strong { font-size: var(--text-h4); }
  .mb-book-card:has(input:checked)::after { top: var(--space-2); right: auto; left: var(--space-2); width: 32px; height: 32px; }
  .mb-book-food-item .mb-book-stepper { grid-column: 1 / -1; justify-self: start; }
}

/* Blog post date below the H1 (src/lib/prepare.ts) */
.post-meta { margin: 0 0 var(--space-5); font-size: var(--text-small); color: var(--color-text-muted); }

/* <img> tags get width/height at build time (scripts/image-sizes.mjs) to reserve space. Zero specificity:
   any theme rule that sets a height still wins, otherwise the image keeps its aspect ratio. */
:where(img[height]) { height: auto; }

/* The footer logo file fills its group black, which beats the theme's white fill on the svg. */
.site-footer__logo svg g { fill: var(--color-on-inverse); }
/* Footer column headings and hero image titles above the H1 are <p> instead of <h4>/<h2> (heading outline
   starts at the H1). These rules reproduce the theme's h4 / h2 look exactly. */
.site-footer__heading { margin: 0 0 2em; font-family: Block Berthold Regular, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; }
@media (min-width: 40em) { .site-footer__heading { font-size: 18px; margin-bottom: 1em; } }
p.image-block__title { margin-top: 0; font-weight: 400; line-height: 1; letter-spacing: .01em; }

/* ---- Boat rental booking (BoatBookingBlock.astro, scripts/boat-booking.ts); shares the .mb-book-* components ---- */
.mb-book-cards--locations { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.mb-book-card--location .mb-book-card__img { aspect-ratio: 16 / 9; }
.mb .mb-book-card--location .mb-book-card__body strong { font-size: var(--text-h4); }
.mb-book-pills--days { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mb-book-pill--day > span { padding: var(--space-3) var(--space-2); }
.mb-book-pill--day strong { font-size: var(--text-body); text-transform: capitalize; }
.mb-book-pill--day small { color: var(--color-text-muted); font-weight: var(--weight-regular); }
.mb-book-field--date { margin-top: var(--space-4); }
.mb-book-time { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1.1; }
.mb-book-time small { font-size: var(--text-caption); font-weight: var(--weight-regular); }
.mb-book-time.is-scarce small { color: var(--color-danger); font-weight: var(--weight-bold); }
.mb-book-time.is-active small { color: var(--color-on-accent); }
.mb-book-time:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.mb-book-time:disabled:hover { border-color: transparent; }
.mb-book-back { margin-bottom: var(--space-2); }
.mb-book-check a { color: var(--color-link); }
.mb-book-summary__actions a.mb-btn { width: 100%; text-decoration: none; }
@media (max-width: 600px) {
  /* Seven day buttons scroll sideways on phones instead of squeezing. */
  .mb-book-pills--days { display: flex; overflow-x: auto; gap: var(--space-2); padding-bottom: var(--space-1); scroll-snap-type: x mandatory; }
  .mb-book-pills--days .mb-book-pill { flex: 0 0 76px; scroll-snap-align: start; }
  /* Locations as a compact list: small photo left, name and address right. */
  .mb-book-cards--locations { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .mb-book-card--location .mb-book-card__img { flex: 0 0 96px; min-width: 0; min-height: 0; aspect-ratio: 1; }
  .mb-book-card--location .mb-book-card__body { min-width: 0; padding: var(--space-2) var(--space-3); }
  .mb-book-card--location .mb-book-card__meta { font-size: var(--text-caption); }
}

/* Media-text videos. The 9-16 videos are YouTube Shorts (portrait); the theme gives the player a 9:16 box inside the
   5:7.5 frame, so the video fills it. The YouTube still is the poster behind the player while it loads. */
.media-text-block__video { background: var(--color-surface-alt) center / cover no-repeat; }
.media-text-block__video.media-text-block__video--16-9 { aspect-ratio: 16 / 9; }
.media-text-block__video.media-text-block__video--16-9 .media-text-block__video-inner { height: 100%; }
.media-text-block__video iframe { display: block; }

/* ---- Tour cards (ToursBlock.astro): target design. The theme's .tours-block__inner keeps its overlap with the
   video/photo above; the cards themselves are .mb-tour. ---- */
.tours-block__inner.mb-tours { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-5); align-items: stretch; max-width: 1040px; }
.mb-tour { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgb(var(--shadow-rgb, 26 25 25) / .06); border-radius: calc(var(--radius-card) * 1.25); background: var(--color-surface-card); box-shadow: 0 1px 2px rgb(var(--shadow-rgb, 26 25 25) / .04), 0 8px 24px rgb(var(--shadow-rgb, 26 25 25) / .06); transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
.mb-tour__media { position: relative; }
.mb-tour__gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 3 / 2; background: var(--color-surface-alt); }
.mb-tour__gallery::-webkit-scrollbar { display: none; }
.mb-tour__gallery:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: -4px; }
.mb-tour__gallery img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.mb-tour__dots { position: absolute; left: 0; right: 0; bottom: var(--space-3); display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.mb-tour__dots span { width: 8px; height: 8px; border-radius: var(--radius-round); background: rgb(255 255 255 / .6); box-shadow: 0 0 0 1px rgb(0 0 0 / .15); transition: background-color var(--duration) var(--ease), width var(--duration) var(--ease); }
.mb-tour__dots span.is-active { width: 20px; border-radius: var(--radius-pill); background: var(--color-surface); }
.mb-tour__rating { position: absolute; top: var(--space-3); left: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--shadow-sm); font-size: var(--text-small); color: var(--color-text); }
.mb-tour__rating svg { width: 16px; height: 16px; }
.mb-tour__rating strong { color: var(--color-heading); }
.mb-tour__body { display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 auto; padding: var(--card-pad); }
.mb .mb-tour__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--heading-weight); line-height: var(--leading-heading); letter-spacing: var(--heading-tracking); text-transform: var(--heading-transform); color: var(--color-heading); }
.mb-tour__text, .mb-tour__text p { margin: 0; color: var(--color-text); }
.mb-tour__features { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.mb-tour__features li { position: relative; padding-left: 1.75em; color: var(--color-text); }
.mb-tour__features li::first-letter { text-transform: uppercase; }
.mb-tour__features li::before { content: ""; position: absolute; left: .35em; top: .3em; width: .4em; height: .75em; border: solid var(--color-accent-strong); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mb-tour__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: auto; padding-top: var(--space-2); }
.mb-tour__actions .mb-btn--primary { flex: 1 1 auto; }

/* ---- Cards (CardsBlock.astro): target design ---- */
.mb-cards { padding: var(--section-y-tight) var(--gutter); }
.mb-cards__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-5); max-width: var(--container-max); margin: 0 auto; align-items: stretch; }
.mb-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-card); background: var(--color-surface-card); box-shadow: var(--shadow-sm); }
.mb-card__img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.mb-card__body { display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 auto; padding: var(--card-pad); }
.mb .mb-card__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--heading-weight); line-height: var(--leading-heading); letter-spacing: var(--heading-tracking); text-transform: var(--heading-transform); color: var(--color-heading); }
.mb-card__text, .mb-card__text p { margin: 0; color: var(--color-text); }
.mb-card__text p + p { margin-top: var(--space-3); }
.mb-cards__buttons { display: flex; justify-content: center; margin-top: var(--space-6); }

/* ---- Shared card grid parts (cards, routes, locations, packages, posts, columns) ---- */
.mb-cards__intro { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--container-max); margin: 0 auto var(--space-6); }
.mb-cards__intro > :not(.mb-h2) { max-width: var(--prose-max); }
.mb-cards__intro p { margin: 0; }
.mb-cards__grid--cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); max-width: 1040px; }
.mb-card__meta { margin: 0; font-size: var(--text-small); color: var(--color-text-muted); }
.mb-card__text h2, .mb-card__text h3 { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--heading-weight); line-height: var(--leading-heading); text-transform: var(--heading-transform); color: var(--color-heading); }
.mb-card__text--clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mb-card__text--clamp :is(h2, h3) { display: none; }
.mb-card__more { margin-top: auto; padding-top: var(--space-1); font-weight: var(--weight-bold); color: var(--color-link); text-decoration: underline; text-underline-offset: .2em; }
/* Link card: the title link covers the whole card; other links in the card stay clickable above it. */
.mb-card--link { position: relative; transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
.mb-card--link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.mb-card--link .mb-card__title a { color: inherit; text-decoration: none; }
.mb-card--link .mb-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mb-card--link .mb-card__title a:focus-visible { outline: none; }
.mb-card--link:has(.mb-card__title a:focus-visible) { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
.mb-card--link .mb-card__text a { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .mb-card--link:hover { transform: none; } }
/* Card slider (scripts/slider.ts): one row, 3 cards on desktop, 2 on tablets, one with the next peeking on phones.
   Never a lonely card on a second row. Fewer cards than fit: centred, no controls. */
.mb-slider { --per-view: 3; display: flex; gap: var(--space-5); max-width: var(--container-max); margin: 0 auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: var(--space-2) var(--space-1) var(--space-6); scrollbar-width: none; overscroll-behavior-x: contain; }
.mb-slider::-webkit-scrollbar { display: none; }
.mb-slider > * { flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--space-5)) / var(--per-view)); scroll-snap-align: start; }
.mb-slider.is-static { justify-content: center; }
.mb-slider__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-2); }
.mb-slider__controls[hidden] { display: none; }
.mb-slider__btn { display: inline-grid; place-items: center; width: var(--control-height); height: var(--control-height); border: 1px solid var(--color-border); border-radius: var(--radius-round); background: var(--color-surface); box-shadow: var(--shadow-sm); color: var(--color-heading); font-size: var(--text-h4); cursor: pointer; transition: background-color var(--duration) var(--ease), opacity var(--duration) var(--ease); }
.mb-slider__btn:hover:not(:disabled) { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.mb-slider__btn:disabled { opacity: .35; cursor: default; }
.mb-slider__btn:focus-visible, .mb-slider__dots button:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
/* The dot is drawn inside a 24px button, so the tap target meets WCAG 2.5.8 while the dot stays small. */
.mb-slider__dots { display: flex; }
.mb-slider__dots button { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 3px; border: 0; border-radius: var(--radius-pill); background: none; cursor: pointer; }
.mb-slider__dots button::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--color-border); transition: width var(--duration) var(--ease), background-color var(--duration) var(--ease); }
.mb-slider__dots button.is-active::before { width: 28px; background: var(--color-accent-strong); }
@media (max-width: 1024px) { .mb-slider { --per-view: 2; } }
@media (max-width: 767px) {
  .mb-slider { gap: var(--space-4); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .mb-slider > * { flex-basis: 82%; }
  .mb-slider__btn { display: none; }
}

/* ---- Package extras on the tour card ---- */
.mb-tour__label { position: absolute; top: var(--space-3); left: var(--space-3); margin: 0; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--shadow-sm); font-size: var(--text-caption); font-weight: var(--weight-bold); color: var(--color-heading); }
.mb-tour__price { margin: 0; font-weight: var(--weight-bold); color: var(--color-price); }
.mb-tour__price p { margin: 0; }
.mb-tour__text ul { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.mb-tour__text li { display: flex; gap: var(--space-2); align-items: baseline; }
.mb-tour__text li :is(i, .mb-icon) { flex: none; width: 1.2em; color: var(--color-accent-strong); text-align: center; }
.mb-tour__text li::first-letter { text-transform: uppercase; }
/* Card finish (same language as the event tiles): hover lift with photo zoom, glass label, roomy body, features as
   a quiet icon list under a hairline, price on its own row above the actions. */
.mb-tour__media { overflow: hidden; }
/* The zoom scales the whole gallery, not the photos inside it: scaled photos would widen the scroll area and show
   the edge of the next photo. */
.mb-tour__gallery { transition: transform .5s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mb-tour:hover { box-shadow: 0 2px 4px rgb(var(--shadow-rgb, 26 25 25) / .05), 0 16px 36px rgb(var(--shadow-rgb, 26 25 25) / .11); transform: translateY(-3px); }
  .mb-tour:hover .mb-tour__gallery { transform: scale(1.04); }
}
.mb-tour__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-round); background: rgb(255 255 255 / .92); box-shadow: var(--shadow-sm); color: var(--color-heading); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; translate: 0 -50%; transition: opacity var(--duration) var(--ease), background-color var(--duration) var(--ease); }
.mb-tour__nav--prev { left: var(--space-3); }
.mb-tour__nav--next { right: var(--space-3); }
.mb-tour__nav:hover { background: var(--color-surface); }
.mb-tour__nav:focus-visible { opacity: 1; outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 2px; }
.mb-tour:hover .mb-tour__nav, .mb-tour__media:focus-within .mb-tour__nav { opacity: 1; }
.mb-tour__nav:disabled { opacity: 0 !important; pointer-events: none; }
@media (hover: none) { .mb-tour__nav { display: none; } }
.mb-tour__label { padding: 4px 10px; background: rgb(255 255 255 / .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: none; }
.mb-tour__body { gap: var(--space-3); padding: var(--space-6); }
.mb .mb-tour__title { font-size: var(--text-h3); }
.mb-tour__text, .mb-tour__text p { color: var(--color-text-muted); }
.mb-tour__text { display: flex; flex-direction: column; flex: 1 1 auto; }
.mb .mb-tour__text > ul { margin-top: auto; }
.mb-tour__text > :has(+ ul) { padding-bottom: var(--space-5); }
.mb-tour__text ul, .mb-tour__features { display: grid; gap: 10px; margin: var(--space-5) 0 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--color-border); list-style: none; }
.mb-tour__features { margin: 0; }
.mb .mb-tour__text li, .mb .mb-tour__features li { display: flex; align-items: baseline; gap: var(--space-3); margin: 0; padding: 0; color: var(--color-text); font-size: var(--text-small); font-weight: var(--weight-regular); line-height: 1.4; }
.mb .mb-tour__text li :is(span, i) { font-size: inherit; line-height: inherit; }
.mb .mb-tour__text li span { display: inline-block; }
.mb .mb-tour__text li span::first-letter { text-transform: uppercase; }
.mb .mb-tour__text li i { flex: none; width: 16px; font-size: 13px; color: var(--color-accent-strong); text-align: center; }
.mb .mb-tour__features li { position: static; }
.mb .mb-tour__features li::before { flex: none; position: static; width: .35em; height: .7em; margin: 0 5px 0 4px; transform: translateY(-1px) rotate(45deg); }
.mb-tour__price { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-body); }
.mb-tour__price + .mb-tour__actions { margin-top: 0; padding-top: 0; }
.mb-tour__actions { padding-top: var(--space-4); }
.packages-block .mb-cards__grid { gap: var(--space-6); }
.packages-block .mb-cards__intro { margin-bottom: var(--space-7); }
@media (max-width: 1023px) { .mb-tour__body { padding: var(--space-5); } }
@media (max-width: 767px) { .mb .mb-tour__title { font-size: var(--text-h4); } }

/* ---- USPs ---- */
.mb-usps { padding: var(--section-y-tight) var(--gutter); background: var(--color-surface-alt); }
.mb-usps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-6); max-width: var(--container-max); margin: 0 auto; padding: 0; list-style: none; }
.mb-usp { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.mb-usp__icon { display: inline-grid; place-items: center; width: 88px; height: 88px; margin-bottom: var(--space-2); border-radius: var(--radius-round); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.mb-usp__icon svg { width: 52px; height: 52px; }
.mb-usp__title { margin: 0; font-size: var(--text-h4); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--color-heading); }
.mb-usp__text { max-width: 32ch; margin: 0; color: var(--color-text); }

/* ---- Accordion (FAQ list look) ---- */
.mb-accordion__inner { display: flex; flex-direction: column; gap: var(--space-6); max-width: 880px; }

/* ---- Gallery ---- */
.mb-gallery { padding: var(--section-y-tight) 0; }
.mb-gallery__track { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 0 var(--gutter) var(--space-3); scrollbar-width: thin; }
.mb-gallery__track:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: -2px; }
.mb-gallery__img { flex: 0 0 auto; background: var(--color-surface-alt); width: min(80vw, 420px); max-width: none; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--radius-card); scroll-snap-align: start; }

/* ============================================================
   Content (text, media-text, hero images) in the target design. Scoped to .flexible-content so the header and
   footer keep the theme. Theme button classes from the content map to the design-system pill buttons:
   primary = green with dark text, secondary = ink, outline = ink outline, outline-invert = white outline on photos,
   seasonal ones (call, kingsday, pride, alf) keep their theme colour but get the same shape.
   ============================================================ */
.flexible-content .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); margin: 0 var(--space-2) var(--space-2) 0; padding: var(--space-2) var(--space-5); border: 2px solid transparent; outline: 0; border-radius: var(--radius-button); font-family: var(--font-body); font-size: var(--text-button); font-weight: var(--weight-bold); line-height: var(--leading-tight); text-align: center; text-decoration: none; box-shadow: none; transform: none; transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.flexible-content .button:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
.flexible-content .button--primary { background: var(--color-accent); color: var(--color-on-accent); }
.flexible-content .button--primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.flexible-content .button--secondary { background: var(--color-secondary); color: var(--color-on-secondary); }
.flexible-content .button--secondary:hover { background: var(--color-secondary-hover); color: var(--color-on-secondary); }
.flexible-content .button--outline { background: transparent; border-color: var(--color-ink); color: var(--color-ink); }
.flexible-content .button--outline:hover { background: var(--color-ink); color: var(--color-on-inverse); }
.flexible-content .button--outline-invert { background: transparent; border-color: var(--color-on-inverse); color: var(--color-on-inverse); }
.flexible-content .button--outline-invert:hover { background: rgb(0 0 0 / .28); }
.flexible-content .button--tertiary { min-height: var(--tap-min); padding: 0 var(--space-1); border: 0; background: transparent; color: var(--color-link); text-decoration: underline; text-underline-offset: .2em; }

/* Headings in running text: h2/h3 in Block Berthold, uppercase (design rule 4); h4 stays Schulbuch Bold. */
.flexible-content :is(.text-block, .media-text-block__body) :is(h2, h3):not(.media-text-block__title) { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-weight: var(--heading-weight); line-height: var(--leading-heading); letter-spacing: var(--heading-tracking); text-transform: var(--heading-transform); color: var(--color-heading); }
.flexible-content :is(.text-block, .media-text-block__body) h2:not(.media-text-block__title) { font-size: var(--text-h2); }
.flexible-content :is(.text-block, .media-text-block__body) h3 { font-size: var(--text-h3); }
.flexible-content :is(.text-block, .media-text-block__body) h4 { margin: 0 0 var(--space-2); font-family: var(--font-body); font-size: var(--text-h4); font-weight: var(--weight-bold); text-transform: none; color: var(--color-heading); }
.flexible-content :is(.text-block, .media-text-block__body) :is(p, ul, ol, table) + :is(h2, h3, h4) { margin-top: var(--space-6); }
.flexible-content :is(.text-block__content, .media-text-block__body) :is(p, li, td, th) { font-size: var(--text-body); line-height: var(--leading-body); }
/* "Lees meer" (scripts/read-more.ts): long text on phones is cut visually, never removed from the HTML. */
.mb-more__toggle { display: none; }
@media (max-width: 767px) {
  .mb-more.is-collapsed { max-height: 280px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
  .mb-more__toggle:not([hidden]) { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min); margin: 0 0 var(--space-3); padding: 0; border: 0; background: none; color: var(--color-link); font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
  .mb-more__toggle::after { content: ""; width: .45em; height: .45em; margin: -.2em 0 0 .25em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--duration) var(--ease); }
  .mb-more__toggle[aria-expanded="true"]::after { margin-top: .2em; transform: rotate(-135deg); }
  .mb-more__toggle:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm, 4px); }
}

/* Tables (prices and times): rounded, sand header with dark text, quiet row lines. */
.flexible-content .text-block table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.flexible-content .text-block :is(th, thead td) { padding: var(--space-3) var(--space-4); background: var(--color-surface-alt); color: var(--color-heading); font-weight: var(--weight-bold); text-align: left; border: 0; }
.flexible-content .text-block tbody th { background: none; }
.flexible-content .text-block td { padding: var(--space-3) var(--space-4); border: 0; border-top: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }

/* One green action per group (design rule 2): a second primary button in the same group shows as outline. */
.flexible-content .button--primary ~ .button--primary { background: transparent; border-color: var(--color-ink); color: var(--color-ink); }
.flexible-content .button--primary ~ .button--primary:hover { background: var(--color-ink); color: var(--color-on-inverse); }

/* ============================================================
   Site header and menu (components/SiteHeader.astro, menu from lib/menu.ts). Fixed at the top; the theme's
   .wrapper offset follows --site-header-height. Mega menu on desktop (> 1100px), full-screen menu below.
   ============================================================ */
:root { --site-header-height: 108px; --announcement-height: 0px; }
@media (max-width: 1279px) { :root { --site-header-height: 96px; } }
html.mb-no-scroll { overflow: hidden; }
.mb-header { position: fixed; inset: 0 0 auto; z-index: 1000; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent); background: var(--color-surface); transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
.mb-header.is-scrolled { box-shadow: var(--shadow-sm); }
/* Tucked while scrolling down (SiteHeader script), unless a keyboard user is inside it. */
.mb-header.is-tucked:not(:has(:focus-visible)) { transform: translateY(-100%); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .mb-header { transition: none; } }
.mb-header__trust { overflow: hidden; background: var(--color-surface-alt); font-size: var(--text-caption); color: var(--color-text); }
/* Fixed height: trust bar 35px + bar 72px + border 1px = --site-header-height (108px). */
.mb-header__trust ul { display: flex; align-items: center; justify-content: center; gap: var(--space-6); box-sizing: border-box; height: 35px; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); list-style: none; }
.mb-header__trust li { display: flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.mb-header__trust li.mb-header__trust-mobile { display: none; }
@media (max-width: 1279px) { .mb-header__trust li.mb-header__trust-mobile { display: flex; } }
/* The hero on the home page shows the ratings already. */
body:has(.mb-ratings) .mb-header__trust li.mb-header__trust-review { display: none; }
/* The desktop bar only has room for the fleet item when the ratings are not in it. */
@media (min-width: 1280px) { body:not(:has(.mb-ratings)) .mb-header__trust li.mb-header__trust-fleet { display: none; } }
@media (min-width: 1280px) { .mb-header__trust-count { display: none; } }
@media (prefers-reduced-motion: reduce) { .mb-header__trust li { transition: none; } }
/* Each trust item starts with a small icon in an action-green circle (dark icon on green, as the green buttons). */
.mb-header__trust li { gap: 6px; }
.mb-header__trust-icon { display: inline-grid; flex: none; place-items: center; width: 18px; height: 18px; border-radius: var(--radius-round); background: var(--color-accent); color: var(--color-on-accent); }
.mb-header__trust-icon svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mb-header__trust-icon .is-fill { fill: currentColor; stroke-width: 1.5; }
.mb-header__bar { display: flex; align-items: center; gap: var(--space-5); max-width: 1320px; height: 72px; margin: 0 auto; padding: 0 var(--gutter); }
.mb-header__logo { display: block; flex: none; width: 168px; }
/* The logo's lettering touches the edges of its viewBox, so clipping would shave off a pixel row. */
.mb-header__logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.mb-header__nav { flex: 1 1 auto; height: 100%; }
.mb-header__menu { display: flex; align-items: stretch; gap: var(--space-1); height: 100%; margin: 0; padding: 0; list-style: none; }
.mb-header__item { display: flex; }
.mb-header__top { display: inline-flex; align-items: center; gap: var(--space-2); height: 100%; padding: 0 var(--space-3); white-space: nowrap; border: 0; background: none; color: var(--color-heading); font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--weight-bold); cursor: pointer; position: relative; }
.mb-header__top::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 14px; height: 3px; border-radius: var(--radius-pill); background: var(--color-accent); transform: scaleX(0); transition: transform var(--duration) var(--ease); }
.mb-header__item.is-open .mb-header__top::after, .mb-header__top:hover::after { transform: scaleX(1); }
.mb-header__top:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: -4px; border-radius: var(--radius-sm); }
.mb-header__chevron { width: 8px; height: 8px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--duration) var(--ease); }
.is-open > .mb-header__top .mb-header__chevron { transform: rotate(-135deg); margin-top: 4px; }
.mb-header__actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.mb-header__phone { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-heading); font-weight: var(--weight-bold); text-decoration: none; white-space: nowrap; }
.mb-header__phone svg, .mb-header__icon svg { width: 22px; height: 22px; }
.mb-header__icon { display: inline-grid; place-items: center; width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-round); color: var(--color-heading); }
.mb-header__icon:hover, .mb-header__phone:hover { color: var(--color-accent-strong); }
.mb-header__lang { position: relative; display: flex; align-items: center; height: 72px; }
.mb-header__lang-button { padding: 0 var(--space-2); font-size: var(--text-small); }
.mb-header__lang-button svg { width: 20px; height: 14px; border-radius: 2px; }
.mb-header__lang-button::after { display: none; }
.mb-header__cta { white-space: nowrap; }
.mb-header__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: var(--tap-min); height: var(--tap-min); padding: 0 10px; border: 0; background: none; cursor: pointer; }
.mb-header__burger span { display: block; height: 2px; border-radius: 2px; background: var(--color-heading); transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease); }
.mb-header.is-drawer-open .mb-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mb-header.is-drawer-open .mb-header__burger span:nth-child(2) { opacity: 0; }
.mb-header.is-drawer-open .mb-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mb-header__scrim { position: fixed; inset: var(--site-header-height) 0 0; z-index: -1; background: rgb(var(--shadow-rgb) / .35); }

/* Mega panels */
.mb-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-surface); box-shadow: var(--shadow-md); border-top: 1px solid var(--color-border); }
.mb-mega[hidden] { display: none; }
.mb-mega__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7); max-width: 1320px; margin: 0 auto; padding: var(--space-6) var(--gutter) var(--space-7); }
.mb-mega--list .mb-mega__inner { grid-template-columns: minmax(0, 340px); }
.mb-mega--lang { left: auto; right: 0; top: 100%; min-width: 200px; padding: var(--space-3); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.mb-header__item { position: static; }
.mb-mega--list { left: auto; right: auto; width: auto; }
.mb-header__item:has(.mb-mega--list) { position: relative; }
.mb-mega--list { left: 0; min-width: 300px; border-radius: 0 0 var(--radius-card) var(--radius-card); }
.mb-mega--list .mb-mega__inner { padding: var(--space-5); }
.mb-mega__heading { margin: 0 0 var(--space-3); font-size: var(--text-small); font-weight: var(--weight-bold); letter-spacing: 0; text-transform: none; color: var(--color-accent-strong); }
.mb-mega__intents { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.mb-intent { display: flex; align-items: center; gap: var(--space-3); height: 100%; padding: var(--space-3); border-radius: var(--radius-card); background: var(--color-surface-alt); color: var(--color-text); text-decoration: none; transition: background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.mb-intent:hover { background: var(--color-surface); box-shadow: var(--shadow-md); }
.mb-intent__icon { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--radius-round); background: var(--color-surface); }
.mb-intent__icon svg { width: 30px; height: 30px; }
.mb-intent strong { display: block; color: var(--color-heading); }
.mb-intent small { display: block; font-size: var(--text-small); color: var(--color-text-muted); line-height: var(--leading-tight); }
.mb-mega__links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mb-mega__links a { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; }
.mb-mega__links a:hover, .mb-mega__links a[aria-current] { background: var(--color-surface-alt); color: var(--color-heading); }
.mb-mega__links a svg { width: 20px; height: 14px; border-radius: 2px; }
.mb-mega__all { display: inline-block; margin-top: var(--space-3); padding-left: var(--space-2); font-weight: var(--weight-bold); color: var(--color-link); }
.mb-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-badge); background: var(--color-signal); color: var(--color-on-signal); font-size: var(--text-caption); font-weight: var(--weight-bold); line-height: 1; }
.mb-mega__promo { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-sm); color: var(--color-text); text-decoration: none; transition: box-shadow var(--duration) var(--ease); }
.mb-mega__promo:hover { box-shadow: var(--shadow-md); }
.mb-mega__promo img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.mb-mega__promo-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.mb .mb-mega__promo strong { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--heading-weight); line-height: var(--leading-heading); text-transform: var(--heading-transform); color: var(--color-heading); }
.mb-mega__rating { font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-heading); }
.mb-mega__rating span { color: var(--color-accent-strong); }
.mb-mega__promo .mb-btn { align-self: flex-start; margin-top: var(--space-2); }

/* Full-screen menu (phones and tablets) */
.mb-drawer { position: fixed; inset: var(--site-header-height) 0 0; display: flex; flex-direction: column; background: var(--color-surface); }
.mb-drawer[hidden] { display: none; }
.mb-drawer__scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--space-2) var(--gutter) var(--space-6); }
.mb-drawer__section { border-bottom: 1px solid var(--color-border); }
.mb-drawer__section summary { display: flex; align-items: center; justify-content: space-between; min-height: 60px; font-family: var(--font-heading); font-size: var(--text-h3); text-transform: var(--heading-transform); color: var(--color-heading); cursor: pointer; list-style: none; }
.mb-drawer__section summary::-webkit-details-marker { display: none; }
.mb-drawer__section[open] .mb-faq__icon { background: var(--color-accent); }
.mb-drawer__section[open] .mb-faq__icon::after { transform: rotate(0deg); }
.mb-drawer__intents { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.mb-drawer__intents .mb-intent { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.mb-drawer__intents .mb-intent__icon { width: 40px; height: 40px; }
.mb-drawer__intents .mb-intent__icon svg { width: 26px; height: 26px; }
.mb-drawer__links { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.mb-drawer__links a { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); color: var(--color-text); text-decoration: none; }
.mb-drawer__all { font-weight: var(--weight-bold); color: var(--color-link) !important; }
.mb-drawer__langs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.mb-drawer__langs a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--color-surface-alt); color: var(--color-heading); text-decoration: none; }
.mb-drawer__langs a[aria-current] { box-shadow: inset 0 0 0 2px var(--color-accent-strong); }
.mb-drawer__langs svg { width: 20px; height: 14px; border-radius: 2px; }
.mb-drawer__actions { display: grid; gap: var(--space-2); padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); box-shadow: 0 -8px 20px rgb(var(--shadow-rgb) / .08); }
.mb-drawer__contact { display: flex; justify-content: center; gap: var(--space-6); }
.mb-drawer__contact a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); font-weight: var(--weight-bold); color: var(--color-heading); text-decoration: none; }
.mb-drawer__contact svg { width: 20px; height: 20px; }

@media (max-width: 1280px) { .mb-header__phone span { display: none; } .mb-header__top { padding: 0 var(--space-2); } }
@media (max-width: 1279px) {
  .mb-header__nav, .mb-header__whatsapp, .mb-header__lang { display: none; }
  .mb-header__bar { height: 64px; gap: var(--space-3); }
  .mb-header__logo { width: 140px; }
  .mb-header__burger { display: flex; }
  /* One trust item at a time (rotated by the header script), fading in from below. */
  /* Fixed height: trust bar 31px + bar 64px + border 1px = --site-header-height (96px), so no strip shows under the header. */
  .mb-header__trust ul { display: grid; justify-content: center; align-content: center; box-sizing: border-box; height: 31px; padding-block: 0; }
  .mb-header__trust li { grid-area: 1 / 1; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(3px); transition: opacity var(--duration-slow, .35s) var(--ease), transform var(--duration-slow, .35s) var(--ease), visibility 0s linear var(--duration-slow, .35s); }
  .mb-header__trust li.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .mb-header__phone { width: var(--tap-min); height: var(--tap-min); justify-content: center; }
}
@media (max-width: 380px) { .mb-header__cta { padding-inline: var(--space-4); } .mb-header__logo { width: 120px; } }
html.mb-no-scroll .site-footer__whatsapp { display: none; } /* the full-screen menu has its own WhatsApp link */

/* Grids never end with a lonely card. Fixed-count grids (tours, cards, columns, packages up to the column count):
   one column per card from tablet width up, one card per row on phones. */
.mb-grid-fixed, .tours-block__inner.mb-grid-fixed { grid-template-columns: repeat(var(--count, 3), minmax(0, 1fr)); }
@media (max-width: 767px) { .mb-grid-fixed, .tours-block__inner.mb-grid-fixed { grid-template-columns: minmax(0, 1fr); } }
/* Blog overview: 3 columns (2 on tablets); the newest post spans the columns that would otherwise stay empty. */
.mb-posts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mb-posts__grid[data-rest3="1"] .mb-posts__first { grid-column: 1 / -1; }
.mb-posts__grid[data-rest3="2"] .mb-posts__first { grid-column: span 2; }
@media (max-width: 1024px) {
  .mb-posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb-posts__grid .mb-posts__first { grid-column: auto; }
  .mb-posts__grid[data-rest2="1"] .mb-posts__first { grid-column: 1 / -1; }
}
@media (max-width: 767px) { .mb-posts__grid { grid-template-columns: minmax(0, 1fr); } .mb-posts__grid .mb-posts__first { grid-column: auto; } }
.mb-posts__grid[data-rest3="1"] .mb-posts__first .mb-card__img, .mb-posts__grid[data-rest3="2"] .mb-posts__first .mb-card__img { aspect-ratio: 21 / 9; }
.tours-block__inner.mb-grid-fixed[style*="--count: 1;"], .tours-block__inner.mb-grid-fixed[style$="--count: 1"] { max-width: 520px; }
.mb-usps__list { grid-template-columns: repeat(var(--count, 3), minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 639px) { .mb-usps__list { grid-template-columns: minmax(0, 1fr); } }
/* Content tables: ignore fixed cell widths from the old CMS (width="224"), headings inside cells look like the
   table header, and a table that is still too wide scrolls on its own instead of widening the page. */
.flexible-content .text-block :is(td, th)[width] { width: auto; }
.flexible-content .text-block :is(td, th) :is(h2, h3, h4) { margin: 0; font-family: var(--font-body); font-size: inherit; font-weight: var(--weight-bold); letter-spacing: 0; text-transform: none; color: inherit; }
.flexible-content .text-block__content { min-width: 0; }
@media (max-width: 767px) {
  .flexible-content .text-block :is(td, th) { padding: var(--space-2) var(--space-3); }
}

/* ============================================================
   One content width for everything: 1330px (--container-max), with the gutter on smaller screens.
   Text and media-text (theme), card intros, grids, sliders, USPs, the mb-container sections, booking tools,
   header and footer all line up on the same left and right edge.
   ============================================================ */
:root { --content-width: min(var(--container-max), 100vw - 2 * var(--gutter)); }
.flexible-content .text-block__inner { width: var(--content-width); max-width: none; margin-inline: auto; }
.flexible-content .text-block__content { max-width: none; }
.flexible-content .text-block__content :is(p, ul:not(.check), ol):not(td *, th *) { max-width: 80ch; }
.flexible-content .media-text-block__inner { width: var(--content-width); max-width: none; margin-inline: auto; padding-inline: 0; }
.mb-cards, .mb-usps { padding-inline: 0; }
.mb-cards__intro, .mb-cards__grid, .mb-usps__list, .mb-slider { width: var(--content-width); max-width: none; margin-inline: auto; }
.mb-slider { padding-inline: 0; scroll-padding-inline: 0; }
.mb-container { width: var(--content-width); max-width: none; padding-inline: 0; }
.book-tool { padding-inline: 0; }
.book-tool__inner { width: var(--content-width); max-width: none; }
.mb-header__bar, .mb-header__trust ul { width: var(--content-width); max-width: none; padding-inline: 0; }
.mb-mega__inner { width: var(--content-width); max-width: none; padding-inline: 0; }
.site-footer__inner { width: var(--content-width); max-width: none; margin-inline: auto; }
@media (max-width: 767px) {
  /* Phones: sliders run to the screen edge, the first card lines up with the text. */
  .mb-slider { width: 100%; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); margin-inline: 0; }
}
/* The theme gives some sections their own side margin (25px); the content width does the edges now. */
.flexible-content > section, .flexible-content > div > section { margin-inline: 0; }

/* Highlighted event in the menu (lib/menu.ts: always the next event). data-theme on the item picks the seasonal
   accent from the tokens (lightfestival, kingsday, pride), so the colours follow the design system. */
.mb-header__item--event { align-items: center; margin-right: var(--space-2); }
.mb .mb-header__event { height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); }
.mb .mb-header__event:hover, .mb-header__item--event.is-open .mb-header__event { background: var(--color-accent-hover); }
.mb-header__event::after { display: none; }
.mb-header__event-dot { width: 8px; height: 8px; border-radius: var(--radius-round); background: currentColor; animation: mb-event-pulse 2s ease-in-out infinite; }
@keyframes mb-event-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mb-header__event-dot { animation: none; } }
.mb-drawer__event { margin: var(--space-3) 0; padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-on-accent); }
.mb-drawer__event-title { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--text-h3); text-transform: var(--heading-transform); color: inherit; text-decoration: none; }
.mb-drawer__event ul { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.mb-drawer__event li a { display: flex; align-items: center; min-height: var(--tap-min); color: inherit; font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: .2em; }

/* Header fits the content width: phone as an icon (the number is in the trust bar), tighter menu buttons. */
.mb-header__phone span { display: none; }
.mb-header__phone { width: var(--tap-min); height: var(--tap-min); justify-content: center; }
.mb-header__top { padding: 0 var(--space-2); }
.mb-header__bar { gap: var(--space-4); }
.mb-header__actions { gap: var(--space-1); }
.mb-header__cta { margin-left: var(--space-2); }
.mb-header__trust-phone a { color: inherit; text-decoration: none; }
.mb-mega__heading--spaced { margin-top: var(--space-5); }
/* Desktop header fits 1200px in every language: no header WhatsApp (the floating button is always there), flag-only
   language switch, slightly smaller logo and 15px menu text; full menu from 1280px, the phone menu below that. */
.mb-header__whatsapp { display: none; }
.mb-header__logo { width: 150px; }
@media (min-width: 1280px) { .mb-header__nav { margin-left: var(--space-5); } }
.mb .mb-header__top { font-size: 15px; }
.mb .mb-header__event { font-size: 15px; }
@media (max-width: 479px) {
  /* Phone bar: logo, call, book, menu must fit 343px in every language. */
  .mb-header__bar { gap: var(--space-2); }
  .mb-header__logo { width: 118px; }
  .mb .mb-header__cta { min-height: 40px; margin-left: 0; padding: 0 var(--space-3); font-size: 15px; }
  .mb-header__actions { gap: 0; }
}
.mb-mega.mb-mega--list { right: auto; width: max-content; max-width: 420px; }

/* ============================================================
   Compact mega menu: one screen-height of scanning, no long lists.
   Products: tight intent tiles | links in two columns + extras as chips | slim promo card.
   Highlighted event: a small landing panel (intro card in the event colour + two option cards).
   ============================================================ */
.mb-mega--wide .mb-mega__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 280px; gap: var(--space-6); padding-block: var(--space-5); }
.mb-mega__intents { gap: var(--space-2); }
.mb-mega .mb-intent { gap: var(--space-3); padding: var(--space-3); }
.mb-mega .mb-intent__icon { width: 40px; height: 40px; }
.mb-mega .mb-intent__icon svg { width: 24px; height: 24px; }
.mb-mega .mb-intent strong { font-size: 15px; line-height: var(--leading-tight); }
.mb-mega .mb-intent small { margin-top: 2px; }
.mb-mega__links--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3); }
.mb-mega__links--grid a { min-height: 36px; }
.mb-mega__links--places a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--color-accent); }
.mb-mega__extras { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--color-border); list-style: none; }
.mb-mega__extras a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-alt); color: var(--color-heading); font-size: var(--text-small); font-weight: var(--weight-bold); text-decoration: none; }
.mb-mega__extras a:hover, .mb-mega__extras a[aria-current] { background: var(--color-accent); color: var(--color-on-accent); }
.mb-mega--wide .mb-mega__all { margin-top: var(--space-3); padding-left: 0; }
.mb-mega--wide .mb-mega__promo img { aspect-ratio: 2 / 1; }
.mb-mega--wide .mb-mega__promo-body { gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-4); }
.mb .mb-mega--wide .mb-mega__promo strong { font-size: var(--text-h4); }
.mb-mega--wide .mb-mega__promo-body > span:not([class]) { font-size: var(--text-small); line-height: var(--leading-tight); }
.mb-mega--wide .mb-mega__promo .mb-btn { margin-top: var(--space-2); }

.mb-mega--event .mb-mega__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: var(--space-5); padding-block: var(--space-5); }
.mb-event-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-on-accent); }
.mb-event-intro p { margin: 0; }
.mb-event-intro__dates { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-heading); font-size: var(--text-small); font-weight: var(--weight-bold); }
.mb-event-intro__dates svg { width: 14px; height: 14px; fill: currentColor; }
.mb .mb-event-intro__title { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--heading-weight); line-height: var(--leading-heading); text-transform: var(--heading-transform); color: inherit; }
.mb-event-intro__text { line-height: var(--leading-body, 1.5); }
.mb-event-intro__facts { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--text-small); font-weight: var(--weight-bold); }
.mb-event-intro__facts li { display: flex; gap: var(--space-2); }
.mb-event-intro__facts li::before { content: "✓"; }
.mb-event-intro__all { margin-top: auto; padding-top: var(--space-2); color: inherit; font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: .2em; }
.mb-event-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.mb-event-option { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-sm); color: var(--color-text); text-decoration: none; transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
.mb-event-option:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .mb-event-option:hover { transform: none; } }
.mb-event-option img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.mb-event-option__body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-4); }
.mb-event-option strong { color: var(--color-heading); font-size: var(--text-h4); line-height: var(--leading-tight); }
.mb-event-option small { color: var(--color-text-muted); font-size: var(--text-small); line-height: var(--leading-tight); }
.mb-event-option__price { margin-top: var(--space-2); color: var(--color-price); font-weight: var(--weight-bold); }

/* Phones: event card with dates and both options; links in two columns. */
.mb-drawer__event-dates { margin: var(--space-1) 0 0; font-size: var(--text-small); font-weight: var(--weight-bold); }
.mb-drawer__event li a { justify-content: space-between; gap: var(--space-3); }
.mb-drawer__event li a small { font-size: var(--text-small); text-decoration: none; white-space: nowrap; }
.mb-drawer__section .mb-mega__heading { margin-top: var(--space-2); }
.mb-drawer__links--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3); }
.mb .mb-drawer__event-title { align-items: baseline; font-size: var(--text-h4); }
.mb-drawer__event-title .mb-header__event-dot { flex: none; transform: translateY(-2px); }
.mb-drawer__event li a { text-decoration: none; }
.mb-drawer__event li a span { text-decoration: underline; text-underline-offset: .2em; }
.mb-drawer__event li a small { font-weight: var(--weight-regular, 400); text-align: right; }

/* ============================================================
   Home hero (HeroBlock, mokumboot-design "hero"): video with a photo poster, ink scrim, rating, H1, lead with
   the from-price, a search bar into the boat booking tool, reassurances and the private cruise as second way in.
   ============================================================ */
.mb-hero { position: relative; isolation: isolate; display: grid; align-items: end; min-height: clamp(520px, 74vh, 680px); overflow: hidden; background: var(--color-surface-inverse); color: var(--color-on-inverse); }
.mb-hero__media { position: absolute; inset: 0; z-index: -2; }
.mb-hero__video { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.mb-hero__video:has(iframe:not([src])) { display: none; }
.mb-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.mb-hero__video iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); border: 0; transform: translate(-50%, -50%); pointer-events: none; }
.mb-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--shadow-rgb) / .15) 0%, rgb(var(--shadow-rgb) / .4) 45%, rgb(var(--shadow-rgb) / .82) 100%); }
.mb-hero__content { display: grid; justify-items: start; gap: var(--space-3); width: var(--content-width); margin-inline: auto; padding-block: var(--space-8) var(--space-6); }
.mb-hero__content > p { margin: 0; }
/* Review scores (components/Ratings.astro): one plain line of text on the dark hero. The marks use the
   platforms' own rating colours (third-party brand colours, so not tokens): Google stars, Tripadvisor bubbles. */
.mb-ratings { --google-star: #FBBC04; --tripadvisor-bubble: #00AA6C; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; }
.mb-ratings li + li { position: relative; padding-left: var(--space-4); }
.mb-ratings li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; background: color-mix(in srgb, var(--color-on-inverse) 35%, transparent); transform: translateY(-50%); }
.mb .mb-rating { display: inline-flex; align-items: center; gap: 6px; color: var(--color-on-inverse); font-size: var(--text-small); line-height: 1.2; text-decoration: none; }
.mb .mb-ratings .mb-rating:is(:hover, :focus-visible) { color: var(--color-on-inverse); }
.mb .mb-rating:hover .mb-rating__name { text-decoration: underline; text-underline-offset: .2em; }
.mb .mb-rating:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-on-dark); outline-offset: 3px; border-radius: var(--radius-sm); }
.mb-rating__score { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.mb-rating__marks { display: inline-flex; gap: 1px; }
.mb-rating__marks svg { display: block; width: 14px; height: 14px; }
.mb-rating--google .mb-rating__marks svg { fill: var(--google-star); }
.mb-rating--tripadvisor .mb-rating__marks svg { fill: var(--tripadvisor-bubble); }
.mb-rating__name { font-weight: var(--weight-bold); }
.mb-rating__count { color: color-mix(in srgb, var(--color-on-inverse) 75%, transparent); }
@media (max-width: 560px) {
  .mb-ratings { gap: var(--space-1) var(--space-3); }
  .mb-ratings li + li { padding-left: var(--space-3); }
  .mb .mb-rating { gap: 4px; font-size: var(--text-caption); }
  .mb-rating__marks svg { width: 12px; height: 12px; }
  /* One mark instead of five, so score, name and count of both platforms fit on one line. */
  .mb-rating__marks svg + svg { display: none; }
}
.mb .mb-hero__title { max-width: 18ch; margin: 0; font-family: var(--font-heading); font-size: clamp(32px, 24px + 2.2vw, 52px); font-weight: var(--heading-weight); line-height: 1.05; text-transform: var(--heading-transform); color: var(--color-on-inverse); }
.mb-hero__lead { max-width: 52ch; font-size: var(--text-lead); line-height: 1.5; color: var(--color-on-inverse); }

.mb .mb-hero__secondary { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-on-inverse); font-size: var(--text-small); font-weight: var(--weight-bold); line-height: 1.3; }
/* Only the round arrow is the link. The link is the tap area; ::before draws the circle inside it. */
.mb .mb-hero__secondary-link { position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; margin-block: -4px; color: var(--color-on-inverse); transition: color var(--duration) var(--ease); }
.mb-hero__secondary-link::before { content: ""; position: absolute; inset: 4px; border: 1px solid color-mix(in srgb, var(--color-on-inverse) 55%, transparent); border-radius: var(--radius-round); transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.mb-hero__secondary-link svg { position: relative; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mb .mb-hero__secondary-link:hover { color: var(--color-ink); }
.mb-hero__secondary-link:hover::before { border-color: var(--color-on-inverse); background: var(--color-on-inverse); }
.mb-hero__secondary-link:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-on-dark); outline-offset: -2px; border-radius: var(--radius-round); }
.mb-hero__search { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: var(--space-2); align-items: end; width: 100%; margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-md); color: var(--color-text); }
/* Search fields as tiles: icon and label small at the top, the chosen value large below it. The control (native select,
   date input or the mb-select button) fills the whole tile, so every tap on it opens the choice. */
.mb-hero__field { position: relative; display: block; min-width: 0; }
.mb-hero__field > span { position: absolute; top: 9px; left: 32px; right: 30px; z-index: 1; overflow: hidden; color: var(--color-text-muted); font-size: var(--text-caption); line-height: 18px; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.mb-hero__field::before { content: ""; position: absolute; top: 11px; left: 12px; z-index: 1; width: 14px; height: 14px; background: var(--color-accent-strong); -webkit-mask: var(--field-icon) center / contain no-repeat; mask: var(--field-icon) center / contain no-repeat; pointer-events: none; }
.mb-hero__field--location { --field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.mb-hero__field--date { --field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.mb-hero__field--time { --field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.mb-hero__field--hours { --field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10M7 21h10M8 3v3.5a4 4 0 0 0 1.6 3.2L12 12l2.4-2.3A4 4 0 0 0 16 6.5V3M8 21v-3.5a4 4 0 0 1 1.6-3.2L12 12l2.4 2.3a4 4 0 0 1 1.6 3.2V21'/%3E%3C/svg%3E"); }
.mb-hero__field :is(select, input) { display: block; box-sizing: border-box; width: 100%; min-width: 0; height: 60px; min-height: 60px; -webkit-appearance: none; appearance: none; padding: 26px 30px 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-alt); color: var(--color-heading); font: inherit; font-size: var(--text-body); font-weight: var(--weight-bold); line-height: 24px; }
.mb-hero__field :is(select, input)[hidden] { display: none; }
/* Own chevron (appearance: none removes the native one, which differed per platform), level with the value; it turns over
   while the list is open. */
.mb-hero__field select { text-overflow: ellipsis; }
.mb-hero__field::after { content: ""; position: absolute; top: 32px; right: 12px; z-index: 1; width: 12px; height: 12px; background: var(--color-heading); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; transition: transform var(--duration) var(--ease); }
.mb-hero__field.is-open::after { transform: rotate(180deg); }
.mb-hero__field:has(> [data-date-other]:not([hidden]))::after { display: none; }
.mb-hero__field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.mb-hero__field :is(select, input):focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 1px; }
.mb-hero__search .mb-btn { min-height: 60px; white-space: nowrap; }
.mb-hero__search-icon { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.mb-hero__geo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); grid-column: 1 / -1; min-width: 0; }
.mb-hero__geo[hidden] { display: none; }
.mb-hero__geo-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding-left: var(--space-1); color: var(--color-heading); font-size: var(--text-small); line-height: 1.3; cursor: pointer; }
.mb-hero__geo-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--color-accent-strong); cursor: pointer; }
.mb-hero__geo-check span { display: inline-flex; align-items: center; gap: 6px; }
.mb-hero__geo-check span::before { content: ""; flex: none; width: 14px; height: 14px; background: var(--color-accent-strong); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20.5 3.5 3.5 10.6l7.2 2.7 2.7 7.2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20.5 3.5 3.5 10.6l7.2 2.7 2.7 7.2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.mb-hero__geo-check input:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 2px; }
.mb-hero__geo-status { margin: 0; padding-left: var(--space-1); color: var(--color-text-muted); font-size: var(--text-caption); line-height: 1.3; }
.mb-hero__geo-status[hidden] { display: none; }
.mb-hero__geo-status[data-kind="ok"] { color: var(--color-accent-strong); font-weight: var(--weight-bold); }
.mb-hero__geo-status[data-kind="warn"] { color: var(--color-heading); }
.mb-select { position: relative; }
.mb-hero__field .mb-select__native { display: none; }
.mb-select__button { display: block; box-sizing: border-box; width: 100%; height: 60px; padding: 26px 30px 8px 12px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-surface-alt); color: var(--color-heading); font: inherit; font-size: var(--text-body); font-weight: var(--weight-bold); line-height: 24px; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.mb-select__button[hidden] { display: none; }
.mb-select.is-open .mb-select__button { border-color: var(--color-accent-strong); box-shadow: 0 0 0 1px var(--color-accent-strong); }
@media (hover: hover) { .mb-select__button:hover { border-color: var(--color-border-control); } }
.mb-select__button:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 1px; }
.mb-select__list { position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; z-index: 30; display: grid; gap: 2px; max-height: min(336px, 50vh); margin: 0; padding: var(--space-1); overflow-y: auto; overscroll-behavior: contain; list-style: none; border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-md); }
.mb-select__list[hidden] { display: none; }
.mb-select__list:focus { outline: none; }
.mb-select__option { padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-heading); font-weight: var(--weight-bold); line-height: 1.3; cursor: pointer; }
.mb-select__option.is-active { background: var(--color-surface-alt); }
.mb-select__option[aria-selected="true"] { border-color: var(--color-accent-strong); background: var(--color-accent); color: var(--color-on-accent); }
.mb-hero:has(.mb-select.is-open) { overflow: visible; }
body:has(.mb-select.is-open) .site-footer__whatsapp { display: none; }
/* A fade at the bottom while there is more to scroll (is-more, set by the script in HeroBlock). */
.mb-select__list::after { content: ""; position: sticky; bottom: calc(-1 * var(--space-1)); height: 32px; margin-top: -32px; background: linear-gradient(transparent, var(--color-surface)); pointer-events: none; opacity: 0; transition: opacity var(--duration) var(--ease); }
.mb-select__list.is-more::after { opacity: 1; }
@media (max-width: 767px) {
  /* Phones: the choices open as a sheet at the bottom of the screen with the field name on top, so the list never covers
     the other fields and the next one can be tapped right away. Cut through an option so it is clear the list scrolls. */
  .mb-select__list { position: fixed; top: auto; left: var(--space-2); right: var(--space-2); bottom: calc(var(--space-2) + env(safe-area-inset-bottom)); z-index: 1001; max-height: 300px; padding: 0 var(--space-2) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: 0 -4px 32px rgb(var(--shadow-rgb, 26 25 25) / .22); }
  .mb-select__list::before { content: attr(data-label); position: sticky; top: 0; z-index: 1; padding: var(--space-3) var(--space-2) var(--space-2); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-caption); font-weight: var(--weight-bold); }
  .mb-select__list::after { bottom: calc(-1 * var(--space-2)); }
  .mb-select__option { padding-block: 12px; }
}

.mb-hero__usps { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-1) 0 0; padding: 0; list-style: none; font-size: var(--text-small); font-weight: var(--weight-bold); }
.mb-hero__usps li { position: relative; padding-left: 1.4em; }
.mb-hero__usps li::before { content: ""; position: absolute; left: .15em; top: .2em; width: .45em; height: .8em; border: solid var(--color-focus-on-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* The cards right below the hero: normal spacing instead of the theme's overlap with the old video hero. */
.tours-block--cards-only { padding-top: var(--space-7); }
.tours-block--cards-only .tours-block__inner { margin-top: 0; }

.mb-places { padding-top: var(--space-6); }
.mb-places__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); width: var(--content-width); margin: 0 auto var(--space-4); }
.mb .mb-places__title { margin: 0; font-size: var(--text-h3); }
.mb-places__bar { display: flex; }
.mb-places__bar[hidden], .mb-places__list[hidden], .mb-places__map[hidden] { display: none; }
.mb-switch { position: relative; display: inline-grid; grid-auto-columns: 1fr; grid-auto-flow: column; padding: 3px; border-radius: var(--radius-pill); background: var(--color-surface-alt); }
.mb-switch::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: var(--radius-pill); background: var(--color-ink); box-shadow: var(--shadow-sm); transition: transform var(--duration) var(--ease); }
.mb-switch[data-active="map"]::before { transform: translateX(100%); }
.mb-switch__option { position: relative; z-index: 1; min-height: 28px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-heading); font: inherit; font-size: var(--text-caption); font-weight: var(--weight-bold); cursor: pointer; transition: color var(--duration) var(--ease); }
.mb-switch__option[aria-pressed="true"] { color: var(--color-on-inverse); cursor: default; }
.mb-switch__option:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 2px; }
.mb-places__map { position: relative; z-index: 0; width: var(--content-width); height: clamp(300px, 42vh, 440px); margin: 0 auto; overflow: hidden; border-radius: var(--radius-card); background: var(--color-surface-alt); }
.mb-places__marker span { position: absolute; left: 0; top: 0; padding: var(--space-1) var(--space-3); border: 2px solid var(--color-surface); border-radius: var(--radius-pill); background: var(--color-ink); box-shadow: var(--shadow-md); color: var(--color-on-inverse); font-family: var(--font-body); font-size: var(--text-small); font-weight: var(--weight-bold); white-space: nowrap; transform: translate(-50%, -50%); transition: background var(--duration) var(--ease), color var(--duration) var(--ease); }
.mb-places__marker:hover span, .mb-places__marker:focus-visible span { background: var(--color-accent); color: var(--color-on-accent); }
.mb-places__marker:focus-visible { outline: none; }
@media (max-width: 767px) {
  .mb-places__head { margin-bottom: var(--space-3); }
  .mb .mb-places__title { font-size: var(--text-h4); }
  .mb-places__map { height: 360px; }
  .mb-places__marker span { padding: 2px var(--space-2); border-width: 1px; font-size: var(--text-caption); }
}
@media (prefers-reduced-motion: reduce) { .mb-switch::before, .mb-switch__option { transition: none; } }
.mb-places__list { display: grid; grid-template-columns: repeat(var(--count, 7), minmax(0, 1fr)); gap: var(--space-4); width: var(--content-width); margin: 0 auto; padding: 0; list-style: none; }
.mb .mb-place { display: grid; gap: var(--space-2); color: var(--color-heading); font-size: var(--text-small); font-weight: var(--weight-bold); text-decoration: none; }
.mb-place__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
.mb-place:hover .mb-place__img { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.mb-place:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-card); }
@media (prefers-reduced-motion: reduce) { .mb-place:hover .mb-place__img { transform: none; } }
@media (max-width: 1023px) {
  .mb-places__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 30%; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .mb-places__list::-webkit-scrollbar { display: none; }
  .mb-places__list > li { scroll-snap-align: start; }
}
@media (max-width: 767px) { .mb-places__list { grid-auto-columns: 40%; } }
/* Package cards below desktop: one swipeable row like the places strip, the next card peeking in. */
@media (max-width: 1023px) {
  .packages-block .mb-cards__grid.mb-grid-fixed { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 45%; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: var(--space-2) 0 var(--space-8); margin-bottom: calc(-1 * var(--space-8)); }
  .packages-block .mb-cards__grid.mb-grid-fixed::-webkit-scrollbar { display: none; }
  .packages-block .mb-cards__grid.mb-grid-fixed > * { scroll-snap-align: start; }
}
@media (max-width: 767px) { .packages-block .mb-cards__grid.mb-grid-fixed { grid-auto-columns: 85%; } }
/* Home hero from tablet up: one centred stack (scores, H1, lead, booking card, reassurances), so the booking card sits
   in the middle of the screen. */
@media (min-width: 768px) {
  .mb-hero:not(.mb-hero--page) { align-items: center; min-height: clamp(520px, calc(100svh - var(--site-header-height, 96px)), 640px); }
  .mb-hero:not(.mb-hero--page) .mb-hero__content { justify-items: center; padding-block: var(--space-6); text-align: center; }
  .mb.mb-hero:not(.mb-hero--page) .mb-hero__title { max-width: none; }
  .mb-hero:not(.mb-hero--page) .mb-ratings, .mb-hero:not(.mb-hero--page) .mb-hero__usps { justify-content: center; }
  .mb-hero:not(.mb-hero--page) .mb-hero__search { max-width: 1040px; text-align: left; }
}
@media (max-width: 1023px) {
  .mb-hero__search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Phones and tablets: the four fields two by two, the button over the full width. */
  .mb-hero__search .mb-btn { order: 1; grid-column: 1 / -1; align-self: end; padding-inline: var(--space-3); }
}
@media (max-width: 767px) {
  .mb-hero { min-height: 0; }
  .mb-hero__media img { object-position: 62% 78%; }
  .mb-hero__content { gap: var(--space-2); padding-block: var(--space-4) var(--space-5); }
  /* H1 on one line: the font size follows the title length (--title-chars, set in HeroBlock) and the content width.
     0.63em is the (rounded-up) average width of an uppercase Block Berthold character; a title too long for 18px still wraps.
     No container query here: a container would trap the fixed choice sheet (mb-select__list) inside the hero. */
  .mb-hero:not(.mb-hero--page) .mb-hero__content { padding-block: var(--space-4) var(--space-7); }
  .mb-hero:not(.mb-hero--page) .mb-ratings { justify-self: center; justify-content: center; margin-bottom: var(--space-3); }
  .mb.mb-hero:not(.mb-hero--page) .mb-hero__title { max-width: none; font-size: clamp(18px, var(--content-width) / (var(--title-chars, 24) * 0.63), 34px); line-height: 1.1; text-wrap: balance; }
  .mb-hero__lead { font-size: var(--text-body); line-height: 1.45; }
  /* Lead below the booking card (visual order only; in the HTML it stays right after the H1). */
  .mb-hero:not(.mb-hero--page) .mb-hero__lead { order: 1; margin-top: var(--space-1); font-size: var(--text-small); line-height: 1.5; }
  /* Phones: a bigger arrow (36px circle) with a 44px tap area. */
  .mb-hero:not(.mb-hero--page) .mb-hero__secondary { order: 2; justify-self: start; gap: var(--space-1); }
  .mb .mb-hero__secondary-link { width: 44px; height: 44px; }
  .mb-hero__secondary-link svg { width: 18px; height: 18px; }
  /* The reassurances rotate one by one in the header trust bar on phones. */
  .mb-hero:not(.mb-hero--page) .mb-hero__usps { display: none; }
  .mb-hero__usps { gap: var(--space-1) var(--space-4); font-size: var(--text-caption); }
  .mb-hero__usps li { white-space: nowrap; }
  .mb-hero__search { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "location date" "time hours" "geo geo" "go go"; gap: var(--space-2) var(--space-2); padding: var(--space-3); }
  .mb-hero__field--location { grid-area: location; }
  .mb-hero__field--date { grid-area: date; }
  .mb-hero__geo { grid-area: geo; }
  /* Tighter on phones so the checkbox, location icon and label fit on one line from 375px. */
  .mb-hero__search { padding-inline: var(--space-2); }
  .mb-hero__geo-check { gap: 6px; padding-left: 0; font-size: var(--text-caption); }
  .mb-hero__geo-check input { width: 16px; height: 16px; }
  .mb-hero__geo-check span { gap: 4px; }
  .mb-hero__geo-check span::before { width: 12px; height: 12px; }
  .mb-hero__field--time { grid-area: time; }
  .mb-hero__field--hours { grid-area: hours; }
  .mb-hero__search .mb-btn { grid-area: go; width: 100%; margin-top: var(--space-1); }
}

/* ============================================================
   Content page hero (HeroBlock with search: false) and the initiatives / CTA blocks
   (e.g. /over-ons/betrokken-bij-amsterdam/).
   ============================================================ */
.mb-hero--page { min-height: clamp(420px, 60vh, 560px); }
.mb .mb-hero--page .mb-hero__title { max-width: 20ch; font-size: clamp(36px, 26px + 2.6vw, 56px); }
.mb-hero__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.mb .mb-hero__links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-heading); font-size: var(--text-small); font-weight: var(--weight-bold); text-decoration: none; }
.mb .mb-hero__links a:hover { background: var(--color-accent); color: var(--color-on-accent); }

.mb-initiatives { padding-block: var(--space-8); scroll-margin-top: var(--site-header-height, 96px); }
.mb-initiatives--sand { background: var(--color-surface-alt); }
.mb-initiatives__inner { width: var(--content-width); margin-inline: auto; }
.mb-initiatives__intro { margin-bottom: var(--space-6); }
.mb-initiatives__intro p { margin: 0; }
.mb-initiatives__grid { display: grid; gap: var(--space-5); }
.mb-initiative { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.mb-initiative__media { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mb-initiative__media--icon { display: grid; place-items: center; background-color: var(--color-accent); background-image: radial-gradient(circle at 0 100%, transparent 38%, rgb(255 255 255 / .14) 38.5%, rgb(255 255 255 / .14) 44%, transparent 44.5%), radial-gradient(circle at 100% 0, transparent 30%, rgb(255 255 255 / .14) 30.5%, rgb(255 255 255 / .14) 36%, transparent 36.5%); }
.mb-initiative__media--icon span { display: grid; place-items: center; width: 112px; height: 112px; border-radius: var(--radius-round); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.mb-initiative__media--icon svg { width: 56px; height: 56px; }
.mb-initiatives__grid--icons .mb-initiative__media { aspect-ratio: 5 / 2; }
.mb-initiative__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5); }
.mb-initiative__body p { margin: 0; }
.mb-initiative__label { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-alt); color: var(--color-heading); font-size: var(--text-caption); font-weight: var(--weight-bold); }
.mb-initiatives--sand .mb-initiative__label { background: var(--color-accent); color: var(--color-on-accent); }
.mb .mb-initiative__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--heading-weight); line-height: var(--leading-heading); text-transform: var(--heading-transform); color: var(--color-heading); }
.mb-initiative__text { color: var(--color-text); }
.mb-initiative__link { margin-top: auto; padding-left: 0; }
/* One initiative: a wide card, photo or icon tile left, text right. */
.mb-initiative--wide { flex-direction: row; }
.mb-initiative--wide .mb-initiative__media { flex: 0 0 42%; aspect-ratio: auto; min-height: 280px; }
.mb-initiative--wide .mb-initiative__media--icon { flex-basis: 32%; min-height: 240px; }
.mb-initiative--wide .mb-initiative__body { justify-content: center; padding: var(--space-6); max-width: 64ch; }
@media (max-width: 767px) {
  .mb-initiatives { padding-block: var(--space-7); }
  .mb-initiative--wide { flex-direction: column; }
  .mb-initiative--wide .mb-initiative__media { flex: none; min-height: 0; aspect-ratio: 3 / 2; }
  .mb-initiative--wide .mb-initiative__body { padding: var(--space-5); }
  .mb-initiative__media--icon span { width: 88px; height: 88px; }
  .mb-initiative__media--icon svg { width: 44px; height: 44px; }
  .mb-initiatives__grid--icons .mb-initiative__media, .mb-initiative--wide .mb-initiative__media--icon { aspect-ratio: 5 / 2; min-height: 0; }
}

.mb-cta { padding-block: var(--space-8); }
.mb-cta__card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); width: var(--content-width); margin-inline: auto; padding: var(--space-7); border-radius: var(--radius-card); background: var(--color-surface-alt); }
.mb-cta__text { flex: 1 1 520px; display: grid; gap: var(--space-3); max-width: 70ch; }
.mb-cta__text :is(h2, p) { margin: 0; }
.mb-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
@media (max-width: 767px) { .mb-cta { padding-block: var(--space-7); } .mb-cta__card { padding: var(--space-5); } .mb-cta__actions .mb-btn--primary { width: 100%; } }

/* ============================================================
   Home page, boat rental first: steps, price tiles and the feature card for the private cruise.
   ============================================================ */
.mb-steps, .mb-prices, .mb-feature { padding-block: var(--space-8); }
.mb-steps__inner, .mb-prices__inner { width: var(--content-width); margin-inline: auto; }
.mb-steps__intro, .mb-prices__intro { margin-bottom: var(--space-6); }
.mb-steps__intro p, .mb-prices__intro p { margin: 0; }
.mb-steps__list { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.mb-step { display: grid; align-content: start; gap: var(--space-2); }
.mb-step__number { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-2); border-radius: var(--radius-round); background: var(--color-ink); color: var(--color-on-inverse); font-family: var(--font-heading); font-size: var(--text-h3); }
.mb-step__title { margin: 0; font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--color-heading); }
.mb-step__text p { margin: 0; color: var(--color-text); }
.mb-steps__action { margin: var(--space-6) 0 0; }

.mb-prices { background: var(--color-surface-alt); }
.mb-prices__list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.mb-price { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5); border: 2px solid transparent; border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.mb-price--best { border-color: var(--color-accent); }
.mb-price p { margin: 0; }
.mb-price__badge { position: absolute; top: -1px; left: var(--space-5); transform: translateY(-50%); white-space: nowrap; }
.mb-price__hours { font-weight: var(--weight-bold); color: var(--color-heading); }
.mb .mb-price__amount { font-family: var(--font-heading); font-size: clamp(36px, 30px + 1.2vw, 48px); line-height: 1; color: var(--color-price); }
.mb-price__meta { color: var(--color-text-muted); font-size: var(--text-small); }
.mb-price__meta span { display: block; }
.mb-price .mb-btn { margin-top: auto; width: 100%; }
.mb-price__meta + .mb-btn { margin-top: var(--space-3); }
.mb-prices__note { max-width: 70ch; margin: var(--space-5) 0 0; color: var(--color-text-muted); font-size: var(--text-small); }

.mb-feature__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: var(--content-width); margin-inline: auto; overflow: hidden; border-radius: var(--radius-card); background: var(--color-surface-alt); }
.mb-feature__img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.mb-feature__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-3); padding: var(--space-7); }
.mb-feature__body > p, .mb-feature__text p { margin: 0; }
.mb-feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); }
@media (max-width: 767px) {
  .mb-steps, .mb-prices, .mb-feature { padding-block: var(--space-7); }
  .mb-steps__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .mb-step { grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-3); }
  .mb-step__number { grid-row: span 2; margin: 0; }
  .mb-feature__card { grid-template-columns: minmax(0, 1fr); }
  /* Price tiles: compact rows (price left, button right) instead of three tall cards. */
  .mb-prices__list { gap: var(--space-3); }
  .mb-price { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); row-gap: 2px; padding: var(--space-4); }
  .mb-price > :not(.mb-btn):not(.mb-price__badge) { grid-column: 1; }
  .mb .mb-price__amount { font-size: 32px; }
  .mb-price .mb-btn, .mb-price__meta + .mb-btn { grid-column: 2; grid-row: 1 / span 3; width: auto; margin: 0; padding-inline: var(--space-4); }
  .mb-price__badge { left: var(--space-4); }
  .mb-price--best { margin-top: var(--space-2); }
  .mb-price__per-boat { display: none !important; }
  .mb-feature__img { min-height: 0; aspect-ratio: 3 / 2; }
  .mb-feature__body { padding: var(--space-5); }
}

/* FAQ contact card: light (sand) instead of ink, so it supports the questions instead of dominating them. */
.mb-faq__contact { background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border); }
.mb-faq__contact .mb-h4 { color: var(--color-heading); }
.mb-faq__contact .mb-faq__call { align-self: flex-start; padding-left: 0; }

/* ============================================================
   Event section (EventBlock): the next event right below the home hero as one card in the event colour, with the
   two ways to go as white tiles inside it.
   ============================================================ */
.mb-event { padding-block: var(--space-7) var(--space-8); }
.mb-event__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-6); width: var(--content-width); margin-inline: auto; padding: var(--space-6); border-radius: calc(var(--radius-card) * 1.5); background: radial-gradient(90% 120% at 100% 0%, rgb(255 255 255 / .38), transparent 60%), radial-gradient(70% 90% at 0% 100%, rgb(255 255 255 / .18), transparent 70%), var(--color-accent); color: var(--color-on-accent); }
.mb-event__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.mb-event__dates { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding: 6px 14px 6px 12px; border-radius: var(--radius-pill); background: rgb(255 255 255 / .75); color: var(--color-heading); font-size: var(--text-caption); font-weight: var(--weight-bold); }
.mb-event__dot { position: relative; width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--color-accent-strong); }
.mb-event__dot::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; background: var(--color-accent-strong); opacity: .35; animation: mb-event-ping 2s var(--ease) infinite; }
@keyframes mb-event-ping { 0% { transform: scale(.5); opacity: .5; } 80%, 100% { transform: scale(1.4); opacity: 0; } }
.mb .mb-event__title { margin: var(--space-1) 0 0; font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--heading-weight); line-height: var(--leading-heading); letter-spacing: var(--heading-tracking); text-transform: var(--heading-transform); color: inherit; }
.mb-event__text { max-width: 42ch; margin: 0; font-size: var(--text-lead); line-height: var(--leading-body, 1.5); }
.mb-event__facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.mb-event__facts li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: var(--radius-pill); background: rgb(255 255 255 / .45); font-size: var(--text-caption); font-weight: var(--weight-bold); }
.mb-event__facts svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mb .mb-event__all { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin-top: auto; padding: 0 var(--space-4) 0 var(--space-5); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-on-inverse); font-size: var(--text-small); font-weight: var(--weight-bold); text-decoration: none; transition: background var(--duration) var(--ease); }
.mb .mb-event__all:hover { background: color-mix(in srgb, var(--color-ink) 82%, var(--color-accent)); color: var(--color-on-inverse); }
.mb-event__all svg, .mb-event__option-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration) var(--ease); }
.mb-event__all:hover svg, .mb-event__option:hover .mb-event__option-go svg { transform: translateX(2px); }
.mb-event__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.mb .mb-event__option { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--radius-card); background: var(--color-surface); box-shadow: 0 8px 24px rgb(var(--shadow-rgb, 26 25 25) / .1); color: var(--color-text); text-decoration: none; transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); }
.mb .mb-event__option:hover { box-shadow: 0 14px 32px rgb(var(--shadow-rgb, 26 25 25) / .16); transform: translateY(-3px); }
.mb-event__option-media { display: block; overflow: hidden; }
.mb-event__option img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--ease); }
.mb-event__option:hover img { transform: scale(1.04); }
.mb-event__option-body { display: flex; flex: 1; flex-direction: column; gap: 2px; padding: var(--space-4) calc(var(--space-4) + 44px) var(--space-4) var(--space-4); }
.mb-event__option strong { color: var(--color-heading); font-size: var(--text-h4); line-height: var(--leading-tight); }
.mb-event__option small { color: var(--color-text-muted); font-size: var(--text-small); line-height: var(--leading-tight); }
.mb-event__option-price { margin-top: auto; padding-top: var(--space-2); color: var(--color-price); font-size: var(--text-small); font-weight: var(--weight-bold); }
.mb-event__option-go { position: absolute; right: var(--space-4); bottom: var(--space-4); display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-round); background: var(--color-accent); color: var(--color-on-accent); transition: background var(--duration) var(--ease), color var(--duration) var(--ease); }
.mb-event__option:hover .mb-event__option-go { background: var(--color-ink); color: var(--color-on-inverse); }
.mb-event__option:focus-visible, .mb-event__all:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 3px; }
.mb-event__note { display: flex; align-items: center; gap: var(--space-2); width: var(--content-width); margin: var(--space-3) auto 0; color: var(--color-text-muted); font-size: var(--text-small); }
.mb-event__note svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) {
  .mb-event__dot::after { animation: none; }
  .mb .mb-event__option:hover, .mb-event__option:hover img, .mb-event__all:hover svg, .mb-event__option:hover .mb-event__option-go svg { transform: none; }
}
/* One column: the content joins the card's grid so "all about" can follow the two ways to go. */
@media (max-width: 1023px) {
  .mb-event__card { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .mb-event__content { display: contents; }
  .mb-event__dates, .mb-event__facts { justify-self: start; }
  .mb-event__options { margin-block: var(--space-2); }
  .mb .mb-event__all { order: 1; justify-content: center; margin-top: 0; }
}
@media (max-width: 639px) {
  .mb-event { padding-block: var(--space-6) var(--space-7); }
  .mb-event__card { padding: var(--space-5) var(--space-4) var(--space-4); }
  .mb .mb-event__title { font-size: var(--text-h3); }
  .mb-event__text { font-size: var(--text-body); }
  .mb-event__options { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  /* Ways to go as compact rows: square photo left, text in the middle, arrow right. */
  .mb .mb-event__option { flex-direction: row; align-items: stretch; }
  .mb-event__option-media { flex: none; width: 96px; }
  .mb-event__option img { aspect-ratio: auto; }
  .mb-event__option-body { padding: var(--space-3) 52px var(--space-3) var(--space-3); }
  .mb-event__option strong { font-size: var(--text-body); }
  .mb-event__option small { font-size: var(--text-caption); }
  .mb-event__option-price { padding-top: var(--space-1); }
  .mb-event__option-go { top: 50%; right: var(--space-3); bottom: auto; width: 32px; height: 32px; transform: translateY(-50%); }
  .mb-event__note { align-items: flex-start; font-size: var(--text-caption); }
  .mb-event__note svg { width: 16px; height: 16px; margin-top: 1px; }
}

/* ============================================================
   Longer text (StoryBlock): intro + button, first section next to a checklist card, then sections in two columns.
   ============================================================ */
.mb-story { padding-block: var(--space-8); }
.mb-story__inner { display: grid; gap: var(--space-7); width: var(--content-width); margin-inline: auto; }
.mb-story__head { display: grid; justify-items: start; gap: var(--space-4); max-width: 72ch; }
.mb-story__head :is(h2, p) { margin: 0; }
.mb-story__intro p { margin: 0; font-size: var(--text-lead); line-height: 1.6; }
.mb-story__row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.mb .mb-story__title { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--heading-weight); line-height: var(--leading-heading); text-transform: var(--heading-transform); color: var(--color-heading); }
.mb-story__text p { margin: 0 0 var(--space-3); line-height: 1.65; }
.mb-story__text p:last-child { margin-bottom: 0; }
.mb-story__text--columns { columns: 2; column-gap: var(--space-7); }
.mb-story__text--columns p { break-inside: avoid; }
.mb-story__section--wide { padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.mb-story__link { margin-top: var(--space-3); padding-left: 0; }
.mb-story__checklist { padding: var(--space-5); border-radius: var(--radius-card); background: var(--color-surface-alt); }
.mb-story__checklist-title { margin: 0 0 var(--space-3); font-weight: var(--weight-bold); color: var(--color-heading); }
.mb-story__checklist ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.mb-story__checklist li { position: relative; padding-left: 1.75em; }
.mb-story__checklist li::before { content: ""; position: absolute; left: .35em; top: .3em; width: .4em; height: .75em; border: solid var(--color-accent-strong); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 767px) {
  .mb-story { padding-block: var(--space-7); }
  .mb-story__inner { gap: var(--space-6); }
  .mb-story__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .mb-story__text--columns { columns: 1; }
  .mb-story__intro p { font-size: var(--text-body); }
}

/* Content tables scroll inside their own container on small screens (Html.astro wraps them); the table fills the width. */
.mb-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.flexible-content .mb-table-scroll table { width: 100%; }

/* Boat booking: availability per boarding point when the visitor came from the home search without a location. */
.mb-book-card__avail { display: block; margin-top: var(--space-1); font-size: var(--text-small); font-weight: var(--weight-bold); color: var(--color-text-muted); }
.mb-book-card.is-free .mb-book-card__avail { color: var(--color-accent-strong); }
.mb-book-card.is-full { opacity: .6; }
.mb-book-card.is-full .mb-book-card__avail { color: var(--color-text-muted); }
.mb-book-card__km { display: block; margin-top: 2px; font-size: var(--text-small); color: var(--color-text-muted); }
.mb-book-geo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-3); }
.mb .mb-book-geo__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface-card); color: var(--color-heading); font-family: var(--font-body); font-size: var(--text-small); font-weight: var(--weight-bold); cursor: pointer; transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease); }
.mb .mb-book-geo__btn svg { color: var(--color-accent-strong); }
.mb .mb-book-geo__btn:hover { border-color: var(--color-accent-strong); background: var(--color-accent-tint); }
.mb .mb-book-geo__btn:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 2px; }
.mb .mb-book-geo__btn:disabled { cursor: progress; opacity: .6; }
.mb .mb-book-geo__note { flex: 1 1 200px; margin: 0; color: var(--color-text-muted); font-size: var(--text-caption); line-height: 1.4; }
.mb .mb-book-geo__note[data-kind="ok"] { color: var(--color-accent-strong); }
.mb .mb-book-geo__note[data-kind="warn"] { color: var(--color-heading); }

/* Section rhythm: every section on a page sits the same distance from the next. Plain sections share one collapsing
   margin; sections with their own background (bands) take that distance as inner padding and touch each other. */
.flexible-content > section:not(.mb-hero, .video-block, .image-block--large, .book-tool, .boat-tool, .charter-tool) { margin-block: var(--section-y); padding-block: 0; }
.flexible-content > section:is(.mb-prices, .mb-section--alt, .mb-usps) { margin-block: 0; padding-block: var(--section-y); }
.flexible-content > .mb-hero + section, .flexible-content > .mb-hero + script + section { margin-top: var(--space-6); }
.flexible-content > section:last-child { margin-bottom: var(--section-y); }
.flexible-content > section :is(.text-block__inner, .packages-block__inner, .locations-block__inner) { margin-block: 0; }
.flexible-content > section :is(.text-block__content, .media-text-block__body, .mb-more) > :first-child { margin-top: 0; }
.flexible-content > section :is(.text-block__content, .media-text-block__body, .mb-more) > :last-child { margin-bottom: 0; }
.flexible-content > section .button-group:last-child { margin-bottom: calc(-1 * var(--space-2)); }
.flexible-content > section .media-text-block__body { padding-bottom: 0; }
@media (min-width: 60em) { .flexible-content > section .media-text-block__body { padding-top: 0; } }

/* Lists in CMS text: no theme emoji or browser bullets. Plain lists get an accent dot, .list--inline a round check
   badge in two columns, .check (benefit lists) tiles with the same badge. */
.flexible-content :is(.text-block__content, .media-text-block__body) ul { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.flexible-content :is(.text-block__content, .media-text-block__body) ul li { position: relative; margin: 0; padding: 0 0 0 var(--space-5); list-style: none; }
.flexible-content :is(.text-block__content, .media-text-block__body) ul li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 6px; height: 6px; border-radius: var(--radius-round); background: var(--color-accent-strong); color: inherit !important; }
.flexible-content :is(.text-block__content, .media-text-block__body) ul:is(.check, .list--inline) li { min-height: 24px; padding-left: 36px; }
.flexible-content :is(.text-block__content, .media-text-block__body) ul:is(.check, .list--inline) li::before { left: 0; top: 0; width: 24px; height: 24px; background: var(--color-accent-tint); }
.flexible-content :is(.text-block__content, .media-text-block__body) ul:is(.check, .list--inline) li::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border: solid var(--color-accent-strong); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.flexible-content :is(.text-block__content, .media-text-block__body) ul.check { gap: var(--space-2); }
.flexible-content :is(.text-block__content, .media-text-block__body) ul.check li { display: flex; align-items: center; padding: var(--space-3) var(--space-4) var(--space-3) 52px; border-radius: var(--radius-card); background: var(--color-surface-alt); color: var(--color-heading); font-weight: var(--weight-bold); line-height: 1.4; }
.flexible-content :is(.text-block__content, .media-text-block__body) ul.check li::before { left: var(--space-4); top: 50%; translate: 0 -50%; background: var(--color-surface); }
.flexible-content :is(.text-block__content, .media-text-block__body) ul.check li::after { left: calc(var(--space-4) + 9px); top: 50%; translate: 0 -65%; }
.flexible-content :is(.text-block__content, .media-text-block__body) .list--inline { display: grid; width: auto; }
.flexible-content :is(.text-block__content, .media-text-block__body) .list--inline + .list--inline { margin-top: calc(var(--space-3) - var(--space-5)); }
@media (min-width: 768px) {
  .flexible-content :is(.text-block__content, .media-text-block__body) ul.check { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flexible-content :is(.text-block__content, .media-text-block__body) .list--inline { display: inline-grid; width: calc(50% - var(--space-4)); vertical-align: top; }
  .flexible-content :is(.text-block__content, .media-text-block__body) .list--inline + .list--inline { margin-top: 0; margin-left: var(--space-5); }
}

/* Button groups in CMS content: one real button, every further action a text link with an arrow (as .mb-btn--tertiary),
   so groups never stack two pills of different widths. Seasonal, call and on-photo buttons keep their own look.
   On phones the first button spans the full width. */
.flexible-content :is(.button-group, p:has(> .button)) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.flexible-content :is(.button-group, p:has(> .button)) .button { margin: 0; }
.flexible-content :is(.text-block__content, .media-text-block__body, .mb-cards__intro, .mb-more) :is(.button-group, p:has(> .button)) { margin: var(--space-5) 0 0; }
.flexible-content > section .button-group:last-child { margin-bottom: 0; }
.flexible-content :is(.button-group, p:has(> .button)) .button ~ .button:is(.button--primary, .button--secondary, .button--outline) { min-height: var(--tap-min); padding: 0 var(--space-1); border: 0; border-radius: 0; background: transparent; color: var(--color-link); text-decoration: underline; text-underline-offset: .2em; }
.flexible-content :is(.button-group, p:has(> .button)) .button ~ .button:is(.button--primary, .button--secondary, .button--outline)::after { content: "→"; margin-left: var(--space-1); text-decoration: none; display: inline-block; }
.flexible-content :is(.button-group, p:has(> .button)) .button ~ .button:is(.button--primary, .button--secondary, .button--outline):hover { background: transparent; color: var(--color-link-hover); text-decoration-thickness: 2px; }
@media (max-width: 767px) {
  .flexible-content :is(.button-group, p:has(> .button)) > .button:first-child { flex: 1 1 100%; }
  .flexible-content .mb-more__toggle:not([hidden]) + .button-group { margin-top: 0; }
  .mb-feature .mb-btn--secondary, .mb-story__head .mb-btn--primary, .mb-reviews .mb-btn--secondary { width: 100%; }
}

/* Media-text titles match every other section heading (the theme made them smaller and grey). */
.flexible-content .media-text-block--image .media-text-block__title { margin: 0 0 var(--space-4); font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--heading-weight); line-height: var(--leading-heading); letter-spacing: var(--heading-tracking); text-transform: var(--heading-transform); color: var(--color-heading); }

/* Portrait photos in media-text crop to a calm ratio instead of towering over the text. */
.flexible-content .media-text-block__figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 60em) { .flexible-content .media-text-block__figure img { aspect-ratio: 4 / 5; } }

/* Hero that carries the H1 (location pages): room for title, offer and button on every screen, and readable on
   any photo thanks to a dark gradient behind the text. The theme sizes the hero to the photo (206px on a phone). */
.image-block--item-1:has(h1.image-block__title) .image-block__figure { min-height: clamp(380px, 64vh, 585px); overflow: hidden; }
.image-block--item-1:has(h1.image-block__title) img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; }
.image-block--item-1:has(h1.image-block__title) .image-block__figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--color-ink) 78%, transparent) 0%, color-mix(in srgb, var(--color-ink) 35%, transparent) 50%, transparent 80%); pointer-events: none; }
.image-block--item-1:has(h1.image-block__title) .image-block__body { top: auto; bottom: var(--space-6); z-index: 1; max-width: 680px; }
.image-block--item-1:has(h1.image-block__title) .image-block__body p { font-size: var(--text-lead); line-height: 1.45; }
@media (max-width: 640px) {
  .image-block--item-1:has(h1.image-block__title) .image-block__body { bottom: var(--space-4); }
  .image-block--item-1:has(h1.image-block__title) .image-block__body p { font-size: var(--text-body); }
}

/* ============================================================
   Directions to a boarding point (DirectionsBlock): a card per way of travelling, icon, text, route in Google Maps.
   ============================================================ */
.mb-directions { padding-block: var(--space-8); }
.mb-directions__inner { width: var(--content-width); margin-inline: auto; }
.mb-directions__head { margin-bottom: var(--space-6); max-width: 70ch; }
.mb-directions__intro p { margin: 0; }
.mb-directions__intro p + p { margin-top: var(--space-2); }
.mb-directions__address { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-small); }
.mb-directions__address strong { color: var(--color-heading); }
.mb-directions__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
/* Fixed columns per number of cards, so a row never ends with a single card: 4 = 2x2 or 4, 3 = 3, 2 = 2 */
@media (min-width: 640px) { .mb-directions__grid:is([data-count="2"], [data-count="4"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .mb-directions__grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mb-directions__grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mb-directions__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-card); background: var(--color-surface-alt); }
.mb-directions__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-1); border-radius: var(--radius-round); background: var(--color-accent-tint); color: var(--color-accent-strong); }
.mb .mb-directions__title { margin: 0; font-family: var(--font-body); font-size: var(--text-h4); font-weight: var(--weight-bold); line-height: 1.3; text-transform: none; color: var(--color-heading); }
.mb-directions__text { flex: 1; color: var(--color-text); font-size: var(--text-body); line-height: 1.55; }
.mb-directions__text p { margin: 0 0 var(--space-2); }
.mb-directions__text p:last-child { margin-bottom: 0; }
.mb-directions__route { margin-top: var(--space-2); }
@media (max-width: 767px) {
  .mb-directions { padding-block: var(--space-7); }
  /* Phone: icon beside the title, so the cards stay short */
  .mb-directions__item { display: grid; grid-template-columns: 40px 1fr; align-items: center; column-gap: var(--space-3); padding: var(--space-4); }
  .mb-directions__icon { width: 40px; height: 40px; margin: 0; }
  .mb-directions__text, .mb-directions__route { grid-column: 1 / -1; }
}

/* Inline SVG icons that replace Font Awesome (lib/icons.ts, swapped in by src/middleware.ts): same size as the font icons */
.mb-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex: none; overflow: visible; }

/* Quick buttons under the tours hero (ToursBlock): one green primary action and a quiet secondary one, in the
   target design instead of the theme's grey/red pills; same width and stacked on a phone. */
.tours-block__buttons.mb-tours__quick { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); width: var(--content-width); margin: var(--space-5) auto var(--space-6); padding: 0; }
.tours-block__buttons.mb-tours__quick .mb-btn { min-width: 260px; }
@media (max-width: 640px) {
  .tours-block__buttons.mb-tours__quick { flex-direction: column; align-items: stretch; gap: var(--space-2); margin-block: var(--space-4) var(--space-5); }
  .tours-block__buttons.mb-tours__quick .mb-btn { width: 100%; min-width: 0; }
}
@media (min-width: 60em) { .tours-block__buttons.mb-tours__quick { display: none; } } /* as the theme: on desktop the cards are in view */
/* Below 60em the buttons sit between hero and cards: the cards no longer slide up over them, and the second action
   is a light outlined button next to the green one (a near-black pill was too heavy). */
@media (max-width: 59.9375em) {
  .tours-block__buttons.mb-tours__quick + .tours-block__inner { margin-top: 0; }
  .mb.mb-tours__quick .mb-btn--secondary { background: var(--color-surface-card); color: var(--color-heading); border-color: var(--color-border-control); }
  .mb.mb-tours__quick .mb-btn--secondary:hover { background: var(--color-surface-alt); color: var(--color-heading); }
}

/* Amsterdam Light Festival partner banner (components/AlfPartner.astro): the official 2026-2027 banner, full width
   of its column, in the event dropdown, the event block and below the first section of the festival pages. */
.mb-partner { display: block; align-self: stretch; border-radius: var(--radius-card); overflow: hidden; line-height: 0; }
.mb-partner img { display: block; width: 100%; height: auto; }
.mb-partner:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.mb-partner--menu { margin-top: var(--space-2); }
.mb-partner-block { padding-block: var(--space-6) 0; }