/* ═══════════════════════════════════════════════════════
   boutich / event-images.css
   Etkinlik görselleri ARTIK TEK BİR ORANLA SINIRLI DEĞİL.
   480×690 (dikey), 800×500 (yatay), 1024×1024 (kare) — hangisi
   gelirse gelsin hiçbir kısmı kesilmiyor. Teknik: görselin
   kendisi (object-fit:contain) kutunun içinde tam görünür,
   arkasında aynı görselin bulanıklaştırılmış hali kutuyu
   dolduruyor (Spotify/Netflix'in karışık kapak oranlarını
   gösterme yöntemiyle aynı mantık).

   Bu dosyayı style.css / events.css / event-detail.css'den
   SONRA yükleyin — üzerlerine yazıyor, o dosyalara dokunmanıza
   gerek yok.
═══════════════════════════════════════════════════════ */

/* ── KART GÖRSELLERİ (ana sayfa + etkinlikler listesi) ── */
.event-img {
  position: relative;
  overflow: hidden;
  background: #12241a;
}
.event-img-backdrop {
  position: absolute;
  inset: -10px; /* blur kenarlarda beyaz/boşluk bırakmasın diye taşırıyoruz */
  background-size: cover;
  background-position: center;
  filter: blur(22px) brightness(.55) saturate(1.15);
  transform: scale(1.15);
  z-index: 0;
}
.event-img > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain !important;   /* cover yerine contain — hiçbir şey kesilmiyor */
  display: block;
}
.event-card:hover .event-img > img { transform: scale(1.04); }

/* Rozetler (tarih, şube, tükendi) blur katmanının üstünde kalsın */
.event-date-badge, .event-branch-badge, .event-sold-out {
  z-index: 2;
}

/* ── KART AÇIKLAMALARI — uzun metin taşmasın ────────────
   Açıklama 3 satırla sınırlanıp "..." ile kesiliyor. Tam metin
   sadece etkinlik detay sayfasında (event_detail.html) görünür —
   kart sadece bir özet, detaylar için tıklamaları isteniyor. */
.event-body p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── DETAY SAYFASI HERO GÖRSELİ ────────────────────────── */
/* #edHeroBackdrop ayrı bir katman (ed-hero-backdrop class'ı) —
   aynı görselin bulanık halini kutuyu doldurarak gösterir.
   #edHeroImg (ed-hero-img class'ı) ise görselin TAMAMINI, hiç
   kesmeden, üstte ve ortalı gösterir. */
.ed-hero-img {
  position: absolute; inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}
.ed-hero-backdrop {
  position: absolute; inset: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(30px) brightness(.5);
  transform: scale(1.15);
  z-index: 0;
}