/* ============================================================
   Match card (scoreboard) in article thumbnails
   Markup comes from tnfMatchCard.cfc. Layout: logo | ABR | score | ABR | logo.
   Every column has a fixed width, so the card is only as wide as it needs to be
   and the score always sits in the middle. It shouldn't compete with the headline.
   In the small cards (featured4, carousel) it stretches to the card's width,
   like the old card did there.
   ============================================================ */

.tnf-mc-wrap {
    display: inline-block;
    align-self: flex-start; /* .cardContent is a column flexbox */
    max-width: 100%;
    pointer-events: none;
}

.tnf-mc {
    display: grid;
    grid-template-columns: 41px 76px 102px 76px 41px;
    align-items: stretch;
    height: 46px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #eeeeef;
    border-radius: 8px;
    color: #000;
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;
    text-shadow: none;
    text-transform: none;
}

.tnf-mc-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

/* Logos */
.tnf-mc-logo img {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

/* 3-letter names */
.tnf-mc-abbr {
    font-size: 20px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
}

/* Centre: score or kick-off time */
.tnf-mc-centre {
    flex-direction: column;
    gap: 3px;
    background-color: #f3f4f6;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    text-align: center;
}

.tnf-mc-score {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 18px;
    color: #1c66d9;
    font-variant-numeric: tabular-nums;
}

.tnf-mc-dash {
    font-size: 12px;
    color: #9ca3af;
}

.tnf-mc-status {
    font-size: 11px;
    letter-spacing: 0.05em;
    color: #6b7280;
    text-transform: uppercase;
    white-space: nowrap;
}

.tnf-mc-time {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #ce1212;
    font-size: 11px;
    line-height: 1.15;
    white-space: nowrap;
}

/* ---------- Small cards: stretch across the card ---------- */
.featured4 .tnf-mc-wrap,
.tnf-carousel-slide .tnf-mc-wrap {
    display: block;
    width: 100%;
    align-self: stretch;
}

.featured4 .tnf-mc,
.tnf-carousel-slide .tnf-mc {
    grid-template-columns: 36px minmax(0, 1fr) 110px minmax(0, 1fr) 36px;
}

/* ---------- Phones: a touch smaller ---------- */
@media (max-width: 480px) {
    .tnf-mc {
        grid-template-columns: 32px 62px 105px 62px 32px;
        height: 40px;
    }

    .featured4 .tnf-mc,
    .tnf-carousel-slide .tnf-mc {
        grid-template-columns: 32px minmax(0, 1fr) 76px minmax(0, 1fr) 32px;
    }

    .tnf-mc-logo img {
        width: 22px;
        height: 22px;
    }

    .tnf-mc-abbr {
        font-size: 14px;
    }

    .tnf-mc-score {
        font-size: 17px;
        gap: 6px;
    }
}