/* ==========================================================================
   CG LABS, booking.css
   Vanilla port of _extract/code/CalBooking.tsx (Framer, React + framer-motion).

   Every colour, radius and easing comes from the tokens already defined in
   main.css. The only new values are the local --bk-* variables below, which
   exist because the original leaned on rgba() ink washes that main.css does
   not expose, and because the accent needs a pre-multiplied glow (no
   color-mix dependency).

   Loaded on the homepage and the contact page (both carry the "LET'S TALK"
   booking section verified against the live site's reference screenshots).
   ========================================================================== */

.booking {
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
}

.booking__intro {
  text-align: center;
  max-width: 34ch;
  margin-inline: auto;
  margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
  position: relative;
  z-index: 1;
}
.booking__intro .t-lead {
  margin-top: 0.7rem;
  font-size: var(--fs-body);
}

/* "LET'S TALK." variant: eyebrow + big bold heading, matches home + contact. */
.booking__intro--talk { max-width: 40ch; }
.booking__intro--talk .t-label { margin-bottom: 0.6rem; }
.booking__talk-heading {
  font-size: clamp(2rem, 1.3rem + 3.3vw, 3.5rem);
  letter-spacing: -0.04em;
}

/* Interactive canvas-grid background (assets/js/canvas-grid.js), sits behind
   the intro and the card. Only present when bookingWidget({canvasBg:true}). */
.booking--canvas .wrap { position: relative; z-index: 1; }
.booking__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.booking--canvas .bk { position: relative; z-index: 1; }

/* ------------------------------------------------------------------- card */

.bk {
  /* Framer used #6366F1. The port uses the site's own brand accent so the
     widget does not introduce a second accent colour. */
  --bk-accent: var(--primary);
  --bk-accent-glow: rgba(249, 69, 45, 0.26);
  --bk-accent-glow-2: rgba(249, 69, 45, 0.34);
  --bk-on-accent: var(--white);

  --bk-fill: rgba(12, 12, 12, 0.04);
  --bk-fill-2: rgba(12, 12, 12, 0.08);
  --bk-dim: var(--ink-faint);
  --bk-past: rgba(12, 12, 12, 0.2);
  --bk-err: #d92d20;
  --bk-err-bg: rgba(217, 45, 32, 0.08);
  --bk-err-line: rgba(217, 45, 32, 0.24);
  --bk-shadow: 0 4px 24px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);

  container-type: inline-size;
  container-name: bk;

  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--bk-shadow);
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  .bk {
    --bk-fill: rgba(255, 255, 255, 0.06);
    --bk-fill-2: rgba(255, 255, 255, 0.12);
    --bk-past: rgba(255, 255, 255, 0.22);
    --bk-err: #ff7a6d;
    --bk-err-bg: rgba(255, 122, 109, 0.1);
    --bk-err-line: rgba(255, 122, 109, 0.26);
    --bk-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
  }
}

/* ----------------------------------------------------------- card header */

.bk__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.bk__event {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
}
.bk__event-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk__event-len {
  font-weight: 400;
  color: var(--bk-dim);
  white-space: nowrap;
}

.bk__pip {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bk-accent);
  box-shadow: 0 0 8px var(--bk-accent-glow);
}

.bk__tz {
  font-size: var(--fs-xs);
  color: var(--bk-dim);
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------- card body */

.bk__body {
  padding: 1.1rem;
  min-height: 320px;
}

/* Several rules below set an explicit display on elements that are also
   toggled with the hidden attribute, and they match with equal specificity.
   This keeps hidden meaning hidden without having to order the file around it. */
.bk [hidden] { display: none !important; }

.bk__view.is-current {
  animation: bk-in 0.32s var(--ease) both;
}
@keyframes bk-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.bk__cols {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.bk__cal { min-width: 0; }
.bk__times { min-width: 0; display: flex; flex-direction: column; }

/* ----------------------------------------------------------- month strip */

.bk__monthbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.bk__month {
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
  flex: 1;
  min-width: 0;
}

.bk__nav {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--ink);
  background: transparent;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.bk__nav[disabled] { color: var(--bk-dim); cursor: default; }
@media (hover: hover) {
  .bk__nav:not([disabled]):hover { background: var(--bk-fill); }
}

/* --------------------------------------------------------- weekday strip */

.bk__week,
.bk__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.bk__week {
  margin-bottom: 0.25rem;
}
.bk__week-day {
  text-align: center;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--bk-dim);
  padding-block: 0.35rem;
}
.bk__week-day abbr { text-decoration: none; border: 0; }

/* ---------------------------------------------------------------- days */

.bk__days { gap: 2px; }

.bk__day,
.bk__day--skeleton,
.bk__day--blank {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  max-height: 40px;
  border-radius: 10px;
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--ink);
  background: transparent;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

/* Placeholder cells that ship in the static HTML. They reserve the grid's
   final height so nothing shifts when JS swaps in the real buttons. */
.bk__day--skeleton { background: var(--bk-fill); opacity: 0.5; }

button.bk__day { cursor: pointer; }
button.bk__day[disabled] { cursor: default; color: var(--bk-dim); }
button.bk__day.is-past { color: var(--bk-past); }

@media (hover: hover) {
  button.bk__day:not([disabled]):not([aria-pressed="true"]):hover { background: var(--bk-fill); }
}

button.bk__day[aria-pressed="true"] {
  background: var(--bk-accent);
  color: var(--bk-on-accent);
  font-weight: 600;
  box-shadow: 0 2px 12px var(--bk-accent-glow);
}

/* Availability marker, hidden from AT: the button's aria-label already says
   how many times are free. */
.bk__day-mark {
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bk-accent);
  opacity: 0.75;
}
button.bk__day[aria-pressed="true"] .bk__day-mark { display: none; }

.bk__day.is-today::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  pointer-events: none;
}
button.bk__day[aria-pressed="true"].is-today::after { display: none; }

.bk__note {
  margin-top: 0.75rem;
  font-size: var(--fs-xs);
  color: var(--bk-dim);
  min-height: 1.2em;
}
.bk__note.is-error { color: var(--bk-err); }

.bk__retry {
  margin-left: 0.4rem;
  font-size: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------- times */

.bk__empty {
  color: var(--bk-dim);
  font-size: var(--fs-sm);
  text-align: center;
  padding-block: 1.5rem;
}

.bk__times-inner { display: flex; flex-direction: column; gap: 0.75rem; }

.bk__times-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.bk__day-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.bk__clock {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  flex: none;
}
.bk__clock-btn {
  padding: 0.28rem 0.6rem;
  font-size: var(--fs-xs);
  color: var(--bk-dim);
  background: transparent;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.bk__clock-btn[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 600;
  background: var(--bk-fill);
}

.bk__slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.bk__slots:empty { display: none; }

.bk__slot {
  padding: 0.65rem 0.35rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bk-fill);
  color: var(--ink);
  font-size: var(--fs-xs);
  text-align: center;
  white-space: nowrap;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
@media (hover: hover) {
  .bk__slot:not([aria-pressed="true"]):hover { border-color: var(--ink-faint); }
}
.bk__slot[aria-pressed="true"] {
  background: var(--bk-accent);
  border-color: var(--bk-accent);
  color: var(--bk-on-accent);
  font-weight: 600;
  box-shadow: 0 2px 12px var(--bk-accent-glow);
}

/* ------------------------------------------------------------- controls */

.bk__cta {
  width: 100%;
  padding: 0.82rem 1.5rem;
  border-radius: 12px;
  background: var(--bk-accent);
  color: var(--bk-on-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 16px var(--bk-accent-glow);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), opacity 0.2s var(--ease);
}
@media (hover: hover) {
  .bk__cta:not([disabled]):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 24px var(--bk-accent-glow-2);
  }
}
.bk__cta[disabled] {
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}

.bk__back {
  padding: 0.82rem 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bk-fill);
  color: var(--ink-mut);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
@media (hover: hover) {
  .bk__back:hover { border-color: var(--ink-faint); color: var(--ink); }
}

/* ----------------------------------------------------------- form view */

.bk__view[data-view="form"] {
  max-width: 440px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.bk__chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  background: var(--bk-fill);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink);
}

.bk__field { display: flex; flex-direction: column; gap: 0.35rem; }
.bk__field label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-mut);
  letter-spacing: 0.01em;
}
.bk__req { color: var(--bk-err); margin-left: 2px; }

.bk__field input,
.bk__field textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: var(--bk-fill);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  resize: none;
  transition: border-color 0.2s var(--ease);
}
.bk__field input::placeholder,
.bk__field textarea::placeholder { color: var(--bk-dim); }
.bk__field input:focus,
.bk__field textarea:focus { border-color: var(--ink-faint); }
.bk__field input[aria-invalid="true"],
.bk__field textarea[aria-invalid="true"] { border-color: var(--bk-err); }

.bk__error {
  font-size: var(--fs-xs);
  color: var(--bk-err);
  background: var(--bk-err-bg);
  border: 1px solid var(--bk-err-line);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}

.bk__actions { display: flex; gap: 0.6rem; }
.bk__actions .bk__back { flex: none; }
.bk__actions .bk__cta { flex: 1; width: auto; }

/* ----------------------------------------------------------- done view */

.bk__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  min-height: 280px;
  padding-block: 1.25rem;
}

.bk__check { color: var(--bk-accent); margin-bottom: 0.5rem; }
.bk__check path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.bk__view.is-current .bk__check path {
  animation: bk-tick 0.5s var(--ease) 0.2s both;
}
@keyframes bk-tick {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

.bk__done-title {
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.bk__done-title:focus { outline: none; }
.bk__done-when { font-size: var(--fs-sm); color: var(--ink-mut); }
.bk__done-mail { font-size: var(--fs-xs); color: var(--bk-dim); }
.bk__done .bk__back { margin-top: 0.85rem; }

/* --------------------------------------------------------- step marker */

.bk__steps {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--line);
}
.bk__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bk__dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--bk-fill-2);
  transition: width 0.3s var(--ease), background-color 0.3s var(--ease);
}
.bk__dot.is-on { width: 20px; background: var(--bk-accent); }

/* ------------------------------------------------------------ noscript */

.bk__noscript {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  font-size: var(--fs-sm);
  color: var(--ink-mut);
  text-align: center;
}

/* ==========================================================================
   Wider containers. The Framer original watched its own width with a
   ResizeObserver (580 / 860 breakpoints); container queries do the same job
   declaratively. The @supports block keeps the layout correct on engines
   without container query support, using the viewport width that puts the
   card at the same size (card width + gutters).
   ========================================================================== */

@container bk (min-width: 580px) {
  .bk__body { padding: 1.5rem; }
  .bk__cols { flex-direction: row; gap: 1.75rem; }
  .bk__cal { flex: 1 1 54%; }
  .bk__times { flex: 1 1 46%; }
  .bk__slots { grid-template-columns: repeat(2, 1fr); max-height: 320px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
  .bk__slot { padding: 0.72rem 0.9rem; font-size: var(--fs-sm); }
  .bk__empty { padding-block: 0; margin: auto; }
  .bk__times:has(> .bk__empty:not([hidden])) { border-left: 1px solid var(--line); padding-left: 1.75rem; }
  .bk__head { padding: 1.15rem 1.6rem; }
}

@container bk (min-width: 780px) {
  .bk__body { padding: 1.75rem; }
  .bk__cols { gap: 2rem; }
}

@supports not (container-type: inline-size) {
  @media (min-width: 660px) {
    .bk__body { padding: 1.5rem; }
    .bk__cols { flex-direction: row; gap: 1.75rem; }
    .bk__cal { flex: 1 1 54%; }
    .bk__times { flex: 1 1 46%; }
    .bk__slots { grid-template-columns: repeat(2, 1fr); max-height: 320px; overflow-y: auto; padding-right: 4px; }
    .bk__slot { padding: 0.72rem 0.9rem; font-size: var(--fs-sm); }
    .bk__head { padding: 1.15rem 1.6rem; }
  }
  @media (min-width: 900px) {
    .bk__body { padding: 1.75rem; }
    .bk__cols { gap: 2rem; }
  }
}

/* --------------------------------------------------------- reduced motion */
/* main.css already flattens transition/animation durations globally, this is
   belt and braces so the entry and tick animations never run. */

@media (prefers-reduced-motion: reduce) {
  .bk__view.is-current,
  .bk__view.is-current .bk__check path { animation: none; }
  .bk__check path { stroke-dashoffset: 0; }
  .bk__cta:hover { transform: none; }
}