@import url("./fonts.css");
/* Directions page — rooms typography (Inter + Cormorant + Libris ADF Std), texture body from mm-topbar */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mm-dir {
  color: var(--mm-ink, #0a0a0a);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* --- Hero image --- */
.mm-dir-hero {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  line-height: 0;
}

.mm-dir-hero__frame {
  position: relative;
  width: 100%;
  height: min(52vh, 560px);
  overflow: hidden;
}

.mm-dir-hero__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 47%;
}

/* Narrow screens: `cover` crops left/right, so object-position Y barely moves; scale + origin recenters the crop. */
@media (max-width: 900px) {
  .mm-dir-hero__img {
    object-position: center 47%;
    transform: scale(1.18);
    transform-origin: 50% 46%;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .mm-dir-hero__img {
    transform: none;
  }
}

/* --- Centered intro band --- */
.mm-dir-sheet {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--mm-shell-pad, 24px);
  box-sizing: border-box;
}

.mm-dir-intro {
  text-align: center;
}

.mm-dir-intro .mm-dir-kicker {
  margin: 0 0 clamp(18px, 3vw, 28px);
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-size: clamp(11px, 1.2vw, 12px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mm-ink, #0a0a0a);
}

.mm-dir-intro__text {
  margin: 0 0 1rem;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.7;
  color: rgba(10, 10, 10, 0.78);
}

.mm-dir-intro__text:last-of-type {
  margin-bottom: clamp(22px, 3vw, 32px);
}

.mm-dir-cta {
  display: inline-block;
  padding: 14px 28px;
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mm-ink, #0a0a0a);
  border: 1px solid rgba(180, 140, 115, 0.85);
  border-radius: 2px;
  background: transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mm-dir-cta:hover {
  background: var(--mm-ink, #0a0a0a);
  color: #fff;
  border-color: var(--mm-ink, #0a0a0a);
}

/* --- By car / transit --- */
.mm-dir-by {
  padding-top: clamp(28px, 4vw, 48px);
}

.mm-dir-section-title {
  margin: 0 0 clamp(22px, 3vw, 36px);
  font-family: "Mediteran Display", Georgia, serif;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: #8a6a4a;
  text-transform: uppercase;
}

.mm-dir-block {
  margin-bottom: clamp(28px, 4vw, 40px);
}

.mm-dir-block:last-child {
  margin-bottom: 0;
}

.mm-dir-block__k {
  margin: 0 0 12px;
  font-family: "Inter", ui-sans-serif, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mm-ink, #0a0a0a);
}

.mm-dir-block p {
  margin: 0 0 12px;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.75;
  color: rgba(10, 10, 10, 0.82);
}

.mm-dir-block p:last-child {
  margin-bottom: 0;
}

/* --- Google Map embed --- */
.mm-dir-gmap {
  width: 100%;
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding: 0;
  background: #e8e8e4;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}

.mm-dir-gmap iframe,
.mm-dir-gmap__placeholder {
  width: 100%;
  height: min(420px, 55vh);
  border: 0;
  display: block;
}

/* Subtle gradient on the placeholder so it doesn't look like empty space
   while the map waits to load. Same dimensions as the iframe so the page
   doesn't shift when the iframe takes over. */
.mm-dir-gmap__placeholder {
  background: linear-gradient(135deg, #d8d8d2 0%, #e8e8e4 100%);
}