/* ==========================================================================
   listing-a — Kategori / Lig / Turnuva detay + Etkinlik listesi
   Tasarım referansı: kategori.html, lig.html
   Sadece token renkleri kullanılır.
   ========================================================================== */

/* --- Sayfa başlığı (hero) ------------------------------------------------ */
.bb-page-hero h1 { font-size: clamp(2rem, 5.5vw, 3.5rem); }
.bb-page-hero .bb-page-hero-media {
  position: relative; aspect-ratio: 16 / 10; max-width: 100%;
  border-radius: var(--radius-xl); overflow: hidden;
  background: var(--surface-overlay); border: 1px solid var(--border-subtle);
}
.bb-page-hero .bb-page-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Breadcrumb — tasarımdaki "Ana Sayfa / Kategori / Sayfa" satırı */
.bb-breadcrumb .breadcrumb { margin: 0; padding: 0; background: transparent; flex-wrap: wrap; row-gap: .25rem; }
.bb-breadcrumb .breadcrumb-item { font-size: .8125rem; color: var(--text-muted); }
.bb-breadcrumb .breadcrumb-item a { color: var(--text-muted); text-decoration: none; }
.bb-breadcrumb .breadcrumb-item a:hover { color: var(--text-primary); }
.bb-breadcrumb .breadcrumb-item.active { color: var(--text-secondary); }
.bb-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--text-muted); padding-right: .5rem; }
.bb-breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: .5rem; }

/* --- Öne çıkan etkinlik şeridi (kategori hero altı) ---------------------- */
.bb-strip { display: flex; flex-wrap: nowrap; gap: .75rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.bb-strip > .bb-tile { flex: 0 0 auto; width: min(300px, 82vw); height: auto; }
.bb-strip .bb-tile-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Etkinlik kartları: site.partials.event-grid-items kendi Bootstrap sütunlarını üretir; kapsayıcı .row g-4 */

/* --- Liste satırları (bb-list > sarmalayıcı > bb-row) --------------------- */
/* Lig "daha fazla" JS'i satırı bir sarmalayıcı içinde bekler; ayraçları sarmalayıcıya taşı */
.bb-list-wrapped .bb-row { border-bottom: 0; }
.bb-list-wrapped > * + * { border-top: 1px solid var(--border-subtle); }
.bb-row .bb-row-title { overflow: hidden; text-overflow: ellipsis; }
.bb-row .bb-row-flag { margin-left: .375rem; vertical-align: middle; }
.bb-row .bb-event-league i { font-size: .6875rem; }
.bb-row-cta { flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .bb-row .text-price { font-size: 1rem; }
}

/* --- Takım / turnuva / sanatçı kutuları ---------------------------------- */
.bb-tile .bb-mono { overflow: hidden; }
.bb-tile .bb-mono img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-tile .bb-mono .bb-ico { width: 1.25rem; height: 1.25rem; }
.bb-tile > span:last-child { min-width: 0; }

/* Alt kategori pill'i */
.bb-cat .bb-cat-go { margin-left: auto; color: var(--text-muted); }
.bb-cat:hover .bb-cat-go { color: var(--text-accent); }
.bb-cat i { color: var(--text-accent); width: 1.125rem; text-align: center; }

/* --- Boş durum ----------------------------------------------------------- */
.bb-empty { padding: 3rem 1.5rem; text-align: center; }
.bb-empty .bb-empty-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--text-accent); margin-bottom: 1rem;
}
.bb-empty .bb-empty-ico .bb-ico { width: 1.5rem; height: 1.5rem; }

/* --- SSS sekmeleri ------------------------------------------------------- */
.bb-faq-tabs { list-style: none; margin: 0; padding: 0; }
.bb-faq-tabs .nav-item { flex: 0 0 auto; }
.bb-faq-tabs .bb-tab-link {
  background: transparent; border: 0; border-radius: 0; cursor: pointer;
  padding-left: 0; padding-right: 0; max-width: 28ch; overflow: hidden; text-overflow: ellipsis;
}
.bb-faq-tabs .bb-tab-link:focus-visible { box-shadow: 0 0 0 2px rgba(220,11,45,.28); }
.bb-faq-content { max-width: 76ch; }
.bb-faq-content p { color: var(--text-secondary); }

/* --- Zengin metin (description_2 alanları) ------------------------------- */
.bb-rich { max-width: 76ch; color: var(--text-secondary); }
.bb-rich h2, .bb-rich h3, .bb-rich h4, .bb-rich h5 {
  font-size: 1.125rem; font-weight: 500; line-height: 1.4;
  color: var(--text-primary); margin: 1.75rem 0 .5rem;
}
.bb-rich > :first-child { margin-top: 0; }
.bb-rich p, .bb-rich ul, .bb-rich ol { color: var(--text-secondary); line-height: 1.7; margin-bottom: 1rem; }
.bb-rich p:last-child { margin-bottom: 0; }
.bb-rich ul, .bb-rich ol { padding-left: 1.25rem; }
.bb-rich li { margin-bottom: .375rem; }
.bb-rich strong, .bb-rich b { font-weight: 500; color: var(--text-primary); }
.bb-rich a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 2px; }
.bb-rich a:hover { color: var(--text-primary); }
.bb-rich img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.bb-rich table { width: 100%; display: block; overflow-x: auto; }
.bb-rich span, .bb-rich p, .bb-rich li { background: transparent !important; }
.bb-rich *[style*="color"] { color: inherit !important; }

/* --- Etkinlik listesi yan kart ------------------------------------------- */
.bb-info-list .bb-ico { margin-top: .1875rem; }
.bb-event-list-filter .form-select { width: auto; min-width: 180px; max-width: 100%; }
.bb-row .bb-row-flag { text-transform: none; letter-spacing: 0; white-space: nowrap; }
.bb-row .bb-event-league { flex-wrap: wrap; row-gap: .25rem; }
.bb-tile .d-block { overflow-wrap: break-word; }
@media (max-width: 575.98px) {
  .bb-tile { padding: .75rem; gap: .625rem; font-size: .875rem; }
  .bb-tile .bb-mono { width: 36px; height: 36px; }
}

/* --- Güven maddeleri kartı (tasarım yan kartı; ızgaralı sayfalarda yatay) --- */
.bb-trust-card-row { display: grid; grid-template-columns: 1fr; }
.bb-trust-card-row > div + div { border-top: 1px solid var(--border-subtle); }
@media (min-width: 768px) {
  .bb-trust-card-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bb-trust-card-row > div + div { border-top: 0; border-left: 1px solid var(--border-subtle); }
}