/* ============================================================================
   meet-carlos.css  ·  Standalone personal booking page (slug: meet-carlos).
   The direct line to Carlos: shared header + footer, sand surface, a personal
   intro, and the Zoho Bookings inline widget.
   Scoped to .mc-page. Loaded after base.css + sention.css.
   ============================================================================ */

/* ---- WordPress chrome fix (NOT needed in the local preview) ----------------
   On sention.agency the theme enqueues its own header.css / footer.css via
   wp_head(), both painting .site-header / .site-footer white (var(--bg-raised)),
   loaded AFTER our sention.css so they win. The other standalone slugs escape it
   via a WPCode snippet that dequeues the theme chrome CSS by slug; meet-carlos is
   a new slug not on that list yet, so the shared chrome would flash white over the
   sand page. Force it back to sand until the slug is added to the dequeue snippet.
   !important because our stylesheet loads before the theme's. */
.site-header { background-color: transparent !important; }
.site-header--scrolled { background-color: color-mix(in srgb, var(--bg-base) 82%, transparent) !important; }
.site-footer { background-color: var(--bg-base) !important; }

.mc-page {
  background: var(--bg-base);
  color: var(--text-primary);
  overflow-x: clip;
}

.mc-page .mc-shell {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ----------------------------------------------------------------------------
   LAYOUT  ·  invitation + calendar. One column while the widget needs the room
   (the Zoho card wants ~900px, so a true split only fits past 1360px), two
   columns side by side on wide screens: text left, calendar right. This is what
   keeps a wide desktop from stranding the widget in a band of empty sand.
   -------------------------------------------------------------------------- */
.mc-page .mc-layout {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-top: clamp(7rem, 5rem + 6vw, 10rem);   /* clears the fixed header */
  padding-bottom: clamp(4rem, 3rem + 5vw, 7rem);
  padding-inline: var(--container-pad);
  display: grid;
  gap: clamp(2.5rem, 1rem + 3vw, 5rem);
}
@media (min-width: 1360px) {
  .mc-page .mc-layout {
    grid-template-columns: minmax(320px, 1fr) 900px;
    align-items: start;
    gap: clamp(3rem, 1rem + 4vw, 6rem);
  }
  /* the invitation rides a little below the calendar's first line, not pinned to
     the top edge, so the two columns read as one composition */
  .mc-page .mc-intro { padding-top: clamp(1rem, 0.3rem + 2vw, 3rem); }
}

/* ----------------------------------------------------------------------------
   INTRO  ·  who you are meeting and what the 30 minutes are for.
   -------------------------------------------------------------------------- */
.mc-page .mc-hero__kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 clamp(1rem, 0.7rem + 1vw, 1.5rem);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}
/* the live dot: the same pulse the header uses, so the page reads as "open" */
.mc-page .mc-hero__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: mc-pulse 2.4s var(--ease-out) infinite;
}
@keyframes mc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-page .mc-hero__dot { animation: none; }
}

.mc-page .mc-hero__title {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4rem);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  text-wrap: balance;
}
.mc-page .mc-hero__sub {
  margin: clamp(1rem, 0.7rem + 1vw, 1.5rem) 0 0;
  max-width: 58ch;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.2rem);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.mc-page .mc-hero__sub strong {
  font-weight: 500;
  color: var(--text-primary);
}

/* ----------------------------------------------------------------------------
   BOOK  ·  the Zoho Bookings inline widget.
   -------------------------------------------------------------------------- */
/* Stacked, the widget is capped at its comfortable width: past ~1000px Zoho pulls
   the calendar and the slot list apart with a wide gap, and below ~900px it clips
   its own card. 960px is the sweet spot. In two columns it fills the 900px track,
   so the cap is lifted. */
.mc-page .mc-embed {
  width: 100%;
  max-width: 960px;
}
@media (min-width: 1360px) {
  .mc-page .mc-embed { max-width: none; }
}
/* The well stacks the widget and the loading instrument on one footprint. Zoho
   OVERWRITES the frame's contents on mount, so nothing of ours can live inside it.
   No panel or border around the loaded widget either: Zoho paints its own surface
   edge to edge, and the generous height (see meet-carlos.html) would otherwise end
   in a white void. Bare, the unused tail is the widget's own surface. */
.mc-page .mc-embed__well {
  position: relative;
  min-height: 1250px; /* matches the iframe height set in meet-carlos.html */
}
.mc-page .mc-embed__frame {
  position: relative;
  z-index: 1; /* the widget sits OVER the loading instrument, see below */
  width: 100%;
  min-height: inherit; /* holds the space before Zoho injects the iframe */
  overflow: hidden;
  border-radius: var(--radius);
}
.mc-page .mc-embed__frame iframe {
  display: block;
  width: 100% !important;
  border: 0;
}

/* ----------------------------------------------------------------------------
   LOADING  ·  Zoho injects the iframe at once and paints its app seconds later,
   so :empty never matches: the box exists and is blank. This instrument sits
   BEHIND the iframe, which is transparent until Zoho paints, so it shows through
   exactly while the widget is on the wire and is covered the instant the widget
   arrives. No timer, no guess at when a cross-origin app finished rendering.
   An empty rectangle is the one thing this page cannot afford as a first
   impression.
   -------------------------------------------------------------------------- */
.mc-page .mc-embed__loading {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.25rem;
  border: var(--border-hairline);
  border-radius: var(--radius);
  /* a calendar grid, empty: hairlines on the widget's own surface tone, so the
     hand-off to Zoho is a dissolve and not a flash of white */
  background:
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 100%) 0 0 / calc(100% / 7) 100%,
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 100%) 0 0 / 100% 4.5rem;
  background-color: var(--bg-base);
}
.mc-page .mc-embed__loading p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.mc-page .mc-embed__pulse {
  width: 9px;
  height: 9px;
  background: var(--accent);
  animation: mc-pulse 1.6s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mc-page .mc-embed__pulse { animation: none; }
}

/* the reserved space must match what the iframe mounts at, or the page jumps when
   it lands (the widget stacks below 900px, so it runs taller there) */
@media (max-width: 900px) {
  .mc-page .mc-embed__well { min-height: 1650px; }
}

/* --- fallback: if the widget script is blocked, the link still works ------- */
.mc-page .mc-embed__fallback {
  margin: 1rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.mc-page .mc-embed__fallback a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mc-page .mc-embed__fallback a:hover { color: var(--accent-ink); }