/* ==========================================================================
   card-session.css — session/trainer card grid + card internals
   Markup: <div class="cards">
            <a class="card" href="...">
              <div class="photo">
                <span class="badge">In-person</span>
                <button class="save"><i data-lucide="heart"></i></button>
              </div>
              <div class="body">
                <div class="top"><h3>Title</h3><span class="rating">★ 4.9</span></div>
                <div class="trainer">with <strong>Name</strong> · 312 sessions</div>
                <div class="meta">
                  <span class="where">📍 Brooklyn, NY</span>
                  <span class="price"><span class="from">from</span>$30</span>
   Card is a link — entire surface is clickable.
   ========================================================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-22);
}

.card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  /* Outer ring — sits outside the content box so the photo isn't trimmed
     by an inner border. box-shadow follows border-radius cleanly. */
  box-shadow: 0 0 0 1px var(--line-soft);
  color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--line-soft), var(--shadow-lg);
  color: var(--ink);
}
/* iOS-style press: scale-down from the hover-lift back into the surface,
   overriding the global `a:not(.btn):active { opacity: .55 }` so the photo
   doesn't go translucent under the user's finger. Specificity (2 classes +
   :active) beats the base rule's (2 classes + :active) on cascade order. */
.card:not(.btn):active {
  opacity: 1;
  transform: scale(.985);
  box-shadow: 0 0 0 1px var(--line-soft), var(--shadow-sm);
  transition: transform .12s cubic-bezier(.22, 1, .36, 1),
              box-shadow .12s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .card:not(.btn):active { transform: none; }
}

/* Photo with overlays (badge + save) */
.card .photo {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-3);
  position: relative;
}
.card .photo .badge {
  position: absolute;
  top: var(--space-12); left: var(--space-12);
  background: white;
  color: var(--ink);
  font-size: var(--fs-badge);
  font-weight: var(--fw-bold);
  line-height: 1;
  padding: var(--space-5) var(--space-11);
  border-radius: var(--pill);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.card .photo .save {
  position: absolute;
  top: var(--space-12); right: var(--space-12);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(var(--white-rgb), .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  border: none;
  color: var(--ink);
}
.card .photo .save:hover { background: white; color: var(--brand-ink); }
.card .photo .save svg.lucide,
.card .photo .save [data-lucide] { width: 18px; height: 18px; }

/* Rating chip on photo (bottom-left) */
.card .photo .rating {
  position: absolute;
  bottom: var(--space-12);
  left: var(--space-12);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  background: rgba(var(--white-rgb), .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: var(--fs-badge);
  font-weight: var(--fw-bold);
  padding: var(--space-5) var(--space-10);
  border-radius: var(--pill);
  line-height: 1;
}
.card .photo .rating .star { color: var(--star); }

/* Body (title + meta) */
.card .body {
  padding: var(--space-16) var(--space-18) var(--space-18);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}
.card .top {
  display: flex;
  gap: var(--space-12);
  margin-bottom: var(--space-4);
  min-width: 0;
}
.card h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  margin: 0;
  line-height: var(--lh-card);
  min-width: 0;
  flex: 1;
}

.card .trainer {
  font-size: var(--fs-caption);
  color: var(--muted);
  margin-bottom: var(--space-8);
}
.card .trainer strong { color: var(--ink-2); font-weight: var(--fw-semibold); }

/* Bottom meta row (location + price) */
.card .meta {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
  font-size: var(--fs-micro);
  color: var(--muted);
  margin-top: auto;
  padding-top: var(--space-14);
  border-top: 1px solid var(--line-2);
  align-items: center;
  justify-content: space-between;
}
.card .where { display: inline-flex; align-items: center; gap: var(--space-4); }
.card .where svg.lucide,
.card .where [data-lucide] { width: 14px; height: 14px; flex-shrink: 0; }
.card .price {
  font-weight: var(--fw-bold);
  color: var(--ink);
  font-size: var(--fs-price);
  letter-spacing: var(--ls-snug);
}
.card .price .from {
  color: var(--muted);
  font-weight: var(--fw-medium);
  font-size: var(--fs-meta);
  margin-right: var(--space-2);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .cards { grid-template-columns: 1fr; gap: var(--space-16); }
}