/* ==========================================================================
   guest-pages.css — the inquiry pages (stay/inquiry/event, stay/inquiry/extended)
   and the 404 page, on the guest-track families (design return 2026-09,
   boards S8 and S11; RETURN.md §3).

   Loads LAST on those pages (after lift.css). The legacy sheets they still
   carry no longer reach the families here (the legacy guard, main.css
   section 8), so this file only places them and styles the inquiry form
   (forms.css / lift.css markup, which has no family yet). Everything is
   scoped to the page's own wrappers (.page-hero--inquiry, .inquiry,
   .inquiry-ending, .nf) so it cannot reach another page. Tokens only.

   The inquiry FORMS are untouched in markup and behaviour (js/forms.js): the
   states below are CSS on the classes forms.js already toggles —
   .input--error, .form__field.has-error .error-text, .form__error-global
   .is-visible, .form__success.is-visible, fieldset[hidden], :disabled.
   ========================================================================== */

/* ── Inquiry hero (.page-hero, text only, no photo band) ───────────────── */
.page-hero--inquiry { padding-bottom: var(--space-lg); }
.page-hero--inquiry .page-hero__head > .kicker { margin-bottom: var(--space-sm); }
@media (min-width: 768px) {
  .page-hero--inquiry { padding-bottom: var(--space-12); }
}
@media (min-width: 1024px) {
  .page-hero--inquiry { padding-top: var(--space-18); }
}

/* ── Form + sidebar ─────────────────────────────────────────────────────── */
.inquiry { padding: 0; }
.inquiry .inquiry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}
@media (min-width: 768px) {
  .inquiry .inquiry-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); }
}
@media (min-width: 1024px) {
  .inquiry .inquiry-layout { gap: var(--space-2xl); }
}

/* the form: a white card; one column, two from 1024px */
.inquiry .form {
  max-width: none;
  margin: 0;
  padding: var(--space-lg) var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.inquiry .form fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.inquiry .form fieldset[hidden] { display: none; }
@media (min-width: 1024px) {
  .inquiry .form { padding: var(--space-xl); }
  .inquiry .form fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md) var(--space-lg);
    align-items: start;
  }
  .inquiry .form .form__submit,
  .inquiry .form .form__error-global { grid-column: 1 / -1; }
}

.inquiry .form .form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  min-width: 0;
  margin: 0;
}
.inquiry .form .form__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text);
}
.inquiry .form .input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--touch-target-comfortable);
  margin: 0;
  padding: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text);
  background-color: var(--color-white);
  border: var(--border-control) solid var(--color-text-light);
  border-radius: var(--radius-md);
  box-shadow: none;
  outline: none;
}
.inquiry .form select.input { padding-right: var(--space-10); }
.inquiry .form textarea.input { min-height: var(--space-32); resize: vertical; }
.inquiry .form .input::placeholder { color: var(--color-text-light); opacity: 1; }
@media (hover: hover) {
  .inquiry .form .input:hover { border-color: var(--color-text); }
}
/* focus: the focus colour border and the 3px ring */
.inquiry .form .input:focus,
.inquiry .form .input:focus-visible {
  border-color: var(--color-focus);
  outline: var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}
/* field error (forms.js: .input--error on the input, .has-error on the field) */
.inquiry .form .input--error,
.inquiry .form .input--error:hover,
.inquiry .form .input--error:focus { border-color: var(--color-error); box-shadow: none; }
.inquiry .form .error-text {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-error);
}

/* the submit keeps its classes (.btn.btn--accent.btn--lg.form__submit): the
   flat gold of the .btn family (SWEEP 8), over the legacy gradient and sizes */
.inquiry .form .form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: calc(var(--touch-target-comfortable) + var(--space-1));
  margin: var(--space-xs) 0 0;
  padding: 0 var(--space-7);
  background: var(--color-accent);
  border: var(--border-control) solid var(--color-accent);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: var(--leading-snug);
  white-space: normal;
  box-shadow: var(--shadow-gold);
  transform: none;
}
@media (hover: hover) {
  .inquiry .form .form__submit:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: var(--color-text);
    box-shadow: var(--shadow-gold-lg);
    transform: translateY(-2px);
  }
}
.inquiry .form .form__submit:active { background: var(--color-accent-dark); border-color: var(--color-accent-dark); box-shadow: none; transform: none; }
.inquiry .form .form__submit:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
/* sending (forms.js disables the submit while the request is out) */
.inquiry .form .form__submit:disabled {
  opacity: 1;
  background: var(--color-bg-alt);
  border-color: var(--color-bg-alt);
  color: var(--color-gray-600);
  box-shadow: none;
  transform: none;
  cursor: progress;
}

/* global error and success (forms.js writes the messages) */
.inquiry .form .form__error-global { margin: 0; }
.inquiry .form .form__error-global.is-visible {
  display: block;
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  color: var(--color-error);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-normal);
}
.inquiry .form .form__success { margin: 0; }
.inquiry .form .form__success.is-visible {
  display: block;
  padding: var(--space-lg);
  background: var(--color-white);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-lg);
}
.inquiry .form .form__success-text {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-normal);
  color: var(--color-success);
}

/* sidebar: .card boxes (the family look; not links, so they do not lift) */
.inquiry .inquiry__side { display: flex; flex-direction: column; gap: var(--space-md); }
.inquiry .inquiry-sidebar { display: flex; flex-direction: column; padding: var(--space-lg) var(--space-md); }
@media (min-width: 768px) {
  .inquiry .inquiry-sidebar { padding: var(--space-lg); }
}
.inquiry .inquiry-sidebar .inquiry-sidebar__title {
  margin: 0 0 var(--space-sm);
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: normal;
  color: var(--color-charcoal);
}
.inquiry .inquiry-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.inquiry .inquiry-sidebar__list li {
  display: grid;
  grid-template-columns: var(--space-5) minmax(0, 1fr);
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text);
}
.inquiry .inquiry-sidebar__list li::before { content: none; }
.inquiry .inquiry-sidebar__list li svg {
  width: calc(var(--space-4) + var(--space-0-5));
  height: calc(var(--space-4) + var(--space-0-5));
  margin-top: var(--space-0-5);
  color: var(--color-primary-dark);
}
.inquiry .inquiry-sidebar--contact { gap: var(--space-xs); }
.inquiry .inquiry-sidebar--contact .inquiry-sidebar__title { margin-bottom: var(--space-xs); }
.inquiry .inquiry-sidebar__link {
  display: flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--touch-target-min);
  font-weight: 700;
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.inquiry .inquiry-sidebar__link:hover { color: var(--color-text); }
.inquiry .inquiry-sidebar__link:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* ── Ending band (.ending--band) ────────────────────────────────────────
   From 768px the band shares a screen with the submit, so "Browse Rentals"
   steps back to outline (RETURN §1 item 9, Q-05); on phones it is a screen
   below and keeps the gold. */
.inquiry-ending { margin-top: var(--space-10); }
@media (min-width: 1024px) {
  .inquiry-ending { margin-top: var(--space-22); }
}
.inquiry-ending .ending__title { font-size: var(--text-display-md); line-height: var(--leading-snug); }
@media (min-width: 768px) {
  .inquiry-ending .btn--gold {
    background: var(--color-white);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    box-shadow: none;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .inquiry-ending .btn--gold:hover {
    background: var(--color-bg-accent);
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
    box-shadow: none;
    transform: none;
  }
}

/* ── 404 (was the page's own <style> block) ─────────────────────────────── */
.nf .nf__inner { max-width: calc(var(--container-md) + var(--space-24) + var(--space-4)); margin: 0 auto; }
.nf .nf__code { margin: 0 0 var(--space-3); color: var(--color-text-light); }
.nf .nf__title { margin: 0 0 var(--space-sm); }
.nf .nf__lead { margin: 0 0 var(--space-7); font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--color-gray-600); }
.nf .nf__doors { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin: 0 0 var(--space-10); }
.nf .card--door .kicker { margin: 0; text-transform: uppercase; }
@media (hover: hover) {
  .nf a.card--door:hover .card__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
}
.nf .nf__links { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.nf .nf__links .kicker { margin: 0 0 var(--space-xs); padding: 0; border: 0; }
.nf .nf__links .links-onward { grid-template-columns: minmax(0, 1fr); }
.nf .nf__call { margin: var(--space-xl) 0 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-gray-600); }
.nf .nf__call a { color: var(--color-primary-dark); font-weight: 700; white-space: nowrap; }
@media (min-width: 768px) {
  .nf .nf__doors,
  .nf .nf__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}