/* =====================================================================
   SINGLE (oyun açıklama) - OPTIM
   Amaç:
   - Mobilde kapak görseli / hero taşmasını kesin bitirmek
   - LCP "element render delay" azaltmak (below-the-fold render'ı ertele)
   Not:
   - Bu dosya SADECE single.php sayfalarında enqueue edilir.
   ===================================================================== */

/* --- HERO / GRID: yatay taşmayı engelle --- */
.single-v3 .os-hero-grid > *{
  min-width: 0; /* grid/flex çocuklarının overflow yapmasını engeller */
}

.single-v3 .os-hero-media{
  width: 100%;
  max-width: 100%;
}

/* Desktop'ta kapak alanını biraz küçült (520px sabit yerine responsive clamp)
   -> hem daha temiz görünüm, hem de LCP elemanının paint maliyeti düşer */
@media (min-width: 1025px){
  .single-v3 .os-hero-grid{
    grid-template-columns: clamp(320px, 38vw, 460px) 1fr !important;
  }
}

/* Kapak görseli: her koşulda ekrana sığsın (sadece HERO içindeki kapak) */
.single-v3 .os-hero-media img.os-cover-img,
.single-v3 .os-hero-media .os-cover-img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobil: 2 kolon kalırsa bile (başka CSS override ederse) yine alt alta zorla */
@media (max-width: 768px){
  .single-v3{
    overflow-x: hidden; /* olası 1px taşmaları da kes */
  }

  .single-v3 .os-hero-grid{
    grid-template-columns: 1fr !important;
  }
}

/* --- LCP / Render Delay: aşağıdaki ağır blokları ilk açılışta render etme ---
   Bu bloklar genelde ekranın altında kalır (FAQ, yorumlar).
   Chromium (Lighthouse) için ciddi LCP kazanımı sağlar.
*/

.single-v3 .os-faq,
.single-v3 .os-howto,
.single-v3 #comments,
.single-v3 .comments-area,
.single-v3 .comment-respond{
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

/* Küçük güvenlik: uzun tek kelimeler taşma yapmasın */
.single-v3 .os-h1,
.single-v3 .os-desc-content,
.single-v3 .os-chip{
  overflow-wrap: anywhere;
}