/* ==========================================================================
   TEAM PAGE — TBS San Juan
   Estilo premium tipo NCAA/BSN para páginas individuales de equipo sp_team.
   ========================================================================== */

/* --------------------------------------------------------------------------
   VARIABLES LOCALES
   ------------------------------------------------------------------------- */

.team-page {
    --team-bg: #0a0a0a;
    --team-surface: #111111;
    --team-surface-2: #181818;
    --team-border: rgba(255, 255, 255, 0.07);
    --team-text: #e8e8e8;
    }
            
    .team-game-card__link {
        --team-muted: #888;
        --team-accent-red: #c8102e;
        --team-accent-gold: #b8972a;
        --team-white: #ffffff;
        --team-radius: 10px;
        --team-gap: 24px;
        font-family: 'Inter', 'Oswald', sans-serif;
        background: var(--team-bg);
        color: var(--team-text);
    }


    /* --------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */

    .team-hero {
        position: relative;
        min-height: 480px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden;
    }

    .team-hero__overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        pointer-events: none;
    }

    .team-hero__inner {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 48px 20px 40px;
        width: 100%;
        max-width: 860px;
        margin: 0 auto;
        gap: 20px;
    }

    /* Logo */

    .team-hero__logo-wrap {
        width: 120px;
        height: 120px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.7));
    }

    .team-hero__logo {
        width: 120px;
        height: 120px;
        object-fit: contain;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.4);
        padding: 6px;
    }

    .team-hero__logo-placeholder {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Oswald', sans-serif;
        font-size: 36px;
        font-weight: 700;
        color: #fff;
        letter-spacing: 2px;
    }

    /* Info */

    .team-hero__info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .team-hero__season {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.65);
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.15);
        padding: 4px 14px;
        border-radius: 20px;
    }

    .team-hero__name {
        font-family: 'Oswald', sans-serif;
        font-size: clamp(32px, 7vw, 64px);
        font-weight: 700;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        line-height: 1;
        margin: 0;
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
    }

    .team-hero__abbr {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.45);
    }

    /* Quick nav */

    .team-hero__quicknav {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 8px;
    }

    .team-hero__qlink {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.8);
        background: rgba(0, 0, 0, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.18);
        padding: 7px 16px;
        border-radius: 20px;
        text-decoration: none;
        transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .team-hero__qlink:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.35);
    }

    /* --------------------------------------------------------------------------
   CONTENEDOR GLOBAL
   ------------------------------------------------------------------------- */

    .team-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* --------------------------------------------------------------------------
   SECCIONES
   ------------------------------------------------------------------------- */

    .team-section {
        padding: 64px 0;
    }

    .team-section--alt {
        background: var(--team-surface);
    }

    /* Encabezado de sección */

    .team-section-head {
        margin-bottom: 36px;
    }

    .team-section-eyebrow {
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--team-accent-gold);
        margin-bottom: 8px;
    }

    .team-section-head h2 {
        font-family: 'Oswald', sans-serif;
        font-size: clamp(24px, 4vw, 36px);
        font-weight: 700;
        text-transform: uppercase;
        color: var(--team-white);
        letter-spacing: 1px;
        margin: 0;
        line-height: 1.1;
    }

    .team-section-head h2 span {
        color: var(--team-accent-red);
    }

    /* --------------------------------------------------------------------------
   SOBRE EL EQUIPO
   ------------------------------------------------------------------------- */

    .team-about__body {
        font-size: 16px;
        line-height: 1.8;
        color: var(--team-text);
        max-width: 800px;
    }

    .team-about__body p {
        margin: 0 0 16px;
    }

    /* --------------------------------------------------------------------------
   ROSTER
   ------------------------------------------------------------------------- */

    .team-roster__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--team-gap);
    }

    .team-player-card {
        background: var(--team-surface-2);
        border: 1px solid var(--team-border);
        border-radius: var(--team-radius);
        overflow: hidden;
        transition: transform 0.2s, border-color 0.2s, background-color 0.2s;
    }

    @media (hover: hover) and (pointer: fine) {
        .team-player-card:hover {
            transform: translateY(-4px);
            border-color: rgba(184, 151, 42, 0.52);
            background: #1c1c1c;
        }
    }

    .team-player-card__link:focus-visible {
        outline: 2px solid #b8972a;
        outline-offset: -4px;
        box-shadow: inset 0 0 0 1px rgba(184, 151, 42, 0.45);
    }

    .team-player-card__link {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        height: 100%;
    }

    .team-player-card__media {
        position: relative;
        aspect-ratio: 3/4;
        overflow: hidden;
        background: #1a1a1a;
    }

    .team-player-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        display: block;
    }

    .team-player-card__placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Oswald', sans-serif;
        font-size: 32px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.25);
        background: linear-gradient(135deg, #1a1a1a 0%, #111 100%);
    }

    .team-player-card__num {
        position: absolute;
        top: 8px;
        left: 8px;
        background: rgba(0, 0, 0, 0.75);
        color: var(--team-accent-gold);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        padding: 3px 8px;
        border-radius: 4px;
        font-style: normal;
    }

    .team-player-card__body {
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
    }

    .team-player-card__name {
        font-family: 'Oswald', sans-serif;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--team-white);
        margin: 0;
        line-height: 1.2;
    }

    .team-player-card__pos {
        font-size: 11px;
        color: var(--team-muted);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .team-player-card__cta {
        font-size: 11px;
        font-weight: 600;
        color: var(--team-accent-red);
        margin-top: auto;
        padding-top: 8px;
    }

    /* --------------------------------------------------------------------------
   PARTIDOS (próximos y resultados)
   ------------------------------------------------------------------------- */

    .team-games-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .team-game-card {
        background: var(--team-surface-2);
        border: 1px solid var(--team-border);
        border-radius: var(--team-radius);
        overflow: hidden;
        transition: border-color 0.2s;
    }

    .team-game-card--win {
        border-top: 3px solid #22c55e;
    }

    .team-game-card--loss {
        border-top: 3px solid var(--team-accent-red);
    }

    .team-game-card:hover {
        border-color: rgba(255, 255, 255, 0.16);
    }

    .team-game-card__link {
        display: grid;
        grid-template-columns: 90px 1fr 90px;
        align-items: center;
        gap: 16px;
        padding: 20px 24px;
        text-decoration: none;
        color: inherit;
    }

    /* Badge */

    .team-game-card__badge {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: 4px;
        white-space: nowrap;
    }

    .team-game-card__badge--next {
        background: rgba(184, 151, 42, 0.15);
        color: var(--team-accent-gold);
        border: 1px solid rgba(184, 151, 42, 0.3);
    }

    .team-game-card__badge--final {
        background: rgba(200, 16, 46, 0.12);
        color: var(--team-accent-red);
        border: 1px solid rgba(200, 16, 46, 0.25);
    }

    /* Matchup */

    .team-game-card__matchup {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        flex: 1;
    }

    .team-game-card__matchup--score {
        gap: 12px;
    }

    .team-game-card__team {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 1 200px;
        justify-content: flex-end;
    }

    .team-game-card__team:last-child {
        justify-content: flex-start;
    }

    .team-game-card__team img {
        width: 52px;
        height: 52px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .team-game-card__logo-ph {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.5);
        flex-shrink: 0;
    }

    .team-game-card__team span:last-child {
        font-size: 15px;
        font-weight: 700;
        color: var(--team-text);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    .team-game-card__team.is-winner span:last-child {
        color: var(--team-white);
    }

    .team-game-card__vs {
        font-family: 'Oswald', sans-serif;
        font-size: 12px;
        font-weight: 700;
        color: var(--team-muted);
        letter-spacing: 2px;
        flex-shrink: 0;
    }

    /* Scoreboard en resultados */

    .team-game-card__scoreboard {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 6px;
        padding: 8px 14px;
    }

    .team-game-card__scoreboard span {
        font-family: 'Oswald', sans-serif;
        font-size: 22px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.5);
        min-width: 28px;
        text-align: center;
    }

    .team-game-card__scoreboard .is-winner-score {
        color: var(--team-white);
    }

    .team-game-card__dash {
        font-size: 16px !important;
        color: rgba(255, 255, 255, 0.25) !important;
    }

    /* Meta */

    .team-game-card__meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 4px;
        text-align: right;
    }

    .team-game-card__date {
        font-size: 12px;
        color: var(--team-muted);
        white-space: nowrap;
    }

    .team-game-card__venue {
        font-size: 11px;
        color: var(--team-muted);
    }

    .team-game-card__result-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 3px 8px;
        border-radius: 4px;
    }

    .team-game-card__result-label--win {
        background: rgba(34, 197, 94, 0.12);
        color: #22c55e;
    }

    .team-game-card__result-label--loss {
        background: rgba(200, 16, 46, 0.12);
        color: var(--team-accent-red);
    }

    /* --------------------------------------------------------------------------
   NOTICIAS
   ------------------------------------------------------------------------- */

    .team-news__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--team-gap);
    }

    .team-news-card {
        background: var(--team-surface-2);
        border: 1px solid var(--team-border);
        border-radius: var(--team-radius);
        overflow: hidden;
        transition: transform 0.2s, border-color 0.2s;
    }

    .team-news-card:hover {
        transform: translateY(-3px);
        border-color: rgba(255, 255, 255, 0.14);
    }

    .team-news-card__link {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        height: 100%;
    }

    .team-news-card__thumb {
        aspect-ratio: 16/9;
        overflow: hidden;
    }

    .team-news-card__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.3s;
    }

    .team-news-card:hover .team-news-card__thumb img {
        transform: scale(1.04);
    }

    .team-news-card__body {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
    }

    .team-news-card__date {
        font-size: 11px;
        color: var(--team-muted);
        letter-spacing: 1px;
    }

    .team-news-card__title {
        font-family: 'Oswald', sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: var(--team-white);
        margin: 0;
        line-height: 1.3;
        text-transform: uppercase;
    }

    .team-news-card__cta {
        font-size: 12px;
        font-weight: 600;
        color: var(--team-accent-red);
        margin-top: auto;
    }

    /* --------------------------------------------------------------------------
   ESTADO VACÍO
   ------------------------------------------------------------------------- */

    .team-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 48px 24px;
        text-align: center;
        background: var(--team-surface-2);
        border: 1px solid var(--team-border);
        border-radius: var(--team-radius);
    }

    .team-empty span {
        font-size: 40px;
        line-height: 1;
    }

    .team-empty p {
        font-size: 15px;
        color: var(--team-muted);
        margin: 0;
    }

    .team-games-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        max-width: 100%;
        padding: 9px 14px;
        border: 1px solid rgba(184, 151, 42, 0.46);
        border-radius: 6px;
        color: #b8972a;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        line-height: 1.3;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s;
        white-space: normal;
    }

    .team-games-cta--calendar,
    .team-games-cta--results {
        margin-top: 20px;
    }

    @media (hover: hover) and (pointer: fine) {
        .team-games-cta:hover {
            border-color: #b8972a;
            background: rgba(184, 151, 42, 0.12);
            color: #ffffff;
        }
    }

    .team-games-cta:focus-visible {
        outline: 2px solid #b8972a;
        outline-offset: 3px;
    }

    /* --------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */

    @media (max-width: 768px) {

        .team-hero {
            min-height: 380px;
        }

        .team-hero__logo-wrap {
            width: 90px;
            height: 90px;
        }

        .team-hero__logo {
            width: 90px;
            height: 90px;
        }

        .team-hero__logo-placeholder {
            width: 90px;
            height: 90px;
            font-size: 26px;
        }

        .team-section {
            padding: 48px 0;
        }

        .team-roster__grid {
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 16px;
        }

        .team-game-card__link {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            padding: 16px;
            text-align: center;
        }

        .team-game-card__badge {
            align-self: flex-start;
        }

        .team-game-card__matchup {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            flex-wrap: nowrap;
        }

        .team-game-card__matchup--score {
            gap: 8px;
        }

        .team-game-card__team {
            flex: 0 1 auto;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            max-width: 100px;
        }

        .team-game-card__team:last-child {
            justify-content: center;
        }

        .team-game-card__team span:last-child {
            font-size: 11px;
            text-align: center;
            white-space: normal;
        }

        .team-game-card__team img {
            width: 48px;
            height: 48px;
        }

        .team-game-card__vs {
            font-size: 14px;
            flex-shrink: 0;
        }

        .team-game-card__meta {
            width: 100%;
            align-items: center;
            text-align: center;
        }

        .team-game-card__scoreboard {
            padding: 6px 12px;
        }

        .team-news__grid {
            grid-template-columns: 1fr;
        }

        .team-game-card__scoreboard {
            padding: 6px 10px;
        }

        .team-game-card__scoreboard span {
            font-size: 18px;
        }
    }

    @media (max-width: 480px) {

        .team-hero__inner {
            padding: 36px 16px 32px;
        }

        .team-hero__quicknav {
            gap: 8px;
        }

        .team-hero__qlink {
            font-size: 11px;
            padding: 6px 12px;
        }

        .team-game-card__link {
            padding: 12px 16px;
        }

        .team-game-card__team span:last-child {
            font-size: 12px;
        }
    }