/* ==========================================================================
   hero-aside.css — positioning rail for live-counter + recent-bookings
   Markup: <div class="hero-aside">
            <div class="live-card">...</div>          (live-counter.css)
            <div class="recent-bookings">...</div>   (recent-bookings.css)
   The two children are now standalone cards that own their own glass surface.
   This wrapper only sets up the column flow and stacking context.
   ========================================================================== */

.hero-aside {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ── Trainer hero variant — phone-mock with floating booking-pop card.
   Phone overflows the bottom of the hero by ~15% so it reads as anchored
   to the section's lower edge. The .trn-pop card overhangs the bottom-left
   of the phone (mirrors the .booking-pop pattern in the index "Three steps"
   section). ────────────────────────────────────────────────────────────── */
.hero.is-compact .hero-aside {
  align-items: flex-end;
}
.hero.is-compact .hero-aside .phone-mock {
  /* Push the device below the hero's bottom edge so ~15% of the phone gets
     clipped by .hero { overflow: hidden }. The 27% accounts for the empty
     space below hero-aside inside the hero before clipping kicks in.
     transform doesn't affect hero-aside's layout height — the .trn-pop
     anchor stays stable. */
  transform: translateY(27%);
}
.hero.is-compact .hero-aside .trn-pop {
  position: absolute;
  /* Sit at the bottom-left of the phone, sticking out beyond its left edge
     so the card reads as "lifted off" the device. */
  left: calc(var(--space-32) * -1);
  bottom: 0;
  z-index: 2;
  min-width: 268px;
  max-width: 300px;
}

/* Hero-aside overrides for the live-card:
   - nudge right so the recent-bookings stack underneath gets its own lane
   - extra bottom padding so the "2,300+" number breathes within the glass
     surface (the trainer-cta usage stays balanced via the component default) */
.hero-aside .live-card {
  margin-right: var(--space-20);
  padding-bottom: var(--space-32);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* Center the aside under the hero copy when the grid collapses. */
  .hero-aside {
    max-width: 480px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Center the phone (override align-items: flex-end on collapse). */
  .hero.is-compact .hero-aside { align-items: center; }
  .hero.is-compact .hero-aside .phone-mock { transform: translateY(10%); }
  .hero.is-compact .hero-aside .trn-pop {
    /* On collapse, anchor the card against the centered phone, not the
       column edge — so it still hugs the device. */
    left: 50%;
    transform: translateX(calc(-50% - 130px));
    bottom: 6%;
  }
}
@media (max-width: 720px) {
  /* Full bleed on mobile — no max width constraint. */
  .hero-aside { max-width: none; }
  /* Hide the hero live-card on phones — it duplicates the "3,000+ Sessions
     booked this month" metric in the trust strip below; recent-bookings
     carries the live signal. (Scoped here so trainer-cta usage is unaffected.) */
  .hero-aside .live-card { display: none; }
  /* Pull the phone in — the column is centered, so the device gets the full
     width of the container minus a small margin for the booking-pop overhang. */
  .hero.is-compact .hero-aside .phone-mock { transform: translateY(6%); }
  /* Drop the absolute positioning on phones — let the trn-pop flow naturally
     below the phone so it never bleeds past the viewport edge. The card sits
     centered, slightly tucked under the phone, fully visible. */
  .hero.is-compact .hero-aside .trn-pop {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    transform: translateY(-32px); /* tuck under the phone's bottom curve */
    margin: 0 auto;
    min-width: 0;
    width: min(100%, 320px);
    max-width: 100%;
  }
}