/* ─────────────────────────────────────────────────────────────────────────
 * clever-prep-free-consult.css
 * Page-scoped styles for /free-consult/.
 *
 * Interaction model: the user clicks one of three colored cards.
 * The CLICKED card morphs to fill the grid row (keeping its background
 * color), while the other two collapse via interpolated 1fr → 0fr grid
 * tracks. The card's content swaps from compact → expanded inline —
 * the panel content lives INSIDE the card, not below it.
 *
 * Grid-template-columns is animatable when track count + units match,
 * so the morph is pure CSS: section gets `data-cp-fc-active="<key>"`
 * and the grid's track sizes transition with bezier easing.
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.cp-fc-hero {
  padding: clamp(80px, 12vw, 140px) clamp(20px, 5vw, 64px) clamp(4px, 1vw, 12px);
  background: var(--cp-cream-bg, #F7F4ED);
  text-align: center;
}
.cp-fc-hero__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cp-fc-hero__eyebrow { opacity: 0.6; }
.cp-fc-hero__title {
  font-family: var(--cp-font-heading, Georgia, serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--cp-text-headline, #28354A);
}
.cp-fc-hero__body {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  max-width: 520px;
  color: var(--cp-text-secondary, #4a5568);
  margin: 0;
}

/* ── Paths section + grid ─────────────────────────────────────────────── */
.cp-fc-paths {
  background: var(--cp-cream-bg, #F7F4ED);
  padding: 0 clamp(20px, 5vw, 64px) clamp(80px, 12vw, 140px);
}
.cp-fc-paths__inner {
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
}

/* ── Branching connector (animated gradient flow) ─────────────────────── */
.cp-fc-connector {
  display: block !important;       /* override Bricks' default flex on .brxe-* */
  width: 100% !important;
  max-width: none !important;
  height: clamp(56px, 7vw, 100px);
  margin: 0 auto -6px;             /* pull the grid up so branch ends meet card tops */
  pointer-events: none;
  transition: opacity 0.3s ease;
  /* Safari sometimes uses an intrinsic mini-size for viewBox-only SVGs in
     flex parents (Bricks default) — be explicit on the wrapper too. */
}
.cp-fc-connector svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.cp-fc-connector__flow {
  /* With pathLength="100" on the paths, dash values are PERCENTAGES of
     each path. 22% visible pulse + 78% gap, total 100, so dashoffset -100
     per cycle = seamless loop. All routes (center / left / right) render
     identically regardless of actual length. */
  stroke-dasharray: 22 78;
  animation: cpfc-flow 3s linear infinite;
}
/* Stagger the three branches so they pulse out of sync (negative delays
   phase-shift them evenly across the 3s loop instead of waiting). */
.cp-fc-connector__flow--c { animation-delay: 0s; }
.cp-fc-connector__flow--l { animation-delay: -1s; }
.cp-fc-connector__flow--r { animation-delay: -2s; }
/* The center route is much shorter in actual arc length (~180 user units)
   than the L/R branches (~560). Bumping its dasharray so the pulse renders
   at a comparable VISUAL length to the side pulses. 55% of 180 ≈ 99px;
   compare to 22% of 560 ≈ 123px on the branches. */
.cp-fc-connector__flow--c { stroke-dasharray: 55 45; }
@keyframes cpfc-flow {
  to { stroke-dashoffset: -100; }   /* one full normalized cycle → seamless */
}
/* Fade the connector out once a path is selected (the morph takes over). */
.cp-fc-paths[data-cp-fc-active] .cp-fc-connector { opacity: 0; }

/* Mobile vertical-line pulse — separate keyframes (at root scope, required)
   so the highlight travels top → bottom along the single CSS line. */
@keyframes cpfc-flow-mobile {
  0%   { transform: translateY(-100%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

@media (max-width: 768px) {
  /* Cards stack single-column — replace the 3-way SVG bracket with a slim
     pure-CSS vertical line + traveling highlight. Same motion language
     (blue brand gradient, soft glow) in a stacked-friendly form. */
  .cp-fc-connector {
    height: clamp(56px, 11vw, 84px);
    position: relative;
    overflow: hidden;
  }
  .cp-fc-connector svg { display: none; }

  /* The faint static line (matches the desktop base stroke color). */
  .cp-fc-connector::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: rgba(40, 53, 74, 0.16);
    border-radius: 2px;
  }
  /* The traveling pulse — light brand blue gradient, soft glow. */
  .cp-fc-connector::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 36%;
    margin-left: -1px;
    background: linear-gradient(to bottom,
      transparent, #A9C6E3 35%, #5C7FA8 50%, #A9C6E3 65%, transparent);
    border-radius: 2px;
    filter: drop-shadow(0 0 4px rgba(124, 160, 200, 0.55));
    animation: cpfc-flow-mobile 2.4s linear infinite;
    will-change: transform, opacity;
  }
  @media (prefers-reduced-motion: reduce) {
    .cp-fc-connector::after { animation: none; opacity: 0.4; top: 32%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .cp-fc-connector__flow { animation: none; opacity: 0.55; }
}

/* The morphing grid. Default = three equal columns. When a path is active,
   the active column expands to 1fr and the others animate to 0fr.
   Easing is a snappy-but-smooth cubic. */
.cp-fc-paths__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  align-items: stretch;
  transition: grid-template-columns 0.7s cubic-bezier(0.76, 0, 0.24, 1),
              gap 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}
.cp-fc-paths[data-cp-fc-active="mcat"]     .cp-fc-paths__grid { grid-template-columns: 1fr 0fr 0fr; gap: 0; }
.cp-fc-paths[data-cp-fc-active="eyeq"]     .cp-fc-paths__grid { grid-template-columns: 0fr 1fr 0fr; gap: 0; }
.cp-fc-paths[data-cp-fc-active="tutoring"] .cp-fc-paths__grid { grid-template-columns: 0fr 0fr 1fr; gap: 0; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.cp-fc-path {
  position: relative;
  border-radius: 18px;
  cursor: pointer;
  overflow: hidden;
  min-width: 0;           /* let the grid track actually shrink to 0 */
  display: flex !important;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s ease,
              opacity 0.45s cubic-bezier(0.76, 0, 0.24, 1);
  outline: none;
}
.cp-fc-path:hover,
.cp-fc-path:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -16px rgba(40, 53, 74, 0.18);
}
.cp-fc-path:focus-visible {
  outline: 2px solid var(--cp-orange, #ED863C);
  outline-offset: 4px;
}

/* Card color palette */
.cp-fc-path--mcat     { background: #DCE7F0; }
.cp-fc-path--eyeq     { background: #DCE7D2; }
.cp-fc-path--tutoring { background: #E8DCC2; }

/* Inactive cards (when any path is selected): fade + scale, then ignore
   pointer events. They're still in the grid so the column-track transition
   can drive their visual collapse. */
.cp-fc-paths[data-cp-fc-active] .cp-fc-path:not(.is-active) {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
/* Active card no longer hover-lifts (it's already taking the spotlight) */
.cp-fc-paths[data-cp-fc-active] .cp-fc-path.is-active:hover {
  transform: none;
  box-shadow: none;
  cursor: default;
}
/* Active card must allow overflow so dropdown menus inside the form aren't
   clipped at the card's bottom edge. The morph has already finished by the
   time the user can interact with selects, so visible overflow is safe. */
.cp-fc-paths[data-cp-fc-active] .cp-fc-path.is-active { overflow: visible; }

/* ── Compact (default) card content ───────────────────────────────────── */
.cp-fc-path__compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.5vw, 32px);
  min-height: 0;
  /* Compact content fades as the card expands. */
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
.cp-fc-path.is-active .cp-fc-path__compact {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  /* Slide UP and OUT — element collapses to height 0 so expanded content
     can occupy the card without scroll padding. */
  position: absolute;
  inset: 0;
}

.cp-fc-path__num {
  opacity: 0.55;
  font-size: 14px;
}
.cp-fc-path__title {
  font-family: var(--cp-font-heading, Georgia, serif);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1;
  margin: 0;
  color: var(--cp-text-headline, #28354A);
}
.cp-fc-path__body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--cp-text-headline, #28354A);
  opacity: 0.78;
  margin: 0;
  max-width: 280px;
}
/* Card "Start" / "Book a call" button uses the SYSTEM .cp-btn variant
   (white pill on a colored card). The only page-scoped rule we keep is
   margin-top:auto so the button anchors to the bottom of the compact view
   even when card heights differ — pure layout, no visual override. */
.cp-fc-path__btn-wrap { margin-top: auto !important; }

/* ── Expanded card content ────────────────────────────────────────────── */
.cp-fc-path__expanded {
  opacity: 0;
  transform: translateY(8px);
  /* Collapsed state must contribute zero height — padding goes to 0 too,
     otherwise it adds ~128px of dead space inside every card. */
  padding: 0 clamp(28px, 4vw, 56px);
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.76, 0, 0.24, 1) 0.15s,
              transform 0.55s cubic-bezier(0.76, 0, 0.24, 1) 0.15s,
              padding 0.55s cubic-bezier(0.76, 0, 0.24, 1),
              max-height 0s linear 0.55s;
}
.cp-fc-path.is-active .cp-fc-path__expanded {
  opacity: 1;
  transform: none;
  padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px) clamp(36px, 5vw, 56px);
  max-height: 2400px;        /* generous cap — content flows naturally */
  pointer-events: auto;
  transition: opacity 0.5s cubic-bezier(0.76, 0, 0.24, 1) 0.3s,
              transform 0.6s cubic-bezier(0.76, 0, 0.24, 1) 0.3s,
              padding 0.55s cubic-bezier(0.76, 0, 0.24, 1) 0.15s,
              max-height 0s linear 0s;
}

/* Header inside the expanded card — back button + title row */
.cp-fc-expanded__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
/* `.cp-fc-expanded__back` uses the SYSTEM .cp-btn--chip variant. No
   page-scoped styling needed — keep this hook class only so the JS back
   listener can be delegated via a stable selector. */
.cp-fc-expanded__num {
  opacity: 0.55;
  font-size: 13px;
}

.cp-fc-expanded__title {
  font-family: var(--cp-font-heading, Georgia, serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--cp-text-headline, #28354A);
}
.cp-fc-expanded__lede {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--cp-text-headline, #28354A);
  opacity: 0.78;
  margin: 0 0 28px;
  max-width: 640px;
}

/* Two-column expanded body — content left, visual/spacer right */
.cp-fc-expanded__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.cp-fc-expanded__col {
  min-width: 0;
}

.cp-fc-expanded__bullets {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.cp-fc-expanded__bullets li {
  font-size: 15px;
  line-height: 1.5;
  padding-left: 28px;
  position: relative;
  color: var(--cp-text-headline, #28354A);
}
.cp-fc-expanded__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(40, 53, 74, 0.1);
}
.cp-fc-expanded__bullets li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cp-text-headline, #28354A);
}

/* Expanded-card CTAs use the SYSTEM .cp-btn--primary variant. No page-
   scoped CTA styling — if you need a different look, add a variant to
   the design system (clever-prep-sections.css) first. */

/* Decorative right-column illustration spot — pure CSS dot-cluster.
   Replace later with a real image / lottie / svg per path. */
.cp-fc-expanded__visual {
  aspect-ratio: 1.1;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(40,53,74,0.06), transparent 50%),
    rgba(255,255,255,0.35);
  position: relative;
  overflow: hidden;
}
.cp-fc-expanded__visual::before,
.cp-fc-expanded__visual::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(40,53,74,0.12);
}
.cp-fc-expanded__visual::before { width: 56px; height: 56px; top: 18%; left: 16%; }
.cp-fc-expanded__visual::after  { width: 28px; height: 28px; bottom: 22%; right: 22%; background: var(--cp-orange, #ED863C); opacity: 0.5; }

/* ── Tutoring + MCAT forms — match style guide tokens ───────────────────── */
.cp-fc-form {
  display: grid;
  gap: 16px;
  margin-bottom: 8px;
}
/* Brevo capture honeypot — kept reachable to bots but invisible. The
   plugin's own offscreen-position style isn't always enqueued on every
   page, so we scope a guaranteed rule here. */
.cp-fc-form .cpbrevo-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.cp-fc-form__note {
  font-family: var(--cp-font-body, system-ui);
  font-size: 12px;
  color: var(--cp-text-meta, rgba(15, 18, 23, 0.55));
  margin: 8px 0 0;
  text-align: left;
}
.cp-fc-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cp-fc-form__field { display: block; }
.cp-fc-form label {
  display: block;
  font-size: 12px;
  font-family: var(--cp-font-mono, ui-monospace);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cp-text-meta, rgba(15, 18, 23, 0.6));
  margin-bottom: 8px;
}

/* Shared input visual — input, textarea, custom select trigger.
   Mirrors `.cp-sg-form__input` tokens from clever-prep-style-guide.css. */
.cp-fc-form input,
.cp-fc-form textarea,
.cp-fc-select {
  width: 100%;
  background: #fff;
  border: 1px solid var(--cp-border-input, rgba(15, 18, 23, 0.12));
  border-radius: var(--cp-radius-lg, 12px);
  padding: 14px 16px;
  font-family: var(--cp-font-body, inherit);
  font-size: var(--cp-text-body, 15px);
  line-height: 1.4;
  color: var(--cp-text-headline, #28354A);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.cp-fc-form input,
.cp-fc-select {
  height: 50px;
  display: flex !important;
  align-items: center !important;
}
.cp-fc-form input::placeholder,
.cp-fc-form textarea::placeholder {
  color: var(--cp-text-muted, rgba(15, 18, 23, 0.4));
  font-family: var(--cp-font-body, inherit);
}
.cp-fc-form input:focus,
.cp-fc-form textarea:focus {
  outline: none;
  border-color: var(--cp-orange, #ED863C);
  box-shadow: 0 0 0 3px rgba(237, 134, 60, 0.18);
}
.cp-fc-form textarea {
  resize: vertical;
  min-height: 96px;
  height: auto;
  align-items: flex-start !important;
}

.cp-fc-form__submit {
  margin-top: 10px;
  justify-self: start;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

/* ── Custom select (replaces native <select>) ─────────────────────────── */
.cp-fc-select {
  position: relative;
  cursor: pointer;
  user-select: none;
  justify-content: space-between !important;
  outline: none;
}
.cp-fc-select:hover { border-color: rgba(15, 18, 23, 0.25); }
.cp-fc-select:focus-visible,
.cp-fc-select.is-open {
  border-color: var(--cp-orange, #ED863C);
  box-shadow: 0 0 0 3px rgba(237, 134, 60, 0.18);
}
.cp-fc-select.is-filled { border-color: var(--cp-text-headline, #28354A); }
.cp-fc-select.is-error {
  border-color: var(--cp-pill-red, #EB4E53);
  box-shadow: 0 0 0 3px rgba(235, 78, 83, 0.18);
}

.cp-fc-select__label {
  display: block;
  flex: 1 1 auto;
  color: var(--cp-text-muted, rgba(15, 18, 23, 0.45));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--cp-font-body, inherit);
  font-size: var(--cp-text-body, 15px);
}
.cp-fc-select.is-filled .cp-fc-select__label {
  color: var(--cp-text-headline, #28354A);
}

.cp-fc-select__caret {
  flex: 0 0 auto;
  margin-left: 12px;
  color: var(--cp-text-meta, rgba(15, 18, 23, 0.55));
  transition: transform 0.2s ease, color 0.2s ease;
}
.cp-fc-select.is-open .cp-fc-select__caret {
  transform: rotate(-180deg);
  color: var(--cp-orange, #ED863C);
}

/* Dropdown menu — styled list panel. Positioned absolute below the trigger. */
.cp-fc-select__menu {
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--cp-border-input, rgba(15, 18, 23, 0.12));
  border-radius: var(--cp-radius-lg, 12px);
  box-shadow: 0 18px 40px -12px rgba(15, 18, 23, 0.18),
              0 2px 6px rgba(15, 18, 23, 0.06);
  z-index: 30;
  max-height: 280px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cp-fc-select.is-open .cp-fc-select__menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.cp-fc-select__option {
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--cp-font-body, inherit);
  font-size: var(--cp-text-body, 15px);
  color: var(--cp-text-headline, #28354A);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.cp-fc-select__option:hover,
.cp-fc-select__option.is-active {
  background: rgba(237, 134, 60, 0.08);
}
.cp-fc-select__option.is-selected {
  background: rgba(40, 53, 74, 0.06);
  font-weight: 500;
}
.cp-fc-select__option.is-selected.is-active {
  background: rgba(237, 134, 60, 0.14);
}

/* Cal.com embed wrapper — shown after form submit */
.cp-fc-cal { display: none; }
.cp-fc-cal.is-open { display: block; }
.cp-fc-cal__greeting {
  font-size: 16px;
  color: var(--cp-text-headline, #28354A);
  margin: 0 0 16px;
}
.cp-fc-cal__frame {
  width: 100%;
  height: 680px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Stack vertically by default; on activation, the 3 row-tracks morph the
     same way as columns do on desktop. */
  .cp-fc-paths__grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 14px;
    transition: grid-template-rows 0.7s cubic-bezier(0.76, 0, 0.24, 1),
                gap 0.7s cubic-bezier(0.76, 0, 0.24, 1);
  }
  .cp-fc-paths[data-cp-fc-active="mcat"]     .cp-fc-paths__grid { grid-template-rows: 1fr 0fr 0fr; gap: 0; }
  .cp-fc-paths[data-cp-fc-active="eyeq"]     .cp-fc-paths__grid { grid-template-rows: 0fr 1fr 0fr; gap: 0; }
  .cp-fc-paths[data-cp-fc-active="tutoring"] .cp-fc-paths__grid { grid-template-rows: 0fr 0fr 1fr; gap: 0; }

  .cp-fc-path__compact { min-height: 0; padding: 28px 24px; }
  .cp-fc-expanded__body { grid-template-columns: 1fr; }
  .cp-fc-expanded__visual { display: none; }
  .cp-fc-form__row { grid-template-columns: 1fr; }
  .cp-fc-cal__frame { height: 600px; }
}