/* ==========================================================================
   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 .discount-badge {
  position: absolute;
  top: var(--space-12);
  right: 52px;
  background: #00a7e5;
  color: #ffffff;
  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);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 1;
}
.card .photo .save {
  position: absolute;
  top: var(--space-12); right: var(--space-12);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: #64748b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  z-index: 2;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.card .photo .save:hover {
  background: #ffffff;
  color: #ef4444;
  transform: scale(1.08);
}
.card .photo .save.on,
.card .photo .save[aria-pressed="true"] {
  background: #ffffff;
  color: #ef4444;
}
.card .photo .save.on svg path,
.card .photo .save[aria-pressed="true"] svg path {
  fill: #ef4444;
  stroke: #ef4444;
}
.card .photo .save svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* 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); }
}

/* ==========================================================================
   Pixel-Perfect Session Card Badges & Internal Elements
   ========================================================================== */

/* Format Pill (Top Left) */
.card .photo .badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 2;
  line-height: 1;
}

.card .photo .badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: currentColor;
}

/* Green pill (In-Person & Online / In-Person) */
.card .photo .badge--green {
  background: #1bb584;
}

/* Purple pill (Bootcamp) */
.card .photo .badge--purple {
  background: #8830ee;
}

/* Blue pill (Online) */
.card .photo .badge--blue {
  background: #1f59ee;
}

/* Save Heart (Top Right) */
.card .photo .save {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  z-index: 3;
  transition: transform 0.15s ease, color 0.15s ease;
}

.card .photo .save:hover {
  transform: scale(1.08);
  color: #ef4444;
}

.card .photo .save.on,
.card .photo .save[aria-pressed="true"] {
  color: #ef4444;
}

.card .photo .save.on svg path,
.card .photo .save[aria-pressed="true"] svg path {
  fill: #ef4444;
  stroke: #ef4444;
}

/* Sponsored Ribbon (Bottom Right of Photo) */
.card .photo .sponsored-ribbon {
  position: absolute;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg, #ec4899 0%, #a855f7 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 4px 18px 4px 14px;
  transform: skewX(-14deg);
  transform-origin: bottom right;
  z-index: 2;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
}

/* Rating Pill (Bottom Left of Photo) */
.card .photo .rating {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: #ffffff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  z-index: 2;
  line-height: 1;
}

.card .photo .rating .star {
  color: #f59e0b;
  font-size: 12px;
}

/* Card Body Content */
.card-session-meta {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.card-session-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price Row */
.card-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* Arrowhead Tag Badge matching close-up Image 4 */
.price-tag-badge {
  background: #dff2fe;
  color: #0c1e38;
  font-size: 19px;
  font-weight: 800;
  padding: 4px 20px 4px 12px;
  clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

.price-subtext {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

.price-subtext s {
  color: #94a3b8;
  margin-right: 3px;
}

/* Trainer Row */
.card-trainer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.card-trainer-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.card-trainer-name {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

/* Location / Format Footer */
.card-location-footer {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #64748b;
}

.card-location-footer svg {
  width: 14px;
  height: 14px;
  color: #64748b;
  flex-shrink: 0;
}