/* =============================================================
   Form dialog (inc/dialog.php + assets/js/dialog.js)
   Schedule a Tour on listings, Join our list (wide variant, no photo)
   on the rentals archives.

   Layout follows the client's mock-up (Website Notes.docx, screens
   3-5): form column with a gold heading band, decorative photo on
   the right, close X top-right. Contrast: the band is --logo-gold
   with --ink text (7.83:1). The mock-up's white-on-gold (2.3:1) is
   intentionally not reproduced.

   <= 720px: full-screen sheet, photo hidden, the close button stays
   pinned while the form scrolls, 44px targets. Reflows at 320px and
   200% zoom (WCAG 1.4.10).
   ============================================================= */

.tx-dialog { display: none; }

html.tx-dialog-open { overflow: hidden; }

.tx-dialog.is-open {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) + 10);
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}

/* No-JS fallback: the trigger is an in-page link, the dialog renders
   as a normal section at the end of the page. */
.tx-dialog:target:not(.is-enhanced) {
  display: block;
  padding: var(--section-y) var(--gutter);
  background: var(--surface-page);
}
.tx-dialog:target:not(.is-enhanced) .tx-dialog__backdrop,
.tx-dialog:target:not(.is-enhanced) .tx-dialog__close { display: none; }
.tx-dialog:target:not(.is-enhanced) .tx-dialog__panel {
  margin-inline: auto;
  max-height: none;
}

.tx-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 26, 0.72);
}

.tx-dialog__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: min(100%, 960px);
  max-height: calc(100vh - 2 * var(--s-5));
  max-height: calc(100dvh - 2 * var(--s-5));
  overflow: hidden;
  background: var(--surface-content);
  color: var(--text);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-popup);
}

.tx-dialog__panel--no-media {
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 680px);
}

/* Wide variant (Join our list): no photo, compact header, and the form
   laid out in four columns (contact-form-7.css .tx-cf7-grid--join) so
   the whole list form fits a 1366x768 laptop screen without scrolling
   inside the dialog. The body keeps overflow-y:auto as the fallback for
   short windows and 200% zoom (WCAG 1.4.4 / 1.4.10). */
.tx-dialog__panel--wide { width: min(100%, 1000px); }
.tx-dialog__panel--wide .tx-dialog__body { padding-bottom: var(--s-4); }
.tx-dialog__panel--wide .tx-dialog__band {
  margin-top: 0;
  padding: var(--s-3) calc(var(--s-6) + 44px) var(--s-3) var(--s-6);
}
.tx-dialog__panel--wide .tx-dialog__title { font-size: clamp(1.5rem, 2.2vw, 1.75rem); }
.tx-dialog__panel--wide .tx-dialog__content { padding: var(--s-4) var(--s-6) 0; }
.tx-dialog__panel--wide .tx-dialog__intro { margin-bottom: var(--s-3); }
.tx-dialog__panel--wide .tx-dialog__intro p { margin: 0; }
.tx-dialog__panel--wide .wpcf7 .wpcf7-response-output {
  margin: var(--s-3) 0 0;
  padding: var(--s-2) var(--s-3);
}
.tx-dialog__intro a[href^="tel:"] { white-space: nowrap; }

@media (min-width: 721px) and (max-height: 760px) {
  .tx-dialog.is-open { padding: var(--s-3); }
  .tx-dialog__panel {
    max-height: calc(100vh - 2 * var(--s-3));
    max-height: calc(100dvh - 2 * var(--s-3));
  }
}

.tx-dialog__panel:focus { outline: none; }
.tx-dialog__panel:focus-visible {
  outline: 3px solid var(--slate-blue-2);
  outline-offset: -3px;
}

.tx-dialog__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--s-5);
}

.tx-dialog__band {
  margin: var(--s-7) 0 0;
  padding: var(--s-4) var(--s-6);
  background: var(--logo-gold);
  color: var(--ink);
}

.tx-dialog__eyebrow {
  margin: 0 0 var(--s-1);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
}

.tx-dialog__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--ink);
}

.tx-dialog__content { padding: var(--s-5) var(--s-6) 0; }

.tx-dialog__intro {
  margin-bottom: var(--s-4);
  font-family: var(--font-prose);
  color: var(--text-muted);
  line-height: var(--lh-body);
}
.tx-dialog__intro p { margin: 0 0 var(--s-2); }
.tx-dialog__intro a { color: var(--link); font-weight: 600; }

.tx-dialog .wpcf7 textarea { min-height: 6.5rem; }

.tx-dialog__success { text-align: center; }

.tx-dialog__badge {
  display: inline-block;
  margin: var(--s-2) 0 var(--s-4);
  padding: var(--s-3) var(--s-6);
  background: var(--logo-gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tx-dialog__badge:focus { outline: none; }
.tx-dialog__badge:focus-visible {
  outline: 2px solid var(--slate-blue-2);
  outline-offset: 3px;
}

.tx-dialog__success p {
  margin: 0 auto var(--s-3);
  max-width: 46ch;
  font-family: var(--font-prose);
  line-height: var(--lh-body);
}

.tx-dialog__note { font-style: italic; color: var(--text-muted); }

.tx-dialog__success-cta { margin-top: var(--s-5) !important; }

.tx-dialog__media { position: relative; min-height: 100%; background: var(--slate-blue); }
.tx-dialog__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tx-dialog__close {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-content);
  color: var(--ink);
  box-shadow: var(--elev-2);
  cursor: pointer;
}
.tx-dialog__close:hover { background: var(--cream); }
.tx-dialog__close:focus-visible {
  outline: 2px solid var(--slate-blue-2);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .tx-dialog.is-open {
    padding: 0;
    align-items: stretch;
  }
  /* Close button gets its own row so it never covers a field while
     the form scrolls underneath. */
  .tx-dialog__panel,
  .tx-dialog__panel--no-media {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
  .tx-dialog__close {
    position: static;
    flex: none;
    align-self: flex-end;
    margin: var(--s-2) var(--s-2) var(--s-1);
    box-shadow: none;
  }
  .tx-dialog__body { flex: 1 1 auto; min-height: 0; }
  .tx-dialog__media { display: none; }
  .tx-dialog__band,
  .tx-dialog__panel--wide .tx-dialog__band { margin-top: 0; padding: var(--s-3) var(--s-4); }
  .tx-dialog__content,
  .tx-dialog__panel--wide .tx-dialog__content { padding: var(--s-4) var(--s-4) 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .tx-dialog.is-open .tx-dialog__backdrop { animation: tx-dialog-fade var(--dur-base) var(--ease-out); }
  .tx-dialog.is-open .tx-dialog__panel { animation: tx-dialog-rise var(--dur-base) var(--ease-out); }
  @keyframes tx-dialog-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tx-dialog-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

@media print {
  .tx-dialog { display: none !important; }
}