/* ─────────────────────────────────────────────────────────────
   SUPATIPS – football trends / match news (list, article, homepage)
   Upload to: public_html/assets/css/trends.css
   ───────────────────────────────────────────────────────────── */
.tr-wrap{font-family:var(--font-body);color:var(--text)}
.tr-wrap *{box-sizing:border-box}
.tr-c-green{--tc:var(--accent)}.tr-c-red{--tc:#c94a4a}.tr-c-blue{--tc:#3b6ea8}.tr-c-purple{--tc:#6b5aa6}.tr-c-amber{--tc:#a07a1c}
.c-green{--tc:var(--accent)}.c-red{--tc:#c94a4a}.c-blue{--tc:#3b6ea8}.c-purple{--tc:#7a68b8}.c-amber{--tc:#b08623}
[data-theme="dark"] .c-blue,:root:not([data-theme]) .c-blue{--tc:#5b8fd0}
[data-theme="dark"] .c-amber,:root:not([data-theme]) .c-amber{--tc:#e0b04f}

/* section header (homepage + list page) */
.tr-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;background:var(--bg-league);
  border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius,3px) var(--radius,3px) 0 0}
.tr-head h2{margin:0;font:700 11.5px var(--font-body);letter-spacing:.5px;text-transform:uppercase;color:var(--text)}
.tr-head a{font-size:12px;font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap}
.tr-head a:hover{text-decoration:underline}
.tr-box{background:var(--bg-card);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius,3px) var(--radius,3px);padding:10px;margin-bottom:14px}

/* cards */
.tr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tr-card{display:flex;gap:12px;align-items:stretch;padding:10px;border:1px solid var(--border);border-radius:var(--radius,3px);background:var(--bg-card);
  text-decoration:none;color:var(--text);transition:border-color .15s,background .15s;min-width:0}
.tr-card:hover{border-color:var(--tc,var(--accent));background:var(--bg-row)}
.tr-num{flex-shrink:0;width:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--radius,3px);
  background:var(--tc,var(--accent));color:#fff;line-height:1}
.tr-num b{font-family:var(--font-head);font-size:26px;font-weight:600}
.tr-num small{font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;opacity:.85;margin-top:3px}
.tr-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.tr-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-meta img{width:16px;height:16px;object-fit:contain;flex-shrink:0}
.tr-tag{font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tc,var(--accent))}
.tr-title{font-family:var(--font-head);font-size:15px;font-weight:600;line-height:1.3;color:var(--text)}
.tr-card:hover .tr-title{color:var(--tc,var(--accent))}
.tr-ex{font-size:13px;line-height:1.55;color:var(--muted)}
.tr-time{font-size:10.5px;color:var(--muted);margin-top:auto}
.tr-big{grid-column:1/-1;padding:14px}
.tr-big .tr-num{width:84px}
.tr-big .tr-num b{font-size:40px}
.tr-big .tr-title{font-size:21px}
.tr-card[hidden]{display:none}

/* filter chips (list page) */
.tr-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px;background:var(--bg-card);border:1px solid var(--border);border-top:none}
.tr-chips::-webkit-scrollbar{display:none}
.tr-chip{flex-shrink:0;padding:5px 11px;border:1px solid var(--border);border-radius:var(--radius,3px);background:var(--bg-card);color:var(--text);
  font:600 12px var(--font-body);cursor:pointer;white-space:nowrap}
.tr-chip:hover{border-color:var(--accent);color:var(--accent)}
.tr-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tr-empty{padding:18px;text-align:center;color:var(--muted);font-size:13.5px}

/* article page */
.tr-crumb{font-size:12px;color:var(--muted);margin:4px 0 10px}
.tr-crumb a{color:var(--muted);text-decoration:none}.tr-crumb a:hover{color:var(--accent)}
.tr-art{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius,3px);padding:20px 22px;margin-bottom:14px}
.tr-art .tr-tag{display:inline-block;margin-bottom:8px}
.tr-art h1{font-family:var(--font-head);font-size:28px;font-weight:600;line-height:1.2;margin:0 0 10px;color:var(--text)}
.tr-byline{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:16px}
.tr-byline a{color:var(--accent);text-decoration:none;font-weight:600}
.tr-hero{display:flex;align-items:center;gap:16px;padding:14px;margin-bottom:16px;border-radius:var(--radius,3px);background:var(--bg-row);border-left:4px solid var(--tc,var(--accent))}
.tr-hero img{width:56px;height:56px;object-fit:contain}
.tr-hero .big{font-family:var(--font-head);font-size:44px;font-weight:600;line-height:1;color:var(--tc,var(--accent))}
.tr-hero .lbl{font-size:13px;color:var(--muted)}.tr-hero .lbl b{display:block;font-size:16px;color:var(--text)}
.tr-art p{font-size:15.5px;line-height:1.75;color:var(--text);margin:0 0 14px}
.tr-art p a{color:var(--accent);font-weight:600}
.tr-art h2{font-family:var(--font-head);font-size:19px;font-weight:600;margin:22px 0 10px;border-left:3px solid var(--accent);padding-left:10px}
.tr-ended{padding:10px 14px;margin-bottom:14px;border-radius:var(--radius,3px);background:rgba(201,74,74,.08);border:1px solid rgba(201,74,74,.3);font-size:13.5px}
.tr-ended a{color:var(--accent);font-weight:600}
.tr-res{width:100%;border-collapse:collapse;font-size:13.5px}
.tr-res td{padding:7px 4px;border-bottom:1px solid var(--border-2,var(--border))}
.tr-res td.d{color:var(--muted);font-size:12px;white-space:nowrap}
.tr-res td.v{color:var(--muted);font-weight:700;width:22px}
.tr-res td.s{font-weight:700;text-align:right;white-space:nowrap}
.tr-res td.c{color:var(--muted);font-size:12px}
.tr-dot{display:inline-flex;width:20px;height:20px;border-radius:3px;align-items:center;justify-content:center;color:#fff;font-size:10.5px;font-weight:700}
.tr-dot.W{background:#2f6f4e}.tr-dot.D{background:#8e98a8}.tr-dot.L{background:#c94a4a}
.tr-next{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--accent);border-radius:var(--radius,3px);
  text-decoration:none;color:var(--text);margin:6px 0 14px}
.tr-next:hover{background:var(--bg-row)}
.tr-next small{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.tr-next b{font-size:15px}
.tr-next span.go{color:#fff;background:var(--accent);padding:7px 12px;border-radius:var(--radius,3px);font-size:12.5px;font-weight:700;white-space:nowrap}
.tr-share{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--border);border-radius:var(--radius,3px);background:none;
  color:var(--text);font:600 12.5px var(--font-body);cursor:pointer}
.tr-share:hover{border-color:var(--accent);color:var(--accent)}

@media(max-width:640px){
  .tr-grid{grid-template-columns:1fr}
  .tr-big .tr-num{width:64px}.tr-big .tr-num b{font-size:30px}.tr-big .tr-title{font-size:17px}
  .tr-art{padding:16px 14px}.tr-art h1{font-size:22px}
  .tr-hero .big{font-size:36px}
  .tr-res td.c{display:none}
}