/*
 * ============================================================
 * 02-card-styles.css
 * All card component styles extracted from the Figma Make
 * "Design elegant landing page" export.
 * ============================================================
 *
 * CONTENTS
 *   1. Base Card
 *   2. Event Card  (featured + compact variants)
 *   3. Benefit Card
 *   4. Ranking / Table Row Card
 *   5. Membership Tier Card
 *   6. Stats Card (icon + number + label)
 *   7. Badge / Pill
 *   8. Card Hover & Transition Utilities
 * ============================================================
 *
 * These styles depend on the design tokens in 01-html-elements.css.
 * Import that file before this one.
 */


/* ============================================================
   1. Base Card
   ============================================================ */

.card {
  background-color: var(--card);
  color:            var(--card-foreground);
  border-radius:    var(--radius-2xl);           /* 1 rem */
  border:           1px solid var(--border);
  overflow:         hidden;
}

/* Generic padding inside any card body */
.card__body {
  padding: calc(var(--spacing) * 8);             /* 2 rem */
}

.card__body--sm {
  padding: calc(var(--spacing) * 6);             /* 1.5 rem */
}

.card__body--lg {
  padding: calc(var(--spacing) * 8) calc(var(--spacing) * 8);
}


/* ============================================================
   2. Event Card
   ============================================================ */

/* Wrapper (used for both featured and compact) */
.event-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--card);
  border-radius:    var(--radius-2xl);
  overflow:         hidden;
  border:           1px solid var(--border);
  transition:       border-color 300ms var(--ease-in-out);
}

.event-card:hover {
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
}

/* ── Featured (wide) variant ── */
.event-card--featured {
  /* Spans 2 columns in a 3-col grid */
  grid-column: span 2 / span 2;
}

/* Image wrapper */
.event-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 21 / 9;      /* featured hero ratio */
}

.event-card--compact .event-card__image-wrap {
  aspect-ratio: 16 / 9;      /* compact card ratio */
}

/* The image itself */
.event-card__image {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-in-out);
}

.event-card:hover .event-card__image {
  transform: scale(1.05);
}

/* Gradient overlay on image (bottom fade to card BG) */
.event-card__gradient {
  position:         absolute;
  inset:            0;
  background-image: linear-gradient(
    to top in oklab,
    var(--card) 0%,
    color-mix(in oklab, var(--card) 50%, transparent) 50%,
    transparent 100%
  );
}

/* Badge pinned to top-left of image */
.event-card__badge {
  position:         absolute;
  top:              calc(var(--spacing) * 6);    /* 1.5 rem */
  left:             calc(var(--spacing) * 6);
  padding:          calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  background-color: var(--primary);
  color:            var(--primary-foreground);
  border-radius:    9999px;
  font-size:        var(--text-sm);
  font-weight:      var(--font-weight-medium);
}

/* Card content below image */
.event-card__content {
  padding: calc(var(--spacing) * 8);
}

/* Event title */
.event-card__title {
  font-size:   var(--text-2xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: calc(var(--spacing) * 4);
  transition:    color 150ms var(--ease-in-out);
}

.event-card:hover .event-card__title {
  color: var(--primary);
}

/* Meta rows (date / location / capacity) */
.event-card__meta-list {
  display:        flex;
  flex-direction: column;
  gap:            calc(var(--spacing) * 3);
  margin-bottom:  calc(var(--spacing) * 6);
  color:          color-mix(in oklab, var(--foreground) 70%, transparent);
}

.event-card__meta-row {
  display:     flex;
  align-items: center;
  gap:         calc(var(--spacing) * 3);
}

.event-card__meta-icon {
  color:       var(--primary);
  flex-shrink: 0;
  width:       18px;
  height:      18px;
}

/* CTA button inside card */
.event-card__cta {
  display:          inline-flex;
  align-items:      center;
  gap:              calc(var(--spacing) * 2);
  padding:          calc(var(--spacing) * 3) calc(var(--spacing) * 6);
  background-color: var(--primary);
  color:            var(--primary-foreground);
  border-radius:    9999px;
  font-size:        var(--text-sm);
  font-weight:      var(--font-weight-medium);
  transition:       background-color 150ms var(--ease-in-out);
  cursor:           pointer;
  border:           none;
}

.event-card__cta:hover {
  background-color: color-mix(in oklab, var(--primary) 90%, transparent);
}

/* Outline CTA variant */
.event-card__cta--outline {
  background-color: transparent;
  border:           1px solid var(--border);
  color:            var(--foreground);
}

.event-card__cta--outline:hover {
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
}


/* ============================================================
   3. Benefit Card
   ============================================================ */

.benefit-card {
  background-color: var(--card);
  border-radius:    var(--radius-2xl);
  border:           1px solid var(--border);
  padding:          calc(var(--spacing) * 8);
  transition:       border-color 300ms var(--ease-in-out),
                    box-shadow   300ms var(--ease-in-out);
}

.benefit-card:hover {
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  box-shadow:   0 10px 15px -3px color-mix(in oklab, var(--primary) 5%, transparent);
}

/* Icon circle */
.benefit-card__icon-wrap {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            calc(var(--spacing) * 14);   /* 3.5 rem */
  height:           calc(var(--spacing) * 14);
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
  border-radius:    9999px;
  margin-bottom:    calc(var(--spacing) * 6);
}

.benefit-card__icon {
  color:  var(--primary);
  width:  24px;
  height: 24px;
}

.benefit-card__title {
  font-size:     var(--text-xl);
  font-weight:   var(--font-weight-medium);
  margin-bottom: calc(var(--spacing) * 3);
}

.benefit-card__body {
  font-size:   var(--text-base);
  color:       color-mix(in oklab, var(--foreground) 70%, transparent);
  line-height: var(--leading-relaxed);
}


/* ============================================================
   4. Ranking / Table Row Card
   ============================================================ */

/* Outer container */
.rankings-card {
  background-color: var(--card);
  border-radius:    var(--radius-2xl);
  border:           1px solid var(--border);
  overflow:         hidden;
}

/* Column header row */
.rankings-card__header {
  display:       grid;
  grid-template-columns: repeat(12, 1fr);
  gap:           calc(var(--spacing) * 4);
  padding:       calc(var(--spacing) * 6) calc(var(--spacing) * 8);
  border-bottom: 1px solid var(--border);
  font-size:     var(--text-sm);
  color:         color-mix(in oklab, var(--foreground) 60%, transparent);
  font-weight:   var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Data row */
.rankings-card__row {
  display:   grid;
  grid-template-columns: repeat(12, 1fr);
  gap:       calc(var(--spacing) * 4);
  padding:   calc(var(--spacing) * 6) calc(var(--spacing) * 8);
  transition: background-color 150ms var(--ease-in-out);
}

.rankings-card__row:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.rankings-card__row:hover {
  background-color: color-mix(in oklab, var(--muted) 20%, transparent);
}

/* Column span helpers (mirror Tailwind col-span-*) */
.col-1  { grid-column: span 1  / span 1;  }
.col-2  { grid-column: span 2  / span 2;  }
.col-5  { grid-column: span 5  / span 5;  }

/* Rank number */
.rankings-card__rank {
  font-size:   var(--text-lg);
  color:       color-mix(in oklab, var(--foreground) 60%, transparent);
  align-self:  center;
}

/* Top-3 rank badge */
.rankings-card__rank--gold   { color: #fbbf24; }
.rankings-card__rank--silver { color: #9ca3af; }
.rankings-card__rank--bronze { color: #cd7c2e; }

/* Player name */
.rankings-card__name {
  font-size:  var(--text-lg);
  align-self: center;
}

/* Rating score */
.rankings-card__rating {
  font-size:  var(--text-lg);
  color:      var(--primary);
  align-self: center;
  text-align: right;
}

/* Trend indicator */
.rankings-card__trend {
  display:     flex;
  align-items: center;
  justify-content: flex-end;
  gap:         calc(var(--spacing) * 1);
  font-size:   var(--text-sm);
}

.rankings-card__trend--up   { color: var(--color-green-500, oklch(72.3% 0.219 149.579)); }
.rankings-card__trend--down { color: var(--color-red-500,   oklch(63.7% 0.237 25.331));  }


/* ============================================================
   5. Membership Tier Card
   ============================================================ */

.tier-card {
  background-color: var(--card);
  border-radius:    var(--radius-2xl);
  border:           1px solid var(--border);
  padding:          calc(var(--spacing) * 8);
  position:         relative;
  overflow:         hidden;
  transition:       border-color 300ms var(--ease-in-out),
                    box-shadow   300ms var(--ease-in-out);
}

.tier-card:hover {
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  box-shadow:   var(--shadow-xl);
}

/* Highlighted / recommended tier */
.tier-card--featured {
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  box-shadow:   0 20px 25px -5px color-mix(in oklab, var(--primary) 10%, transparent);
}

/* Subtle glow corner decoration */
.tier-card--featured::before {
  content:          "";
  position:         absolute;
  top:    calc(var(--spacing) * -12);
  right:  calc(var(--spacing) * -12);
  width:            calc(var(--spacing) * 48);
  height:           calc(var(--spacing) * 48);
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
  border-radius:    9999px;
  pointer-events:   none;
}

/* "Most Popular" label */
.tier-card__badge {
  position:         absolute;
  top:              calc(var(--spacing) * 4);
  right:            calc(var(--spacing) * 4);
  padding:          calc(var(--spacing) * 1) calc(var(--spacing) * 3);
  background-color: var(--primary);
  color:            var(--primary-foreground);
  border-radius:    9999px;
  font-size:        var(--text-xs);
  font-weight:      var(--font-weight-medium);
  letter-spacing:   var(--tracking-wide);
  text-transform:   uppercase;
}

.tier-card__name {
  font-size:     var(--text-lg);
  font-weight:   var(--font-weight-medium);
  color:         var(--primary);
  margin-bottom: calc(var(--spacing) * 2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.tier-card__price {
  font-size:     var(--text-4xl);
  font-weight:   var(--font-weight-medium);
  margin-bottom: calc(var(--spacing) * 1);
}

.tier-card__price-period {
  font-size: var(--text-sm);
  color:     var(--muted-foreground);
}

.tier-card__divider {
  border-top:    1px solid var(--border);
  margin-block:  calc(var(--spacing) * 6);
}

.tier-card__features {
  display:        flex;
  flex-direction: column;
  gap:            calc(var(--spacing) * 3);
  margin-bottom:  calc(var(--spacing) * 8);
}

.tier-card__feature {
  display:     flex;
  align-items: center;
  gap:         calc(var(--spacing) * 3);
  font-size:   var(--text-sm);
  color:       color-mix(in oklab, var(--foreground) 80%, transparent);
}

.tier-card__feature-check {
  color:       var(--primary);
  flex-shrink: 0;
  width:       16px;
  height:      16px;
}

/* Join / select button */
.tier-card__cta {
  width:            100%;
  padding:          calc(var(--spacing) * 3) calc(var(--spacing) * 6);
  background-color: var(--primary);
  color:            var(--primary-foreground);
  border:           none;
  border-radius:    9999px;
  font-size:        var(--text-base);
  font-weight:      var(--font-weight-medium);
  cursor:           pointer;
  transition:       background-color 150ms var(--ease-in-out);
}

.tier-card__cta:hover {
  background-color: color-mix(in oklab, var(--primary) 90%, transparent);
}

.tier-card__cta--outline {
  background-color: transparent;
  border:           1px solid var(--border);
  color:            var(--foreground);
}

.tier-card__cta--outline:hover {
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
}


/* ============================================================
   6. Stats Card (icon + number + label)
   ============================================================ */

.stat-card {
  text-align: center;
}

.stat-card__icon-wrap {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            calc(var(--spacing) * 16);   /* 4 rem */
  height:           calc(var(--spacing) * 16);
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
  border-radius:    9999px;
  margin-bottom:    calc(var(--spacing) * 4);
}

.stat-card__icon {
  color:  var(--primary);
  width:  28px;
  height: 28px;
}

.stat-card__number {
  font-size:     var(--text-4xl);
  color:         var(--primary);
  margin-bottom: calc(var(--spacing) * 2);
  font-weight:   var(--font-weight-medium);
  line-height:   1;
}

.stat-card__label {
  font-size: var(--text-lg);
  color:     color-mix(in oklab, var(--foreground) 60%, transparent);
}


/* ============================================================
   7. Badge / Pill
   ============================================================ */

/* Section label pill (e.g. "Our Mission", "Upcoming Events") */
.badge-pill {
  display:          inline-block;
  padding:          calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
  border:           1px solid color-mix(in oklab, var(--primary) 20%, transparent);
  border-radius:    9999px;
  margin-bottom:    calc(var(--spacing) * 6);
}

.badge-pill__text {
  color:          var(--primary);
  font-size:      var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Status / availability pill on event cards */
.status-pill {
  padding:          calc(var(--spacing) * 1) calc(var(--spacing) * 3);
  border-radius:    9999px;
  font-size:        var(--text-xs);
  font-weight:      var(--font-weight-medium);
  letter-spacing:   var(--tracking-wide);
  text-transform:   uppercase;
}

.status-pill--open {
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
  color:            var(--primary);
}

.status-pill--limited {
  background-color: color-mix(in oklab, #f59e0b 10%, transparent);
  color:            #f59e0b;
}

.status-pill--closed {
  background-color: color-mix(in oklab, var(--muted-foreground) 20%, transparent);
  color:            var(--muted-foreground);
}


/* ============================================================
   8. Card Hover & Transition Utilities
   ============================================================ */

/* Standard transition used on interactive cards */
.transition-card {
  transition: border-color  300ms var(--ease-in-out),
              box-shadow     300ms var(--ease-in-out),
              background-color 150ms var(--ease-in-out);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 260px;
}

@media (max-width: 768px) {
  .transition-card {
    height: auto;
    min-height: 300px;
  }
}

/* Image scale-on-hover (applied to the inner <img>) */
.img-hover-scale {
  transition: transform 500ms var(--ease-in-out);
}

.group:hover .img-hover-scale {
  transform: scale(1.05);
}

/* Color transition for headings inside hovered cards */
.heading-hover-primary {
  transition: color 150ms var(--ease-in-out);
}

.group:hover .heading-hover-primary {
  color: var(--primary);
}