/* ================= Hero Section ================= */
.hero {
  min-height: 500px; /* default desktop height */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #181818;
  text-align: center;
  background-image: url('/uploads/siyahi-hero-banner-events.webp'); /* desktop image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Overlay for better text visibility */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  padding: 24px;
}

/* Headline */
.hero h1 {
  margin: 0;
  font-size: 6rem; /* desktop font */
   font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Subtext */
.hero p.sub {
  margin-top: 12px;
  color: #181818; /* text visible over overlay */
  opacity: 0.95;
  font-size: 1.0625rem; /* 17px desktop */
}

/* ================= Responsive Breakpoints ================= */

/* Tablet */
@media (max-width: 992px) {
  .hero {
    min-height: 380px;
  }
  .hero h1 {
    font-size: 3.5rem;
  }
  .hero p.sub {
    font-size: 1rem; /* 16px */
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero {
    min-height: 400px;
    background-image: url('/uploads/siyahi-hero-banner-mobile-events.webp'); /* optional mobile image */
  }
  .hero h1 {
    font-size: 2.5rem;
  }
  .hero p.sub {
    font-size: 0.9rem; /* ~14px */
  }
}

/* Small Mobile / Portrait */
@media (max-width: 480px) {
  .hero {
    min-height: 400px;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero p.sub {
    font-size: 0.8rem; /* ~13px */
  }
}

.next-event {
  display: flex;
  justify-content: center;
  padding: 40px 20px;
  background: #f9f9f9;
}

.event-card {
  position: relative;
  max-width: 500px;
  width: 100%;
  background: #fff;
  padding: 30px 25px;
  border-radius: 12px;
  text-align: center;
  color: #222;
  box-shadow: 0 8px 30px rgba(0,0,0,0.05);
  overflow: hidden;
  z-index: 1;
  border: 4px solid;
  border-image-slice: 1;
  border-width: 4px;
  border-image-source: linear-gradient(270deg, #ff6ec4, #7873f5, #4ade80, #facc15, #ff6ec4);
  animation: gradient-border 4s linear infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

/* Event card typography */
.event-card h2 {
  margin: 0 0 12px;
  font-size: 2rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

.event-card .event-date,
.event-card .event-location {
  margin: 6px 0;
  font-size: 1rem;
  color: #555;
}

.event-card .event-info {
  margin-top: 16px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333;
}

/* Animated gradient border */
@keyframes gradient-border {
  0% { border-image-source: linear-gradient(270deg, #ff6ec4, #7873f5, #4ade80, #facc15, #ff6ec4); }
  50% { border-image-source: linear-gradient(270deg, #facc15, #4ade80, #7873f5, #ff6ec4, #facc15); }
  100% { border-image-source: linear-gradient(270deg, #ff6ec4, #7873f5, #4ade80, #facc15, #ff6ec4); }
}

/* Responsive */
@media (max-width: 600px) {
  .event-card {
    padding: 25px 15px;
  }

  .event-card h2 {
    font-size: 1.6rem;
  }

  .event-card .event-info {
    font-size: 0.9rem;
  }
}




.container{max-width:1100px;margin:40px auto;padding:0 20px;}
.event{margin-bottom:48px;padding:26px;border-radius:10px;background:#fff;box-shadow:0 6px 25px rgba(20,20,30,0.03);border:1px solid #efefef;}
.event-head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between;}
.event-meta{color:#666;font-size:14px;margin-top:6px;}
.event-title{font-size:22px;font-family: 'Montserrat', sans-serif;margin:0 0 6px;color:#222;}
.event-desc{margin-top:12px;color:#333;line-height:1.6;}
.gallery{margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media(max-width:1000px){.gallery{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.gallery{grid-template-columns:1fr;}}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:8px;cursor:pointer;transition:transform .25s,box-shadow .2s;box-shadow:0 6px 18px rgba(10,10,20,0.04);}
.gallery img:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(10,10,30,0.08);}
.lb-overlay{position:fixed;inset:0;background:rgba(10,10,12,0.8);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px;}
.lb-card{max-width:1100px;width:100%;max-height:90vh;background:#111;border-radius:8px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.6);display:flex;flex-direction:column;}
.lb-img-wrap{flex:1;display:flex;align-items:center;justify-content:center;background:#000;padding:8px;}
.lb-img-wrap img{max-width:100%;max-height:80vh;object-fit:contain;}
.lb-caption{color:#eee;padding:12px 18px;background:rgba(0,0,0,0.35);font-size:14px;}
.lb-close{position:absolute;top:18px;right:20px;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;}
.meta-dot{margin:0 8px;color:#999;}
.pagination{text-align:center;margin-top:50px;}
.pagination a,.pagination span{display:inline-block;margin:0 6px;padding:8px 16px;border-radius:6px;border:1px solid #ddd;text-decoration:none;color:#333;font-weight:500;}
.pagination a:hover{background:#f5f5f5;}
.pagination .active{background:#222;color:#fff;border-color:#222;}
.pagination .disabled{color:#aaa;pointer-events:none;border-color:#eee;}