/* =============================================================
   EVENTS (recent + upcoming)
============================================================= */
#events{position:relative;overflow:hidden;background:
  radial-gradient(800px 420px at 12% -10%,rgba(43,181,255,.22),transparent 70%),
  radial-gradient(700px 400px at 105% 110%,rgba(31,107,255,.3),transparent 70%),
  linear-gradient(180deg,#061631,#07224d)}
#events::before{content:'';position:absolute;inset:0;pointer-events:none;background-size:48px 48px;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent)}
.ev-head{position:relative;text-align:center;max-width:680px;margin:0 auto clamp(28px,4vw,44px)}
.ev-head .section-tag{justify-content:center;color:var(--teal-light)}
.ev-head .section-title{color:#fff}
.ev-head .section-subtitle{color:rgba(255,255,255,.7);margin:0 auto}

.ev-tabs{position:relative;display:flex;justify-content:center;gap:8px;margin-bottom:clamp(28px,4vw,44px);flex-wrap:wrap}
.ev-tab{font:600 13px var(--font-ui);color:rgba(255,255,255,.8);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);padding:9px 22px;border-radius:50px;cursor:pointer;transition:all .25s var(--ease-out)}
.ev-tab:hover{border-color:rgba(43,181,255,.6);color:#fff}
.ev-tab.active{background:linear-gradient(135deg,#1f6bff,#00a3ff);border-color:transparent;color:#fff;box-shadow:0 8px 24px rgba(31,107,255,.45)}

.ev-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:22px;max-width:1200px;margin:0 auto}
.ev-card{display:flex;flex-direction:column;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.025));transition:transform .4s var(--ease-out),border-color .3s,box-shadow .4s;animation:evIn .7s var(--ease-out) both;animation-delay:calc(var(--i,0)*.1s)}
.ev-card:hover{transform:translateY(-8px);border-color:rgba(43,181,255,.55);box-shadow:0 26px 60px rgba(0,0,0,.4)}
.ev-card.is-up{border-color:rgba(43,181,255,.45);box-shadow:0 0 0 1px rgba(43,181,255,.15),0 18px 50px rgba(31,107,255,.25)}
@keyframes evIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

.ev-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a2a5c}
.ev-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,22,49,.75))}
.ev-media img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .8s var(--ease-out)}
.ev-card:hover .ev-media img{transform:scale(1.07)}
.ev-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9);background:radial-gradient(circle at 70% 20%,rgba(43,181,255,.5),transparent 60%),linear-gradient(135deg,#1f6bff,#0a2a5c)}
.ev-art svg{width:84px;height:84px}
.ev-status{position:absolute;top:14px;left:14px;z-index:2;font:700 11px var(--font-ui);letter-spacing:1.4px;text-transform:uppercase;padding:6px 13px;border-radius:50px;background:rgba(255,255,255,.92);color:var(--blue-deep)}
.is-up .ev-status{background:#1f6bff;color:#fff;padding-left:26px}
.is-up .ev-status::before{content:'';position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#7dffb2;animation:evPulse 1.6s ease-out infinite}
@keyframes evPulse{0%{box-shadow:0 0 0 0 rgba(125,255,178,.8)}100%{box-shadow:0 0 0 9px rgba(125,255,178,0)}}
.ev-date{position:absolute;right:14px;bottom:14px;z-index:2;text-align:center;line-height:1;padding:9px 14px;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ev-date b{display:block;font:800 26px var(--font-head);color:#fff}
.ev-date span{display:block;margin-top:4px;font:600 11px var(--font-ui);letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.85)}

.ev-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 26px}
.ev-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.ev-tag{font:600 10.5px var(--font-ui);letter-spacing:1.2px;text-transform:uppercase;color:var(--teal-light);padding:4px 11px;border-radius:50px;border:1px solid rgba(0,190,200,.4);background:rgba(0,190,200,.08)}
.ev-place{font:500 12.5px var(--font-ui);color:rgba(255,255,255,.65)}
.ev-place::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal-light);margin-right:7px;vertical-align:middle}
.ev-body h3{font:700 19px/1.3 var(--font-head);color:#fff;letter-spacing:-.01em;margin-bottom:8px}
.ev-body p{font:400 14px/1.65 var(--font-body);color:rgba(255,255,255,.72)}

.ev-count{display:flex;gap:10px;margin-top:18px}
.ev-count div{flex:1;text-align:center;padding:10px 4px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.ev-count b{display:block;font:800 22px/1 var(--font-head);color:#fff}
.ev-count span{display:block;margin-top:5px;font:600 10px var(--font-ui);letter-spacing:1.2px;text-transform:uppercase;color:var(--teal-light)}
.ev-btn{align-self:flex-start;margin-top:18px;font:700 13px var(--font-ui);color:#fff;background:linear-gradient(135deg,#1f6bff,#00a3ff);padding:11px 22px;border-radius:50px;box-shadow:0 8px 22px rgba(31,107,255,.4);transition:transform .3s var(--ease-out),box-shadow .3s}
.ev-btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(31,107,255,.55)}
.ev-empty{grid-column:1/-1;text-align:center;color:rgba(255,255,255,.7);font:500 15px var(--font-ui);padding:40px 0}

/* big first card: full row. Below 1100px the photo is on top at full width. From 1100px the photo is on the left and the card
   is exactly as tall as the 16:9 photo (the text is kept short enough to fit), so there is never a gap under the picture. */
@media (min-width:900px){
  .ev-card.is-feature{grid-column:1/-1}
}
@media (min-width:1100px){
  .ev-card.is-feature{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);background:#0a2a5c}
  .ev-card.is-feature .ev-media{width:100%}
  .ev-card.is-feature .ev-body{padding:26px 30px;justify-content:center;overflow:hidden;height:0;min-height:100%}
  .ev-card.is-feature h3{font-size:clamp(21px,1.9vw,26px);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .ev-card.is-feature p{font-size:14.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .ev-card.is-feature .ev-more{padding-top:12px}
}
@media (prefers-reduced-motion:reduce){.ev-card,.is-up .ev-status::before{animation:none}.ev-card,.ev-media img{transition:none}}

/* ---- clickable cards ---- */
.ev-card{cursor:pointer}
.ev-card:focus-visible{outline:3px solid rgba(43,181,255,.8);outline-offset:3px}
.ev-card.is-news .ev-status{background:#ffd76a;color:#3b2a00}
.ev-photos{position:absolute;top:14px;right:14px;z-index:2;font:600 11px var(--font-ui);color:#fff;padding:6px 12px;border-radius:50px;background:rgba(6,22,49,.7);border:1px solid rgba(255,255,255,.25)}
.ev-more{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;font:700 13px var(--font-ui);color:var(--teal-light);transition:gap .3s var(--ease-out),color .2s}
.ev-card:hover .ev-more{gap:12px;color:#fff}
.ev-morewrap{position:relative;display:flex;justify-content:center;margin-top:30px}
.ev-morebtn{font:700 13.5px var(--font-ui);color:#fff;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.3);padding:12px 30px;border-radius:50px;cursor:pointer;transition:all .3s var(--ease-out)}
.ev-morebtn:hover{background:#1f6bff;border-color:#1f6bff;transform:translateY(-2px)}
.ev-morebtn[hidden]{display:none}

/* ---- popup ---- */
.evm{border:0;padding:0;background:transparent;width:min(94vw,940px);max-width:94vw;max-height:92vh;margin:auto;overflow:visible}
.evm[open]{animation:evmIn .45s var(--ease-spring) both}
.evm.evm-closing{animation:evmOut .26s ease both}
.evm[open]::backdrop{background:rgba(6,22,49,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:awFade .35s ease both}
@keyframes evmIn{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
@keyframes evmOut{to{opacity:0;transform:translateY(20px) scale(.96)}}
.evm-close{position:absolute;top:-14px;right:-14px;z-index:5;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:var(--navy);font:400 26px/1 var(--font-ui);cursor:pointer;box-shadow:var(--sh-md);transition:background .2s,color .2s}
.evm-close:hover{background:var(--blue);color:#fff}
.evm{width:min(94vw,1040px)}
.evm-content{display:flex;flex-direction:column;max-height:92vh;overflow:auto;border-radius:24px;background:#fff;border:1px solid rgba(31,107,255,.25);box-shadow:0 40px 100px rgba(0,0,0,.5)}
.evm-photo{position:relative;flex:0 0 auto;margin:0;border-radius:0;overflow:hidden;background:#0b1a33;aspect-ratio:16/9;max-height:62vh;width:100%}
.evm-photo img{width:100%;height:100%;object-fit:contain;display:block}
.evm-noimg{background:radial-gradient(circle at 70% 20%,rgba(43,181,255,.5),transparent 60%),linear-gradient(135deg,#1f6bff,#0a2a5c);aspect-ratio:21/6;min-height:140px}
.evm-status{position:absolute;top:16px;left:16px;font:700 11px var(--font-ui);letter-spacing:1.3px;text-transform:uppercase;padding:7px 14px;border-radius:50px;background:rgba(255,255,255,.94);color:var(--blue-deep)}
.evm-status.up{background:#1f6bff;color:#fff}
.evm-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(6,22,49,.7);color:#fff;font:400 30px/1 var(--font-ui);cursor:pointer;transition:background .2s}
.evm-nav:hover{background:var(--blue)}
.evm-nav.prev{left:14px}.evm-nav.next{right:14px}
.evm-thumbs{flex:0 0 auto;display:flex;gap:10px;padding:14px 28px 0;flex-wrap:wrap}
.evm-thumb{width:76px;height:54px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;opacity:.7;background:none;transition:all .2s}
.evm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.evm-thumb:hover{opacity:1}
.evm-thumb.active{opacity:1;border-color:var(--blue);box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(31,107,255,.35)}
.evm-info{flex:0 0 auto;padding:22px 28px 30px;display:flex;flex-direction:column;min-width:0}
.evm-info small{font:600 11px var(--font-ui);letter-spacing:2px;text-transform:uppercase;color:var(--mid)}
.evm-info h3{font:700 clamp(21px,2.6vw,30px)/1.25 var(--font-head);color:var(--navy);margin:8px 0 14px;letter-spacing:-.01em}
.evm-facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:14px}
.evm-facts span{display:inline-flex;align-items:center;gap:7px;font:600 13px var(--font-ui);color:var(--blue-deep)}
.evm-count{margin:2px 0 16px;max-width:360px}
.evm-count div{background:rgba(31,107,255,.07);border-color:rgba(31,107,255,.2)}
.evm-count b{color:var(--navy)}
.evm-count span{color:var(--blue)}
.evm-text p{font:400 15.5px/1.75 var(--font-body);color:var(--body);margin-bottom:10px}
.evm-btn{align-self:flex-start;margin-top:10px;font:700 13.5px var(--font-ui);color:#fff;background:linear-gradient(135deg,#1f6bff,#0c42ae);padding:12px 24px;border-radius:50px;box-shadow:0 8px 22px rgba(31,107,255,.35);transition:transform .3s var(--ease-out)}
.evm-btn:hover{transform:translateY(-3px)}
@media (max-width:760px){
  .evm-photo{aspect-ratio:4/3}
  .evm-thumbs{padding:12px 16px 0}
  .evm-info{padding:18px 16px 24px}
  .evm-close{top:8px;right:8px}
}
@media (prefers-reduced-motion:reduce){.evm[open],.evm.evm-closing{animation:none}}

/* photos are shown whole; the space beside a narrower photo is filled with a soft blurred copy of the same photo (a real <img> behind it) */
.ev-media>img.ev-bg,.evm-photo>img.ev-bg{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);max-width:none;object-fit:cover;filter:blur(22px) brightness(.72) saturate(1.2);transform:none!important}
.ev-media>img:not(.ev-bg),.evm-photo>img:not(.ev-bg){position:relative;z-index:0}
.ev-media::after{z-index:1}
.evm-photo{position:relative}

/* normal cards: the photo fills the whole picture area (a little trimmed at the edges), no blur */
.ev-card:not(.is-feature) .ev-media img{object-fit:cover}

/* popup: the photo fills the whole picture area (a little trimmed at the edges), no blur */
.evm-photo img{object-fit:cover}