/* =========================================================
   events.css — styles for events.php and event-single.php
   (filter tabs, event cards, single-event hero/body,
   gallery strip, related events)

   Depends on the same color variables as style.css
   (--maroon, --gold, --ivory, --line, --shadow, etc).
   Load this file TOGETHER WITH style.css.
   ========================================================= */

/* ---------- Filter tabs (events listing) ---------- */
.events-section{background:var(--white);}

.events-filters{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; margin-bottom:40px;
}
.events-filters button{
  font-family:inherit; font-size:14px; font-weight:700;
  color:var(--maroon-dark); background:var(--ivory);
  border:1.5px solid var(--line); border-radius:30px;
  padding:9px 20px; transition:all 0.2s ease;
}
.events-filters button:hover{border-color:var(--gold);}
.events-filters button.active{
  background:var(--maroon); border-color:var(--maroon); color:var(--white);
}

/* ---------- Event cards grid ---------- */
.event-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.event-card{
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:var(--ivory); transition:transform 0.2s ease, box-shadow 0.2s ease;
  display:flex; flex-direction:column;
}
.event-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}

.event-thumb{position:relative; height:180px; overflow:hidden;}
.event-thumb img{width:100%; height:100%; object-fit:cover; display:block;}

.event-date-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--white); border-radius:6px; padding:6px 10px;
  text-align:center; box-shadow:0 4px 12px rgba(0,0,0,0.18);
  min-width:52px;
}
.event-date-badge .day{
  display:block; font-family:'Kavivanar',cursive; font-size:19px;
  color:var(--maroon-dark); line-height:1;
}
.event-date-badge .month{
  display:block; font-size:11px; font-weight:700; color:var(--maroon-soft);
  margin-top:2px; letter-spacing:0.02em;
}

.event-status{
  position:absolute; top:12px; right:12px; z-index:2;
  background:rgba(32,75,60,0.92); color:var(--white);
  font-size:11px; font-weight:700; padding:5px 10px; border-radius:20px;
}

.event-body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1;}
.event-cat{font-size:12px; font-weight:700; color:var(--maroon-soft);}
.event-card h3{font-family:'Catamaran',sans-serif; font-weight:800; font-size:17px; color:var(--brown);}
.event-loc{
  display:flex; align-items:center; gap:6px; font-size:13.5px; color:#6b584a;
}
.event-loc svg{width:14px; height:14px; flex-shrink:0; color:var(--gold);}
.event-excerpt{font-size:14px; color:#5a4636; flex:1;}
.event-card .btn{margin-top:6px; align-self:flex-start;}

.events-empty{
  text-align:center; padding:50px 20px; color:#6b584a; font-size:15px; display:none;
}

/* ---------- Single event page ---------- */
.event-hero{
  position:relative; height:260px; overflow:hidden;
  background:var(--maroon-dark);
}
.event-hero img{
  width:100%; height:100%; object-fit:cover; opacity:0.85;
}
.event-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,8,10,.15) 0%, rgba(20,8,10,.88) 100%);
}
.event-hero-content{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:34px 0;
}
.event-hero-content .wrap{color:var(--white);}
.event-hero .breadcrumb a{color:var(--gold-light);}
.event-hero .breadcrumb{color:#e6d9c8;}
.event-hero .breadcrumb .sep{color:#b7a493;}
.event-hero .breadcrumb .current{color:var(--white);}
.event-hero-cat{
  display:inline-block; background:var(--gold); color:var(--white);
  font-size:12.5px; font-weight:700; padding:5px 14px; border-radius:20px;
  margin-bottom:14px;
}
.event-hero h1{font-size:clamp(26px,4vw,38px); color:var(--white);}
.event-hero-meta{
  display:flex; flex-wrap:wrap; gap:22px; margin-top:16px;
  font-size:14.5px; color:#f0e4d6;
}
.event-hero-meta span{display:flex; align-items:center; gap:7px;}
.event-hero-meta svg{width:16px; height:16px; color:var(--gold-light);}

.event-detail-section{background:var(--white);}
.event-detail-grid{
  display:grid; grid-template-columns:1.6fr 1fr; gap:48px; align-items:start;
}
.event-content p{font-size:16px; color:#4a382c; margin-bottom:18px;}
.event-content h2{
  font-family:'Kavivanar',cursive; font-size:22px; color:var(--maroon-dark);
  margin:28px 0 14px;
}

.event-gallery-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:10px;
}
.event-gallery-strip a{
  display:block; border-radius:6px; overflow:hidden; aspect-ratio:4/3;
  border:1px solid var(--line);
}
.event-gallery-strip img{width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease;}
.event-gallery-strip a:hover img{transform:scale(1.07);}

.event-sidebar-card{
  background:var(--ivory); border:1px solid var(--line); border-radius:10px;
  padding:26px 24px; margin-bottom:22px;
}
.event-sidebar-card h4{
  font-family:'Catamaran',sans-serif; font-weight:800; font-size:15px;
  color:var(--maroon-dark); margin-bottom:16px; text-transform:uppercase; letter-spacing:0.02em;
}
.sidebar-info-row{
  display:flex; gap:12px; align-items:flex-start; padding:10px 0;
  border-bottom:1px solid var(--line); font-size:14px; color:#5a4636;
}
.sidebar-info-row:last-child{border-bottom:none; padding-bottom:0;}
.sidebar-info-row:first-child{padding-top:0;}
.sidebar-info-row svg{width:16px; height:16px; color:var(--maroon); flex-shrink:0; margin-top:2px;}
.sidebar-info-row strong{display:block; color:var(--brown); font-size:13px;}

.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:700; color:var(--maroon-soft); margin-bottom:24px;
}
.back-link:hover{text-decoration:underline;}
.back-link svg{width:15px; height:15px;}

/* ---------- Related events ---------- */
.related-events{background:var(--ivory-deep);}
.related-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}

.event-not-found{
  text-align:center; padding:80px 20px;
}
.event-not-found h1{font-size:26px; color:var(--maroon-dark); margin-bottom:14px;}
.event-not-found p{color:#5a4636; margin-bottom:24px;}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .event-grid{grid-template-columns:repeat(2,1fr);}
  .event-detail-grid{grid-template-columns:1fr;}
  .related-grid{grid-template-columns:repeat(2,1fr);}
  .event-hero{height:320px;}
} 
@media (max-width:640px){
  .event-grid{grid-template-columns:1fr;}
  .related-grid{grid-template-columns:1fr;}
  .events-filters{gap:8px;}
  .events-filters button{padding:8px 14px; font-size:13px;}
  .event-gallery-strip{grid-template-columns:repeat(2,1fr);}
  .event-hero{height:320px;}
  .event-hero-meta{gap:14px; font-size:13px;}
}