/* ------------------------------------------------------------------
   /contact — inline booking, with our own loading state.

   Cal is slow to boot: measured, our page is interactive in ~84ms while
   Cal's iframe document alone takes ~1s and its app then fetches
   availability on top. We cannot make that faster, but we do not have to
   show Cal's skeleton while it happens.

   So the calendar mounts inline (no extra click) behind a skeleton drawn in
   our own palette, sized to the real calendar so nothing jumps when the swap
   happens. Cal's `linkReady` event flips the state and cross-fades it in.

   Cal's own event-details panel is turned off (hideEventTypeDetails) because
   the card above the calendar already says duration, format and agenda --
   otherwise the visitor reads it twice.
   ------------------------------------------------------------------ */

/* The landing's --zl-section-space (up to 9.5rem) is right for a narrative
   scroll, too airy for a single-purpose booking page. Tightened here only. */
#book {
  padding-block: clamp(2rem, 3.5vw, 3.25rem);
}

/* Calendar sits in the RIGHT column, the call details and supporting blocks
   in the left. .page-split defaults to 1.35fr/1fr; here the ratio is flipped
   so the calendar column stays at the reduced width asked for rather than
   growing into the wider track. */
#book .page-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
}

.cal-column {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  align-content: start;
}

/* The aside now stacks under the call details rather than beside them. */
.booking .page-aside {
  margin-top: clamp(.5rem, 1.5vw, 1.25rem);
}

.page-hero {
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
}

.booking {
  display: grid;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  align-content: start;
}

/* --- Call details, above the calendar -------------------------------- */
.booking-card {
  display: grid;
  gap: var(--zl-space-5);
  align-content: start;
}

.booking-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zl-space-2) var(--zl-space-4);
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
  letter-spacing: var(--zl-tracking-label);
  text-transform: uppercase;
}

.booking-card__meta span {
  display: flex;
  align-items: center;
  gap: var(--zl-space-2);
}

.booking-card__meta span + span::before {
  content: "";
  width: 1px;
  height: .85em;
  background: var(--zl-line-strong);
}

.booking-card h2 {
  max-width: 18ch;
  font-size: var(--zl-type-section-heading-size);
  line-height: var(--zl-leading-section);
}

.booking-card__covers {
  display: grid;
  gap: var(--zl-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.booking-card__covers li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: var(--zl-space-3);
  color: var(--zl-body);
  font-size: var(--zl-text-md);
  line-height: var(--zl-leading-copy);
}

.booking-card__covers li::before {
  margin-top: .45em;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--zl-cobalt);
  content: "";
}

/* --- The mount: skeleton, calendar, failure ------------------------- */
.cal-mount {
  position: relative;
  /* Holds the skeleton without jumping when Cal swaps in. Sized to the
     calendar as it renders in the narrower right-hand column. */
  min-height: 24rem;
  overflow: hidden;
  border: 1px solid var(--zl-line);
  background: var(--zl-surface);
}

/* Was width:125% + zoom:.8 to render Cal at 80%. zoom did NOT shrink the
   layout box here -- the frame stayed 125% wide and spilled past the mount
   border. The calendar is made smaller by narrowing its column instead (see
   #book .page-split), which Cal handles responsively with no transform. */
.cal-mount__frame {
  width: 100%;
  opacity: 0;
  transition: opacity var(--zl-duration-reveal) var(--zl-ease-standard);
}

.cal-mount[data-cal-state="ready"] .cal-mount__frame {
  opacity: 1;
}

.cal-mount[data-cal-state="ready"] .cal-mount__skeleton,
.cal-mount[data-cal-state="failed"] .cal-mount__skeleton {
  display: none;
}

.cal-mount__frame iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* Skeleton sits over the mount so the swap does not reflow the page. */
.cal-mount__skeleton {
  position: absolute;
  inset: 0;
  display: grid;
  gap: var(--zl-space-6);
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  pointer-events: none;
}

.cal-mount__skeleton-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zl-space-4);
}

/* Every skeleton block shares one pulse, offset per element so the grid
   ripples rather than flashing as a single slab. */
.sk {
  border-radius: 2px;
  background: var(--zl-wash);
  animation: sk-pulse 1.6s var(--zl-ease-standard) infinite;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.sk--title { width: 9rem; height: 1.1rem; }
.sk--nav { width: 4rem; height: 1.1rem; }

.cal-mount__skeleton-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--zl-space-2);
}

.cal-mount__skeleton-grid .sk {
  aspect-ratio: 1;
}

.cal-mount__status {
  display: flex;
  align-items: center;
  gap: var(--zl-space-3);
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
  letter-spacing: var(--zl-tracking-label);
  text-transform: uppercase;
}

.cal-mount__status::before {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--zl-cobalt);
  animation: sk-blink 1.2s var(--zl-ease-standard) infinite;
  content: "";
}

@keyframes sk-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

@keyframes sk-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

/* Shown only if Cal reports a failure or never becomes ready.
   The [hidden] guard is load-bearing: an author `display: grid` beats the UA
   stylesheet's `[hidden] { display: none }`, so without it the failure notice
   renders underneath the loading skeleton on every single visit. */
.cal-mount__failed {
  display: grid;
  gap: var(--zl-space-3);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--zl-body);
  font-size: var(--zl-text-sm);
  line-height: var(--zl-leading-copy);
}

.cal-mount__failed[hidden] {
  display: none;
}

.cal-mount__failed a,
.booking-card__alt a {
  color: var(--zl-cobalt);
  text-underline-offset: .2em;
}

.booking-card__alt {
  color: var(--zl-muted-text);
  font-size: var(--zl-text-sm);
  line-height: var(--zl-leading-copy);
}

@media (prefers-reduced-motion: reduce) {
  .sk,
  .cal-mount__status::before {
    animation: none;
  }
  .cal-mount__frame {
    transition: none;
  }
}

/* Compliance lockups are the landing's .trust-band__marks section verbatim --
   same four marks (GDPR, CCPA, DPDP, SOC 2), same sub-text, same component
   sizing. No overrides: the 2-column grid puts four marks in a tidy 2x2 in
   the sidebar, which is what the component was built to do. */

@media (max-width: 56rem) {
  /* page.css collapses .page-split to one column here, but the ratio above is
     scoped to #book -- an id beats a bare class no matter which rule sits in a
     media query -- so the collapse never reached this page. The calendar kept
     its .85fr track all the way down to a 146px column at 390px, where Cal
     draws its seven weekday headers and the date grid on top of each other,
     and the call details wrapped "A 15-minute intro call" over five lines.
     The collapse has to be restated at the same specificity to land. */
  #book .page-split { grid-template-columns: minmax(0, 1fr); }

  .booking-card h2 { max-width: 24ch; }
  .cal-mount { min-height: 22rem; }
}