/*
 * Monster Blocks: front-end styles. Uses Monster Theme's --mt-* variables when
 * present, with plain fallbacks otherwise. The device rules (column widths per row
 * setting, spacer heights, hiding by device) are added after this file from the
 * site's or page's breakpoints (render.php: monster_blocks_responsive_css()).
 */

.mb-content { overflow-wrap: break-word; }

/* Full-width rows break out of the content column in CSS, so nothing moves on load. */
html:has(.mb-row--full, .mb-row--full_content) body { overflow-x: clip; }

/* Rows */
.mb-row {
	--mb-gap: var(--mb-gap-d, 30px);
	position: relative;
	margin-bottom: var(--mb-after, 30px);
	padding-top: var(--mb-pt, 0);
	padding-bottom: var(--mb-pb, 0);
	background-position: center;
	background-size: cover;
}
.mb-row--full,
.mb-row--full_content {
	/* --mb-vw is the visible width without the scrollbar (measured in the page head). */
	width: var(--mb-vw, 100vw);
	margin-right: calc(50% - var(--mb-vw, 100vw) / 2);
	margin-left: calc(50% - var(--mb-vw, 100vw) / 2);
}
.mt-layout-boxed .mb-row--full,
.mt-layout-boxed .mb-row--full_content {
	width: min(var(--mb-vw, 100vw), var(--mt-box-width, 1240px));
	margin-right: calc(50% - min(var(--mb-vw, 100vw), var(--mt-box-width, 1240px)) / 2);
	margin-left: calc(50% - min(var(--mb-vw, 100vw), var(--mt-box-width, 1240px)) / 2);
}
.mb-row--full_content > .mb-row__inner {
	max-width: calc(var(--mt-content-width, 1200px) + 2 * var(--mt-pad, 20px));
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--mt-pad, 20px);
	padding-left: var(--mt-pad, 20px);
}
.mb-row__overlay { position: absolute; inset: 0; pointer-events: none; }
.mb-row__inner { position: relative; display: flex; flex-wrap: wrap; align-items: var(--mb-valign, stretch); gap: var(--mb-gap, 30px); }
.mb-row--custom-text h1, .mb-row--custom-text h2, .mb-row--custom-text h3,
.mb-row--custom-text h4, .mb-row--custom-text h5, .mb-row--custom-text h6 { color: inherit; }

/* Columns: widths add up exactly, gaps included. */
.mb-col {
	--mb-w: var(--mb-w-d, 1);
	--mb-off: var(--mb-off-d, 0);
	flex: 0 0 calc(var(--mb-w) * 100% - var(--mb-gap, 30px) * (1 - var(--mb-w)));
	min-width: 0;
	/* Offset: the width of an empty column of that size, plus its gap. */
	margin-left: calc(var(--mb-off) * (100% + var(--mb-gap, 30px)));
}
.mb-col > :last-child { margin-bottom: 0; }

.mb-align-left { text-align: left; }
.mb-align-center { text-align: center; }
.mb-align-right { text-align: right; }

/* Text */
.mb-text { margin-bottom: 1.2em; }
.mb-text > :last-child { margin-bottom: 0; }

/* Heading */
.mb-heading { margin-bottom: var(--mb-after, 20px); }
.mb-heading__title { margin: 0; color: inherit; }
.mb-heading .mb-heading__title { color: var(--mt-heading, inherit); }
.mb-heading[style*="color:"] .mb-heading__title, .mb-row--custom-text .mb-heading__title { color: inherit; }
.mb-heading__title--sized { font-size: var(--mb-size); }
.mb-heading__sub { margin: 0.4em 0 0; color: var(--mt-muted, #777); font-size: 1.05em; }

/* Image */
.mb-image { margin: 0 0 1.2em; }
.mb-image__img { display: inline-block; width: 100%; max-width: var(--mb-max, 100%); height: auto; border-radius: var(--mb-radius, 0); vertical-align: middle; }
.mb-image figcaption { margin-top: 0.5em; color: var(--mt-muted, #777); font-size: 0.875em; }

/* Button */
.mb-btn-wrap { margin-bottom: 1.2em; }
.mb-btn { background: var(--mb-btn, var(--mt-accent, #c00)); color: var(--mb-btn-text, var(--mt-accent-text, #fff)); }
.mb-btn:hover { background: var(--mb-btn, var(--mt-accent-hover, #a00)); color: var(--mb-btn-text, var(--mt-accent-text, #fff)); filter: brightness(1.08); }
.mb-btn--outline { border: 2px solid var(--mb-btn, var(--mt-accent, #c00)); background: transparent; color: var(--mb-btn, var(--mt-accent, #c00)); }
.mb-btn--outline:hover { background: var(--mb-btn, var(--mt-accent, #c00)); color: var(--mb-btn-text, var(--mt-accent-text, #fff)); }
.mb-btn--s { padding: calc(var(--mt-button-py, 12px) * 0.7) calc(var(--mt-button-px, 22px) * 0.7); font-size: 0.875em; }
.mb-btn--l { padding: calc(var(--mt-button-py, 12px) * 1.3) calc(var(--mt-button-px, 22px) * 1.3); font-size: 1.15em; }
.mb-btn--full { display: flex; width: 100%; }
.mb-btn .mt-icon { width: 1.1em; height: 1.1em; }

/* Spacer (tablet and phone heights come with the device rules) */
.mb-spacer { height: var(--mb-h, 30px); }

/* Divider */
hr.mb-divider { width: var(--mb-width, 100%); margin: var(--mb-space, 20px) auto; border: 0; border-top: var(--mb-line); }
.mb-divider--title { display: flex; align-items: center; gap: 16px; width: var(--mb-width, 100%); margin: var(--mb-space, 20px) auto; }
.mb-divider--title::before, .mb-divider--title::after { flex: 1; border-top: var(--mb-line); content: ""; }
.mb-divider__title { display: inline-flex; align-items: center; gap: 0.5em; color: var(--mt-heading, inherit); font-family: var(--mt-font-heading, inherit); font-weight: var(--mt-heading-weight, 700); text-transform: var(--mt-heading-transform, none); }

/* Icon box */
.mb-iconbox { margin-bottom: 1.2em; }
.mb-iconbox__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 12px; border-radius: 50%; background: color-mix(in srgb, currentColor 12%, transparent); color: var(--mt-accent, #c00); }
.mb-iconbox__icon .mt-icon { width: 30px; height: 30px; }
.mb-iconbox__title { margin: 0 0 0.4em; font-size: var(--mt-h4, 20px); }
.mb-iconbox__title a { color: inherit; text-decoration: none; }
.mb-iconbox__text { margin: 0; }
.mb-iconbox--left { display: flex; align-items: flex-start; gap: 16px; text-align: left; }
.mb-iconbox--left .mb-iconbox__icon { flex: none; margin-bottom: 0; }

/* FAQ toggle */
.mb-toggle { margin-bottom: 10px; border-bottom: 1px solid var(--mt-border, #ddd); }
.mb-toggle__q { position: relative; padding: 14px 32px 14px 0; color: var(--mt-heading, inherit); font-family: var(--mt-font-heading, inherit); font-weight: var(--mt-heading-weight, 700); cursor: pointer; list-style: none; }
.mb-toggle__q::-webkit-details-marker { display: none; }
.mb-toggle__q::after { position: absolute; top: 50%; right: 6px; width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ""; transform: translateY(-70%) rotate(45deg); transition: transform 0.2s; }
.mb-toggle[open] .mb-toggle__q::after { transform: translateY(-30%) rotate(-135deg); }
.mb-toggle__a { padding: 0 0 14px; }
.mb-toggle__a > :last-child { margin-bottom: 0; }

/* Named Dropdown buttons */
.mb-dd { --mb-dd-bg: var(--mt-accent, #c00); --mb-dd-text: var(--mt-accent-text, #fff); margin: 0 0 16px; }
.mb-dd__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 84px;
	padding: 18px 22px;
	border-radius: 12px;
	background: var(--mb-dd-bg);
	color: var(--mb-dd-text);
	font-family: var(--mt-font-heading, inherit);
	font-size: 23px;
	font-weight: var(--mt-heading-weight, 700);
	line-height: 1.12;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
	-webkit-tap-highlight-color: transparent;
	transition: filter 0.15s;
}
.mb-dd__btn::-webkit-details-marker { display: none; }
.mb-dd__btn::marker { content: ""; }
.mb-dd__btn:hover { filter: brightness(1.08); }
.mb-dd__btn:active { filter: brightness(0.88); }
.mb-dd__btn:focus-visible { outline: 3px solid var(--mb-dd-bg); outline-offset: 3px; }
.mb-dd__name { flex: 1 1 auto; }
.mb-dd__btn::after { flex: none; width: 14px; height: 14px; margin: -8px 6px 0 0; border-right: 4px solid currentColor; border-bottom: 4px solid currentColor; content: ""; transform: rotate(45deg); transition: transform 0.2s; }
.mb-dd[open] > .mb-dd__btn { border-radius: 12px 12px 0 0; }
.mb-dd[open] > .mb-dd__btn::after { margin-top: 8px; transform: rotate(-135deg); }
.mb-dd__panel { padding: 20px 18px 8px; border: 2px solid var(--mb-dd-bg); border-top: 0; border-radius: 0 0 12px 12px; background: var(--mb-dd-panel, color-mix(in srgb, currentColor 6%, transparent)); font-size: var(--mb-dd-size, inherit); }
.mb-dd[open] > .mb-dd__panel { animation: mb-dd-open 0.25s ease-out; }
.mb-dd__panel > :first-child { margin-top: 0; }
.mb-dd__panel > :last-child { margin-bottom: 12px; }
.mb-dd--m .mb-dd__btn { min-height: 64px; padding: 14px 18px; font-size: 19px; }
.mb-dd--s .mb-dd__btn { min-height: 48px; padding: 10px 16px; font-size: 16px; }
.mb-dd--m .mb-dd__btn::after, .mb-dd--s .mb-dd__btn::after { width: 10px; height: 10px; border-width: 0 3px 3px 0; }
@keyframes mb-dd-open { from { opacity: 0; transform: translateY(-6px); } }

/* Video: a cover with a play button until pressed */
.mb-video { position: relative; height: 0; margin-bottom: 1.2em; padding-top: var(--mb-ratio, 56.25%); overflow: hidden; background: #111; }
.mb-video iframe, .mb-video__play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mb-video__play { padding: 0; background: #111; cursor: pointer; }
.mb-video__poster { width: 100%; height: 100%; object-fit: cover; }
.mb-video__icon { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--mt-accent, #c00); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
.mb-video__icon::after { position: absolute; top: 50%; left: 54%; border-width: 14px 0 14px 22px; border-style: solid; border-color: transparent transparent transparent #fff; content: ""; transform: translate(-50%, -50%); }

.mb-code { margin-bottom: 1.2em; }

/* Images in galleries and carousels */
.mb-media { position: relative; margin: 0; }
.mb-media a { display: block; }
.mb-media__img { display: block; width: 100%; height: auto; }
.mb-media a:hover .mb-media__img { opacity: 0.92; }
.mb-media figcaption { margin-top: 6px; color: var(--mt-muted, #777); font-size: 0.875em; }
.mb-gallery--cropped .mb-media, .mb-carousel--cropped .mb-media { overflow: hidden; }
.mb-gallery--cropped .mb-media::before, .mb-carousel--cropped .mb-media::before { display: block; padding-top: var(--mb-ratio); content: ""; }
.mb-gallery--cropped .mb-media__img, .mb-carousel--cropped .mb-media__img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: var(--mb-focus, center); }
.mb-gallery--cropped figcaption, .mb-carousel figcaption { position: absolute; right: 0; bottom: 0; left: 0; margin: 0; padding: 18px 12px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); color: #fff; }

/* Gallery */
.mb-gallery { --mb-cols: var(--mb-cols-d, 3); margin-bottom: 1.2em; }
.mb-gallery--grid { display: grid; grid-template-columns: repeat(var(--mb-cols), minmax(0, 1fr)); gap: var(--mb-gap, 12px); }
.mb-gallery--masonry { column-count: var(--mb-cols); column-gap: var(--mb-gap, 12px); }
.mb-gallery--masonry .mb-media { margin-bottom: var(--mb-gap, 12px); break-inside: avoid; }

/* Carousel */
.mb-carousel { --mb-per: var(--mb-per-d, 1); position: relative; margin-bottom: 1.2em; }
.mb-carousel__track { display: flex; align-items: stretch; gap: var(--mb-gap, 0px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mb-carousel__track::-webkit-scrollbar { display: none; }
.mb-carousel__track:focus-visible { outline: 2px solid var(--mt-accent, #c00); outline-offset: 2px; }
.mb-carousel__slide { flex: 0 0 calc((100% - (var(--mb-per) - 1) * var(--mb-gap, 0px)) / var(--mb-per)); min-width: 0; scroll-snap-align: start; }
.mb-carousel__arrow { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.mb-carousel.has-dots .mb-carousel__arrow { top: calc(50% - 15px); }
.mb-carousel__arrow:hover { background: var(--mt-accent, #c00); }
.mb-carousel__arrow--prev { left: 10px; }
.mb-carousel__arrow--next { right: 10px; }
.mb-carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.mb-carousel__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--mt-border, #ccc); cursor: pointer; }
.mb-carousel__dot.is-active { background: var(--mt-accent, #c00); }

/* Posts grid */
.mb-posts { --mb-cols: var(--mb-cols-d, 3); margin-bottom: 1.2em; }
.mb-posts--grid { display: grid; grid-template-columns: repeat(var(--mb-cols), minmax(0, 1fr)); gap: 24px; }
.mb-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--mt-border, #e2e2e2); background: var(--mt-page-bg, #fff); }
.mb-card__media { position: relative; display: block; overflow: hidden; }
.mb-card__img { display: block; width: 100%; height: auto; }
.mb-card__img--empty { min-height: 160px; background: var(--mt-surface, #f2f2f2); }
.mb-posts--cropped .mb-card__media::before { display: block; padding-top: var(--mb-ratio); content: ""; }
.mb-posts--cropped .mb-card__img { position: absolute; inset: 0; height: 100%; min-height: 0; object-fit: cover; object-position: var(--mb-focus, center); }
.mb-card__body { display: flex; flex: 1; flex-direction: column; padding: 18px; }
.mb-card__date { margin: 0 0 6px; color: var(--mt-muted, #777); font-size: 0.85em; }
.mb-card__title { margin: 0 0 8px; font-size: 1.15rem; }
.mb-card__title a { color: inherit; text-decoration: none; }
.mb-card__text { margin: 0 0 12px; }
.mb-card__btn { align-self: flex-start; margin-top: auto; }
.mb-posts--overlay .mb-card { position: relative; overflow: hidden; border: 0; }
.mb-posts--overlay .mb-card__body { position: absolute; right: 0; bottom: 0; left: 0; flex: none; padding: 40px 18px 18px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); }
.mb-posts--overlay .mb-card__title, .mb-posts--overlay .mb-card__date, .mb-posts--overlay .mb-card__text { color: #fff; }

/* Counter */
.mb-counter { margin-bottom: 1.2em; }
.mb-counter__icon { display: inline-flex; margin-bottom: 6px; color: var(--mt-accent, #c00); }
.mb-counter__icon .mt-icon { width: 40px; height: 40px; }
.mb-counter__number { margin: 0; color: var(--mt-accent, #c00); font-family: var(--mt-font-heading, inherit); font-size: clamp(2rem, 5vw, 3.2rem); font-variant-numeric: tabular-nums; font-weight: var(--mt-heading-weight, 700); line-height: 1.1; }
.mb-counter__label { margin: 0.3em 0 0; color: var(--mt-heading, inherit); font-weight: 600; text-transform: var(--mt-heading-transform, none); }

/* Social icons */
.mb-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1.2em; padding: 0; list-style: none; }
.mb-social.mb-align-center { justify-content: center; }
.mb-social.mb-align-right { justify-content: flex-end; }
.mb-social a { display: inline-flex; align-items: center; justify-content: center; width: var(--mb-size, 40px); height: var(--mb-size, 40px); background: var(--mt-accent, #c00); color: var(--mt-accent-text, #fff); text-decoration: none; transition: filter 0.15s; }
.mb-social a:hover { filter: brightness(1.12); }
.mb-social--round a { border-radius: 50%; }
.mb-social--square a { border-radius: var(--mt-radius, 4px); }
.mb-social--plain a { background: none; color: var(--mt-heading, inherit); }
.mb-social .mt-icon { width: calc(var(--mb-size, 40px) * 0.45); height: calc(var(--mb-size, 40px) * 0.45); }

/* Quote */
.mb-quote { margin: 0 0 1.2em; }
.mb-quote p { margin: 0 0 0.6em; }
.mb-quote--line { padding: 0.2em 0 0.2em 1.2em; border-left: 4px solid var(--mt-accent, #c00); font-size: 1.1em; font-style: italic; }
.mb-quote--big { padding: 0; border: 0; font-family: var(--mt-font-heading, inherit); font-size: clamp(1.3rem, 3vw, 1.8rem); text-align: center; }
.mb-quote--big::before { display: block; color: var(--mt-accent, #c00); font-size: 3em; line-height: 0.6; content: "\201C"; }
.mb-quote__cite { display: block; color: var(--mt-muted, #777); font-size: 0.9rem; font-style: normal; }
.mb-quote__cite strong { color: var(--mt-heading, inherit); }

/* Message box */
.mb-message { margin: 0 0 1.2em; padding: 14px 18px; border-left: 4px solid; border-radius: var(--mt-input-radius, 0); color: #1d2327; }
.mb-message > :last-child { margin-bottom: 0; }
.mb-message a { color: inherit; }
.mb-message--info { border-color: #2271b1; background: #eef5fb; }
.mb-message--success { border-color: #1e8e3e; background: #e9f6ec; }
.mb-message--warning { border-color: #d29b00; background: #fdf6e3; }
.mb-message--error { border-color: #d63638; background: #fcebec; }

/* Map: a panel until the visitor asks for the map */
.mb-map { position: relative; height: var(--mb-h, 400px); margin-bottom: 1.2em; overflow: hidden; border-radius: var(--mt-input-radius, 0); background: var(--mt-surface, #eee); }
.mb-map iframe { width: 100%; height: 100%; border: 0; }
.mb-map__cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; padding: 20px; text-align: center; }
.mb-map__cover .mt-icon { width: 36px; height: 36px; color: var(--mt-accent, #c00); }
.mb-map__address { margin: 0; color: var(--mt-heading, inherit); font-weight: 600; }
.mb-map__open { font-size: 0.875em; }

/* Progress bars */
.mb-progress { margin-bottom: 1.2em; }
.mb-progress__item { margin-bottom: 14px; }
.mb-progress__label { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--mt-heading, inherit); font-weight: 600; }
.mb-progress__track { height: 10px; overflow: hidden; border-radius: 999px; background: var(--mt-surface, #eee); }
.mb-progress__bar { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--mb-bar, var(--mt-accent, #c00)); transition: width 1.2s ease; }
.mb-progress.is-in .mb-progress__bar { width: var(--mb-value); }

/* Lightbox */
.mb-lightbox { position: fixed; inset: 0; z-index: 100100; display: flex; align-items: center; justify-content: center; padding: 40px 64px; background: rgba(0, 0, 0, 0.92); }
.mb-lightbox[hidden] { display: none; }
.mb-lightbox figure { margin: 0; text-align: center; }
.mb-lightbox img { max-width: 100%; max-height: calc(100vh - 120px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); object-fit: contain; }
.mb-lightbox figcaption { margin-top: 10px; color: #eee; }
.mb-lightbox button { position: absolute; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 28px; line-height: 48px; cursor: pointer; }
.mb-lightbox button:hover { background: var(--mt-accent, #c00); }
.mb-lightbox__close { top: 16px; right: 16px; }
.mb-lightbox__prev { top: 50%; left: 12px; transform: translateY(-50%); }
.mb-lightbox__next { top: 50%; right: 12px; transform: translateY(-50%); }

.mb-booking, .mb-products { margin-bottom: 1.2em; }

@media (max-width: 600px) {
	.mb-lightbox { padding: 56px 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.mb-progress__bar { width: var(--mb-value); transition: none; }
	.mb-dd[open] > .mb-dd__panel { animation: none; }
	.mb-dd__btn::after { transition: none; }
}