/* ==========================================================================
   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. Measured live at 1280px:
   eyebrow 11px Inter 700 / ls 1.98px / rgba(0,0,0,.32);
   heading Bebas Neue 89.6px weight 900 / ls -1.792px / rgb(10,10,10);
   lead 16px Inter 300 / rgba(0,0,0,.45).
   This variant used to override the base .booking to white because the canvas
   painted its own pastel gradient over it. The canvas now fills with --bg-alt
   to match the section above ("Not your typical production company."), so the
   override is gone: the base --bg-alt shows through before the canvas paints
   and wherever it does not cover, instead of flashing white. */
.booking__intro--talk { max-width: 44ch; }
.booking__intro--talk .t-label {
  margin-bottom: 0.6rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(0, 0, 0, 0.6);
}
.booking__talk-heading {
  font-family: var(--font-bebas);
  font-size: clamp(3rem, 1.6rem + 5.6vw, 5.6rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: #0a0a0a;
}
/* 300 was a hairline weight sitting over a patterned canvas, which is a hard
   read at 16px on a phone. 500 is still clearly secondary to the Bebas
   headline above it but survives the texture behind it. */
.booking__intro--talk .t-lead {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: normal;
  color: rgba(0, 0, 0, 0.6);
}

/* The canvas grid is a CURSOR effect. On a phone nothing ever lights it up, so
   the full-strength pattern is pure noise competing with the copy on top of it.
   Fading it to a third keeps the surface from being flat white while handing
   the contrast back to the text. Desktop is untouched, where the grid is doing
   real interactive work. */
@media (hover: none) {
  .booking__canvas { opacity: 0.34; }
}

/* 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 carries white text on the Confirm/Continue buttons and the
     selected slot, so it uses --primary-cta (4.83:1) rather than --primary
     (3.55:1, below AA). The glows below stay on the brighter brand red: they
     are decorative shadow, no text sits on them. */
  --bk-accent: var(--primary-cta);
  --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 select,
.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 select:focus,
.bk__field textarea:focus { border-color: var(--ink-faint); }
.bk__field input[aria-invalid="true"],
.bk__field select[aria-invalid="true"],
.bk__field textarea[aria-invalid="true"] { border-color: var(--bk-err); }

/* Native select chrome varies wildly between browsers and platforms, so it is
   stripped and replaced with the same chevron the rest of the card uses, drawn
   as an inline SVG background. padding-right leaves room for it so a long
   option label never runs underneath. The empty first option is the
   placeholder, dimmed to match the text inputs' placeholder colour. */
.bk__field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}
.bk__field select:invalid,
.bk__field select option[value=""] { color: var(--bk-dim); }

.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; }
}