/* =========================================================================
   Appointment page — shares the .cxp system (portfolio.css + home.css).
   Only adds appt-specific pieces: hero, "how it works" steps, booking card.
   ========================================================================= */

/* ---- Hero ---- */
.cxp-appt__hero { padding-top: clamp(3.5rem, 9vw, 7rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); text-align: center; }
.cxp-appt__hero .cxp__eyebrow { margin-inline: auto; }
.cxp-appt__hero h1 { margin: 1.3rem auto 1.1rem; max-width: 15ch; font-size: clamp(2.4rem, 1.7rem + 3vw, 4.75rem); }
.cxp-appt .cxp-appt__hero .cxp-appt__heroSub {
  color: var(--muted); font-size: 1.12rem; max-width: 52ch;
  margin-top: 0; margin-bottom: 2.1rem;
  margin-left: auto !important; margin-right: auto !important; /* beat theme p-margin reset */
  text-align: center;
}
.cxp-appt__heroActions { display: flex; justify-content: center; gap: 0.9rem; flex-wrap: wrap; }

/* ---- How it works (3 steps) ---- */
.cxp-appt__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.cxp-appt__step {
  background: var(--shell); border: 1px solid var(--hairline); border-radius: var(--r-outer);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cxp-appt__step:hover { transform: translateY(-4px); box-shadow: var(--soft-shadow); }
.cxp-appt__stepNo { font-family: "Cormorant Garamond", serif; font-weight: 700; font-size: 2.2rem; color: var(--accent); line-height: 1; }
.cxp-appt__step h3 { margin: 0.6rem 0 0.5rem; }
.cxp-appt__step p { color: var(--muted); font-size: 0.95rem; }

/* ---- Booking card (wraps the LatePoint form) ---- */
.cxp-appt__bookWrap { max-width: 960px; margin-inline: auto; }
.cxp-appt__formCard {
  background: var(--shell); border: 1px solid var(--hairline); border-radius: var(--r-outer);
  padding: clamp(0.55rem, 1.5vw, 1rem); box-shadow: var(--soft-shadow);
}
.cxp-appt__formInner {
  background: var(--surface); border-radius: var(--r-inner);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
  padding: clamp(1rem, 3vw, 2rem); min-height: 120px;
}
/* Nudge the LatePoint widget to breathe inside the card */
.cxp-appt__formInner .latepoint-w, .cxp-appt__formInner .latepoint_form { max-width: 100%; }

/* Fallback note if the booking widget is unavailable */
.cxp-appt__fallback { text-align: center; color: var(--muted); font-family: "Poppins", sans-serif; font-size: 0.95rem; }
.cxp-appt__fallback a { color: var(--accent-ink); text-decoration: underline; }

/* ---- Responsive ---- */
@media (max-width: 820px) { .cxp-appt__steps { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .cxp-appt__heroActions .cxp__island { flex: 1; justify-content: center; }
}