/**
 * Classificação page — designs "É Golo Classificação" + mobile.
 *
 * Dark band (H1 + pills + tabs), 2fr/1fr grid: standings table with
 * qualification-zone border-left + legend, aside with marcadores,
 * previsão do título and número do dia. Mobile: condensed columns
 * (# / Equipa / J / DG / Pts) and stacked aside.
 *
 * @package SuperPortistas
 */

.sp-clf-page {
    --eg-display: 'Archivo Black', 'Archivo', ui-sans-serif, system-ui, sans-serif;
    --sp-clf-zone-champions: var(--sp-porto, #00a24a);
    --sp-clf-zone-europa: var(--sp-accent, #ffd400);
    --sp-clf-zone-conference: var(--sp-ink, #0d0d0c);
    --sp-clf-zone-descida: var(--sp-danger, #c0362c);
    --sp-clf-chip-draw: #8a887f;
    background: var(--sp-surface-muted, #f4f3ef);
    color: var(--sp-ink, #0d0d0c);
}

.sp-clf-dot {
    color: var(--sp-porto, #00a24a);
}

/* ---------------------------------------------------------------------
 * Dark band: title + league pills + tabs
 * ------------------------------------------------------------------- */

.sp-clf-hero {
    background: var(--sp-ink, #0d0d0c);
    color: #fff;
    padding: 2.25rem 3rem 0;
}

.sp-clf-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sp-clf-hero__head {
    display: flex;
    align-items: flex-end;
    gap: 2rem;
    flex-wrap: wrap;
}

.sp-clf-hero__title {
    font-family: var(--eg-display);
    font-style: italic;
    font-size: 3.5rem;
    line-height: 0.95;
    letter-spacing: -2.5px;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
}

.sp-clf-pills {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.sp-clf-pill {
    flex: none;
    border: 1.5px solid #3c3a35;
    color: #fff;
    font-weight: 700;
    font-size: 0.8125rem;
    line-height: 1.2;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

a.sp-clf-pill:hover,
a.sp-clf-pill:focus-visible {
    border-color: var(--sp-porto, #00a24a);
    color: #fff;
}

.sp-clf-pill:focus-visible {
    outline: 2px solid var(--sp-live, #00e06b);
    outline-offset: 2px;
}

.sp-clf-pill--active {
    background: var(--sp-porto, #00a24a);
    border-color: var(--sp-porto, #00a24a);
    font-weight: 800;
}

.sp-clf-tabs {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--sp-card-dark, #1b1b19);
    font-weight: 800;
    font-size: 0.875rem;
    overflow-x: auto;
}

.sp-clf-tab {
    flex: none;
    padding: 0.875rem 1.375rem;
    color: #8a887f;
    white-space: nowrap;
}

.sp-clf-tab--active {
    border-bottom: 3px solid var(--sp-porto, #00a24a);
    color: var(--sp-live, #00e06b);
}

.sp-clf-tab--soon {
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------
 * Body grid
 * ------------------------------------------------------------------- */

.sp-clf-body {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 2rem 3rem 3rem;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 2rem;
    align-items: start;
}

.sp-clf-body--single {
    grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------------------
 * Standings table
 * ------------------------------------------------------------------- */

.sp-clf-table-card {
    background: var(--sp-surface, #fff);
    border: 1px solid var(--sp-border, #dbd9d2);
    border-radius: 0;
}

.sp-clf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.sp-clf-th {
    padding: 0.75rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--sp-ink-faint, #6b6963);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--sp-ink, #0d0d0c);
    text-align: center;
    white-space: nowrap;
}

.sp-clf-th abbr {
    text-decoration: none;
    border-bottom: 0;
    cursor: help;
}

.sp-clf-th--pos {
    width: 44px;
    text-align: left;
    padding-left: 1rem;
}

.sp-clf-th--team {
    text-align: left;
}

.sp-clf-th--num {
    width: 44px;
}

.sp-clf-th--goals {
    width: 56px;
}

.sp-clf-th--pts {
    width: 64px;
}

.sp-clf-th--form {
    width: 130px;
    text-align: right;
    padding-right: 1rem;
}

.sp-clf-td {
    padding: 0.8125rem 0.375rem;
    font-weight: 600;
    border-bottom: 1px solid var(--sp-surface-subtle, #efeee8);
    text-align: center;
    vertical-align: middle;
}

.sp-clf-row:last-child .sp-clf-td {
    border-bottom: 0;
}

.sp-clf-row:hover {
    background: var(--sp-surface-subtle, #efeee8);
}

/* Zone borders (4px on the first cell of each row) */
.sp-clf-td--pos {
    font-family: var(--eg-display);
    font-style: italic;
    text-align: left;
    padding-left: calc(1rem - 4px);
    border-left: 4px solid transparent;
}

.sp-clf-row--champions .sp-clf-td--pos {
    border-left-color: var(--sp-clf-zone-champions);
}

.sp-clf-row--europa .sp-clf-td--pos {
    border-left-color: var(--sp-clf-zone-europa);
}

.sp-clf-row--conference .sp-clf-td--pos {
    border-left-color: var(--sp-clf-zone-conference);
}

.sp-clf-row--descida .sp-clf-td--pos {
    border-left-color: var(--sp-clf-zone-descida);
}

.sp-clf-td--team {
    text-align: left;
    font-weight: 800;
}

.sp-clf-team-link {
    color: inherit;
    text-decoration: none;
}

.sp-clf-team-link:hover,
.sp-clf-team-link:focus-visible {
    color: var(--sp-porto, #00a24a);
}

.sp-clf-team-link:focus-visible {
    outline: 2px solid var(--sp-porto, #00a24a);
    outline-offset: 2px;
}

.sp-clf-td--goals,
.sp-clf-td--dg {
    color: var(--sp-ink-faint, #6b6963);
}

.sp-clf-td--pts {
    font-family: var(--eg-display);
    font-style: italic;
    font-size: 1.0625rem;
}

.sp-clf-td--form {
    text-align: right;
    padding-right: 1rem;
}

.sp-clf-form {
    display: inline-flex;
    gap: 3px;
    justify-content: flex-end;
}

.sp-clf-chip {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 800;
    color: #fff;
    border-radius: 0;
}

.sp-clf-chip--win {
    background: var(--sp-porto, #00a24a);
}

.sp-clf-chip--draw {
    background: var(--sp-clf-chip-draw);
}

.sp-clf-chip--loss {
    background: var(--sp-danger, #c0362c);
}

/* Legend */
.sp-clf-legend {
    display: flex;
    gap: 1.25rem;
    margin: 0.875rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--sp-ink-faint, #6b6963);
    flex-wrap: wrap;
}

.sp-clf-legend__item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.sp-clf-legend__swatch {
    width: 12px;
    height: 12px;
    flex: none;
}

.sp-clf-legend__swatch--champions {
    background: var(--sp-clf-zone-champions);
}

.sp-clf-legend__swatch--europa {
    background: var(--sp-clf-zone-europa);
}

.sp-clf-legend__swatch--conference {
    background: var(--sp-clf-zone-conference);
}

.sp-clf-legend__swatch--descida {
    background: var(--sp-clf-zone-descida);
}

/* ---------------------------------------------------------------------
 * Aside
 * ------------------------------------------------------------------- */

.sp-clf-aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.sp-clf-aside__title {
    font-family: var(--eg-display);
    font-style: italic;
    font-size: 1rem;
    margin: 0 0 0.75rem;
    color: var(--sp-ink, #0d0d0c);
    text-transform: uppercase;
}

/* Marcadores */
.sp-clf-scorers {
    background: var(--sp-surface, #fff);
    border: 1px solid var(--sp-border, #dbd9d2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-clf-scorer {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    padding: 0.6875rem 0.875rem;
    border-bottom: 1px solid var(--sp-surface-subtle, #efeee8);
    gap: 0.5rem;
    align-items: center;
    font-size: 0.875rem;
}

.sp-clf-scorer:last-child {
    border-bottom: 0;
}

.sp-clf-scorer__rank {
    font-family: var(--eg-display);
    font-style: italic;
    color: var(--sp-porto, #00a24a);
}

.sp-clf-scorer__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sp-clf-scorer__name {
    font-weight: 800;
    color: var(--sp-ink, #0d0d0c);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.sp-clf-scorer__name:hover,
a.sp-clf-scorer__name:focus-visible {
    color: var(--sp-porto, #00a24a);
}

a.sp-clf-scorer__name:focus-visible {
    outline: 2px solid var(--sp-porto, #00a24a);
    outline-offset: 2px;
}

.sp-clf-scorer__club {
    font-size: 0.6875rem;
    color: var(--sp-ink-faint, #6b6963);
    font-weight: 600;
}

.sp-clf-scorer__goals {
    font-family: var(--eg-display);
    font-style: italic;
    font-size: 1.125rem;
    text-align: right;
}

/* Previsão do título (dark card) */
.sp-clf-odds {
    background: var(--sp-ink, #0d0d0c);
    color: #fff;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sp-clf-odds__title {
    font-family: var(--eg-display);
    font-style: italic;
    font-size: 0.9375rem;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
}

.sp-clf-odds__list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 700;
}

.sp-clf-odds__item {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}

.sp-clf-odds__row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.sp-clf-odds__pct--green {
    color: var(--sp-live, #00e06b);
}

.sp-clf-odds__pct--accent {
    color: var(--sp-accent, #ffd400);
}

.sp-clf-odds__track {
    height: 8px;
    background: var(--sp-card-dark, #1b1b19);
}

.sp-clf-odds__bar {
    height: 100%;
}

.sp-clf-odds__bar--green {
    background: var(--sp-porto, #00a24a);
}

.sp-clf-odds__bar--accent {
    background: var(--sp-accent, #ffd400);
}

.sp-clf-odds__note {
    margin: 0;
    font-size: 0.75rem;
    color: #8a887f;
    font-weight: 600;
    line-height: 1.4;
}

/* Número do dia */
.sp-clf-numero {
    border: 2px solid var(--sp-ink, #0d0d0c);
    padding: 1.125rem;
    text-align: center;
    background: var(--sp-surface, #fff);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sp-clf-numero__value {
    font-family: var(--eg-display);
    font-style: italic;
    font-size: 3.5rem;
    line-height: 1;
    color: var(--sp-porto, #00a24a);
}

.sp-clf-numero__label {
    font-size: 0.8125rem;
    font-weight: 700;
    margin-top: 0.375rem;
    line-height: 1.4;
}

/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------- */

/* Desktop table: horizontal scroll safety net + hide the DG column */
@media (min-width: 768px) {
    .sp-clf-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sp-clf-table {
        min-width: 640px;
    }

    .sp-clf-col--mobile {
        display: none;
    }
}

/* Mobile: condensed columns (# / Equipa / J / DG / Pts), stacked layout */
@media (max-width: 767.98px) {
    .sp-clf-hero {
        padding: 0.875rem 1rem 0;
    }

    .sp-clf-hero__head {
        gap: 0.75rem;
    }

    .sp-clf-hero__title {
        font-size: 1.875rem;
        letter-spacing: -1.5px;
    }

    .sp-clf-pills {
        margin-left: 0;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.125rem;
    }

    .sp-clf-pill {
        font-size: 0.75rem;
        padding: 0.4375rem 0.875rem;
    }

    .sp-clf-tab {
        padding: 0.75rem 1rem;
    }

    .sp-clf-col--desktop {
        display: none;
    }

    .sp-clf-table {
        font-size: 0.8125rem;
    }

    .sp-clf-th {
        padding: 0.625rem 0.25rem;
        font-size: 0.625rem;
    }

    .sp-clf-th--pos {
        width: 32px;
        padding-left: 0.75rem;
    }

    .sp-clf-th--num {
        width: 34px;
    }

    .sp-clf-th--pts {
        width: 44px;
        text-align: right;
        padding-right: 0.75rem;
    }

    .sp-clf-td {
        padding: 0.6875rem 0.25rem;
    }

    .sp-clf-td--pos {
        padding-left: calc(0.75rem - 4px);
    }

    .sp-clf-td--pts {
        font-size: 0.9375rem;
        text-align: right;
        padding-right: 0.75rem;
    }

    .sp-clf-legend {
        gap: 0.875rem;
        font-size: 0.6875rem;
    }

    .sp-clf-legend__swatch {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 959.98px) {
    .sp-clf-body {
        grid-template-columns: minmax(0, 1fr);
        padding: 1rem 1rem 2rem;
        gap: 1rem;
    }

    .sp-clf-aside {
        gap: 1rem;
    }
}

@media (min-width: 768px) and (max-width: 1100px) {
    .sp-clf-hero {
        padding: 1.75rem 1.5rem 0;
    }

    .sp-clf-body {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}