/* =========================================================
   CLINALL — Klinik Listeleme: Kutu Kart Tasarımı
   Sayfa: /klinikler/...  (listeleme-container / listeleme-each)
   Kullanım: Ana CSS dosyasının EN SONUNA ekleyin.
   HTML değişikliği gerekmez.
   ========================================================= */

/* 1) Liste -> Grid (masaüstü 3 / tablet 2 / mobil 1 sütun) */
.listeleme-container{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
/* Kart olmayan elemanlar (sayfalama, banner vb.) tam genişlik */
.listeleme-container > :not(.listeleme-each){ grid-column:1/-1; }

/* 2) Kart kutusu */
.listeleme-each{
  position:relative;
  margin:0 !important;
  height:100%;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e6ebf2 !important;
  border-radius:16px !important;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(20,40,80,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.listeleme-each:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(20,40,80,.12);
}

/* 3) Bootstrap row/col yapısını dikeye çevir (görsel üstte, bilgi altta) */
.listeleme-each > .row{
  margin:0 !important;
  flex:1;
  flex-direction:column;
  flex-wrap:nowrap;
}
.listeleme-each > .row > [class*="col-"]{
  width:100% !important;
  max-width:100% !important;
  flex:0 0 auto;
  padding:0 !important;
}
.listeleme-each > .row > .col-md-8{
  flex:1;
  display:flex;
  position:static !important;   /* Clinall rozeti kartın köşesine otursun */
}
.listeleme-each > .row > .col-md-8 > a{
  display:flex;
  flex-direction:column;
  width:100%;
}

/* 4) Görsel */
.listeleme-each-img{
  width:100% !important;
  height:190px !important;
  object-fit:cover;
  border-radius:0 !important;
}

/* 5) Bilgi alanı — "Profili incele" (::after) her zaman en altta */
.listeleme-each-infos{
  padding:16px 18px 18px !important;
  display:flex;
  flex-direction:column;
  height:100%;
}
.listeleme-each-infos > .d-flex{ margin-bottom:14px; }
.listeleme-each-infos::after{ margin-top:auto !important; }
.listeleme-each-title h4{ font-size:17px !important; }

/* Boş etiket alanı boşluk yaratmasın */
.listeleme-each-tags{ margin-top:12px !important; padding-top:0 !important; border:0 !important; }
.listeleme-each-tags:not(:has(*)){ display:none !important; }

/* 6) Clinall rozeti -> görselin sağ üst köşesi */
.listeleme-each-clin{
  top:-4px !important;
  right:-4px !important;
  bottom:auto !important;
  left:auto !important;
  z-index:3;
}

/* 7) Responsive */
@media (max-width:1199px){
  .listeleme-container{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:575px){
  .listeleme-container{ grid-template-columns:1fr; gap:14px; }
  .listeleme-each-img{ height:150px !important; }
  .listeleme-each-infos{ padding:12px 14px 14px !important; }
  .listeleme-each-infos > .d-flex{ margin-bottom:10px; }
  .listeleme-each:hover{ transform:none; }
}