/* ==========================================================================
   Maestro Burger — Design Tokens
   Source: Figma "Maestro" › Page 1 › "Maestro Finle Demo" (216:266)
   In Elementor: paste base (tokens.css + base.css) once in
   Site Settings › Custom CSS. Every block depends on these variables.
   ========================================================================== */

:root {
  /* ---- Colors ---- */
  --mb-red: #db2026;
  --mb-red-hover: #b9171c;
  --mb-dark: #202020;
  --mb-black: #000000;
  --mb-ink: #191919;
  --mb-light: #d7d7d7;
  --mb-white: #ffffff;
  --mb-muted: #9b9b9b;
  --mb-hero-from: #000000;
  --mb-hero-to: #4a4a4a;

  /* ---- Font families ---- */
  --mb-font-display: 'League Gothic', 'Bebas Neue', Impact, sans-serif; /* hero headline */
  --mb-font-heading: 'Bebas Neue', Impact, sans-serif;                 /* section titles */
  --mb-font-script: 'Pacifico', cursive;                               /* "Discover" */
  --mb-font-body: 'Lato', Arial, sans-serif;
  --mb-font-ui: 'Rubik', Arial, sans-serif;                            /* buttons, descriptions */
  --mb-font-quote: 'Roboto', Arial, sans-serif;                        /* testimonials */
  --mb-font-eyebrow: 'Inter', Arial, sans-serif;                       /* "Customers" */

  /* ---- Layout ---- */
  --mb-container: 1512px;
  --mb-gutter: clamp(16px, 5.3vw, 80px);
  --mb-section-y: clamp(48px, 6.6vw, 100px);

  /* ---- Radius / shadow ---- */
  --mb-radius-sm: 5px;
  --mb-radius-md: 8px;
  --mb-shadow-card: 0 35px 30px rgba(0, 0, 0, 0.1);

  /* ---- Motion ---- */
  --mb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mb-duration: 0.5s;
}

/* ==========================================================================
   Maestro Burger — Base (scoped to .mb so it never fights the WP theme)
   Resets use :where() = zero specificity, so block styles always win.
   ========================================================================== */

/* Hero font, bundled with the project (OFL licence) so the headline never
   depends on Google Fonts loading. */
@font-face {
  font-family: 'League Gothic';
  src: url('../assets/fonts/league-gothic.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:where(.mb),
:where(.mb) *,
:where(.mb) *::before,
:where(.mb) *::after {
  box-sizing: border-box;
}

.mb {
  font-family: var(--mb-font-body);
  color: var(--mb-black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(.mb) :where(h1, h2, h3, h4, p, ul, figure, blockquote) {
  margin: 0;
  padding: 0;
}

:where(.mb) ul { list-style: none; }

:where(.mb) img {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(.mb) a {
  color: inherit;
  text-decoration: none;
}

:where(.mb) button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:where(.mb) :focus-visible {
  outline: 2px solid var(--mb-red);
  outline-offset: 3px;
}

/* Smooth scrolling for the in-page nav (only on pages that use these blocks) */
html:has(.mb) { scroll-behavior: smooth; }

/* ---- Layout helpers ---- */
.mb-container {
  width: 100%;
  max-width: var(--mb-container);
  margin-inline: auto;
  padding-inline: var(--mb-gutter);
}

.mb-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Section title (eyebrow + heading) ---- */
.mb-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  letter-spacing: 0.5px;
}

.mb-title__eyebrow {
  color: var(--mb-red);
  font-size: clamp(18px, 2.8vw, 42.5px);
  line-height: 1.41;
}

.mb-title__eyebrow--script { font-family: var(--mb-font-script); }
.mb-title__eyebrow--sans   { font-family: var(--mb-font-eyebrow); font-size: clamp(16px, 2.54vw, 38.4px); }

.mb-title__heading {
  font-family: var(--mb-font-heading);
  font-weight: 400;
  font-size: clamp(32px, 6.6vw, 99.6px);
  line-height: 1;
  text-transform: uppercase;
}

/* ---- Buttons ---- */
.mb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--mb-red);
  border: 1px solid var(--mb-red);
  color: var(--mb-white);
  font-family: var(--mb-font-ui);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.mb-btn:hover {
  background: var(--mb-red-hover);
  border-color: var(--mb-red-hover);
}

.mb-btn:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .mb *, .mb *::before, .mb *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ===================== BLOCK 01 · HEADER =====================
   Figma: 216:279 (nav) · 216:283 (actions) · 216:289 (logo ribbon)
   Sits on top of the hero (absolute), so place it right before Block 02.
   ============================================================= */

.mb-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--mb-white);
}

.mb-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 183px;          /* centers nav on y≈91 like Figma */
}

/* ---- Nav ---- */
.mb-header__links {
  display: flex;
  gap: 34px;
}

.mb-header__link {
  font-family: var(--mb-font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
  text-transform: capitalize;
  transition: color 0.2s ease;
}

.mb-header__link:hover,
.mb-header__link.is-active { color: var(--mb-red); }

/* ---- Logo ribbon (hangs from the top edge) ---- */
.mb-header__logo {
  --logo-w: 207px;

  position: absolute;
  top: 0;
  left: 50%;
  width: var(--logo-w);
  transform: translateX(-50%);
}

.mb-header__logo img {
  width: 100%;
  height: auto;
}

/* ---- Actions ---- */
.mb-header__actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.mb-social {
  display: flex;
  align-items: center;
  gap: 24px;
}

.mb-social__link {
  display: block;
  width: 24px;
  height: 24px;
  transition: opacity 0.2s ease;
}

.mb-social__link:hover { opacity: 0.75; }

.mb-header__cta {
  width: 184px;
  height: 48px;
  font-size: 16px;
  border-radius: var(--mb-radius-md);
}

/* ---- Burger toggle (mobile only) ---- */
.mb-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 24px;
}

.mb-header__toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  margin-inline: auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--mb-ease), opacity 0.2s ease;
}

.mb-header.is-open .mb-header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mb-header.is-open .mb-header__toggle-bar:nth-child(2) { opacity: 0; }
.mb-header.is-open .mb-header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Drawer ---- */
.mb-drawer {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 120px var(--mb-gutter) 48px;
  background: rgba(20, 20, 20, 0.97);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mb-drawer[hidden] { display: none; }
.mb-header.is-open .mb-drawer { opacity: 1; }

.mb-drawer__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.mb-drawer__link {
  font-family: var(--mb-font-heading);
  font-size: 44px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.mb-drawer__link.is-active { color: var(--mb-red); }

.mb-drawer__cta {
  width: 100%;
  max-width: 320px;
  height: 52px;
  font-size: 18px;
  border-radius: var(--mb-radius-md);
}

/* ---- Tablet ---- */
@media (max-width: 1199px) {
  .mb-header__inner { min-height: 140px; }
  .mb-header__links { gap: 22px; }
  .mb-header__link { font-size: 16px; }
  .mb-header__cta { width: 150px; height: 44px; }
  .mb-header__logo { --logo-w: 160px; }
}

/* ---- Mobile (Figma "Mobill" 430) ---- */
@media (max-width: 767px) {
  .mb-header__inner { min-height: 72px; }
  .mb-header__nav,
  .mb-header__cta { display: none; }

  /* socials move to the left, burger to the right */
  .mb-header__actions { width: 100%; justify-content: space-between; }
  .mb-social { gap: 28px; }
  .mb-header__toggle { display: flex; }

  .mb-header__logo { --logo-w: 99px; z-index: 1; }
}

/* ===================== BLOCK 02 · HERO =====================
   Figma: 216:269 (desktop 1512×925) · background = frame "Banner" 242:40
   Mobile hero follows the 430px frame with the burger image.
   ============================================================ */

.mb-hero {
  position: relative;
  overflow: hidden;
  color: var(--mb-white);
  background:
    url('../assets/img/hero-bg.jpg') center top / cover no-repeat,
    linear-gradient(180deg, var(--mb-hero-from) 0%, var(--mb-hero-to) 140%);
}

.mb-hero__inner {
  position: relative;
  min-height: clamp(620px, 61.2vw, 925px);
}

/* ---- Text column ---- */
.mb-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: inherit;
  padding-top: clamp(150px, 15.2vw, 230px);
  padding-bottom: clamp(40px, 4.7vw, 71px);
}

.mb-hero__title {
  max-width: 4.6em;                    /* keeps the same 3-line wrap at every width */
  font-family: var(--mb-font-display);
  font-weight: 400;
  font-size: clamp(62px, 11.3vw, 171px);  /* League Gothic is narrower → same width as before */
  line-height: 0.9;
  text-transform: uppercase;
}

.mb-hero__title span { display: block; }

.mb-hero__text {
  max-width: 584px;
  font-family: var(--mb-font-body);
  font-size: clamp(14px, 1.19vw, 18px);
  line-height: 1.6;
  text-transform: uppercase;
}

/* ---- Media: single export of Figma "Group 7" (640×628) ---- */
.mb-hero__media {
  position: absolute;
  z-index: 1;
  top: clamp(130px, 14.4vw, 218px);
  right: 22px;
  width: clamp(300px, 42.33vw, 640px);
}

.mb-hero__burger {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.35));
}

/* ---- Tablet ---- */
@media (max-width: 1199px) {
  .mb-hero__title { max-width: 4.6em; }
  .mb-hero__text { max-width: 46%; }
}

/* ---- Mobile (430 frame) ---- */
@media (max-width: 767px) {
  .mb-hero__inner {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 12px;
  }

  .mb-hero__content {
    min-height: 0;
    padding: 83px 0 0;
    align-items: center;
    text-align: center;
  }

  .mb-hero__title {
    font-size: clamp(54px, 16vw, 70px);
    line-height: 1;
  }

  .mb-hero__text { display: none; }

  .mb-hero__media {
    position: relative;
    top: auto;
    right: auto;
    width: min(280px, 72vw);
    margin-top: 8px;
  }
}

/* ===================== BLOCK 03 · OUR BURGERS =====================
   Figma: 216:294 (desktop) · mobile = horizontal snap slider, centre card
   ================================================================== */

.mb-products {
  background: var(--mb-dark);
  color: var(--mb-white);
  padding-block: var(--mb-section-y);
}

.mb-products__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 4.23vw, 64px);
  padding-inline: clamp(16px, 7.94vw, 120px);
}

.mb-products__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 350px));
  justify-content: center;
  gap: clamp(32px, 6.08vw, 92px);
  width: 100%;
}

.mb-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  text-align: center;
}

.mb-product__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 287px;
}

.mb-product__media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.5s var(--mb-ease);
}

.mb-product:hover .mb-product__media img { transform: translateY(-6px) scale(1.03); }

.mb-product__name {
  min-height: 2em;                    /* keeps descriptions aligned */
  font-family: var(--mb-font-body);
  font-weight: 700;
  font-size: clamp(28px, 3.31vw, 50px);
  line-height: 1.14;                  /* 57 / 50 */
  text-transform: uppercase;
}

.mb-product__desc {
  min-height: 3.6em;
  max-width: 350px;
  font-family: var(--mb-font-ui);
  font-size: 16px;
  line-height: 1.8;
  color: var(--mb-muted);
  text-transform: uppercase;
}

.mb-products__cta {
  min-width: 196px;
  height: 48px;
  padding-inline: 23px;
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  border-radius: var(--mb-radius-sm);
}

/* ---- Tablet ---- */
@media (max-width: 1199px) {
  .mb-product__media { height: 220px; }
  .mb-product__desc { font-size: 14px; }
}

/* ---- Mobile: swipeable row, active card centred (Figma 366:160) ---- */
@media (max-width: 767px) {
  .mb-products { padding-block: 48px; }
  .mb-products__inner { gap: 32px; padding-inline: 0; }

  .mb-products__list {
    position: relative;               /* offsetLeft reference for script.js */
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc(50% - 122px);
    padding-inline: calc(50% - 122px);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .mb-products__list::-webkit-scrollbar { display: none; }

  .mb-product {
    flex: 0 0 244px;
    gap: 24px;
    scroll-snap-align: center;
    opacity: 0.45;
    transition: opacity 0.3s ease;
  }

  .mb-product.is-active { opacity: 1; }

  .mb-product__media { height: 198px; }
  .mb-product__name { font-size: 35px; line-height: 1.1; }
  .mb-product__desc { font-size: 11.5px; line-height: 1.5; }

  .mb-products__cta { min-width: 204px; height: 50px; font-size: 19px; }
}

/* ===================== BLOCK 04 · LOVELY WORDS =====================
   Figma: 216:335 · side cards are the same card at scale(.9) + 20% opacity
   (544 / 604 = 0.9), so one card size drives the whole slider.
   =================================================================== */

.mb-reviews {
  --card-w: 604.8px;
  --card-gap: 30px;

  overflow: hidden;
  background: var(--mb-light);
  padding: var(--mb-section-y) 0 clamp(24px, 3.4vw, 51px);
}

.mb-reviews__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 4.23vw, 64px);
}

.mb-reviews__title .mb-title__heading { color: var(--mb-dark); }

/* ---- Slider ---- */
.mb-reviews__slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.1vw, 32px);
  width: 100%;
  touch-action: pan-y;
  user-select: none;
}

.mb-reviews__track {
  display: grid;                      /* all cards share one cell → height = tallest */
  justify-items: center;
  width: 100%;
  padding-bottom: 40px;               /* room for the card shadow */
}

.mb-review {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: var(--card-w);
  max-width: none;
  min-height: 269.72px;
  padding: 44px 67px 40px;
  background: var(--mb-white);
  box-shadow: var(--mb-shadow-card);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.6s var(--mb-ease), opacity 0.6s var(--mb-ease);
  will-change: transform, opacity;
}

.mb-review.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  z-index: 2;
}

.mb-review.is-prev,
.mb-review.is-next {
  opacity: 0.2;
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
}

.mb-review.is-prev { transform: translateX(calc((var(--card-w) * 0.95 + var(--card-gap)) * -1)) scale(0.9); }
.mb-review.is-next { transform: translateX(calc(var(--card-w) * 0.95 + var(--card-gap))) scale(0.9); }

.mb-review__quote {
  font-family: var(--mb-font-quote);
  font-size: 18px;
  line-height: 1.8;
  color: var(--mb-black);
}

.mb-review__author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mb-review__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mb-red);
  color: var(--mb-white);
  font-family: var(--mb-font-heading);
  font-size: 20px;
  letter-spacing: 0.5px;
  line-height: 1;
}

.mb-review__name {
  font-family: var(--mb-font-heading);
  font-size: 28.8px;
  line-height: 1.1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--mb-black);
}

/* ---- Dots ---- */
.mb-reviews__dots {
  display: flex;
  align-items: center;
  gap: 20px;
}

.mb-reviews__dot {
  width: 7.2px;
  height: 7.2px;
  border-radius: 50%;
  background: var(--mb-red);
  opacity: 0.5;
  transition: width 0.3s var(--mb-ease), height 0.3s var(--mb-ease), opacity 0.3s ease;
}

.mb-reviews__dot[aria-selected="true"] {
  width: 16.8px;
  height: 16.8px;
  opacity: 1;
}

/* ---- Tablet ---- */
@media (max-width: 1199px) {
  .mb-reviews { --card-w: 520px; --card-gap: 24px; }
  .mb-review { padding: 36px 48px 32px; min-height: 240px; }
  .mb-review__quote { font-size: 16px; }
}

/* ---- Mobile (Figma 366:183) ---- */
@media (max-width: 767px) {
  .mb-reviews { --card-w: 320px; --card-gap: 16px; padding-top: 24px; }

  .mb-review {
    gap: 8px;
    min-height: 142.5px;
    padding: 16px 26px 10px;
  }

  .mb-review__quote { font-size: 14px; line-height: 1.5; }
  .mb-review__author { gap: 9px; }
  .mb-review__avatar { width: 26px; height: 26px; font-size: 11px; }
  .mb-review__name { font-size: 15px; letter-spacing: 0.3px; }

  .mb-reviews__track { padding-bottom: 20px; }
  .mb-reviews__dots { gap: 10px; }
  .mb-reviews__dot { width: 3.66px; height: 3.66px; }
  .mb-reviews__dot[aria-selected="true"] { width: 8.54px; height: 8.54px; }
}

/* ===================== BLOCK 05 · FOLLOW @MAESTRO =====================
   Figma: 216:357 · endless photo strip, drag with mouse or swipe (see script.js)
   ===================================================================== */

.mb-insta {
  --strip-h: 500px;
  --strip-gap: 40px;

  background: var(--mb-light);
  padding: clamp(24px, 3.4vw, 51px) 0 var(--mb-section-y);
}

.mb-insta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3.3vw, 50px);
}

/* ---- Follow button ---- */
.mb-insta__follow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 307px;
  height: 54px;
  padding-inline: 24px;
  border: 1px solid var(--mb-red);
  color: var(--mb-red);
  font-family: var(--mb-font-heading);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.mb-insta__follow-icon {
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url('../assets/icons/instagram.svg') center / contain no-repeat;
          mask: url('../assets/icons/instagram.svg') center / contain no-repeat;
}

.mb-insta__follow:hover {
  background: var(--mb-red);
  color: var(--mb-white);
}

/* ---- Photo strip ---- */
.mb-insta__strip {
  display: flex;
  gap: var(--strip-gap);
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;     /* swiping the strip never triggers browser back */
  cursor: grab;
}

.mb-insta__strip::-webkit-scrollbar { display: none; }
.mb-insta__strip.is-dragging { cursor: grabbing; }
.mb-insta__strip.is-dragging a { pointer-events: none; }

.mb-insta__item {
  flex: 0 0 auto;
  height: var(--strip-h);
  overflow: hidden;
}

/* Every photo keeps its own 785×500 ratio, so nothing gets cropped */
.mb-insta__item--wide      { aspect-ratio: 785 / 500; }
.mb-insta__item--landscape { aspect-ratio: 785 / 500; }

.mb-insta__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: transform 0.6s var(--mb-ease);
}

.mb-insta__item:hover img { transform: scale(1.04); }

/* ---- Tablet ---- */
@media (max-width: 1199px) {
  .mb-insta { --strip-h: 360px; --strip-gap: 24px; }
}

/* ---- Mobile (Figma 366:202) ---- */
@media (max-width: 767px) {
  .mb-insta { --strip-h: 197.75px; --strip-gap: 15.8px; padding-bottom: 48px; }
  .mb-insta__follow { min-width: 227.6px; height: 40px; font-size: 17px; letter-spacing: 2.2px; }
  .mb-insta__follow-icon { width: 16px; height: 16px; }
}

/* ===================== BLOCK 06 · EXPERIENCE TODAY =====================
   Figma: 216:366 (1512×616) · kept on mobile too (client request)
   Map = Google embed turned dark with a CSS filter (no API key needed).
   ======================================================================= */

.mb-map {
  --map-h: 616px;

  position: relative;
  display: flex;
  align-items: center;
  height: var(--map-h);
  overflow: hidden;
  background: #262626;
  color: var(--mb-white);
}

.mb-map__canvas {
  position: absolute;
  inset: 0;
}

.mb-map__frame {
  width: 100%;
  height: 100%;
  border: 0;
  /* light Google map → dark grey map with red pins, like the design */
  filter: invert(90%) hue-rotate(180deg) grayscale(0.85) contrast(0.95) brightness(0.9);
}

/* readability fade behind the text (left on desktop, bottom on mobile) */
.mb-map::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(32, 32, 32, 0.85) 0%, rgba(32, 32, 32, 0.4) 35%, transparent 60%);
  pointer-events: none;
}

/* ---- Content ---- */
.mb-map__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 19px;
  pointer-events: none;              /* map stays draggable around the text */
}

.mb-map__content > * { pointer-events: auto; }

.mb-map__title {
  font-family: var(--mb-font-heading);
  font-weight: 400;
  font-size: clamp(56px, 7.28vw, 110px);
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.mb-map__cta {
  min-width: 219.27px;
  height: 62px;
  padding-inline: 24px;
  font-family: var(--mb-font-heading);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ---- Tablet ---- */
@media (max-width: 1199px) {
  .mb-map { --map-h: 480px; }
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
  .mb-map { --map-h: 400px; align-items: flex-end; padding-bottom: 40px; }
  .mb-map::before {
    background: linear-gradient(180deg, transparent 35%, rgba(32, 32, 32, 0.9) 100%);
  }
  .mb-map__content { align-items: center; text-align: center; }
  .mb-map__title { font-size: 56px; }
  .mb-map__cta { min-width: 200px; height: 52px; font-size: 18px; }
}

/* ===================== BLOCK 07 · FOOTER =====================
   Figma: 216:374 (desktop) · 366:211 (mobile)
   ============================================================= */

.mb-footer {
  position: relative;
  overflow: hidden;
  /* Figma "Footer" export: grey + burger sketch on the left */
  background: var(--mb-light) url('../assets/img/footer-bg.jpg') left top / auto 100% no-repeat;
  color: var(--mb-black);
  padding-block: 50px;
}

.mb-footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
}

/* ---- Opening hours ---- */
.mb-footer__hours {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.mb-footer__label {
  display: flex;
  align-items: center;
  gap: 32px;
  width: min(698px, 100%);
  font-family: var(--mb-font-ui);
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: var(--mb-red);
  text-transform: uppercase;
  white-space: nowrap;
}

.mb-footer__label::before,
.mb-footer__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--mb-red);
  opacity: 0.6;
}

.mb-footer__time {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mb-font-body);
  font-weight: 900;
  font-size: 20px;
  line-height: 20px;
  text-transform: uppercase;
}

.mb-footer__time img { width: 24px; height: 24px; }

/* ---- Logo ---- */
.mb-footer__logo {
  width: min(482px, 80%);
  height: auto;
}

/* ---- Contact ---- */
.mb-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  font-style: normal;
  text-align: center;
}

.mb-footer__branch,
.mb-footer__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}

.mb-footer__branch {
  font-family: var(--mb-font-body);
  font-size: 16px;
}

.mb-footer__branch img { width: 24px; height: 24px; flex-shrink: 0; }

.mb-footer__phone {
  gap: 11px;
  font-family: var(--mb-font-body);
  font-weight: 900;
  font-size: 22.4px;
}

.mb-footer__phone img { width: 33.6px; height: 33.6px; }

.mb-footer__branch:hover,
.mb-footer__phone:hover { color: var(--mb-red); }

/* ---- Bottom bar ---- */
.mb-footer__bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 32px;
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 16px;
}

.mb-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-family: var(--mb-font-body);
}

.mb-footer__links a:hover,
.mb-footer__copy a:hover { color: var(--mb-red); }

.mb-footer__copy {
  font-family: var(--mb-font-quote);
  color: var(--mb-ink);
}

.mb-footer__copy a { text-transform: lowercase; }

/* ---- Tablet ---- */
@media (max-width: 1199px) {
  .mb-footer__bottom { flex-direction: column; align-items: center; text-align: center; }
  .mb-footer__links { justify-content: center; }
}

/* ---- Mobile (Figma 366:211) ---- */
@media (max-width: 767px) {
  .mb-footer { padding-block: 32px; }
  .mb-footer { background-position: -80px top; }
  .mb-footer__inner { gap: 13px; }

  .mb-footer__hours { gap: 9px; }
  .mb-footer__label { gap: 18px; font-size: 11px; line-height: 12px; }
  .mb-footer__time { font-size: 12px; line-height: 12px; gap: 5px; }
  .mb-footer__time img { width: 14px; height: 14px; }

  .mb-footer__logo { width: 198px; }

  .mb-footer__contact { gap: 15px; }

  /* icon sits above the address on mobile */
  .mb-footer__branch {
    flex-direction: column;
    gap: 5px;
    max-width: 310px;
    font-size: 14px;
    line-height: 1.2;
  }
  .mb-footer__branch img { width: 15px; height: 15px; }

  .mb-footer__phone { font-size: 20px; gap: 10px; }
  .mb-footer__phone img { width: 30px; height: 30px; }

  .mb-footer__bottom { margin-top: 16px; font-size: 13px; }
  .mb-footer__links { gap: 8px 16px; }
}