/* classico.css — Estilos compartilhados para páginas de clássicos */

/* ── Page Hero ───────────────────────────────────────────────────────────────── */
.cl-page-hero {
    padding: 2.2rem 0 1.8rem;
    border-bottom: 3px solid #D4AF37;
    color: #fff;
}
.cl-hero-corinthians { background: linear-gradient(135deg, #000 0%, #111 60%, #0a0a0a 100%); }
.cl-hero-spfc        { background: linear-gradient(135deg, #1a0000 0%, #2a0000 60%, #0a0a0a 100%); }
.cl-hero-palmeiras   { background: linear-gradient(135deg, #001a00 0%, #002200 60%, #0a0a0a 100%); }

.cl-breadcrumb { font-size:.85rem; color:#9CA3AF; margin-bottom:.5rem; }
.cl-breadcrumb a { color:#D4AF37; text-decoration:none; }
.cl-breadcrumb span { margin: 0 .3rem; opacity:.5; }
.cl-hero-title {
    font-family: 'Teko', 'Outfit', sans-serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    margin: 0 0 .4rem;
    line-height: 1;
}
.cl-hero-vs { color: #D4AF37; margin: 0 .4rem; }
.cl-hero-sub { color: #6B7280; font-size:.9rem; margin:0; }

/* ── Loading / Error ─────────────────────────────────────────────────────────── */
.cl-loading {
    text-align:center; padding:4rem 1rem; color:#666;
}
.cl-spinner {
    display:inline-block; width:40px; height:40px;
    border:3px solid #222; border-top-color:#D4AF37;
    border-radius:50%;
    animation: cl-spin .75s linear infinite;
    margin-bottom:1rem;
}
@keyframes cl-spin { to { transform:rotate(360deg); } }
.cl-error {
    text-align:center; padding:2rem; color:#f87171;
    background:#1a0000; border:1px solid #450a0a; border-radius:8px;
}
.cl-empty { color:#555; font-style:italic; padding:.5rem 0; }

/* ── Stats Grid ──────────────────────────────────────────────────────────────── */
.cl-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .75rem;
    margin-bottom: 2rem;
}
.cl-stat-card {
    background: #0d0d0d;
    border: 1px solid #1a1a1a;
    border-radius: 10px;
    padding: 1.1rem .75rem .9rem;
    text-align: center;
    transition: border-color .2s;
}
.cl-stat-card:hover { border-color: #333; }
.cl-stat-icon { font-size:1.1rem; color:#555; display:block; margin-bottom:.4rem; }
.cl-stat-value {
    font-family: 'Teko', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    display: block;
}
.cl-stat-label { font-size:.7rem; color:#6B7280; text-transform:uppercase; letter-spacing:.06em; margin-top:.3rem; }

/* Accent variants */
.cl-stat-card--green .cl-stat-value  { color:#4ade80; }
.cl-stat-card--green .cl-stat-icon   { color:#4ade80; }
.cl-stat-card--red   .cl-stat-value  { color:#f87171; }
.cl-stat-card--red   .cl-stat-icon   { color:#f87171; }
.cl-stat-card--blue  .cl-stat-value  { color:#93c5fd; }
.cl-stat-card--blue  .cl-stat-icon   { color:#93c5fd; }
.cl-stat-card--gold  .cl-stat-value  { color:#D4AF37; }
.cl-stat-card--gold  .cl-stat-icon   { color:#D4AF37; }

/* ── Section Title ───────────────────────────────────────────────────────────── */
.cl-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.cl-section-title i { color:#D4AF37; }

/* ── Scorers ─────────────────────────────────────────────────────────────────── */
.cl-scorers-section { margin-bottom:2rem; }
.cl-scorers-list { display:flex; flex-direction:column; gap:.4rem; }
.cl-scorer-row {
    display:flex; align-items:center; gap:.75rem;
    padding: .55rem .85rem;
    background:#0d0d0d; border:1px solid #1a1a1a; border-radius:8px;
    transition: border-color .15s;
}
.cl-scorer-row:hover { border-color:#333; }
.cl-scorer-podium { border-color:#2a2400; background:#0f0e00; }
.cl-scorer-rank { font-size:1.1rem; min-width:2rem; text-align:center; }
.cl-scorer-name { flex:1; font-weight:600; color:#E5E7EB; }
.cl-scorer-goals { font-family:'Teko',sans-serif; font-size:1.2rem; color:#D4AF37; font-weight:700; }

/* ── Chart ───────────────────────────────────────────────────────────────────── */
.cl-chart-section { margin-bottom:2rem; }
.cl-chart-wrap {
    background:#0d0d0d; border:1px solid #1a1a1a; border-radius:10px;
    padding:1rem; max-width:560px;
}

/* ── Matches List ────────────────────────────────────────────────────────────── */
.cl-matches-section { margin-bottom:2rem; }
.cl-matches-list { display:flex; flex-direction:column; gap:.5rem; }
.cl-match-row {
    display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
    padding: .85rem 1rem;
    background: #0d0d0d;
    border: 1px solid #1a1a1a;
    border-radius: 8px;
    flex-wrap: wrap;
    border-left: 3px solid #1a1a1a;
    transition: border-color .15s;
}
.cl-match-win   { border-left-color:#14532d; }
.cl-match-draw  { border-left-color:#1e3a5f; }
.cl-match-loss  { border-left-color:#450a0a; }
.cl-match-row:hover { background:#111; }

.cl-match-left  { flex:1; display:flex; align-items:flex-start; gap:.75rem; min-width:0; }
.cl-match-right { display:flex; flex-direction:column; align-items:flex-end; gap:.2rem; flex-shrink:0; }

.cl-match-result-badge {
    display:flex; align-items:center; justify-content:center;
    width:2rem; height:2rem; border-radius:6px;
    font-weight:800; font-size:.85rem; flex-shrink:0;
    font-family:'Outfit',sans-serif;
}
.cl-match-result-badge.win   { background:#14532d; color:#4ade80; }
.cl-match-result-badge.draw  { background:#1e3a5f; color:#93c5fd; }
.cl-match-result-badge.loss  { background:#450a0a; color:#f87171; }

.cl-match-info { flex:1; min-width:0; }
.cl-match-score {
    display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
    font-size:.9rem; font-weight:600; color:#E5E7EB;
}
.cl-score-pill {
    background:#1a1a1a; border:1px solid #2a2a2a; border-radius:6px;
    padding:.1rem .5rem; font-family:'Teko',sans-serif; font-size:1.1rem;
    color:#fff; letter-spacing:.04em;
}
.cl-match-scorers { font-size:.78rem; color:#9CA3AF; margin-top:.25rem; }

.cl-match-date  { font-size:.78rem; color:#6B7280; white-space:nowrap; }
.cl-match-comp  {
    font-size:.72rem; background:#1a1a1a; border:1px solid #2a2a2a;
    border-radius:4px; padding:.1rem .4rem; color:#9CA3AF; white-space:nowrap;
}
.cl-match-venue { font-size:.72rem; color:#555; white-space:nowrap; }
.cl-match-venue i { margin-right:.2rem; }

/* Penalty badges */
.cl-pen-badge {
    display:inline-flex; align-items:center; gap:.25rem;
    font-size:.7rem; font-weight:700; padding:.15rem .45rem;
    border-radius:4px; margin-top:.25rem;
}
.cl-pen-badge.passed     { background:#14532d; color:#4ade80; }
.cl-pen-badge.eliminated { background:#450a0a; color:#f87171; }
.cl-pen-badge.generic    { background:#292524; color:#fcd34d; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width:600px) {
    .cl-stats-grid { grid-template-columns: repeat(3, 1fr); }
    .cl-match-right { display:none; }
}