/* ---- Enquire Now modal ----
   Shell (overlay/panel open-close transition, inert-driven visibility,
   close button) mirrors staff-modal.css's conventions exactly — the site's
   only other modal — sized for a compact single-screen form dialog instead
   of a media+bio split. Form content inside the panel is styled entirely
   by form.css (.field/.field__input) and contact.css (.contact-form__group,
   .option-toggle, .contact-form__controls) — this file only adds the
   modal-scoped shell and the one layout override noted below. Open/close
   state lives in the data-enquiry-modal-open attribute (matches
   staff-modal's data-staff-modal-open / nav.css's data-subnav-open
   convention), not a class. Uses --z-modal (tokens.css), same as
   staff-modal. */

.enquiry-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--duration-base) var(--ease-standard),
    visibility 0s linear var(--duration-base);
}

.enquiry-modal[data-enquiry-modal-open="true"] {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.enquiry-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(27, 26, 23, 0.6);
  backdrop-filter: blur(6px);
}

.enquiry-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 48rem;
  max-height: min(820px, 92vh);
  overflow-y: auto;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-10) var(--space-8);
  transform: translateY(16px) scale(0.98);
  filter: blur(6px);
  transition:
    transform var(--duration-slow) var(--ease-standard),
    filter var(--duration-slow) var(--ease-standard);
}

.enquiry-modal[data-enquiry-modal-open="true"] .enquiry-modal__panel {
  transform: translateY(0) scale(1);
  filter: blur(0);
}

@media (min-width: 768px) {
  .enquiry-modal__panel {
    padding: var(--space-12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .enquiry-modal,
  .enquiry-modal__panel {
    transition: none;
  }
}

.enquiry-modal__panel .heading-h3 {
  margin-bottom: var(--space-8);
  padding-right: var(--space-10);
}

/* Single "Send enquiry" button (no Back button, unlike the Contact page's
   step controls) — the shared .contact-form__controls rule spaces two
   buttons with space-between; with only one child that leaves it flush
   left, so push it to the trailing edge here instead. */
.enquiry-modal__panel .contact-form__controls {
  justify-content: flex-end;
}

/* Placeholder tone — same value as .contact-form__panel's placeholder
   override (contact.css), scoped here since the modal's fields sit in
   .enquiry-modal__panel, not .contact-form__panel. */
.enquiry-modal__panel .field__input::placeholder,
.enquiry-modal__panel .field__textarea::placeholder {
  color: rgba(27, 26, 23, 0.35);
}

/* Tighter than the shared .contact-form__group's default space-10 —
   the Contact page's step layout has room to spare, but this single-
   screen modal reads better with "Your details" and "Preferred contact
   method" pulled closer together. */
.enquiry-modal__panel .contact-form__group--split {
  margin-bottom: var(--space-6);
}

/* ---- Success state (post-submit) — centered card with the brand mark,
   a personalized heading (text set via JS, see enquiry-modal.js), and a
   Close button so the confirmation isn't a dead end reachable only via
   Escape/backdrop/the corner ✕. Independent of contact.css's
   .contact-form__success (used by the Contact page's own step form) —
   this is a deliberately richer treatment scoped to the modal only. */
.enquiry-modal__success {
  align-items: center;
  padding-block: var(--space-6);
  text-align: center;
}

.enquiry-modal__success-logo {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
}

.enquiry-modal__success .body-large {
  max-width: 28rem;
  color: var(--color-text-muted);
}

/* ---- Close button — same visual spec as staff-modal__close ---- */
.enquiry-modal__close {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.enquiry-modal__close svg {
  width: 16px;
  height: 16px;
}

.enquiry-modal__close:hover {
  background: var(--color-bg-alt);
}

.enquiry-modal__close:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}