/* ============================================================
   Tournaments browser page
   ============================================================ */
.trn-filters {
  max-width: var(--maxw); margin: 0 auto 28px; padding: 0 24px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  align-items: center;
}
.filter-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.filter-pill {
  background: var(--card); border: 1.5px solid var(--border);
  color: var(--text2); font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 20px; cursor: pointer; transition: var(--t);
  display: inline-flex; align-items: center; gap: 5px;
}
.filter-pill:hover { border-color: var(--cyan-mid); color: var(--cyan); }
.filter-pill.active { background: var(--cyan); color: #fff; border-color: var(--cyan); box-shadow: 0 3px 10px rgba(0,184,217,0.3); }
.filter-search { width: 220px; padding: 8px 14px; }

.trn-section {
  max-width: var(--maxw); margin: 0 auto 40px; padding: 0 24px;
}

.trn-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 18px;
}
.trn-grid.small { grid-template-columns: repeat(3, 1fr); }

/* Big featured card */
.trn-card.big {
  text-decoration: none; color: inherit;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 16px; overflow: hidden;
  transition: var(--t); box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.trn-card.big:hover { box-shadow: var(--shadow2); transform: translateY(-2px); border-color: var(--cyan-mid); }
.t-banner {
  position: relative; height: 100px; display: flex;
  align-items: center; justify-content: center; color: #fff;
  overflow: hidden;
}
.t-banner::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.15), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(0,0,0,0.15), transparent 50%);
}
.t-icon { font-size: 52px; position: relative; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25)); }
.t-status {
  position: absolute; top: 12px; right: 12px;
  background: rgba(0,0,0,0.4); color: #fff;
  padding: 4px 10px; border-radius: 14px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
}
html[dir="rtl"] .t-status { right: auto; left: 12px; letter-spacing: 0; }
.t-status.live::before { content:'● '; color: var(--live); animation: blink 1.2s infinite; }

.t-meta {
  padding: 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.t-meta strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; font-weight: 800; color: var(--text);
  letter-spacing: -0.2px;
}
html[dir="rtl"] .t-meta strong { font-family: 'Noto Kufi Arabic', sans-serif; font-size: 18px; letter-spacing: 0; }
.t-meta .muted { font-size: 12px; color: var(--text3); }
.t-stats { display: flex; gap: 14px; margin-top: 10px; }
.t-stats span { font-size: 12px; color: var(--text2); }
.t-stats b { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; color: var(--cyan2); font-weight: 800; }

/* Small card */
.trn-card:not(.big) {
  text-decoration: none; color: inherit;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 14px;
  display: flex; align-items: center; gap: 12px;
  transition: var(--t); box-shadow: var(--shadow);
}
.trn-card:not(.big):hover { border-color: var(--cyan-mid); box-shadow: var(--shadow2); }
.t-mini {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
  flex-shrink: 0;
}
.t-info { flex: 1; min-width: 0; }
.t-info strong { display: block; font-size: 14px; color: var(--text); font-weight: 700; }
.t-info span { font-size: 12px; color: var(--text3); }

/* ── subsection label ── */
.trn-subsection { margin-bottom: 22px; }
.subsection-label {
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text3);
  margin: 0 0 10px; padding: 0;
}
html[dir="rtl"] .subsection-label { letter-spacing: 0; }

/* ── جدول الدوريات المحلية ── */
.domestic-table {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 16px; overflow: hidden;
  margin-top: 18px; box-shadow: var(--shadow);
}
.dt-head, .dt-row {
  display: grid;
  grid-template-columns: 160px 1fr 1fr 1fr;
  align-items: center;
}
.dt-head {
  background: var(--bg3); padding: 10px 18px;
  font-size: 11px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.8px;
  border-bottom: 1.5px solid var(--border);
}
html[dir="rtl"] .dt-head { letter-spacing: 0; }
.dt-row {
  border-bottom: 1px solid var(--border);
  transition: var(--t);
}
.dt-row:last-child { border-bottom: none; }
.dt-row:hover { background: var(--bg3); }
.dt-country {
  padding: 14px 18px; font-size: 14px; font-weight: 700; color: var(--text);
}
.dt-cell {
  padding: 10px; font-size: 13px; color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  border-left: 1px solid var(--border);
  min-height: 44px; min-width: 0;
}
html[dir="rtl"] .dt-cell { border-left: none; border-right: 1px solid var(--border); }
.dt-cell.dt-empty { color: var(--text3); }
.dt-cell-links {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; min-width: 0;
}
.dt-cell-link {
  text-decoration: none; font-weight: 600; color: inherit;
  display: flex; align-items: center; transition: var(--t);
  min-width: 0; overflow-wrap: break-word; word-break: break-word;
}
.dt-cell-link:hover { color: var(--cyan); }
.dt-cell-link::before {
  content:''; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-inline-end: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--dt-c1,#0099bb), var(--dt-c2,#005577));
}
/* الملصق الحقيقي (دوري/كأس/سوبر) — مخفي في العرض المكتبي (رأس dt-head
   يكفي هناك)، يُفعَّل فقط داخل شبكة تخطيط الجوال أدناه */
.dt-lbl { display: none; }
.dt-dash { color: var(--text3); }

@media (max-width: 900px) {
  .trn-grid, .trn-grid.small { grid-template-columns: repeat(2, 1fr); }
  .filter-search { width: 100%; }
  .dt-head, .dt-row { grid-template-columns: 120px 1fr 1fr 1fr; }
}
@media (max-width: 560px) {
  .trn-grid, .trn-grid.small { grid-template-columns: 1fr; }
  .trn-filters { padding: 0 16px; }

  /* الجدول (دولة/دوري/كأس/سوبر) لا يتّسع كأعمدة أفقية على شاشة جوال —
     يتحوّل كل صف إلى "بطاقة" رأسية بدل ذلك، مع إظهار الأعمدة الأربعة كاملة
     (بما فيها السوبر) بدل إخفاء أي منها.
     المحاذاة: .dt-row نفسه يصبح شبكة CSS Grid بعمودين ثابتين (56px للملصق
     + عمود مرن للمحتوى)، ونجعل .dt-cell شفافاً (display:contents) بحيث
     يصبح الملصق (.dt-lbl) ومحتواه (.dt-cell-links) عنصرَين مباشرَين في
     نفس الشبكة. بما أن كل بطاقات الدول تستخدم نفس أرقام الأعمدة تماماً،
     تبدأ كل الملصقات وكل أسماء البطولات من نفس البكسل في كل الدول، بدل
     الاعتماد على محاذاة نص افتراضية قد تختلف حسب طول الكلمة. */
  .dt-head { display: none; }
  .dt-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 10px; row-gap: 8px;
    padding: 14px 16px;
  }
  .dt-country {
    grid-column: 1 / -1;
    padding: 0 0 8px; font-size: 15px; text-align: center;
    border-bottom: 1px solid var(--border);
  }
  .dt-cell { display: contents; }
  .dt-lbl {
    display: block; text-align: start;
    font-size: 11px; font-weight: 700; color: var(--text3);
    padding-top: 3px; line-height: 1.3;
  }
  .dt-dash { padding-top: 3px; }
  .dt-cell-links { gap: 5px; min-width: 0; }
  .dt-cell-link { line-height: 1.3; font-size: 13px; }
}