/* Contact booking page — the live calendar is the signature artifact,
   framed as a deliberate instrument in the ApplauseLab black/green system. */

.contact-page,
.contact-page main,
.contact-booking {
  background: var(--al-black);
}

.contact-booking {
  min-height: 100svh;
  padding: calc(5.5rem + var(--al-space-2xl)) 0 clamp(4rem, 8vw, 7rem);
  color: var(--al-white);
}

/* The shared page container is `width: 90%` centred with `margin: auto`, so
   its left edge lands on a fractional pixel. Anything inheriting that offset
   cannot paint a 1px border evenly (one side gets swallowed by antialiasing).
   Rounding the container to a whole-pixel width snaps the whole column to the
   pixel grid so the calendar frame renders identically on every side. */
.contact-booking > .al-container {
  width: round(down, 90%, 2px);
  max-width: 86rem;
}

/* Keep the rail above the calendar until both columns can fit without
   narrowing Cal.com into its mobile layout. In the stacked state the
   scheduler receives the full container width. */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 3rem);
  align-items: start;
}

/* ---- Left rail --------------------------------------------------------- */

.contact-aside {
  position: static;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

.contact-intro {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.contact-kicker {
  margin: 0;
  color: var(--al-primary);
  font-family: var(--al-font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact-intro h1 {
  margin: 0;
  color: var(--al-white);
  font-family: var(--al-font-display);
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.04;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.contact-lead {
  max-width: 34ch;
  margin: 0;
  color: var(--al-gray-200);
  font-family: var(--al-font-body);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.6;
}

/* Agenda — numbered, but no generic hairline rail. The mono index is the
   only ornament; hierarchy carries the rest. */
.contact-agenda {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-agenda li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.contact-agenda-mark {
  color: var(--al-primary);
  font-family: var(--al-font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.contact-agenda-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.contact-agenda-body strong {
  color: var(--al-white);
  font-family: var(--al-font-body);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.35;
}

.contact-agenda-body span {
  color: var(--al-gray-300);
  font-family: var(--al-font-body);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Host — bare portrait, no tile behind the mark. */
.contact-host {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.contact-host-label {
  color: var(--al-gray-400);
  font-family: var(--al-font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-host-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.contact-host-photo {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: #0b0d0b;
}

.contact-host-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.contact-host-info strong {
  color: var(--al-white);
  font-family: var(--al-font-body);
  font-size: 0.98rem;
  font-weight: 650;
}

.contact-host-info span {
  color: var(--al-gray-300);
  font-family: var(--al-font-body);
  font-size: 0.86rem;
}

.contact-support-line {
  margin: 0;
  color: var(--al-gray-400);
  font-family: var(--al-font-body);
  font-size: 0.88rem;
  line-height: 1.6;
}

.contact-support-line a {
  color: var(--al-gray-100);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 255, 78, 0.4);
  transition: color var(--al-transition-fast), border-color var(--al-transition-fast);
}

.contact-support-line a:hover,
.contact-support-line a:focus-visible {
  color: var(--al-white);
  border-color: var(--al-primary);
}

/* ---- Right column: the calendar instrument ---------------------------- */

.contact-scheduler {
  width: 100%;
  min-width: 0;
}

/* The frame: a flat surface with ONE uniform self-coloured edge.
   A directional gradient plus partial highlights made the border read
   thicker on some sides than others, so the surface is flat and the edge
   is a single even line.

   The edge is a real `border`, not an inset box-shadow: the panel can land
   on a fractional x-offset (the page container is `width: 90%` centred with
   `margin: auto`, so its left edge is not a whole pixel), and an inset
   shadow antialiases away on that sub-pixel side, dropping the ring on one
   edge. A border is part of the box model and paints evenly on all four
   sides once the panel sits on whole pixels (see the container and gap
   rules above, which remove the fractional offset). */
.contact-calendar-shell {
  position: relative;
  width: 100%;
  padding: 5px;
  /* Opaque edge colour, not a low-alpha hairline: a translucent 1px line
     reads clearly where it meets the embed's lighter surface but vanishes
     against the page black, so the frame looked present on two sides only.
     A solid tonal green renders identically on all four sides. */
  border: 1px solid #1c3a25;
  border-radius: 14px;
  background: #0d0f0d;
  color: var(--al-white);
  color-scheme: dark;
}

/* The embed always stays in the layout so Cal.com can measure and
   auto-resize it (hiding it with display:none would stop it reporting
   ready). The readable fallback is OVERLAID on top and lifted away once
   the embed confirms it rendered.

   The wrapper clips at exactly the geometric inner radius (outer 14px minus
   the 6px pad = 8px) with overflow:hidden, and the iframe fills it square.
   The wrapper's clip provides the rounding, so the black reaches the frame
   edge on every corner with no gap between the two radii. */
/* Background matches the embed's own surface, not black. Cal renders its
   booker with a larger corner radius than this wrapper, so at each corner
   its content curves away and reveals whatever sits behind it. Painting the
   wrapper in the embed's own colour makes that corner wedge invisible
   instead of a black notch between the content and the frame. */
.contact-cal-inline {
  overflow: hidden;
  border-radius: 8px;
  background: #171717;
}

/* Let Cal.com's auto-resize drive the height so the whole booker (date
   picker + time-slot column) is visible with no inner scroll. Cal sets the
   iframe height inline on resize; we must NOT override it (no
   height/min-height !important here) or it gets clamped and scrolls. Only
   the wrapper carries a pre-load floor sized for the column_view booker. */
.contact-cal-inline {
  min-height: 620px;
}

.contact-cal-inline,
.contact-cal-inline > div,
.contact-cal-inline iframe {
  width: 100% !important;
  border: 0;
  border-radius: 0;
  background: #171717;
  color-scheme: dark;
}

/* Block-level so the iframe cannot sit on a text baseline (which leaves a
   sliver under it) and cannot paint over the frame's padding on any side. */
.contact-cal-inline > div,
.contact-cal-inline iframe {
  display: block;
  max-width: 100%;
}

/* State machine.
   - static  : no JS yet — no embed will load, so the fallback IS the content.
   - loading : JS booting / embed rendering — fallback overlays the mount.
   - ready   : embed rendered — retire the overlay.
   - failed  : blocked/error — keep the fallback on top. */
.contact-calendar-shell[data-cal-shell] .contact-calendar-fallback {
  position: absolute;
  inset: 6px;
  z-index: 2;
  background: #000;
}

.contact-calendar-shell[data-cal-state="ready"] .contact-calendar-fallback {
  display: none;
}

/* Booking confirmation: Cal can report less height than the confirmation
   card needs, which makes the embed scroll inside the panel. Hold a floor
   so the card fits. min-height, not height, so a taller report still wins. */
.contact-calendar-shell[data-cal-booked] .contact-cal-inline iframe {
  min-height: 1120px;
}

.contact-calendar-fallback {
  display: grid;
  min-height: 608px;
  place-content: center;
  gap: 0.4rem;
  padding: var(--al-space-2xl);
  border-radius: 8px;
  text-align: center;
}

.contact-calendar-shell--fallback {
  min-height: clamp(24rem, 56vh, 34rem);
}

.contact-calendar-shell--fallback .contact-calendar-fallback {
  min-height: clamp(22rem, 52vh, 32rem);
}

.contact-fallback-status {
  margin: 0;
  color: var(--al-primary);
  font-family: var(--al-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Quiet loading state — shown until the embed is ready or fails. */
.contact-fallback-loading {
  margin: 0.35rem 0 0;
  color: var(--al-gray-400);
  font-family: var(--al-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  animation: contact-fallback-breathe 1.6s ease-in-out infinite;
}

@keyframes contact-fallback-breathe {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.9; }
}

/* Only surface the loading line while genuinely loading; only surface the
   failed block (with the escape-hatch link) if the embed actually fails. */
.contact-fallback-failed { display: none; }

.contact-calendar-shell[data-cal-state="failed"] .contact-fallback-loading { display: none; }
.contact-calendar-shell[data-cal-state="failed"] .contact-fallback-failed { display: block; }

.contact-fallback-copy {
  max-width: 30ch;
  margin: 0 auto;
  color: var(--al-gray-200);
  font-family: var(--al-font-body);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.contact-fallback-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--al-space-lg);
  color: var(--al-gray-100);
  font-family: var(--al-font-body);
  font-size: 0.95rem;
  font-weight: 700;
  min-height: 2.75rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--al-transition-fast);
}

.contact-fallback-link:hover,
.contact-fallback-link:focus-visible,
.contact-noscript a:hover,
.contact-noscript a:focus-visible {
  color: var(--al-white);
}

.contact-fallback-link:focus-visible,
.contact-support-line a:focus-visible,
.contact-noscript a:focus-visible {
  outline: 2px solid var(--al-primary);
  outline-offset: 4px;
  border-radius: 2px;
}

.contact-fallback-link svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--al-primary);
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 2;
  transition: transform var(--al-transition-fast);
}

.contact-fallback-link:hover svg,
.contact-fallback-link:focus-visible svg {
  transform: translate(1px, -1px);
}

.contact-noscript a {
  color: var(--al-gray-200);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 255, 78, 0.4);
}

.contact-noscript {
  margin-top: var(--al-space-lg);
  color: var(--al-gray-400);
  font-family: var(--al-font-body);
  font-size: 0.88rem;
  line-height: 1.6;
}

.contact-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Footer sits directly on the page floor here. */
.contact-page .al-footer {
  margin-top: 0 !important;
}

.contact-page .al-footer-background {
  display: none;
}

.contact-page .al-footer-illustration {
  display: none !important;
}

/* ---- Responsive -------------------------------------------------------- */

/* At 1360px the capped container leaves just over 50rem for the shell after
   an approximately 20rem rail and its gap. The shell inset still leaves Cal
   about 50rem of real iframe width, keeping it in desktop mode. */
@media (min-width: 1360px) {
  .contact-grid {
    grid-template-columns: minmax(0, 19rem) minmax(50rem, 1fr);
    gap: 1.75rem;
  }

  .contact-aside {
    position: sticky;
    top: calc(5.5rem + var(--al-space-lg));
  }
}

@media (max-width: 700px) {
  .contact-booking {
    padding-top: calc(4.5rem + var(--al-space-2xl));
  }

  .contact-booking .al-container {
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .contact-intro h1 {
    font-size: clamp(1.95rem, 8vw, 2.6rem);
  }

  /* Full-bleed on phones: drop the rounded frame so there is no inner/outer
     radius to mismatch (the embed carries its own rounding). The embed sits
     flush, edge to edge, which reads cleaner at this width. */
  .contact-calendar-shell {
    min-height: 560px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .contact-cal-inline {
    border-radius: 0;
  }

  .contact-calendar-shell[data-cal-shell] .contact-calendar-fallback {
    inset: 0;
    border-radius: 0;
  }

  .contact-cal-inline,
  .contact-cal-inline > div,
  .contact-cal-inline iframe,
  .contact-calendar-fallback {
    min-height: 548px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-fallback-link,
  .contact-fallback-link svg,
  .contact-support-line a {
    transition: none !important;
  }

  .contact-fallback-loading {
    animation: none;
    opacity: 0.7;
  }
}