/* ==========================================================================
   SRHU Events, Conferences & Workshops — master listing page
   Navy + Gold, DIN Pro typography (self-hosted). Built on Bootstrap 5.3
   ========================================================================== */

@font-face{ font-family:'Din Pro Font'; src:url('../fonts/dinpro_light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Din Pro Font'; src:url('../fonts/dinpro.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Din Pro Font'; src:url('../fonts/dinpro.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Din Pro Font'; src:url('../fonts/dinpro_bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Din Pro Font'; src:url('../fonts/dinpro_black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }

:root{
  --navy:#1d3c71;
  --navy-light:#163366;
  --navy-deep:#0f2044;
  --gold:#c99a3e;
  --gold-light:#e3bc6a;
  --bg:#f5f7fb;
  --text-dark:#1a1f2b;
  --text-mid:#5a6273;
  --font:'Din Pro Font','Barlow',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);background:var(--bg);color:var(--text-dark);overflow-x:hidden;}

.navbar{background:rgba(15,32,68,.97);padding:.9rem 0;position:fixed;width:100%;z-index:1000;box-shadow:0 4px 24px rgba(0,0,0,.12);}
.navbar-brand{font-family:var(--font);font-weight:900;font-size:1.35rem;color:#fff !important;letter-spacing:.3px;}
.navbar-brand span{color:var(--gold-light);font-weight:500;}
.nav-link{color:rgba(255,255,255,.85) !important;font-size:.82rem;letter-spacing:1.2px;text-transform:uppercase;font-weight:500;padding:.5rem 1rem !important;transition:color .3s;}
.nav-link:hover{color:var(--gold-light) !important;}

.hero{
  min-height:56vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:8rem 0 3rem;
  background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 55%,#2a4d8f 100%);
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E") repeat;
}
.hero-badge{display:inline-block;border:1px solid var(--gold);color:var(--gold-light);font-size:.72rem;letter-spacing:3px;text-transform:uppercase;padding:.35rem 1.1rem;margin-bottom:1.3rem;}
.hero h1{font-family:var(--font);font-weight:700;font-size:clamp(2.2rem,5vw,3.6rem);color:#fff;line-height:1.15;}
.hero h1 em{font-style:normal;color:var(--gold-light);}
.hero p.lead-muted{color:rgba(255,255,255,.75);max-width:640px;margin-top:1rem;font-size:1rem;line-height:1.7;}
.hero-stats{position:relative;z-index:1;margin-top:2.5rem;}
.hero-stat{text-align:center;}
.hero-stat .num{font-family:var(--font);font-weight:900;font-size:2.1rem;color:var(--gold-light);line-height:1;}
.hero-stat .lbl{font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:.3rem;}
.hero-divider{width:1px;background:rgba(255,255,255,.18);height:42px;margin:auto;}

section{padding:5rem 0;}
.sec-tag{font-size:.7rem;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem;display:block;}
.sec-title{font-family:var(--font);font-weight:700;font-size:clamp(1.8rem,3.2vw,2.6rem);color:var(--navy);line-height:1.2;}
.sec-title em{font-style:normal;color:var(--gold);}
.gold-line{width:46px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);margin:1rem 0 1.3rem;}

/* ---------- Filter tabs ---------- */
.evt-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.2rem;}
.evt-tab{border:1px solid rgba(29,60,113,.2);background:#fff;color:var(--navy);padding:.55rem 1.3rem;font-size:.8rem;letter-spacing:.5px;cursor:pointer;transition:.3s;border-radius:2px;}
.evt-tab.active,.evt-tab:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.evt-panel{display:none;}
.evt-panel.active{display:block;}

/* ---------- Event cards ---------- */
.evt-card{background:#fff;box-shadow:0 4px 26px rgba(15,32,68,.08);height:100%;display:flex;flex-direction:column;overflow:hidden;transition:.35s;}
.evt-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(15,32,68,.16);}
.evt-card.is-past{opacity:.82;}
.evt-media{position:relative;height:190px;overflow:hidden;}
.evt-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.evt-card:hover .evt-media img{transform:scale(1.06);}
.evt-badge{position:absolute;top:.9rem;left:.9rem;background:var(--gold);color:#fff;font-size:.66rem;letter-spacing:1.5px;text-transform:uppercase;padding:.32rem .8rem;}
.evt-badge.past{background:var(--text-mid);}
.evt-type{position:absolute;top:.9rem;right:.9rem;background:rgba(15,32,68,.85);color:#fff;font-size:.66rem;letter-spacing:1px;text-transform:uppercase;padding:.32rem .8rem;}
.evt-date-pill{position:absolute;bottom:-1.1rem;left:1rem;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.12);width:56px;text-align:center;padding:.4rem 0;}
.evt-date-pill .m{display:block;font-size:.66rem;letter-spacing:1px;text-transform:uppercase;color:var(--gold);font-weight:700;}
.evt-date-pill .d{display:block;font-family:var(--font);font-weight:900;font-size:1.15rem;color:var(--navy);line-height:1;}
.evt-body{padding:2rem 1.4rem 1.4rem;flex:1;display:flex;flex-direction:column;}
.evt-body h4{font-family:var(--font);font-weight:700;font-size:1.15rem;color:var(--navy);margin-bottom:.4rem;line-height:1.35;}
.evt-body .evt-sub{font-size:.83rem;color:var(--gold);letter-spacing:.3px;margin-bottom:.7rem;}
.evt-body p{font-size:.85rem;color:var(--text-mid);line-height:1.65;flex:1;}
.evt-meta{list-style:none;padding:0;margin:.8rem 0 1.1rem;font-size:.8rem;color:var(--text-mid);}
.evt-meta li{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem;}
.evt-meta i{color:var(--gold);width:14px;}
.evt-actions{display:flex;gap:.6rem;flex-wrap:wrap;}
.btn-evt{background:var(--navy);color:#fff;border:none;padding:.6rem 1.2rem;font-size:.74rem;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;display:inline-block;transition:.3s;}
.btn-evt:hover{background:var(--navy-light);color:#fff;}
.btn-evt-outline{border:1px solid rgba(29,60,113,.3);color:var(--navy);padding:.6rem 1.2rem;font-size:.74rem;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;display:inline-block;transition:.3s;}
.btn-evt-outline:hover{background:var(--navy);color:#fff;border-color:var(--navy);}

.empty-state{background:#fff;border:1px dashed rgba(29,60,113,.25);padding:3rem 2rem;text-align:center;color:var(--text-mid);}
.empty-state i{font-size:2rem;color:var(--gold);margin-bottom:.8rem;display:block;}

/* ---------- Gallery ---------- */
.gallery-section{background:var(--navy-deep);position:relative;overflow:hidden;}
.gallery-section::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E") repeat;}
.gallery-section .sec-title{color:#fff;}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:200px 200px;gap:10px;position:relative;}
.gallery-item{overflow:hidden;position:relative;cursor:pointer;}
.gallery-item:nth-child(1){grid-column:1/3;grid-row:1/2;}
.gallery-item:nth-child(4){grid-column:4;grid-row:1/3;}
.gallery-item:nth-child(6){grid-column:1;grid-row:2;}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s;display:block;}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,32,68,.9),transparent);opacity:0;transition:opacity .4s;display:flex;align-items:flex-end;padding:1rem;}
.gallery-item:hover .gallery-overlay{opacity:1;}
.gallery-overlay span{color:#fff;font-size:.76rem;letter-spacing:1.5px;text-transform:uppercase;}
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:9999;align-items:center;justify-content:center;}
.lightbox.active{display:flex;}
.lightbox img{max-width:90vw;max-height:85vh;object-fit:contain;border:2px solid rgba(201,154,62,.35);}
.lightbox-close{position:absolute;top:1.5rem;right:2rem;color:#fff;font-size:2rem;cursor:pointer;background:none;border:none;}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:1.8rem;cursor:pointer;background:rgba(255,255,255,.08);border:none;padding:.7rem 1rem;}
.lb-prev{left:1rem;}
.lb-next{right:1rem;}
.lb-prev:hover,.lb-next:hover{background:var(--gold);}

footer{background:#0b1730;padding:3rem 0 1.6rem;}
.footer-brand{font-family:var(--font);font-weight:900;font-size:1.35rem;color:#fff;}
.footer-brand span{color:var(--gold-light);font-weight:500;}
footer p{color:rgba(255,255,255,.5);font-size:.83rem;line-height:1.7;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:1.5rem;margin-top:2.2rem;}
.footer-bottom p{font-size:.76rem;color:rgba(255,255,255,.35);margin:0;}

.reveal{opacity:0;transform:translateY(32px);transition:opacity .6s ease,transform .6s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

@media(max-width:768px){
  .gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;}
  .gallery-item{grid-column:auto !important;grid-row:auto !important;height:160px;}
  .hero{min-height:auto;padding:7rem 0 2.5rem;}
}