/* ==========================================================================
   payout-calendar.css — mock 4-week payout schedule (sits in .hiw-art slot)
   Markup: <div class="payout-calendar">
            <header class="pc-head">
              <span class="kicker">Stripe payout schedule</span>
              <h4>Every Monday, like clockwork.</h4>
            </header>
            <ul class="pc-weeks">
              <li class="pc-week is-paid">
                <div class="pc-day">Mon</div>
                <div class="pc-meta">
                  <div class="pc-when">Apr 8</div>
                  <div class="pc-detail">3 sessions · Sofia, Maya, Kevin</div>
                </div>
                <div class="pc-amt">$324</div>
              </li>
              ...
              <li class="pc-week is-current">
                <div class="pc-day">Mon</div>
                <div class="pc-meta">
                  <div class="pc-when">Apr 29 · this Monday</div>
                  <div class="pc-detail">5 sessions queued</div>
                </div>
                <div class="pc-amt">$540</div>
              </li>
            </ul>
   Replaces the .hiw-art video+booking-pop on the trainer landing — visualizes
   the weekly payout cadence as a tangible receipt-style block.
   ========================================================================== */

.payout-calendar {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-26);
  display: flex;
  flex-direction: column;
  gap: var(--space-18);
  box-shadow: var(--shadow-md);
}

.payout-calendar .pc-head .kicker { margin-bottom: var(--space-10); }
.payout-calendar .pc-head h4 {
  margin: 0;
  font-size: var(--fs-h3-lg);
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-heading);
}

.pc-weeks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.pc-week {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--space-14);
  align-items: center;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-3);
}

.pc-week .pc-day {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-meta);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: var(--ls-snug);
}

.pc-week .pc-meta { min-width: 0; }
.pc-week .pc-when {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: var(--ls-snug);
}
.pc-week .pc-detail {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-week .pc-amt {
  font-family: var(--font-display);
  font-size: var(--fs-h3-lg);
  font-weight: var(--fw-display);
  color: var(--ink);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}

/* Past payouts — keep neutral, ink amount */
.pc-week.is-paid .pc-amt { color: var(--ink); }

/* Current week — brand-tinted to mark "this is what's about to land" */
.pc-week.is-current {
  background: var(--brand-soft-2);
  border-color: var(--brand-soft);
  box-shadow: var(--shadow-sm);
}
.pc-week.is-current .pc-day {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}
.pc-week.is-current .pc-amt {
  color: var(--brand-ink);
}

/* Footer caption beneath the list */
.payout-calendar .pc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-10);
  border-top: 1px solid var(--line);
  font-size: var(--fs-meta);
  color: var(--ink-3);
}
.payout-calendar .pc-foot strong {
  color: var(--ink);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .payout-calendar { padding: var(--space-22); }
}
@media (max-width: 720px) {
  .payout-calendar { padding: var(--space-18); gap: var(--space-14); }
  .payout-calendar .pc-head h4 { font-size: var(--fs-body-lg); }
  .pc-week { padding: var(--space-10) var(--space-12); gap: var(--space-10); grid-template-columns: 36px 1fr auto; }
  .pc-week .pc-day { width: 36px; height: 36px; font-size: var(--fs-label); }
  .pc-week .pc-amt { font-size: var(--fs-body-lg); }
}