/* ======================================================================
   appointment.css — appointment.html
   ======================================================================

   Loaded after maison.css and scoped under .page-appointment. Everything
   structural comes from the shared .hm-* vocabulary; this file holds the
   two things the shared layer had no answer for yet:

     1. A form. This is the first page on the new system that carries one,
        so the field styling starts here rather than in maison.css — it
        moves up once a second page needs it (the professional login is
        next in the queue and almost certainly will).
     2. A statement band with no image behind it.

   Three class names in the markup are NOT .hm-*: .form-grid's replacement
   carries data-interest-slot, and .form-confirmation / .appointment-interest
   are kept because script.js reads them by name. Both of the latter are
   already styled by styles.css, so they are overridden here under the page
   scope — the same approach collection.css takes with the card markup
   renderGemstones() emits.
   ====================================================================== */

/* ----------------------------------------------------------------------
   1. Statement
   The one break in the page's rhythm, and unlike the homepage's band it
   has no photograph under it: there is no asset for this section and a
   stock-looking one would undercut a line about seeing things in person.
   Dark, quiet, one sentence.

   Set as a <p>, not a <blockquote>. The line was previously attributed to
   "- AURÉMO & CO", which is a house quoting itself; as a plain statement
   it says the same thing without borrowing the authority of a testimonial.
   ---------------------------------------------------------------------- */
.page-appointment .hm-statement {
  padding-block: clamp(var(--a-s8), 7vw, var(--a-s10));
}
/* Named, not `.hm-statement p`: the section holds two paragraphs — this
   one and the eyebrow label above it — and the loose selector set the
   label in 54px serif as well. */
.page-appointment .hm-statement__line {
  margin: 0;
  max-width: 24ch;
  font-family: var(--serif);
  font-weight: var(--a-w-display);
  font-size: var(--a-h2);
  line-height: 1.25;
  color: var(--a-night-ink);
}
.page-appointment .hm-statement .hm-label {
  /* No number: like the homepage's band, this is a pause between numbered
     sections rather than one of them. */
  margin-bottom: var(--a-s5);
}

/* ----------------------------------------------------------------------
   2. Booking layout
   Copy left, form right, and the form gets the wider column — it is the
   reason the page exists. Not the 50/50 .hm-split, which would leave the
   seven fields cramped against a column of prose that needs far less room.
   ---------------------------------------------------------------------- */
.page-appointment .hm-book {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(var(--a-s6), 6vw, var(--a-s9));
  align-items: start;
}

/* The numbered steps beside the form. A list, because it is one, and the
   order matters — which is also why the numbers are content rather than
   decoration and come from the counter, not from typed-in digits. */
.page-appointment .hm-steps {
  counter-reset: step;
  margin: var(--a-s6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--a-hairline);
}
.page-appointment .hm-steps li {
  display: grid;
  grid-template-columns: var(--a-s5) minmax(0, 1fr);
  gap: var(--a-s3);
  padding: var(--a-s3) 0;
  border-bottom: 1px solid var(--a-hairline);
  font-size: var(--a-small);
  color: var(--a-ink-soft);
}
.page-appointment .hm-steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  /* Type, so the darkened gold — see the token note in styles.css. */
  color: var(--a-gold-ink);
}

/* ----------------------------------------------------------------------
   3. The form
   The field vocabulary itself — .hm-form, .hm-field, .hm-select and the
   dressed-up open list — started here and moved to maison.css once
   professional-login.html needed the same controls. What is left below is
   only what belongs to this page: the two class names script.js reaches
   for by name.
   ---------------------------------------------------------------------- */

/* --- Confirmation ------------------------------------------------------
   Moved to maison.css on 15 August, unchanged in value, because the sourcing
   request form needs the same switch. Copying it would have made this page's
   version the silent standard for both. Look for .page-maison
   .form-confirmation there. */

/* --- Interest notice ---------------------------------------------------
   Written into the form by initAppointmentInterest() when the page is
   reached from a stone's page (appointment.html?gemstone=…). The class is
   the script's, so it is restyled rather than renamed. */
.page-appointment .appointment-interest {
  margin: 0 0 var(--a-s5);
  padding: var(--a-s2) 0 var(--a-s2) var(--a-s3);
  border: 0;
  border-left: 1px solid var(--a-gold);
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  text-transform: uppercase;
  color: var(--a-ink);
}

/* ----------------------------------------------------------------------
   4. Breakpoints
   ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .page-appointment .hm-book {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--a-s7);
  }
}

@media (max-width: 560px) {
  /* The form's own narrow-screen behaviour is in maison.css now. */
  .page-appointment .hm-steps li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--a-s1);
  }
}