/**
 * =============================================================================
 * COMPONENT: Event Card (.event-card)
 * =============================================================================
 * Card with a dedicated media zone on top, then two stacked glass labels —
 *   1) Logo + event title (radial green fill, --gradient-radial-green)
 *   2) Date (line 1) + location & country (line 2) — blue glass, --Blue-white-fade
 *
 * Used by the events-slider block; shared so it can be dropped into any
 * future block that needs event tiles (archive, related events, etc.).
 *
 * Markup:
 *   <article class="event-card">
 *     <a class="event-card__frame" href="…">
 *       <span class="event-card__media">
 *         <img class="event-card__image"  src="…" alt="…" loading="lazy" />
 *       </span>
 *       <div class="event-card__info">
 *         <span class="event-card__logo">
 *           <img src="…" alt="LFDay 2025" />
 *         </span>
 *         <h3 class="event-card__title">LFDay 2025: Navigating…</h3>
 *       </div>
 *       <div class="event-card__date">
 *         <span class="event-card__date-value">Jan 14 - 17, 2026</span>
 *         <span class="event-card__location">Monterey, USA</span>
 *       </div>
 *     </a>
 *   </article>
 *
 * Tokens only — colors, gradients, radii, spacing and font come from
 * variables.css.
 * =============================================================================
 */

.event-card {
  position: relative;
  display: block;
  height: 100%; /* fill the slider track slot so sibling cards share one height */
  border-radius: var(--radius-lg);
  transition: transform var(--transition-base);
}

.event-card:hover {
  transform: translateY(-4px);
}

/* ---------------------------------------------------------------------------
 * FRAME — bordered container. Stacks a dedicated media zone, then the two
 * glass labels in normal flow (no longer overlapping the image, so the
 * featured photo reads clearly). Equal card heights in the slider come from
 * the fixed-ratio media + the 2-line title reserve below.
 * --------------------------------------------------------------------------- */
.event-card__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%; /* stretch with the card so the date pill can pin to the bottom */
  gap: 5px; /* Figma: 5px between media, date pill and info pill */
  padding: var(--space-3); /* 6px */
  border: 1px solid var(--color-white-20);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition-base);
}

.event-card:hover .event-card__frame {
  border-color: var(--color-white-40);
}

.event-card__frame:focus-visible {
  outline: 2px solid var(--color-light-green);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * MEDIA ZONE — fixed 4/3 window that gives the featured image room to breathe.
 * overflow:hidden here (not on the frame) clips the subtle hover zoom while
 * keeping the rounded corners crisp.
 * --------------------------------------------------------------------------- */
.event-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--crop-card-label-radius); /* 14px — matches the labels */
  overflow: hidden;
}

/* No featured image yet: keep the 4/3 window (so every card is the same
   height) and fill it with the neutral glass label gradient + a faint
   border, rather than collapsing the card. */
.event-card__media--placeholder {
  background: var(--gradient-card-label-fade);
  border: 1px solid var(--color-white-20);
}

.event-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
  pointer-events: none;
}

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

/* ---------------------------------------------------------------------------
 * DATE LABEL — blue glass pill below the info block.
 * Uses the same Blue-white-fade mix as the use-case-grid / crop-grid card
 * labels for visual consistency across the design system.
 * Stacks two distinct lines: the date range (bold) and the location +
 * country (regular) directly beneath it.
 * --------------------------------------------------------------------------- */
.event-card__date {
  position: relative;
  z-index: var(--z-above);
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  margin-top: auto; /* pin to the card bottom so footers align across the row */
  padding: 15px 40px 15px 16px;
  border: 1px solid var(--color-white-20);
  border-radius: var(--crop-card-label-radius); /* 14px */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background:
    radial-gradient(
      ellipse at 40% 40%,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.15) 100%
    ),
    linear-gradient(
      90deg,
      rgba(4, 48, 65, 0.75) 0%,
      rgba(4, 48, 65, 0.75) 100%
    );
  color: var(--color-text-primary);
  overflow: hidden;
}

/* Line 1 — the date range. Bold, picks up the pill's primary color. */
.event-card__date-value {
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl); /* 20px */
  line-height: 1.35; /* ~27px */
  text-transform: capitalize;
}

/* Line 2 — location + country on one line, lighter than the date so the
   two lines read as clearly distinct. */
.event-card__location {
  font-family: var(--font-inter);
  font-weight: var(--fw-regular);
  font-size: var(--text-md); /* 16px */
  line-height: 1.35;
  color: var(--color-white-70);
  /* Keep the location to one line so the date pill stays a fixed height
     (long values like "Lubbock, TX, United States" would otherwise wrap). */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
 * INFO LABEL — radial green block with logo + title.
 * The green fill is what makes the event card visually distinct from the
 * other image-backed cards in the system (use-case-card, uc-grid, crop-grid).
 * --------------------------------------------------------------------------- */
.event-card__info {
  position: relative;
  z-index: var(--z-above);
  display: flex;
  flex-direction: column;
  gap: var(--space-8); /* 16px between logo row and title */
  padding: 26px var(--space-8) var(--space-5); /* 26px top / 16px sides / 10px bottom */
  border: 1px solid var(--color-white-20);
  border-radius: var(--crop-card-label-radius); /* 14px */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: var(--gradient-radial-green);
}

.event-card__logo {
  display: flex;
  align-items: center;
  height: 48px; /* fixed vertical slot so logos of any aspect ratio align — and
                   the row stays reserved even when an event has no logo yet */
  max-width: 70%;
}

.event-card__logo img {
  display: block;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.event-card__title {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl); /* 20px */
  line-height: 1.35; /* ~27px */
  color: var(--color-text-primary);
  text-transform: capitalize;
  /* Single line: long titles truncate with an ellipsis so every green block —
     and therefore every card — keeps the exact same height across the slider. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
 * RESPONSIVE — cards shrink to ~320px at tablet, full-width-ish on mobile
 * (the slider container decides the exact track behavior).
 * --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .event-card__date-value,
  .event-card__title {
    font-size: var(--text-lg); /* 18px on mobile so long titles breathe */
  }

  .event-card__location {
    font-size: var(--text-base); /* 14px on mobile */
  }

  .event-card__info {
    padding-top: var(--space-10); /* 20px — lighter on narrow frames */
  }
}