/* --------------------------------------------------
   TEAM HEADER
-------------------------------------------------- */

.team-header {
    background: var(--surface-primary);
    border-bottom: 1px solid var(--border-primary);
}

.team-header__inner {
    min-height: 150px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}

.team-header h1 {
    margin: 0 0 8px;

    color: var(--heading-color);

    font-size: 2.4rem;
    line-height: 1.05;
}

.team-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    color: var(--text-secondary);

    font-size: 0.86rem;
}

.team-header__controls {
    display: flex;
    align-items: flex-end;
}


.team-header__identity {
    display: flex;
    align-items: center;
    gap: 26px;
}

.team-header__logo {
    width: 105px;
    height: 105px;

    flex-shrink: 0;

    object-fit: contain;
}

.team-header__details {
    min-width: 0;
}


/* --------------------------------------------------
   TEAM NAVIGATION
-------------------------------------------------- */

.team-nav {
    display: flex;
    align-items: stretch;

    border-top: 1px solid var(--border-secondary);
}

.team-nav a {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 48px;

    padding: 0 18px;

    color: var(--text-secondary);

    font-size: 0.8rem;
    font-weight: 800;
}

.team-nav a:hover {
    background: var(--surface-secondary);
    color: var(--text-primary);
}

.team-nav a.is-active {
    color: var(--text-primary);
}

.team-nav a.is-active::after {
    content: "";

    position: absolute;
    right: 18px;
    bottom: 0;
    left: 18px;

    height: 3px;

    background: var(--3ng-crimson);
}


/* --------------------------------------------------
   TEAM SECTIONS
-------------------------------------------------- */

.team-section {
    padding: 46px 0 52px;

    border-bottom: 1px solid var(--border-secondary);
}

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


/* --------------------------------------------------
   TEAM OVERVIEW
-------------------------------------------------- */

.team-overview-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1fr;
    gap: 24px;
}

.team-overview-panel {
    min-width: 0;

    padding: 20px;

    background: var(--surface-primary);

    border: 1px solid var(--border-primary);
    border-top: 3px solid var(--3ng-crimson);
}

.team-overview-panel h3 {
    margin: 0 0 18px;

    color: var(--text-primary);

    font-size: 0.8rem;
    font-weight: 800;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* --------------------------------------------------
   TEAM INFORMATION
-------------------------------------------------- */

.team-info-list {
    margin: 0;
}

.team-info-list > div {
    min-height: 42px;

    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;

    border-bottom: 1px solid var(--border-secondary);
}

.team-info-list > div:last-child {
    border-bottom: 0;
}

.team-info-list dt {
    color: var(--text-secondary);

    font-size: 0.73rem;
    font-weight: 700;
}

.team-info-list dd {
    margin: 0;

    color: var(--text-primary);

    font-size: 0.82rem;
    font-weight: 700;
}


/* --------------------------------------------------
   TEAM RECORD
-------------------------------------------------- */

.team-record {
    display: flex;
    align-items: baseline;

    gap: 10px;

    padding: 10px 0 16px;
}

.team-record strong {
    color: var(--text-primary);

    font-size: 2rem;
    font-weight: 800;

    letter-spacing: -0.04em;
}

.team-record span {
    color: var(--text-secondary);

    font-size: 0.75rem;
    font-weight: 700;
}

.team-record--secondary {
    border-top: 1px solid var(--border-secondary);
}


/* --------------------------------------------------
   NEXT GAME
-------------------------------------------------- */

.team-next-game {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.team-next-game__opponent-logo-link {
    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 16px;
}


.team-next-game__opponent-logo {
    display: block;

    max-width: 72px;
    max-height: 72px;

    object-fit: contain;
}


.team-next-game__opponent-logo-link:hover {
    opacity: 0.8;
}

.team-next-game__date {
    color: var(--text-secondary);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.team-next-game strong {
    color: var(--text-primary);

    font-size: 1.4rem;
    font-weight: 800;
}

.team-next-game__location {
    color: var(--text-secondary);

    font-size: 0.77rem;
}


/* --------------------------------------------------
   TEAM SCHEDULE
-------------------------------------------------- */

.team-schedule-list {
    border-top: 1px solid var(--border-primary);
}

.team-schedule-row {
    min-height: 50px;

    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 80px 70px;
    align-items: center;

    border-bottom: 1px solid var(--border-secondary);

    font-variant-numeric: tabular-nums;
}

.team-schedule-date,
.team-schedule-result,
.team-schedule-score {
    color: var(--text-secondary);

    font-size: 0.76rem;
    font-weight: 700;
}

.team-schedule-opponent {
    color: var(--text-primary);

    font-size: 0.86rem;
    font-weight: 700;
}

.team-schedule-result,
.team-schedule-score {
    text-align: right;
}


/* --------------------------------------------------
   TEAM METRICS
-------------------------------------------------- */

.team-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    border-top: 1px solid var(--border-primary);
    border-bottom: 1px solid var(--border-primary);
}

.team-metric {
    min-height: 110px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 18px 22px;

    border-right: 1px solid var(--border-primary);
}

.team-metric:last-child {
    border-right: 0;
}

.team-metric span {
    margin-bottom: 8px;

    color: var(--text-secondary);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.team-metric strong {
    color: var(--text-primary);

    font-size: 1.7rem;
    font-weight: 800;

    letter-spacing: -0.035em;

    font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------
   TEAM RATINGS
-------------------------------------------------- */

.team-rating-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 24px;
}

.team-rating {
    min-height: 130px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 20px 22px;

    background: var(--surface-secondary);

    border: 1px solid var(--border-primary);
    border-top: 3px solid var(--3ng-crimson);
}

.team-rating span {
    color: var(--text-secondary);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.team-rating strong {
    margin: 6px 0 4px;

    color: var(--text-primary);

    font-size: 1.8rem;
    font-weight: 800;

    letter-spacing: -0.04em;
}

.team-rating small {
    color: var(--text-secondary);

    font-size: 0.74rem;
    font-weight: 700;
}


/* --------------------------------------------------
   TEAM RANKINGS
-------------------------------------------------- */

.team-rankings-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.6fr;
    gap: 24px;
}


.team-power-rank-card {
    min-width: 0;
    min-height: 240px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 24px;

    background: var(--surface-secondary);

    border: 1px solid var(--border-primary);
    border-top: 3px solid var(--3ng-crimson);
}


.team-power-rank-card__label {
    color: var(--text-secondary);

    font-size: 0.7rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.team-power-rank-card__rank {
    margin: 12px 0 20px;

    color: var(--text-primary);

    font-size: 4rem;
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.05em;
}


.team-power-rank-card__details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-top: 1px solid var(--border-primary);
}


.team-power-rank-card__details > div {
    padding: 16px 12px 0;

    border-right: 1px solid var(--border-primary);
}


.team-power-rank-card__details > div:first-child {
    padding-left: 0;
}


.team-power-rank-card__details > div:last-child {
    padding-right: 0;
    border-right: 0;
}


.team-power-rank-card__details span {
    display: block;

    margin-bottom: 6px;

    color: var(--text-secondary);

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}


.team-power-rank-card__details strong {
    color: var(--text-primary);

    font-size: 1rem;
    font-weight: 800;

    font-variant-numeric: tabular-nums;
}


.team-ranking-breakdown {
    min-width: 0;

    padding: 24px 0 0;

    background: transparent;

    border: 0;
    border-top: 3px solid var(--3ng-crimson);
}


.team-ranking-breakdown h3 {
    margin: 0 0 20px;

    padding: 0 24px;

    color: var(--text-primary);

    font-size: 0.8rem;
    font-weight: 800;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}


.team-ranking-breakdown__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    border-top: 1px solid var(--border-primary);
    border-bottom: 1px solid var(--border-primary);
}


.team-ranking-breakdown__item {
    min-height: 180px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 22px 18px;

    border-right: 1px solid var(--border-primary);

    text-align: center;
}


.team-ranking-breakdown__item:last-child {
    border-right: 0;
}


.team-ranking-breakdown__item span {
    margin-bottom: 10px;

    color: var(--text-secondary);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.team-ranking-breakdown__item strong {
    color: var(--text-primary);

    font-size: 3rem;
    font-weight: 800;

    line-height: 1;
    letter-spacing: -0.05em;

    font-variant-numeric: tabular-nums;
}


.team-ranking-breakdown__item small {
    margin-top: 10px;

    color: var(--text-secondary);

    font-size: 0.72rem;
    font-weight: 700;

    font-variant-numeric: tabular-nums;
}


.team-ranking-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 24px;
}


.team-ranking {
    min-height: 130px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 20px 22px;

    background: var(--surface-secondary);

    border: 1px solid var(--border-primary);
    border-top: 3px solid var(--3ng-crimson);
}


.team-ranking span {
    color: var(--text-secondary);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.team-ranking strong {
    margin: 6px 0 4px;

    color: var(--text-primary);

    font-size: 1.8rem;
    font-weight: 800;

    letter-spacing: -0.04em;
}


.team-ranking small {
    color: var(--text-secondary);

    font-size: 0.74rem;
    font-weight: 700;
}


/* --------------------------------------------------
   EMPTY STATES
-------------------------------------------------- */

.team-empty-state {
    margin: 0;
    padding: 18px 20px;

    background: var(--surface-secondary);
    border: 1px solid var(--border-primary);

    color: var(--text-secondary);

    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.5;
}


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

@media (max-width: 1000px) {

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

    .team-overview-panel:first-child {
        grid-column: 1 / -1;
    }

    .team-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-metric:nth-child(2) {
        border-right: 0;
    }

    .team-metric:nth-child(-n + 2) {
        border-bottom: 1px solid var(--border-primary);
    }

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

}


@media (max-width: 700px) {

    .team-header__inner {
        min-height: auto;

        padding: 28px 0 22px;

        align-items: flex-start;
        flex-direction: column;

        gap: 24px;
    }

    .team-header__controls {
        width: 100%;
    }

    .team-header__controls .filter-control,
    .team-header__controls .filter-control select {
        width: 100%;
    }

    .team-nav {
        overflow-x: auto;
    }

    .team-nav a {
        flex-shrink: 0;

        padding-inline: 14px;
    }

    .team-overview-grid,
    .team-rating-grid,
    .team-ranking-grid {
        grid-template-columns: 1fr;
    }

    .team-overview-panel:first-child {
        grid-column: auto;
    }

    .team-schedule-row {
        grid-template-columns: 70px minmax(0, 1fr) 55px 55px;

        gap: 8px;
    }

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

    .team-metric,
    .team-metric:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--border-primary);
    }

    .team-metric:last-child {
        border-bottom: 0;
    }

    .team-header__identity {
    align-items: center;
    gap: 18px;
    }

    .team-header__logo {
        width: 76px;
        height: 76px;
    }

    .team-header h1 {
        font-size: 1.8rem;
    }

    .team-power-rank-card__details,
    .team-ranking-breakdown__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-power-rank-card__details > div {
        padding: 12px 0;

        border-right: 0;
        border-bottom: 1px solid var(--border-primary);
    }

    .team-power-rank-card__details > div:last-child {
        border-bottom: 0;
    }

}