/* =====================
   Events Page Specific Styles
   ===================== */

/* Events Grid */
.events-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem
}

/* Hipcamp-style event cards */
.event-card{
  background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.12);
  border:1px solid rgba(0,0,0,0.06);transition:all 0.3s ease;position:relative;
  height:380px;display:flex;flex-direction:column;cursor:pointer
}
.event-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,0.16)}

.event-image{
  position:relative;flex:1;background:linear-gradient(135deg,#FEF3C7,#D1FAE5,#DBEAFE);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.2rem;font-weight:800
}

.event-content{
  background:var(--card-bg-color, #2d5016);backdrop-filter:blur(10px);padding:1rem;color:#ffffff
}

.event-date{
  display:flex;align-items:center;gap:0.5rem;color:rgba(255,255,255,0.95);
  font-size:0.9rem;margin-bottom:0.5rem;font-weight:600;
  text-shadow:1px 1px 2px rgba(0,0,0,0.5)
}

.event-title{
  font-size:1.1rem;font-weight:900;margin:0 0 0.25rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#ffffff;text-shadow:1px 1px 2px rgba(0,0,0,0.7)
}

.event-desc{
  color:rgba(255,255,255,0.95);margin:0 0 0.75rem;height:2.4em;
  line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  line-clamp:2;-webkit-box-orient:vertical;font-weight:600;text-shadow:1px 1px 2px rgba(0,0,0,0.5)
}

.event-tags{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1rem}
.event-tag{
  background:rgba(255,255,255,0.9);color:#000000;padding:0.25rem 0.6rem;
  border-radius:999px;font-size:0.78rem;font-weight:900;
  border:1px solid rgba(255,255,255,0.3)
}

.event-time{
  color:rgba(255,255,255,0.95);font-size:0.9rem;margin-bottom:1rem;
  font-weight:600;text-shadow:1px 1px 2px rgba(0,0,0,0.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.event-actions{display:flex;gap:0.5rem;flex-wrap:wrap}
.event-actions .btn{font-size:0.9rem;padding:0.6rem 1rem}

/* Modal scroll styles */
.modal .panel-body .grid > div:last-child{
  max-height:70vh;overflow-y:auto;padding-right:0.5rem
}
.modal .panel-body .grid > div:last-child::-webkit-scrollbar{
  width:6px
}
.modal .panel-body .grid > div:last-child::-webkit-scrollbar-track{
  background:rgba(0,0,0,0.1);border-radius:3px
}
.modal .panel-body .grid > div:last-child::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.3);border-radius:3px
}
.modal .panel-body .grid > div:last-child::-webkit-scrollbar-thumb:hover{
  background:rgba(0,0,0,0.5)
}

/* Note: Dynamic modal background styles are now in common.css with high specificity */

/* =====================
   Responsive Design - Unified Breakpoints
   ===================== */

/* Tablet: 769px - 1024px */
@media (max-width: 1024px) and (min-width: 769px) {
  .events-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mobile: 768px and below */
@media (max-width: 768px) {
  .events-grid{grid-template-columns:1fr}
}