/* ==========================================================================
   VIKA — Events (list: Events/Index*, detail: Events/Detail*)
   Relies on vika.css + vika-inner.css
   ========================================================================== */

/* ---------- LIST ---------- */
.events-hero { padding-block: var(--sp-8) var(--sp-5); text-align: center; position: relative; z-index: 1; }
.events-hero-content { max-width: 680px; margin-inline: auto; padding-inline: var(--sp-5); }
.events-hero-title { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 500; margin-block-end: var(--sp-4); }
.events-hero-subtitle { color: var(--fg-muted); }

.events-section { padding-block: var(--sp-5) var(--sp-9); position: relative; z-index: 1; }
.events-container { width: min(100% - 2 * var(--sp-5), var(--container)); margin-inline: auto; }

.events-filters { margin-block-end: var(--sp-7); text-align: center; }
.filters-container { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); }
.filter-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer;
  padding: 0.65rem 1.4rem; font-size: 0.85rem; color: var(--fg-muted);
  background: transparent; border: 1px solid var(--glass-border); border-radius: 0;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn.active {
  color: var(--c-ink-deep); border-color: transparent;
  background: linear-gradient(120deg, var(--c-gold-dim), var(--c-gold-bright) 50%, var(--c-gold));
}
.event-count { font-size: 0.72rem; opacity: 0.8; }

.events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-5); }
.event-card { display: flex; flex-direction: column; overflow: hidden; transition: transform var(--t-med), border-color var(--t-med); }
.event-card:hover { transform: translateY(-6px); border-color: oklch(74% 0.09 85 / 0.4); }
.event-image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-ink-soft); }
.event-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--t-slow); }
.event-card:hover .event-image img { transform: scale(1.05); }
.event-image .event-category {
  position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3);
  padding: 0.3rem 0.75rem; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--accent);
  background: oklch(12% 0.004 30 / 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid oklch(74% 0.09 85 / 0.5);
}
.event-content { padding: var(--sp-5); flex: 1; display: flex; flex-direction: column; }
.event-title { font-size: 1.05rem; font-weight: 500; line-height: 1.7; margin-block-end: var(--sp-3); }
.event-card .event-description { flex: 1; font-size: 0.85rem; color: var(--fg-muted); text-align: justify; margin-block-end: var(--sp-5); }
.event-meta { display: flex; align-items: center; gap: var(--sp-4); color: var(--fg-faint); font-size: 0.8rem; }
.event-meta:empty { display: none; }
.event-btn {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 0.6rem 1.4rem; font-size: 0.85rem; color: var(--fg); border: 1px solid var(--glass-border);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.event-btn:hover { border-color: var(--accent); color: var(--accent); }

.no-events { text-align: center; padding: var(--sp-9) var(--sp-5); color: var(--fg-muted); }
.no-events i { font-size: 2.6rem; color: var(--accent); opacity: 0.6; margin-block-end: var(--sp-4); display: block; }
.no-events h3 { color: var(--fg); margin-block-end: var(--sp-2); }

/* ---------- DETAIL ---------- */
.event-detail-hero {
  position: relative; z-index: 1; min-height: 44vh; display: grid; place-items: center; text-align: center;
  padding-block: var(--sp-9) var(--sp-8);
  background:
    linear-gradient(oklch(10% 0.004 30 / 0.72), oklch(10% 0.004 30 / 0.9)),
    var(--hero-image, none) center / cover no-repeat;
  border-block-end: 1px solid var(--glass-border);
}
.event-detail-hero-content { max-width: 860px; padding-inline: var(--sp-5); }
.event-detail-hero .breadcrumb { margin-block-end: 0; }
.event-detail-hero-title { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 500; line-height: 1.5; margin-block: var(--sp-4) var(--sp-5); }
.event-detail-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); }
.event-detail-meta .event-category, .event-detail-meta .event-date {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.35rem 0.9rem; font-size: 0.78rem; color: var(--fg);
  background: oklch(12% 0.004 30 / 0.6); border: 1px solid var(--glass-border);
}
.event-detail-meta .event-category { color: var(--accent); border-color: oklch(74% 0.09 85 / 0.5); }
.event-detail-meta i { color: var(--accent); }

.event-detail-section { padding-block: var(--sp-8) var(--sp-9); position: relative; z-index: 1; }
.event-detail-container {
  width: min(100% - 2 * var(--sp-5), var(--container)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start;
}
.event-detail-main { min-width: 0; }
.event-detail-image { margin-block-end: var(--sp-6); border: 1px solid var(--glass-border); overflow: hidden; box-shadow: 0 24px 60px oklch(0% 0 0 / 0.4); }
.event-detail-image img { display: block; width: 100%; max-height: 460px; object-fit: cover; }
.event-detail-content .event-description { color: var(--fg-muted); font-size: 1rem; line-height: 2.1; margin-block-end: var(--sp-7); overflow-wrap: anywhere; }

.event-gallery h3 {
  font-size: 0.95rem; font-weight: 500; color: var(--accent);
  padding-block-end: var(--sp-3); margin-block-end: var(--sp-5); border-block-end: 1px solid var(--glass-border);
}
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); }
.gallery-item { overflow: hidden; border: 1px solid var(--glass-border); background: var(--glass-bg); transition: transform var(--t-med), border-color var(--t-med); }
.gallery-item:hover { transform: translateY(-4px); border-color: oklch(74% 0.09 85 / 0.4); }
.gallery-item img { display: block; width: 100%; height: 160px; object-fit: cover; }
.gallery-caption { padding: var(--sp-3) var(--sp-4); text-align: center; font-size: 0.8rem; color: var(--fg-muted); }
.gallery-caption:empty { display: none; }

.event-detail-sidebar { position: sticky; inset-block-start: 84px; display: flex; flex-direction: column; gap: var(--sp-4); }
.event-info-widget, .related-events-widget { padding: var(--sp-5); }
.event-info-widget h4, .related-events-widget h4 {
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em; color: var(--accent);
  padding-block-end: var(--sp-3); margin-block-end: var(--sp-4); border-block-end: 1px solid var(--glass-border);
}
.event-info-item { display: flex; align-items: center; gap: var(--sp-3); font-size: 0.85rem; color: var(--fg-muted); padding-block: var(--sp-2); }
.event-info-item:empty { display: none; }
.event-info-item i { color: var(--accent); width: 18px; text-align: center; }

.related-event { display: flex; gap: var(--sp-4); padding-block: var(--sp-4); border-block-end: 1px solid var(--glass-border); }
.related-event:first-of-type { padding-block-start: 0; }
.related-event:last-child { padding-block-end: 0; border-block-end: 0; }
.related-event img { flex: 0 0 80px; width: 80px; height: 80px; object-fit: cover; border: 1px solid var(--glass-border); }
.related-event-content { flex: 1; min-width: 0; }
.related-event-content h5 { font-size: 0.9rem; font-weight: 500; line-height: 1.7; margin-block-end: var(--sp-1); }
.related-event-date { display: block; font-size: 0.72rem; color: var(--fg-faint); margin-block-end: var(--sp-2); }
.related-event-link { font-size: 0.78rem; color: var(--accent); position: relative; }
.related-event-link::after { content: ""; position: absolute; inset-block-end: -3px; inset-inline: 0; height: 1px; background: var(--accent); scale: 0 1; transition: scale var(--t-med); }
.related-event-link:hover::after { scale: 1 1; }

@media (max-width: 991px) {
  .event-detail-container { grid-template-columns: 1fr; }
  .event-detail-sidebar { position: static; }
}
@media (max-width: 767px) {
  .events-grid { grid-template-columns: 1fr; }
  .filters-container { flex-direction: column; align-items: stretch; }
  .filter-btn { justify-content: center; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}