/* ---------------------------------------------------------------------------
   The dialog chrome, and the enquiry inside it.

   Two sections. The first is the frame every pop-up in the theme wears — the
   rooms gallery on the catalogue, the enquiry here — and it lived in
   catalogue.css until the About page needed a dialog without needing the
   catalogue's two thousand lines. The catalogue sheet now takes this one as a
   dependency, so there is still exactly one definition of it.

   The second is the enquiry itself, moved out of tables.css for the same
   reason: the table archive and the About page open the same dialog.
   ------------------------------------------------------------------------ */

.mf-modal {
  width: min(64rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--paper-bright);
  color: var(--text);
  box-shadow: var(--lift);
  overflow: hidden;
}

.mf-modal::backdrop {
  background: rgba(20, 21, 24, 0.66);
}

/* iOS scrolls the page under a modal; pin it while one is open. */
body.mf-modal-open {
  overflow: hidden;
}

.mf-modal__frame {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2rem);
}

.mf-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.85rem, 2vw, 1.25rem) clamp(1rem, 2.5vw, 1.6rem);
  border-bottom: 1px solid var(--rule-soft);
}

.mf-modal__title {
  margin: 0;
  font-size: var(--step-1);
}

.mf-modal__close {
  cursor: pointer;
}

.mf-modal__body {
  padding: clamp(1rem, 2.5vw, 1.6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------------------------
   The enquiry
   ------------------------------------------------------------------------ */

.mf-enquiry {
  display: grid;
  gap: 0.9rem;
  max-width: 44ch;
}

.mf-enquiry__text {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--type-body);
  line-height: 1.5;
}

.mf-enquiry__text[hidden] {
  display: none;
}

.mf-enquiry__ways {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-enquiry__ways .button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.mf-enquiry__address {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--type-meta);
}