/* ─────────────────────────────────────────────────────────────────────────────
   css/event-page.css — Pride Planner Event Pages
   Used by: event-seo.php (/events/[slug])
   Depends on: variables.css (tokens), header.css (header)
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Page wrapper ── */
.ep-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px 72px;
}

/* ── Breadcrumb ── */
.ep-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.ep-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.ep-breadcrumb a:hover { color: var(--text); }
.ep-breadcrumb span[aria-hidden] { opacity: 0.4; }

/* ── Two-column layout ── */
.ep-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}

/* ── MAIN (left) ── */
.ep-main { min-width: 0; }

/* Hero image — FIX #1: use natural height with max-height cap, not forced 16:9 */
.ep-hero {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 22px;
  background: var(--surface2);
  box-shadow: var(--shadow);
  /* Let the image define its own height up to a max */
  max-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ep-hero-img {
  width: 100%;
  height: auto;               /* natural height — no forced crop */
  max-height: 560px;
  object-fit: contain;        /* show full image, no crop */
  object-position: center;
  display: block;
  background: var(--surface2);
}
.ep-hero-fallback {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--surface2), var(--hover));
}
.ep-hero-icon { font-size: 5rem; }

/* Category chips */
.ep-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
/* event-cat-badge: defined in layout.css for index, duplicated here so
   event-seo.php (which only loads event-page.css) gets identical styling */
.event-cat-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 50px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  color: #fff;
  /* background set inline per-category via $CAT_COLORS in event-seo.php */
}

/* Past event banner */
.ep-past-banner {
  background: var(--surface2);
  border: var(--border-width) solid var(--border);
  border-left: 3px solid var(--accent5);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.ep-past-banner a { color: var(--accent4); font-weight: 600; text-decoration: none; }
.ep-past-banner a:hover { text-decoration: underline; }

/* Title */
.ep-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 20px;
}

/* FIX #5 & #6: remove duplicate ep-actions + ep-meta-strip from article.
   All date/venue/buttons live ONLY in the sidebar card.
   Keep only description + links + contact in the main column. */

/* Content sections */
.ep-section { margin-bottom: 28px; }
.ep-section-heading {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing, 0.07em);
  color: var(--text-muted);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: var(--border-width) solid var(--border);
}
.ep-desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text);
  margin: 0;
}
.ep-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ep-links a {
  font-size: 0.88rem;
  color: var(--accent4);
  word-break: break-all;
  text-decoration: none;
}
.ep-links a:hover { text-decoration: underline; }

/* ── SIDEBAR (right) ── */
.ep-sidebar {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* FIX #7 & #8: Sidebar card uses site CSS vars throughout */
.ep-card {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.ep-card-heading {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: var(--border-width) solid var(--border);
}
.ep-card-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: var(--border-width) solid var(--border);
}
.ep-card-row:last-of-type { border-bottom: none; }
.ep-card-ico { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.ep-card-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.ep-card-value {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
}

/* ── Buttons (FIX #7: single consistent system matching the site) ── */
.ep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  border: var(--border-width) solid transparent;
}
.ep-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.ep-btn:active { transform: translateY(0); }

/* Register button — uses same token as modal Register */
.ep-btn-primary {
  background: var(--btn-register-bg);
  color: #fff;
  border-color: var(--btn-register-bg);
  box-shadow: 0 4px 18px var(--btn-register-shadow);
}
.ep-btn-primary:hover { background: var(--btn-register-hover); border-color: var(--btn-register-hover); }

/* Share button — uses same token as modal Share */
.ep-btn-outline {
  background: var(--btn-share-bg);
  color: #fff;
  border-color: var(--btn-share-bg);
}
.ep-btn-outline:hover { background: var(--btn-share-hover); border-color: var(--btn-share-hover); }

.ep-btn-block {
  width: 100%;
  margin-top: 10px;
}

/* Back card */
.ep-back-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow var(--transition), transform var(--transition);
}
.ep-back-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}
.ep-back-ico   { font-size: 1.5rem; flex-shrink: 0; }
.ep-back-text  { flex: 1; min-width: 0; }
.ep-back-title { font-weight: 700; font-size: 0.88rem; color: var(--text); }
.ep-back-sub   { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }
.ep-back-arrow { font-size: 1rem; color: var(--text-muted); flex-shrink: 0; }

/* Toast */
.ep-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--text);
  color: var(--bg);
  padding: 10px 22px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  pointer-events: none;
  transition: transform var(--transition), opacity var(--transition);
  opacity: 0;
  z-index: 9999;
  white-space: nowrap;
}
.ep-toast.ep-toast-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ── Responsive ── */
/* FIX #4: remove order:-1 that put sidebar above the image on mobile */
@media (max-width: 780px) {
  .ep-layout {
    grid-template-columns: 1fr;
  }
  .ep-sidebar {
    position: static;
    order: 2; /* sidebar goes BELOW the article on mobile */
  }
  .ep-page { padding: 16px 14px 48px; }
  /* Remove max-height cap on mobile — let full poster show without cropping */
  .ep-hero { max-height: none; }
  .ep-hero-img {
    max-height: none;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .ep-title { font-size: 1.6rem; }
}
@media (max-width: 480px) {
  .ep-btn-block { width: 100%; }
  .ep-page { padding: 12px 10px 40px; }
  .ep-title { font-size: 1.4rem; }
  .ep-card { padding: 16px; }
}