/* 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-caption); font-weight: var(--weight-bold); letter-spacing: var(--tracking-overline); text-transform: uppercase; 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)); }
.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); }
.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; }
.mb-map__load { position: absolute; 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) {
  .mb-locations__list { max-height: none; overflow: visible; padding-right: 0; } /* no nested scrolling on phones */
  .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; }

.mb-book { display: grid; grid-template-columns: minmax(0, 1fr) 380px; 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); }
.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); }
.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-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-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-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; }

/* 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-radius: var(--radius-card); background: var(--color-surface-card); box-shadow: var(--shadow-md); }
.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-1) var(--space-1) var(--space-4); 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); }
.mb-slider__dots { display: flex; gap: var(--space-2); }
.mb-slider__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--color-border); cursor: pointer; transition: width var(--duration) var(--ease), background-color var(--duration) var(--ease); }
.mb-slider__dots button.is-active { 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 i { flex: none; width: 1.2em; color: var(--color-accent-strong); text-align: center; }
.mb-tour__text li::first-letter { text-transform: uppercase; }

/* ---- 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); }

/* 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 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; background: var(--color-surface); transition: box-shadow var(--duration) var(--ease); }
.mb-header.is-scrolled { box-shadow: var(--shadow-sm); }
.mb-header__trust { overflow: hidden; background: var(--color-surface-alt); font-size: var(--text-caption); color: var(--color-text); }
.mb-header__trust ul { display: flex; justify-content: center; gap: var(--space-6); max-width: var(--container-max); margin: 0 auto; padding: var(--space-2) 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 + li::before { content: ""; width: 5px; height: 5px; margin-right: var(--space-2); border-radius: var(--radius-round); background: var(--color-accent); }
.mb-header__star { color: var(--color-accent-strong); }
.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; }
.mb-header__logo svg { display: block; width: 100%; height: auto; }
.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-caption); font-weight: var(--weight-bold); letter-spacing: var(--tracking-overline); text-transform: uppercase; 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; }
  .mb-header__trust .mb-header__trust-extra { display: none; }
  .mb-header__trust ul { gap: var(--space-4); padding-block: 6px; }
  .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: 1200px (--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 .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; font-weight: var(--weight-bold); 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; }
.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; }
.mb-hero__rating { display: inline-flex; align-items: center; gap: var(--space-1); 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); }
.mb-hero__rating span[aria-hidden] { color: var(--color-signal); }
.mb .mb-hero__title { max-width: 18ch; margin: 0; font-family: var(--font-heading); font-size: clamp(40px, 28px + 3vw, 64px); 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-hero__search { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 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); }
.mb-hero__field { display: grid; gap: var(--space-1); min-width: 0; }
.mb-hero__field span { padding-left: var(--space-1); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: .02em; color: var(--color-heading); }
.mb-hero__field :is(select, input) { display: block; box-sizing: border-box; width: 100%; min-width: 0; height: 48px; min-height: 48px; line-height: 46px; -webkit-appearance: none; appearance: none; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-alt); color: var(--color-heading); font: inherit; font-weight: var(--weight-bold); }
.mb-hero__field :is(select, input)[hidden] { display: none; }
/* Own chevron (appearance: none removes the native one, which differed per platform). */
.mb-hero__field select { padding-right: 34px; text-overflow: ellipsis; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.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: 48px; white-space: nowrap; }

.mb-hero__below { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); width: 100%; margin-top: var(--space-1); }
.mb-hero__usps { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 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); }
.mb .mb-hero__secondary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); color: var(--color-on-inverse); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: .2em; }
.mb-hero__secondary:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-on-dark); outline-offset: 2px; }

/* 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; }

@media (max-width: 1023px) {
  .mb-hero__search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Phones and tablets: date and time side by side, then duration next to the button. */
  .mb-hero__search .mb-btn { 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-7) var(--space-5); }
  .mb-hero__lead { font-size: var(--text-body); }
  .mb-hero__below { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .mb-hero__usps { gap: var(--space-1) var(--space-4); font-size: var(--text-caption); }
}

/* ============================================================
   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: calc(-1 * var(--space-3)); left: var(--space-5); }
.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__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, same pieces as the menu panel, larger.
   ============================================================ */
.mb-event { padding-block: var(--space-7) var(--space-8); }
.mb-event__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-5); width: var(--content-width); margin-inline: auto; }
.mb-event .mb-event-intro { padding: var(--space-6); gap: var(--space-3); }
.mb .mb-event .mb-event-intro__title { margin: 0; font-size: var(--text-h2); }
.mb-event .mb-event-intro__text { font-size: var(--text-lead); }
.mb-event .mb-event-options { gap: var(--space-5); }
.mb-event .mb-event-option img { aspect-ratio: 3 / 2; }
.mb-event .mb-event-option__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.mb-event .mb-event-option strong { font-size: var(--text-h4); }
.mb-event .mb-event-option small { font-size: var(--text-body); }
.mb-event__note { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--text-small); font-weight: var(--weight-bold); }
@media (max-width: 1023px) { .mb-event__inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) {
  .mb-event { padding-block: var(--space-6) var(--space-7); }
  .mb-event .mb-event-intro { padding: var(--space-5); gap: var(--space-2); }
  .mb-event .mb-event-intro__text { font-size: var(--text-body); }
  .mb .mb-event .mb-event-intro__title { font-size: var(--text-h3); }
  .mb-event .mb-event-option strong { font-size: var(--text-body); }
  .mb-event .mb-event-option small, .mb-event .mb-event-option__price { font-size: var(--text-small); }
  .mb-event .mb-event-options { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  /* Options as compact rows: photo left, text right. */
  .mb-event .mb-event-option { flex-direction: row; }
  .mb-event .mb-event-option img { width: 38%; aspect-ratio: auto; object-fit: cover; }
  .mb-event .mb-event-option__body { padding: var(--space-3) var(--space-4); }
}

/* ============================================================
   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); }