/* ================================================================
   Flaggen – Stile für Flaggen-Anzeige in Versus-Karten und Tabellen
   ================================================================ */

/* Gemeinsame Basis: Rand + Schatten wie im Mockup */
.flagge-img {
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    display: inline-block;
    vertical-align: middle;
}

/* Grosse Variante (Versus-Ansicht) — feste Höhe = alle Flaggen gleich hoch.
   max-width begrenzt extrem breite Flaggen (z.B. Katar); object-fit: cover
   schneidet dann den Überschuss mittig ab statt die Flagge zu stauchen. */
.flagge-img--gross {
    height: 36px;
    width: auto;
    max-width: 60px;   /* ~Breite einer 3:5-Flagge (Deutschland) bei 36px Höhe */
    object-fit: cover;
    object-position: center;
    margin-bottom: .25rem;
}

/* Kleine Variante (Tabellen, Inline) */
.flagge-img--klein {
    height: 15px;
    width: auto;
    max-width: 25px;   /* proportional zu gross (60/36 * 15) */
    object-fit: cover;
    object-position: center;
}

/* Name unter der Flagge in der Versus-Ansicht */
.flagge-name {
    margin-top: .1rem;
    font-size: .78rem;
    line-height: 1.2;
}

/* ----------------------------------------------------------------
   Versus-Container: drei Spalten (Team | Resultat | Team)
   ---------------------------------------------------------------- */
.team-versus {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .75rem;
    flex-wrap: nowrap;
}

.team-versus .team-side {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-versus .team-side--rechts {
    /* rechte Seite braucht kein besonderes Styling, symmetrisch */
}

.team-versus .resultat {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ----------------------------------------------------------------
   Match-Detail: responsives Grid (nur auf match.html verwendet)
   Mobile: Flaggen + Score in Zeile 1, Meta volle Breite in Zeile 2
   Desktop (≥ md): Flaggen spannen beide Reihen, Mitte = Score + Meta
   ---------------------------------------------------------------- */
.match-versus {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
        "f1 score f2"
        "meta meta meta";
    align-items: center;
    gap: .5rem .75rem;
}

.match-versus .mv-flag1 { grid-area: f1; text-align: center; }
.match-versus .mv-score  { grid-area: score; }
.match-versus .mv-flag2  { grid-area: f2; text-align: center; }
.match-versus .mv-meta   {
    grid-area: meta;
    text-align: center;
    margin-top: 0;  /* Bootstrap .blockquote-footer hat -1rem, zieht Meta sonst in Flaggen-Zeile */
}

@media (min-width: 768px) {
    .match-versus {
        grid-template-areas:
            "f1 score f2"
            "f1 meta  f2";
        row-gap: .75rem;
    }

    /* Flaggen-Zellen über beide Reihen: Inhalt vertikal + horizontal zentrieren */
    .match-versus .mv-flag1,
    .match-versus .mv-flag2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    /* Grosse Flaggen nur auf match.html, alle anderen Karten unberührt */
    .match-versus .flagge-img--gross {
        height: 80px;
        max-width: 133px;  /* proportional zu 60/36 * 80 */
    }

    .match-versus .flagge-name {
        font-size: 1rem;
    }

    .match-versus .mv-score strong {
        font-size: 2.5rem !important;
    }
}