/* ==========================================================================
   Event cards
   --------------------------------------------------------------------------
   Hand-written, plain-English class names (not Tailwind utilities) so this
   component is easy to read and edit directly. Used on the Events page,
   the CTFs page, and the "Upcoming" section of the home page.

   TO ADD OR REMOVE AN EVENT: find the matching HTML file (events.html,
   ctfs.html, or index.html), copy one ".event-card" block, edit its text
   and image, and paste it where you want it in the ".event-grid". Delete a
   block to remove that event. See README.md for the full walkthrough.

   TO SET A REAL PHOTO: every card image points at a file under
   assets/images/events/. Replace that file (same name) with a real photo
   of the same rough shape (1600x900, landscape) and every page that uses
   it updates automatically. No HTML edits needed.
   ========================================================================== */

/* Toolbar of category filter pills above the grid */
.event-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.event-toolbar__btn {
  border-radius: 9999px;
  border: 1px solid var(--border);
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  color: var(--muted);
  background: transparent;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
}

.event-toolbar__btn:hover {
  color: var(--foreground);
}

.event-toolbar__btn.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}

/* The grid of cards itself */
.event-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .event-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.event-grid--compact {
  margin-top: 1rem;
}

.event-grid--spacious {
  margin-top: 3rem;
}

.event-grid--archive {
  margin-top: 2rem;
}

/* The home page's featured cards are bigger and richer, so cap the grid at
   two columns instead of three even on wide screens. */
@media (min-width: 1024px) {
  .event-grid--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.event-grid__empty {
  margin-top: 2.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Banner at the top of a single event's detail page */
.event-hero {
  position: relative;
  height: 16rem;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--background);
}

.event-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--background) 0%, transparent 60%);
  pointer-events: none;
}

@media (min-width: 640px) {
  .event-hero {
    height: 22rem;
  }
}

/* One card */
.event-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--background-alt);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  transition: border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.event-card:hover {
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -28px #000000cc, 0 0 0 1px color-mix(in oklab, var(--accent) 12%, transparent);
}

/* Cover photo */
.event-card__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.event-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.event-card:hover .event-card__cover img {
  transform: scale(1.06);
}

/* Dark gradient so badges stay legible over any photo */
.event-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--background-alt) 0%, transparent 55%);
  pointer-events: none;
}

.event-card__badges {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  right: 0.9rem;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.event-card__type {
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 9, 11, 0.6);
  backdrop-filter: blur(6px);
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  color: #fff;
}

.event-card__status {
  border-radius: 9999px;
  border: 1px solid;
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.event-card__status--active {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.1);
}

.event-card__status--completed {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 30%, transparent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}

.event-card__status--upcoming {
  color: var(--accent-2);
  border-color: color-mix(in oklab, var(--accent-2) 30%, transparent);
  background: color-mix(in oklab, var(--accent-2) 10%, transparent);
}

.event-card__status--planned,
.event-card__status--coming-soon {
  color: var(--muted);
  border-color: var(--border);
  background: var(--background-alt);
}

/* Text content below the photo */
.event-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem 1.5rem;
}

.event-card__kicker {
  font-family: var(--font-mono, monospace);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.event-card__title {
  margin-top: 0.4rem;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.event-card__meta {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.event-card__meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
}

.event-card__summary {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  flex: 1;
}

.event-card__summary--highlight {
  margin-top: 0.5rem;
  color: var(--accent);
  font-size: 0.8125rem;
  flex: initial;
}

.event-card__footer {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.event-card:hover .event-card__footer {
  opacity: 1;
  transform: translateX(0);
}

.event-card__footer svg {
  transition: transform 0.2s ease;
}

.event-card:hover .event-card__footer svg {
  transform: translateX(3px);
}