/* ==========================================================================
   Tonecraft Piano Works — Scheduling Page
   SKELETON BUILD — 2026-08-27. Page-scoped styles only, loaded on the
   Scheduling page alone (see tcp_enqueue_scheduling_assets() in
   functions.php). Reuses global tokens/components from the main
   style.css (--tcp-* variables, .tcp-service-card, .tcp-btn,
   .tcp-contact-btn, .tcp-page-header) rather than redefining them —
   this file only holds what's genuinely specific to this page.
   ========================================================================== */

:root {
  /* ============================================================
     ============================================================
     CSS CONTROL PANEL — Scheduling page
     Every adjustable "knob" for this file lives here. Empty
     sections are expected to fill in as this page moves past its
     skeleton stage — see the CSS Control Panel convention in the
     project instructions doc.
     ============================================================
     ============================================================ */

  /* ---- Form layout ----
     --tcp-sched-grid-gap    px   gap between the form column and
       the "prefer to call" fallback column.
     --tcp-sched-field-gap   px   vertical spacing between stacked
       form fields. */
  --tcp-sched-grid-gap: 60px;
  --tcp-sched-field-gap: 20px;

  /* ---- "How it works" step cards ----
     --tcp-sched-steps-gap   px   gap between the three step cards
       (reuses .tcp-service-card styling from style.css, this only
       controls the grid gap for this 3-up layout). */
  --tcp-sched-steps-gap: 40px;
}

/* ===== How it works ===== */
.tcp-sched-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tcp-sched-steps-gap);
  margin-top: 8px;
}
/* .tcp-service-card is a global class (style.css) — reused here as-is
   for the flat gray-border look, no local override needed. These
   cards aren't links on this page, so cursor/hover-lift still apply
   but there's no navigation — acceptable for a skeleton; revisit if
   that reads as misleading once this page is reviewed. */

.tcp-sched-note {
  margin-top: 36px;
  font-size: .92rem;
  color: rgba(74, 75, 76, 0.68);
  max-width: 640px;
}

@media (max-width: 920px) {
  .tcp-sched-steps { grid-template-columns: 1fr; }
}

/* ===== Capture form + fallback ===== */
.tcp-sched-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--tcp-sched-grid-gap);
  align-items: start;
}

/* ===== Get Started — direct booking (v2.0) =====
   Replaces the removed on-site capture form. The page now explains the
   process and hands off; see page-scheduling.php's docblock for why the
   form was pulled out of the booking path. */
.tcp-sched-book-lede {
  margin: 18px 0 28px;
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: .01em;
  max-width: 46ch;
}

.tcp-sched-book-btn {
  display: inline-flex;
}

/* Sets the expectation that this link leaves for Gazelle, whose UI we
   cannot brand — an expected handoff rather than a jarring jump. */
.tcp-sched-book-note {
  margin: 12px 0 0;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
}

/* Secondary path in the fallback column — questions and quote-only work.
   Outlined, not filled: it must never compete with booking above. */
.tcp-sched-contact-btn {
  margin-top: 6px;
}

.tcp-sched-book-wrap h2,
.tcp-sched-form-wrap h2,
.tcp-sched-fallback h2 {
  font-size: 1.6rem;
  margin-bottom: 12px;
}

.tcp-sched-form {
  display: flex;
  flex-direction: column;
  gap: var(--tcp-sched-field-gap);
  margin-top: 24px;
}

.tcp-sched-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tcp-sched-field-gap);
}

.tcp-sched-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tcp-sched-field label {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tcp-burgundy);
  font-weight: 600;
}

.tcp-sched-field input,
.tcp-sched-field select,
.tcp-sched-field textarea {
  font-family: var(--tcp-font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid rgba(74, 75, 76, 0.28);
  border-radius: 3px;
  background: #ffffff;
  color: var(--tcp-charcoal);
  transition: border-color .3s var(--tcp-ease);
}

.tcp-sched-field input:focus,
.tcp-sched-field select:focus,
.tcp-sched-field textarea:focus {
  outline: none;
  border-color: var(--tcp-burgundy);
}

.tcp-sched-field textarea {
  resize: vertical;
}

.tcp-sched-submit {
  margin-top: 8px;
  align-self: flex-start;
}

.tcp-sched-status {
  min-height: 1.2em;
  font-size: .9rem;
  color: var(--tcp-burgundy);
  margin: 0;
}

.tcp-sched-fallback {
  border-top: 1px solid rgba(74, 75, 76, 0.22);
  padding-top: 24px;
}
.tcp-sched-fallback p {
  color: rgba(74, 75, 76, 0.68);
  margin-bottom: 20px;
}

@media (max-width: 920px) {
  .tcp-sched-grid { grid-template-columns: 1fr; }
  .tcp-sched-field-row { grid-template-columns: 1fr; }
  .tcp-sched-fallback { border-top: none; padding-top: 0; }
}

/* ===== Page-intro banner spacing (v1.7.0, page-scoped) =====
   Client-specified 35px header-bottom clearance applied here as a
   page-scoped override rather than editing the shared .tcp-page-
   header rule in style.css (which also serves the already-approved
   About/Services/Contact pages) — deliberately not touching that
   shared rule so those pages are unaffected; happy to extend the same
   treatment to them on request. Reads the same --tcp-header-height /
   --tcp-scroll-gap tokens as the sitewide scroll-landing system
   (style.css) so it stays in sync if that number ever changes. */
#tcp-scheduling .tcp-page-header {
  padding-top: calc(var(--tcp-header-height) + var(--tcp-scroll-gap));
}