/* ============================================================
   Shared overlays — the image lightbox and the consultation modal.
   Both are site furniture: the lightbox is opened by products, the
   Design Grid and journal entries; the modal by every "Request a
   consultation" on the site. Loaded on every front-end page.
   Tokens come from style.css; nothing here defines a colour.
   ============================================================ */

.ps-lightbox,
.ps-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ps-lightbox[hidden],
.ps-modal[hidden] { display: none; }

.ps-lightbox-backdrop,
.ps-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(37, 31, 25, 0.88);
  border: 0;
}

.ps-lightbox-inner {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
}

/* The image is never blown up past what the file actually holds: auto sizing
   renders it at its natural size, and the caps only ever shrink it. */
.ps-lightbox-inner img {
  display: block;
  width: auto;
  height: auto;
  max-width: 95vw;
  max-height: 95vh;
}

.ps-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-on-dark);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.ps-close:hover { color: var(--color-gold); }

/* Anything that opens the lightbox says so with the cursor. */
[data-ps-lightbox] { cursor: zoom-in; }

/* Scroll is frozen behind any overlay. */
body.ps-overlay-open { overflow: hidden; }

@media (max-width: 900px) {
  .ps-close { top: -40px; }
}

/* ---------- Consultation modal ---------- */

.ps-modal-backdrop { background: rgba(37, 31, 25, 0.78); }

.ps-modal-inner {
  position: relative;
  width: min(520px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-xl);
  background: var(--color-parchment);
  border: 1px solid var(--color-hairline);
}

.ps-modal-inner .ps-close {
  top: var(--space-sm);
  right: var(--space-sm);
  color: var(--color-label);
}

.ps-modal-inner h2 { margin: var(--space-xs) 0 var(--space-sm); }

.ps-form { margin-top: var(--space-lg); }

.ps-field {
  display: block;
  margin-bottom: var(--space-md);
}

.ps-field > span { display: block; margin-bottom: var(--space-xxs); }

.ps-req { color: var(--color-gold-ink); }
.ps-optional { text-transform: none; letter-spacing: 0; opacity: 0.7; }

.ps-field input,
.ps-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-ivory);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-none);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  font-weight: 300;
}

.ps-field input:focus,
.ps-field textarea:focus {
  outline: none;
  border-color: var(--color-gold-ink);
}

.ps-field textarea { resize: vertical; }

.ps-form-actions { margin: var(--space-lg) 0 0; }

.ps-form-feedback {
  margin: var(--space-sm) 0 0;
  min-height: 1.4em;
}

.ps-form-feedback.is-success { color: var(--color-success); }
.ps-form-feedback.is-error { color: var(--color-error); }