/* ============================================================================
   meetings.css — calendar booking pages (/meetings/<slug>)
   Markup: templates/meetings/meeting.html
   ----------------------------------------------------------------------------
   Everything is scoped under .meeting-page so it cannot leak elsewhere.

   Layout logic: the hero is one grid with three areas — intro (headline copy),
   booker (the HubSpot calendar card), detail (agenda, team, direct contact).
   Desktop puts the headline across the top, then details left / calendar right.
   Mobile reorders to intro → calendar → details, so the calendar is the first
   thing under the headline instead of sitting below a screen of supporting copy.

   The HubSpot iframe is the one element we do not control: MeetingsEmbedCode.js
   injects it with its own inline width/min-width, which overflows narrow
   viewports. The overrides at the bottom of the calendar-card block are what
   keep it inside the card on a phone.
   ========================================================================== */

/* ---- Hero --------------------------------------------------------------- */
.meeting-page .meeting-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
  color: #b8c7d9;
  background:
    radial-gradient(120% 90% at 10% 0%, rgba(24, 96, 178, 0.5), transparent 58%),
    radial-gradient(80% 70% at 92% 10%, rgba(12, 66, 128, 0.42), transparent 62%),
    linear-gradient(150deg, #05101d 0%, #08203a 55%, #0a2b4e 100%);
}

/* Fine engineering grid, fading out downward — same texture language as the
   PPC hero, kept subtle so it never competes with the calendar. */
.meeting-page .meeting-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  pointer-events: none;
}

.meeting-page .meeting-hero__grid {
  display: grid;
  gap: clamp(var(--space-6), 3.5vw, var(--space-12));
  grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
  grid-template-areas:
    "intro  intro"
    "detail booker";
  align-items: start;
}

.meeting-page .meeting-hero__intro { grid-area: intro; max-width: 46rem; }
.meeting-page .meeting-booker { grid-area: booker; }
.meeting-page .meeting-hero__detail { grid-area: detail; }

.meeting-page .meeting-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: #7dbdff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.meeting-page .meeting-eyebrow span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #38d39f;
  box-shadow: 0 0 0 4px rgba(56, 211, 159, 0.18);
}

.meeting-page .meeting-hero__intro h1 {
  margin: 0 0 var(--space-4);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.meeting-page .meeting-lede {
  margin: 0;
  max-width: 40rem;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.6;
}

/* Duration / format facts. */
.meeting-page .meeting-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.meeting-page .meeting-facts li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #dceaf9;
  font-size: 0.9375rem;
  font-weight: 600;
}

.meeting-page .meeting-facts svg { color: #7dbdff; flex: none; }

.meeting-page .meeting-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.meeting-page .meeting-chips li {
  padding: 0.4rem 0.75rem;
  color: #cfe1f5;
  border: 1px solid rgba(125, 189, 255, 0.28);
  border-radius: 999px;
  background: rgba(125, 189, 255, 0.08);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ---- Calendar card ------------------------------------------------------ */
.meeting-page .meeting-booker {
  padding: clamp(var(--space-4), 2vw, var(--space-6));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  box-shadow: 0 30px 70px rgba(3, 12, 26, 0.45);
}

/* Host identity on a personal calendar (page.host). Sits above the calendar
   so the face is the first thing on the card, matching the personal link the
   visitor clicked. */
.meeting-page .meeting-host {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--c-border);
}

.meeting-page .meeting-host img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-subtle);
}

.meeting-page .meeting-host__id { min-width: 0; }

.meeting-page .meeting-host__name {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: var(--tracking-heading);
}

.meeting-page .meeting-host__role {
  margin: 0.15rem 0 0;
  color: var(--c-muted);
  font-size: 0.875rem;
}

.meeting-page .meeting-booker__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
}

.meeting-page .meeting-host + .meeting-booker__head { margin-top: var(--space-4); }

.meeting-page .meeting-booker__head h2 {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: var(--tracking-heading);
}

.meeting-page .meeting-booker__badge {
  padding: 0.3rem 0.6rem;
  color: var(--c-primary);
  border-radius: 999px;
  background: rgba(0, 100, 224, 0.09);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
}

.meeting-page .meeting-embed { position: relative; min-height: 34rem; }

.meeting-page .meeting-embed.is-unavailable { min-height: 0; }

.meeting-page .meeting-embed__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-10) var(--space-4);
  color: var(--c-muted);
  font-size: 0.9375rem;
}

.meeting-page .meeting-embed__spinner {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid rgba(0, 100, 224, 0.2);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: meeting-spin 0.8s linear infinite;
}

@keyframes meeting-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .meeting-page .meeting-embed__spinner { animation: none; }
}

/* meetings.js hides the status line with el.hidden once the calendar is in,
   which design-system.css's `[hidden] { display: none !important }` enforces
   over the `display: flex` above. The state classes the same script sets are
   matched here too, so this card does not depend on that global rule being
   present (a build without it left the spinner stuck above a working
   calendar). is-booked re-shows the line for the redirect notice. */
.meeting-page .meeting-embed.is-ready .meeting-embed__status,
.meeting-page .meeting-embed.is-unavailable .meeting-embed__status { display: none; }

.meeting-page .meeting-embed.is-booked .meeting-embed__status {
  display: flex;
  padding: var(--space-3) var(--space-4);
  color: #0d5c43;
  border-radius: var(--radius);
  background: rgba(16, 150, 109, 0.1);
  font-weight: 600;
}

.meeting-page .meeting-embed.is-booked .meeting-embed__spinner {
  border-color: rgba(16, 150, 109, 0.25);
  border-top-color: #10966d;
}

/* HubSpot's script injects the iframe with its own inline sizing. Without
   these it sets a min-width wider than a phone and the whole page scrolls
   sideways. */
.meeting-page .meetings-iframe-container {
  width: 100%;
  min-width: 0;
}

.meeting-page .meetings-iframe-container iframe {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border: 0;
}

/* ---- Booked / fallback states ------------------------------------------ */
.meeting-page .meeting-embed__fallback {
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-border);
}

.meeting-page .meeting-embed__fallback-copy {
  margin: 0 0 var(--space-4);
  color: var(--c-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.meeting-page .meeting-embed__fallback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.meeting-page .meeting-booker__privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  color: var(--c-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.meeting-page .meeting-booker__privacy svg { flex: none; margin-top: 0.15rem; }
.meeting-page .meeting-booker__privacy a { color: var(--c-primary); }

/* ---- Supporting detail column ------------------------------------------ */
.meeting-page .meeting-agenda h2 {
  margin: 0 0 var(--space-4);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: var(--tracking-heading);
}

.meeting-page .meeting-agenda ul {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.meeting-page .meeting-agenda li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.meeting-page .meeting-agenda svg { flex: none; margin-top: 0.15rem; color: #38d39f; }

/* "About <host>" panel, the personal-calendar counterpart to .meeting-team. */
.meeting-page .meeting-bio {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.meeting-page .meeting-bio h2 {
  margin: 0 0 var(--space-3);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: var(--tracking-heading);
}

.meeting-page .meeting-bio p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.meeting-page .meeting-bio p.meeting-bio__links {
  margin-top: var(--space-4);
  font-size: 0.875rem;
}

.meeting-page .meeting-bio__links a { color: #7dbdff; font-weight: 700; }
.meeting-page .meeting-bio__links span { margin: 0 0.4rem; opacity: 0.5; }

.meeting-page .meeting-team {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.meeting-page .meeting-team__faces {
  display: flex;
  margin-bottom: var(--space-3);
}

.meeting-page .meeting-team__faces img {
  width: 3rem;
  height: 3rem;
  border: 2px solid #0a2036;
  border-radius: 50%;
  object-fit: cover;
  background: #12283f;
}

.meeting-page .meeting-team__faces img + img { margin-left: -0.75rem; }

.meeting-page .meeting-team p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
}

.meeting-page .meeting-team strong { display: block; color: #fff; margin-bottom: 0.35rem; }

.meeting-page .meeting-alt {
  margin: var(--space-6) 0 0;
  font-size: 0.9375rem;
}

.meeting-page .meeting-alt a { color: #7dbdff; font-weight: 700; }
.meeting-page .meeting-alt span { margin: 0 0.4rem; opacity: 0.5; }

/* ---- Buttons ------------------------------------------------------------ */
.meeting-page .meeting-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: 0.7rem 1.15rem;
  color: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

.meeting-page .meeting-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }

.meeting-page .meeting-btn--primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #0879ee, #0064e0);
  box-shadow: 0 12px 27px rgba(0, 100, 224, 0.21);
}

.meeting-page .meeting-btn--primary:hover { color: #fff; }

.meeting-page .meeting-btn--light { color: var(--c-primary); }
.meeting-page .meeting-btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: transparent;
}

.meeting-page .meeting-btn--ghost:hover { color: #fff; border-color: #fff; }

/* ---- How it works ------------------------------------------------------- */
.meeting-page .meeting-steps {
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
  background: var(--c-subtle);
}

.meeting-page .meeting-steps__title {
  margin: 0 0 var(--space-8);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: var(--tracking-heading);
}

.meeting-page .meeting-steps__list {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.meeting-page .meeting-steps__list li {
  padding: var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
}

.meeting-page .meeting-steps__number {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--c-primary);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.meeting-page .meeting-steps__list h3 {
  margin: 0 0 var(--space-2);
  color: var(--c-ink);
  font-size: 1.0625rem;
  letter-spacing: var(--tracking-heading);
}

.meeting-page .meeting-steps__list p {
  margin: 0;
  color: var(--c-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ---- Closing band ------------------------------------------------------- */
.meeting-page .meeting-close {
  padding-block: clamp(var(--space-10), 4vw, var(--space-12));
  color: #cfe1f5;
  background: linear-gradient(120deg, #0a1626 0%, #10305a 100%);
}

.meeting-page .meeting-close__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.meeting-page .meeting-close h2 {
  margin: 0 0 var(--space-2);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  letter-spacing: var(--tracking-heading);
}

.meeting-page .meeting-close p { margin: 0; font-size: 0.9375rem; }

.meeting-page .meeting-close__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---- Responsive --------------------------------------------------------- */
/* Below this width the two-column split leaves the calendar too narrow for
   HubSpot's side-by-side date/time view, so everything stacks and the calendar
   moves directly under the headline. */
@media (max-width: 64rem) {
  .meeting-page .meeting-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "booker"
      "detail";
  }

  .meeting-page .meeting-hero__intro,
  .meeting-page .meeting-lede { max-width: none; }
}

@media (max-width: 40rem) {
  .meeting-page .meeting-booker {
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius);
  }

  .meeting-page .meeting-embed { min-height: 30rem; }

  .meeting-page .meeting-embed__fallback-actions .meeting-btn,
  .meeting-page .meeting-close__actions .meeting-btn { width: 100%; }

  .meeting-page .meeting-facts { gap: var(--space-2) var(--space-4); }
}

/* ============================================================================
   Link index (/my-meeting) — templates/meetings/hub.html
   ----------------------------------------------------------------------------
   Shares .meeting-page (hero, buttons, closing band) and adds the card list.
   Scoped under .meeting-index so nothing here reaches a booking page.

   The URLs are the content, so they are set in a monospace face at a size that
   stays readable and are allowed to wrap anywhere -- a long HubSpot link must
   never push the card sideways on a phone.
   ========================================================================== */
.meeting-index .meeting-index__note {
  margin: var(--space-6) 0 0;
  color: #9fb6cd;
  font-size: 0.875rem;
}

.meeting-index .meeting-index__body {
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
  background: var(--c-subtle);
}

.meeting-index .meeting-index__title {
  margin: 0 0 var(--space-8);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: var(--tracking-heading);
}

.meeting-index .meeting-index__list {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.meeting-index .meeting-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
}

.meeting-index .meeting-card__id {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.meeting-index .meeting-card__id > img {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-subtle);
}

/* Overlapping avatars for the shared calendar, same language as the booking
   page's team strip. */
.meeting-index .meeting-card__faces {
  display: flex;
  flex: none;
}

.meeting-index .meeting-card__faces img {
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--c-surface);
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-subtle);
}

.meeting-index .meeting-card__faces img + img { margin-left: -0.7rem; }

.meeting-index .meeting-card__who { min-width: 0; }

.meeting-index .meeting-card__who h3 {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: var(--tracking-heading);
}

.meeting-index .meeting-card__role {
  margin: 0.15rem 0 0;
  color: var(--c-muted);
  font-size: 0.875rem;
}

.meeting-index .meeting-card__summary {
  margin: 0;
  color: var(--c-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.meeting-index .meeting-card__links {
  display: grid;
  gap: var(--space-3);
  /* Pushes the button below to the bottom of every card, so a row of cards
     with different summary lengths still lines up. */
  margin-top: auto;
}

.meeting-index .meeting-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-subtle);
}

.meeting-index .meeting-link__label {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--c-muted);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.meeting-index .meeting-link__url {
  min-width: 0;
  color: var(--c-primary);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.meeting-index .meeting-link__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.3rem 0.6rem;
  color: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.meeting-index .meeting-link__copy:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
}

.meeting-index .meeting-link__copy.is-copied {
  color: #0d5c43;
  border-color: rgba(16, 150, 109, 0.4);
  background: rgba(16, 150, 109, 0.1);
}

.meeting-index .meeting-card__open { align-self: start; }

@media (max-width: 40rem) {
  .meeting-index .meeting-card { padding: var(--space-4); }
  .meeting-index .meeting-card__open { align-self: stretch; }
}

/* ============================================================================
   Post-booking page (/meetings/thank-you) — templates/meetings/thank_you.html
   ----------------------------------------------------------------------------
   Reuses the booking page wholesale: hero, the white .meeting-booker card
   (here without a calendar in it), the steps band, and the closing band.
   Only the two-column hero grid and the card's own list are new, scoped under
   .meeting-thanks so nothing reaches a booking page.
   ========================================================================== */
/* Named areas on purpose: .meeting-hero__intro and .meeting-booker arrive
   with grid-area: intro / booker from the booking-page rules, and an area
   name a grid does not define sends the item to an implicit column. */
.meeting-thanks .meeting-thanks__grid {
  display: grid;
  gap: clamp(var(--space-6), 3.5vw, var(--space-12));
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  grid-template-areas: "intro booker";
  align-items: start;
}

.meeting-thanks .meeting-thanks__faces { display: flex; flex: none; }

.meeting-thanks .meeting-thanks__faces img {
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--c-surface);
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-subtle);
}

.meeting-thanks .meeting-thanks__faces img + img { margin-left: -0.7rem; }

.meeting-thanks .meeting-host + .meeting-booker__head { margin-top: var(--space-4); }

.meeting-thanks .meeting-thanks__list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.meeting-thanks .meeting-thanks__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--c-ink);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.meeting-thanks .meeting-thanks__list svg {
  flex: none;
  margin-top: 0.15rem;
  color: var(--c-primary);
}

@media (max-width: 64rem) {
  .meeting-thanks .meeting-thanks__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "booker";
  }
}