/* ============================================================
   Public Events directory (/events) — grid of all public events.
   Card design mirrors the homepage's .pev-card carousel (assets/css/home.css)
   exactly, minus the slider/track wrapper, so it reads as the same system.
   ============================================================ */

section .container{margin:0 auto;max-width:1280px;padding:0 20px}

.events-page-section{padding:0 0 90px}

.events-empty{
  text-align:center;padding:60px 20px;color:#6b7280;font-size:1rem;
}

.pev-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:8px;
}

/* ── Card (identical to homepage .pev-card, sized for a grid instead of a slider) ── */
.pev-grid .pev-card{
  position:relative;flex:none;width:100%;aspect-ratio:3/3.8;border-radius:18px;overflow:hidden;
  text-decoration:none;opacity:0;transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),box-shadow .2s;
}
.pev-grid .pev-card.visible{opacity:1;transform:translateY(0)}
.pev-grid .pev-card:hover{box-shadow:0 12px 32px rgba(0,0,0,.14)}
.pev-img-wrap{position:absolute;inset:0;z-index:0}
.pev-img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pev-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.pev-grid .pev-card:hover .pev-img img{transform:scale(1.06)}
.pev-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.1) 68%,rgba(0,0,0,0) 82%);pointer-events:none}
.pev-badges{position:absolute;top:14px;left:14px;right:14px;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pev-badge{padding:4px 10px;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);border-radius:100px;font-size:.66rem;font-weight:700;color:#111827;white-space:nowrap}
.pev-badge-video{margin-left:auto;display:flex;align-items:center;gap:4px;padding:4px 10px;background:rgba(0,0,0,.55);color:#fff;border-radius:100px;font-size:.66rem;font-weight:700;white-space:nowrap}
.pev-title-overlay{color:#fff;font-weight:800;font-size:1.05rem;font-family:'Bricolage Grotesque',sans-serif;line-height:1.25;margin-bottom:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pev-body{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;padding:16px}
.pev-info-row{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.pev-info-icon{display:flex;align-items:center;justify-content:center}
.pev-info-icon-purple{color:#c4b5fd}
.pev-info-icon-green{color:#86efac}
.pev-info-text{min-width:0}
.pev-info-value{font-size:.82rem;color:#fff;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}

/* Background fallback tints when no banner_image (same bg1..bg20 cycle as home.css) */
.bg1{background:linear-gradient(135deg,#7C3AED,#A78BFA)}
.bg2{background:linear-gradient(135deg,#6366F1,#A5B4FC)}
.bg3{background:linear-gradient(135deg,#EC4899,#F9A8D4)}
.bg4{background:linear-gradient(135deg,#10B981,#6EE7B7)}
.bg5{background:linear-gradient(135deg,#F59E0B,#FCD34D)}
.bg6{background:linear-gradient(135deg,#3B82F6,#93C5FD)}
.bg7{background:linear-gradient(135deg,#A78BFA,#7C3AED)}
.bg8{background:linear-gradient(135deg,#14B8A6,#5EEAD4)}
.bg9{background:linear-gradient(135deg,#F43F5E,#FDA4AF)}
.bg10{background:linear-gradient(135deg,#22C55E,#86EFAC)}
.bg11{background:linear-gradient(135deg,#0EA5E9,#7DD3FC)}
.bg12{background:linear-gradient(135deg,#9333EA,#D8B4FE)}
.bg13{background:linear-gradient(135deg,#2563EB,#60A5FA)}
.bg14{background:linear-gradient(135deg,#DC2626,#FCA5A5)}
.bg15{background:linear-gradient(135deg,#059669,#6EE7B7)}
.bg16{background:linear-gradient(135deg,#DB2777,#F9A8D4)}
.bg17{background:linear-gradient(135deg,#0891B2,#67E8F9)}
.bg18{background:linear-gradient(135deg,#65A30D,#BEF264)}
.bg19{background:linear-gradient(135deg,#EA580C,#FDBA74)}
.bg20{background:linear-gradient(135deg,#4F46E5,#A5B4FC)}

@media (max-width: 640px){
  .events-page-section{padding:0 0 60px}
  .pev-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .pev-title-overlay{font-size:.92rem}
}