/* =====================================================================
   Sidoma Turizm — blog (blog.css) — Plan 3 Görev 7
   sb_stil_haritasi() (inc/assets.php) yazılar sayfasında, yazı arşivlerinde (kategori, etiket, yazar, tarih) ve
   yazıda yükler; yalnız blog bağlamında. Şablonlar: home.php, archive.php, single-post.php,
   template-parts/blog/kart.php. Yazının gövdesi (sütun, tipografi) sayfa.css'tedir; sonundaki ilgili tur kartı
   magaza.css'tedir. Renk, yazı tipi, köşe ve kırılım değerleri theme.json paletinden ve base.css belirteçlerinden
   (--wp--preset--*, --sb-*); burada sabit renk ve font yok. Kırılımlar base.css başındaki liste (640 / 992).
   Çiftler kontrast.mjs'in kapsadığı değerlerle: metin / yuzey, metin-govde / yuzey, metin-ikincil / yuzey ve zemin,
   aksan-koyu / yuzey (bağlantı hover), aksan-uzeri / aksan (etkin sayfa).
   ===================================================================== */

/* ---------- Liste (home.php, archive.php) ---------- */
.sb-blog {
  padding-block-end: 60px;
}

@media (min-width: 992px) {
  .sb-blog {
    padding-block-end: 100px;
  }
}

.sb-blog__izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .sb-blog__izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .sb-blog__izgara {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sb-blog__oge {
  display: flex;
  margin: 0;
}

.sb-blog__bos {
  margin: 0;
  color: var(--wp--preset--color--metin-govde);
  font-size: var(--wp--preset--font-size--normal);
  text-align: center;
}

/* ---------- Kart (template-parts/blog/kart.php) ----------
   Beyaz kart, 1 px çizgi, tur kartıyla aynı köşe; görsel 4:3. Kartın tek bağlantısı başlıkta; ::after kartın
   tamamını kaplar, kart her yerinden tıklanır. Kartlar satırda eşit boyda (li esner). */
.sb-blog-kart {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--wp--preset--color--kenarlik);
  border-radius: var(--sb-kart-radius, 18px);
  background: var(--wp--preset--color--yuzey);
  color: var(--wp--preset--color--metin);
  transition: box-shadow var(--sb-sure) ease;
}

.sb-blog-kart:hover {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--wp--preset--color--metin) 10%, transparent);
}

/* Klavye odağı: başlık bağlantısının halkasına ek olarak kartın çevresi (kart her yerinden tıklanıyor). */
.sb-blog-kart:has(.sb-blog-kart__baslik a:focus-visible) {
  box-shadow: 0 0 0 2px var(--wp--preset--color--metin);
}

.sb-blog-kart__medya {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--sb-kart-radius, 18px) - 1px) calc(var(--sb-kart-radius, 18px) - 1px) 0 0;
  background: var(--wp--preset--color--yuzey-2);
}

.sb-blog-kart__gorsel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  transition: transform var(--sb-sure-gorsel) ease;
}

.sb-blog-kart:hover .sb-blog-kart__gorsel {
  transform: scale(1.03);
}

.sb-blog-kart__govde {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 22px;
}

.sb-blog-kart__tarih {
  margin: 0;
  color: var(--wp--preset--color--metin-ikincil);
  font-size: var(--wp--preset--font-size--kucuk);
  line-height: var(--sb-satir-arayuz);
}

.sb-blog-kart__baslik {
  margin: 0;
  color: inherit;
  font-size: var(--wp--preset--font-size--orta);
  font-weight: 700;
  line-height: var(--sb-satir-baslik);
  overflow-wrap: anywhere;
}

.sb-blog-kart__baslik a {
  color: inherit;
  text-decoration: none;
}

.sb-blog-kart__baslik a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.sb-blog-kart:hover .sb-blog-kart__baslik a {
  color: var(--wp--preset--color--aksan-koyu);
}

.sb-blog-kart__ozet {
  margin: 0;
  color: var(--wp--preset--color--metin-govde);
  font-size: var(--wp--preset--font-size--normal);
  line-height: var(--sb-satir-govde);
  overflow-wrap: anywhere;
}

/* ---------- Sayfalama: 44×44 kareler, gerçek bağlantılar (spec §4.2; magaza.css .sb-sayfalama ile aynı yapı) ---------- */
.sb-blog-sayfalama {
  margin-top: 60px;
}

.sb-blog-sayfalama ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-blog-sayfalama .page-numbers:not(ul) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sb-dokunma);
  min-height: var(--sb-dokunma);
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--wp--preset--color--metin-govde);
  font-size: var(--wp--preset--font-size--normal);
  line-height: 1;
  text-decoration: none;
}

.sb-blog-sayfalama a.page-numbers:hover,
.sb-blog-sayfalama a.page-numbers:focus-visible,
.sb-blog-sayfalama .page-numbers.current {
  background: var(--wp--preset--color--aksan);
  color: var(--wp--preset--color--aksan-uzeri);
}

.sb-blog-sayfalama .page-numbers.dots {
  border: 0;
}

/* ---------- Yazı (single-post.php) ---------- */
.sb-yazi__tarih {
  margin: 0 0 20px;
  color: var(--wp--preset--color--metin-ikincil);
  font-size: var(--wp--preset--font-size--kucuk);
  line-height: var(--sb-satir-arayuz);
}

.sb-yazi__gorsel {
  margin: 0 0 30px;
}

.sb-yazi__gorsel img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  border-radius: var(--sb-kart-radius, 18px);
  object-fit: cover;
}

/* Sonda tek tur kartı: yazı sütununun başında, kart genişliği sınırlı (ızgara kartı ~400 px). */
.sb-yazi__tur {
  max-inline-size: 420px;
  margin-top: 60px;
}

.sb-yazi__tur-baslik {
  margin: 0 0 20px;
  color: var(--wp--preset--color--metin);
  font-size: var(--wp--preset--font-size--baslik-4);
  font-weight: 500;
  line-height: var(--sb-satir-baslik);
}

@media (prefers-reduced-motion: reduce) {
  .sb-blog-kart,
  .sb-blog-kart__gorsel {
    transition: none;
  }

  .sb-blog-kart:hover .sb-blog-kart__gorsel {
    transform: none;
  }
}