/* ==========================================================================
   fee-flow.css — "You decide": the three ways a trainer can handle the booking
   fee (Cover it / Share it / Pass it on), shown as three flat illustrations on
   one transparency-fee panel, with a booking-fee reassurance aside.
   Markup: <div class="fee-choice">
            <div class="fee-choice__main">
              <div class="fee-choice__head"> kicker / h3 / lead </div>
              <ol class="fee-ways">
                <li class="fee-way fee-way--cover|share|pass">
                  <img class="fee-way__art">
                  <span class="fee-way__label">…</span>
                  <span class="fee-way__sub">…</span>
                </li> × 3
              </ol>
            </div>
            <aside class="fee-choice__aside"> tag / label / sub </aside>
   The three illustrations read left→right as a flow (you pay → split → client
   pays); a quiet chevron in each gap (.fee-way::after) marks the progression.
   Not an identical icon-tile grid: the artwork carries the section and the
   asymmetric reassurance aside breaks the symmetry. ≤520px the steps stack and
   the chevrons drop out. ========================================================================== */

.fee-choice {
  margin-top: var(--space-32);
  padding: var(--space-32) var(--space-36);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-36);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  animation: fee-fade-up .55s ease-out .1s both;
}

/* ── Left column: the choice ──────────────────────────────────────────── */
.fee-choice__head { margin-bottom: var(--space-28); }
.fee-choice__kicker {
  margin: 0 0 var(--space-8);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-ink);
}
.fee-choice__title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  color: var(--ink);
}
.fee-choice__lead {
  margin: var(--space-6) 0 0;
  font-size: var(--fs-lead);
  color: var(--ink-3);
}

/* The three illustrated options, side by side, read left→right as a flow:
   cover it → share it → pass it on. A quiet chevron in each gap (see
   .fee-way::after) marks the progression without turning the block into a
   heavy flow chart — the illustrations still carry it. */
.fee-ways {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}
.fee-way {
  position: relative;            /* anchor for the flow chevron in the gap */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  padding: 0 var(--space-8);
  opacity: 0;
  animation: fee-fade-up .5s ease-out both;
}
.fee-way:nth-child(1) { animation-delay: .18s; }
.fee-way:nth-child(2) { animation-delay: .28s; }
.fee-way:nth-child(3) { animation-delay: .38s; }

/* Flat brand illustration (Imagen, white ground that blends into the panel).
   The PNGs carry 22–31% baked-in bottom whitespace, so the label floated ~45px
   below the drawing. The negative margin pulls the copy up under the artwork,
   closing that gap to ~20px without crowding the figure (its lowest point sits
   at ~78% of the box). */
.fee-way__art {
  width: 176px;
  height: auto;
  max-width: 100%;
  margin-bottom: calc(var(--space-24) * -1);
  display: block;
}

.fee-way__label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand-ink);
}
.fee-way__sub {
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--ink-3);
  max-width: 17ch;
}

/* Flow chevron between steps — a quiet right-pointing arrow dropped into each
   grid gap, vertically centred on the 176px illustration (every drawing is
   centred at 50% of its box, so --space-88 lands dead-on). It rides the parent
   step's fade-up; reduced-motion is handled by the .fee-way reset below. */
.fee-way:not(:last-child)::after {
  content: "";
  position: absolute;
  top: var(--space-88);                 /* centre of the 176px art */
  right: calc(var(--space-8) * -1);     /* nudge into the middle of the gap */
  width: 11px;
  height: 11px;
  border-top: 2px solid var(--muted);
  border-right: 2px solid var(--muted);
  transform: translate(50%, -50%) rotate(45deg);
  pointer-events: none;
}

/* ── Right column: booking-fee reassurance ────────────────────────────── */
.fee-choice__aside {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  max-width: 220px;
  padding-left: var(--space-36);
  border-left: 1px solid var(--line);
}
.fee-choice__tag {
  width: 50px;
  height: 50px;
  margin-bottom: var(--space-10);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--brand-tint);
  color: var(--brand-ink);
}
.fee-choice__tag svg.lucide,
.fee-choice__tag [data-lucide] { width: 26px; height: 26px; }
.fee-choice__tag-label {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink);
}
.fee-choice__tag-sub {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-3);
}

@keyframes fee-fade-up {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* Caption beneath the panel — what booking fees go toward. */
.fee-flow-caption {
  margin: var(--space-22) auto 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  max-width: 64ch;
  animation: fee-fade-up .5s ease-out .55s both;
}
.fee-flow-caption strong { color: var(--ink); font-weight: var(--fw-bold); }

@media (prefers-reduced-motion: reduce) {
  .fee-choice, .fee-way, .fee-flow-caption {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Aside drops below the choice; the divider becomes a top hairline. */
  .fee-choice {
    grid-template-columns: 1fr;
    gap: var(--space-28);
    padding: var(--space-28) var(--space-24);
  }
  .fee-choice__aside {
    flex-direction: row;
    align-items: center;
    gap: var(--space-14);
    max-width: none;
    padding: var(--space-24) 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .fee-choice__tag { flex-shrink: 0; margin-bottom: 0; }
}
@media (max-width: 520px) {
  /* Stack the three options; illustration left, copy right. */
  .fee-ways {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }
  .fee-way {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    text-align: left;
    gap: var(--space-2) var(--space-12);
    padding: 0;
  }
  /* Stacked: the side chevron becomes a down chevron in the gap, under the art. */
  .fee-way:not(:last-child)::after {
    top: calc(100% + var(--space-8));   /* into the 16px gap below the step */
    right: auto;
    left: 52px;                         /* centre of the 104px art */
    transform: translate(-50%, -50%) rotate(135deg);
  }
  .fee-way__art { grid-row: 1 / 3; width: 104px; margin-bottom: 0; }
  .fee-way__sub { max-width: none; }
}