/* ==========================================================================
   MODAL
   Generic, reusable overlay. Any element with `data-modal-target="#id"`
   opens the modal with that id (see modal.js) — nothing here is specific
   to the contact use-case, so this same markup pattern can back any
   future modal (a video lightbox, a plan comparison, etc).

   Entrance: backdrop fades in; panel fades + slides up slightly + scales
   from 96% -> 100% (matches the soft-expansion motion used elsewhere on
   the page); inner content (eyebrow/heading/fields) stagger in just after,
   the same pattern as the header nav links.
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  visibility: hidden;
}

.modal.is-open { visibility: visible; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, 0.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out-soft);
}

.modal.is-open .modal__backdrop { opacity: 1; }

.modal__panel {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -20px rgba(8, 8, 10, 0.45);
  padding: var(--sp-6);
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition: opacity var(--dur-med) var(--ease-out-soft),
              transform var(--dur-med) var(--ease-out-soft);
}

.modal.is-open .modal__panel {
  opacity: 1;
  transform: none;
}

.modal__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--color-ink);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-soft);
  z-index: 2;
}

.modal__close:hover { background: var(--color-accent); color: var(--color-white); transform: rotate(90deg); }
.modal__close svg { width: 16px; height: 16px; }

.modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

.modal__info,
.modal__form > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-med) var(--ease-out-soft),
              transform var(--dur-med) var(--ease-out-soft);
}

.modal.is-open .modal__info,
.modal.is-open .modal__form > * {
  opacity: 1;
  transform: none;
}

.modal.is-open .modal__info               { transition-delay: 80ms; }
.modal.is-open .modal__form > *:nth-child(1) { transition-delay: 140ms; }
.modal.is-open .modal__form > *:nth-child(2) { transition-delay: 180ms; }
.modal.is-open .modal__form > *:nth-child(3) { transition-delay: 220ms; }
.modal.is-open .modal__form > *:nth-child(4) { transition-delay: 260ms; }
.modal.is-open .modal__form > *:nth-child(5) { transition-delay: 300ms; }

.modal__info h2 { font-size: var(--fs-h2); margin-top: var(--sp-1); }
.modal__info > p:not(.eyebrow) { margin-top: var(--sp-2); color: var(--color-ink-soft); max-width: 34ch; }

.modal__contact-list {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.modal__contact-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modal__contact-list strong {
  font-size: var(--fs-small);
  font-weight: var(--fw-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
}

.modal__contact-list a { color: var(--color-ink); font-weight: var(--fw-subheading); transition: color var(--dur-fast) ease; }
.modal__contact-list a:hover { color: var(--color-accent); }

.modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: var(--fw-subheading);
  color: var(--color-ink-soft);
}

.modal__field input,
.modal__field textarea {
  font-family: var(--font-display);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  color: var(--color-ink);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  resize: vertical;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.modal__field input:focus,
.modal__field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-white);
}

.modal__form .btn { align-self: flex-start; margin-top: var(--sp-1); }

.modal__form-note {
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}

.modal__form-note.is-success { color: var(--color-accent); }
.modal__form-note.is-error { color: #c94f4f; }

/* Honeypot — off-screen, not display:none (some bots skip hidden fields
   but still fill positioned-off-canvas ones), aria-hidden and untabbable
   so it's invisible to real visitors and assistive tech alike. */
.modal__field-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 720px) {
  .modal__panel { padding: var(--sp-4); max-height: 92vh; }
  .modal__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ---- Detail modal (treatment / team member) ---- */
.detail-modal__content { max-width: 60ch; }
.detail-modal__content h2 { font-size: var(--fs-h2); margin-top: var(--sp-1); }
.detail-modal__content > p#detail-modal-body { margin-top: var(--sp-3); color: var(--color-ink-soft); }
.detail-modal__content .btn { margin-top: var(--sp-4); }

.detail-modal__gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.detail-modal__thumb {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-soft);
}

.detail-modal__thumb:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.detail-modal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Lightbox ---- */
.modal__panel--lightbox {
  background: transparent;
  box-shadow: none;
  padding: 0;
  width: min(1100px, 100%);
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.modal__panel--lightbox #lightbox-image {
  max-width: 100%;
  max-height: 86vh;
  border-radius: var(--radius-md);
  display: block;
  box-shadow: 0 40px 80px -20px rgba(8, 8, 10, 0.6);
}

.modal__panel--lightbox .modal__close {
  top: -14px;
  right: -14px;
  background: var(--color-white);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-soft);
  z-index: 2;
}

.lightbox__nav:hover { background: var(--color-accent); border-color: var(--color-accent); transform: translateY(-50%) scale(1.06); }
.lightbox__nav--prev { left: var(--sp-4); }
.lightbox__nav--next { right: var(--sp-4); }
.lightbox__nav svg { width: 20px; height: 20px; }

@media (max-width: 720px) {
  .detail-modal__thumb { width: 64px; height: 64px; }
  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox__nav--prev { left: var(--sp-2); }
  .lightbox__nav--next { right: var(--sp-2); }
}