/* event_detail.css */

body {
  background-color: #0a0a0b; 
  color: #fff; 
  font-family: "Vazirmatn", -apple-system, sans-serif;
  margin: 0; 
  padding: 0; 
  line-height: 1.6;
}

.detail-container { 
  max-width: 900px; 
  margin: 0 auto; 
  padding: 40px 20px 100px; 
}

.back-btn {
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  color: #a1a1aa; 
  text-decoration: none;
  font-size: 14px; 
  margin-bottom: 30px; 
  transition: color 0.3s ease;
}

.back-btn:hover { 
  color: #fff; 
}

.event-cover { 
  width: 100%; 
  height: 400px; 
  object-fit: cover; 
  border-radius: 20px; 
  margin-bottom: 40px; 
}

.event-date-badge {
  display: inline-block; 
  background: rgba(229, 191, 151, 0.1); 
  color: #e5bf97;
  padding: 6px 16px; 
  border-radius: 30px; 
  font-size: 14px; 
  font-weight: 600; 
  margin-bottom: 20px;
}

.event-title { 
  font-size: 40px; 
  margin: 0 0 30px 0; 
  line-height: 1.2; 
}

.event-desc { 
  font-size: 18px; 
  color: #d4d4d8; 
  white-space: pre-line; 
}

@media screen and (max-width: 767px) {
  .detail-container {
    padding: 24px 16px 64px;
  }
  .back-btn {
    min-height: 44px;
    margin-bottom: 20px;
  }
  .event-cover {
    height: min(70vw, 320px);
    min-height: 220px;
    margin-bottom: 28px;
    border-radius: 14px;
  }
  .event-title {
    margin-bottom: 20px;
    font-size: clamp(30px, 9vw, 38px);
    overflow-wrap: anywhere;
  }
  .event-desc {
    font-size: 16px;
    overflow-wrap: anywhere;
  }
}