/* ==========================================================================
   I'M HERE™ — event cards
   Shared by the homepage section and /events/, so a card looks identical
   wherever it appears. Pairs with /assets/events.js.

   Cards are laid out on a fixed-width track (auto-fill, not auto-fit) so
   every card stays exactly the same size whether there are two events
   listed or ten.
   ========================================================================== */

.ev-grid {
  display: grid;
  /* Fixed-size tracks, centred: two events look deliberate rather than
     stretched, and a card is the same size however many are listed. */
  grid-template-columns: repeat(auto-fill, minmax(288px, 340px));
  justify-content: center;
  gap: 18px;
  margin-top: 44px;
}

.ev-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.025);
  border: 0.5px solid rgba(196, 123, 58, 0.18);
  border-radius: 16px;
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.4s ease;
}

/* Hover: the whole card lifts, the poster pushes in, the border warms up */
.ev-card:hover,
.ev-card:focus-within {
  transform: translateY(-8px);
  border-color: var(--amber, #c47b3a);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(196, 123, 58, 0.35);
}

.ev-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0d0d0d;
  border-bottom: 0.5px solid rgba(196, 123, 58, 0.14);
}
.ev-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ev-card:hover .ev-media img,
.ev-card:focus-within .ev-media img {
  transform: scale(1.06);
}

/* Fallback when an organiser has not given us artwork */
.ev-media-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, rgba(196, 123, 58, 0.18) 0%, transparent 65%),
    #0d0d0d;
}
.ev-blank-mark {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.35);
}
.ev-blank-mark sup {
  font-size: 10px;
  color: rgba(196, 123, 58, 0.8);
}

.ev-live {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 0.5px solid rgba(74, 222, 128, 0.35);
  border-radius: 100px;
  padding: 4px 10px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #4ade80;
}
.ev-live i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
}

.ev-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px 22px;
  flex: 1;
}
.ev-name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: #fff;
}
.ev-date {
  font-size: 13px;
  color: var(--amber, #c47b3a);
  line-height: 1.5;
}
.ev-pc {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.ev-btn {
  margin-top: 18px;
  display: block;
  text-align: center;
  text-decoration: none;
  background: transparent;
  color: var(--amber, #c47b3a);
  border: 1.5px solid rgba(196, 123, 58, 0.35);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
.ev-card:hover .ev-btn,
.ev-card:focus-within .ev-btn {
  background: var(--amber, #c47b3a);
  border-color: var(--amber, #c47b3a);
  color: #fff;
}

.ev-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}

.ev-empty {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
}
.ev-empty a {
  color: var(--amber, #c47b3a);
}
.ev-grid.ev-grid-empty {
  display: block;
}

/* Organisers' posters are portrait and text-heavy, so give cards a little
   more room on small screens rather than squeezing two into a row. */
@media (max-width: 768px) {
  .ev-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .ev-name {
    font-size: 17px;
  }
  /* Touch devices have no hover — keep the poster steady and the CTA solid */
  .ev-card:hover {
    transform: none;
  }
  .ev-btn {
    background: var(--amber, #c47b3a);
    border-color: var(--amber, #c47b3a);
    color: #fff;
  }
}