/*
 * Office Pool Pal - Shared NFL team/game-card styles
 * --------------------------------------------------
 * This file is the single source of truth for:
 * - game-card surface
 * - matchup layout
 * - helmet sizing/alignment
 * - two-line team naming
 * - team-name typography
 * - AT separator
 * - responsive card proportions
 *
 * Page-specific states (picked/survived/eliminated/live scores/entry chips)
 * remain in their respective page styles.
 */

:root {
    --opp-card-bg: #ffffff;
    --opp-card-border: #dfe4e8;
    --opp-card-radius: 14px;
    --opp-card-shadow: 0 4px 14px rgba(17, 31, 49, .05);

    --opp-team-text: #15243a;
    --opp-muted-text: #667085;

    --opp-helmet-size: 76px;
    --opp-helmet-slot-height: 82px;

    --opp-team-font-size: .86rem;
    --opp-team-font-weight: 600;
    --opp-team-line-height: 1.08;

    --opp-matchup-gap: .55rem;
    --opp-at-width: 38px;
}

/* Card surface */
.opp-game-card {
    background: var(--opp-card-bg);
    border: 1px solid var(--opp-card-border);
    border-radius: var(--opp-card-radius);
    box-shadow: var(--opp-card-shadow);
    overflow: hidden;
}

/* Matchup */
.opp-matchup {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        var(--opp-at-width)
        minmax(0, 1fr);
    gap: var(--opp-matchup-gap);
    align-items: start;
}

.opp-team {
    min-width: 0;
    text-align: center;
}

.opp-team__content {
    display: flex;
    min-width: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.opp-team__helmet-wrap {
    display: flex;
    width: 100%;
    height: var(--opp-helmet-slot-height);
    min-height: var(--opp-helmet-slot-height);
    align-items: flex-start;
    justify-content: center;
}

.opp-team__helmet {
    display: block;
    width: var(--opp-helmet-size);
    max-width: 100%;
    height: var(--opp-helmet-size);
    object-fit: contain;
}

.opp-team__name {
    display: block;
    width: 100%;
    margin-top: .25rem;
    color: var(--opp-team-text);
    font-size: var(--opp-team-font-size);
    font-weight: var(--opp-team-font-weight);
    line-height: var(--opp-team-line-height);
    text-align: center;
}

.opp-team__location,
.opp-team__nickname {
    display: block !important;
    width: 100%;
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    white-space: nowrap;
}

.opp-at {
    display: flex;
    min-width: 0;
    height: var(--opp-helmet-slot-height);
    align-items: center;
    justify-content: center;
    color: var(--opp-muted-text);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: center;
}

/* Shared game metadata */
.opp-game-meta {
    color: var(--opp-muted-text);
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.3;
}

.opp-game-line {
    color: #415167;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.25;
}

/* Pick page button reset while preserving page-specific state classes */
.pick-matchup .opp-team.btn {
    display: flex;
    min-width: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: .55rem .25rem;
    border-radius: 12px;
}

.pick-team-content.opp-team__content {
    gap: 0;
}

/* Dashboard follows the same neutral card geometry */
.next-pick-card.opp-game-card {
    border-radius: var(--opp-card-radius);
    box-shadow: var(--opp-card-shadow);
}

.next-pick-team.opp-team {
    padding: .55rem .25rem;
    border-radius: 12px;
}

.next-pick-team-name.opp-team__name {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

/* In Progress: shared card proportions; live-only content remains local */
.live-card.opp-game-card {
    margin-bottom: 0;
    border-radius: var(--opp-card-radius);
    box-shadow: var(--opp-card-shadow);
}

.live-matchup.opp-matchup {
    padding: .85rem .65rem .65rem;
}

.live-team.opp-team {
    padding: .35rem .15rem .2rem;
}

.live-team-name.opp-team__name {
    min-height: calc(
        (var(--opp-team-line-height) * 2) *
        var(--opp-team-font-size)
    );
}

.live-team-helmet-wrap.opp-team__helmet-wrap {
    margin: 0;
}

.live-team-score {
    margin-top: .35rem;
}

/* Standings uses the same typography/helmet language at compact scale */
.standings-team-name {
    color: var(--opp-team-text);
    font-weight: var(--opp-team-font-weight) !important;
    line-height: 1.05;
}

.standings-helmet {
    object-fit: contain;
}

/* Desktop: same proportions on every matchup card */
@media (min-width: 768px) {
    :root {
        --opp-helmet-size: 76px;
        --opp-helmet-slot-height: 82px;
        --opp-team-font-size: .84rem;
        --opp-team-font-weight: 600;
    }

    .opp-team__name {
        margin-top: .2rem;
    }
}

/* Large desktop: enough room for long city names without making text heavy */
@media (min-width: 1200px) {
    :root {
        --opp-team-font-size: .82rem;
    }

    .live-matchup.opp-matchup {
        padding-left: .7rem;
        padding-right: .7rem;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    :root {
        --opp-helmet-size: 68px;
        --opp-helmet-slot-height: 72px;
        --opp-team-font-size: .8rem;
        --opp-at-width: 32px;
        --opp-matchup-gap: .3rem;
    }

    .pick-matchup .opp-team.btn,
    .next-pick-team.opp-team,
    .live-team.opp-team {
        padding-left: .1rem;
        padding-right: .1rem;
    }

    .opp-team__location,
    .opp-team__nickname {
        white-space: nowrap;
    }
}

/* =========================================================
   AUTHORITATIVE TEAM NAME TYPOGRAPHY
   ---------------------------------------------------------
   Team-name typography must be identical on every page.
   Do not override these values inside individual ASPX pages.
   ========================================================= */

:root {
    --opp-team-font-size: .86rem;
    --opp-team-font-weight: 600;
    --opp-team-line-height: 1.08;
}

/* High-specificity shared rule intentionally wins over legacy page CSS. */
.opp-game-card .opp-team__name,
.opp-game-card .opp-team__name .opp-team__location,
.opp-game-card .opp-team__name .opp-team__nickname,
.opp-game-card .pick-team-name,
.opp-game-card .pick-team-name .team-location,
.opp-game-card .pick-team-name .team-nickname,
.opp-game-card .live-team-name,
.opp-game-card .live-team-name .team-location,
.opp-game-card .live-team-name .team-nickname,
.opp-game-card .next-pick-team-name,
.opp-game-card .next-pick-team-name .team-location,
.opp-game-card .next-pick-team-name .team-nickname {
    color: var(--opp-team-text) !important;
    font-family: inherit !important;
    font-size: var(--opp-team-font-size) !important;
    font-style: normal !important;
    font-weight: var(--opp-team-font-weight) !important;
    line-height: var(--opp-team-line-height) !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: none !important;
}

/* Location on line 1, nickname on line 2 — identical styling. */
.opp-game-card .opp-team__location,
.opp-game-card .opp-team__nickname,
.opp-game-card .team-location,
.opp-game-card .team-nickname {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* Same typography at every desktop width. */
@media (min-width: 768px) {
    :root {
        --opp-team-font-size: .86rem;
        --opp-team-font-weight: 600;
    }
}

/* Only the size reduces slightly on phones; weight remains identical. */
@media (max-width: 767.98px) {
    :root {
        --opp-team-font-size: .80rem;
        --opp-team-font-weight: 600;
    }
}