/* ===========================================================================
   Jugendliga – öffentliche Ergebnisseite (jugendliga.php, seit 0.391).
   Baut auf assets/blitzinfo.css auf (Karten, Tabellen, Höchstergebnisse);
   hier steht nur, was die Blitz-Info nicht kennt: die Begegnungen mit zwei
   Spielen gegen denselben Gegner und das Handicap.
   =========================================================================== */

/* Breite Tabellen (bis zu fünf Starttag-Spalten) rollen in der Karte, statt
   die Seite zu verbreitern. Auf dem Handy fallen die Spalten ohnehin weg. */
.jl-scroll { overflow-x: auto; }

.jl-fussnote { margin: 8px 2px 0; font-size: .82rem; color: var(--muted); max-width: 75ch; }

.jl-block {
    font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted); margin: 18px 0 8px;
}
.jl-block:first-of-type { margin-top: 0; }

.jl-begegnungen { display: grid; gap: 12px; }

.jl-beg { overflow: hidden; }
.jl-beg__kopf {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px;
    align-items: center; padding: 12px 18px; background: var(--bi-soft);
    border-bottom: 1px solid var(--line); font-weight: 700;
}
.jl-beg__team--b { text-align: right; }
.jl-beg__stand {
    font-size: 1.35rem; font-weight: 800; color: var(--blue-dark);
    letter-spacing: -.01em; white-space: nowrap;
}
/* align-items: start – sonst streckt das Raster die Seite mit weniger
   Spielern auf die Höhe der anderen, und ihre Zeilen laufen auseinander. */
.jl-beg__seiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.jl-beg__seiten > .jl-zettel + .jl-zettel { border-left: 1px solid var(--line); }

/* Ein Team einer Begegnung – aufgebaut wie der Spielzettel. */
.jl-zettel { width: 100%; border-collapse: collapse; font-size: .86rem; }
.jl-zettel caption {
    caption-side: top; text-align: left; padding: 10px 14px 4px;
    font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.jl-zettel th, .jl-zettel td { padding: 4px 8px; text-align: right; white-space: nowrap; }
.jl-zettel th:first-child, .jl-zettel td:first-child {
    text-align: left; padding-left: 14px; white-space: normal;
}
.jl-zettel th:last-child, .jl-zettel td:last-child { padding-right: 14px; }
.jl-zettel thead th { font-size: .68rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }
.jl-zettel tfoot th { font-weight: 600; color: var(--muted); }
.jl-zettel tfoot tr:first-child th, .jl-zettel tfoot tr:first-child td { border-top: 1px solid var(--line); }
.jl-zettel tfoot td { font-weight: 600; }
.jl-zettel__punkte th, .jl-zettel__punkte td { color: var(--blue-dark); font-weight: 800 !important; padding-bottom: 10px; }
.jl-grau { color: var(--muted); }

@media (max-width: 760px) {
    .jl-beg__seiten { grid-template-columns: 1fr; }
    .jl-beg__seiten > .jl-zettel + .jl-zettel { border-left: 0; border-top: 1px solid var(--line); }
    .jl-beg__kopf { padding: 10px 14px; }
}

@media print {
    .jl-beg { break-inside: avoid; }
}