/*
 * Ligaseite in der Sprache von Spieldetail-, Ground- und Vereinsseite: dieselben
 * Farben, dieselbe Schrift für Zahlen und Namen, dieselbe Karte mit Abriss. Das
 * Eigene der Seite ist zweierlei: auf der Karte die Saisons als Zeitleiste —
 * jede Saison eine Säule, so hoch wie die Zahl der Spiele —, darunter die
 * „Tabelle der meistgesehenen Vereine", geordnet wie eine Ligatabelle. Mobil
 * zuerst. Die Versprechen stehen in specs/league.md.
 */

.league-page {
    color: var(--gh-ink);
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 48px;
}

.league-page a {
    color: var(--gh-grass);
}

/* Die Kachel trägt ihre eigenen Farben; das Grün der Links gilt nicht für sie. */
.league-page a.ticket-tile__link {
    color: var(--gh-ink);
}

.league-page a:focus-visible {
    outline: 2px solid var(--gh-night);
    outline-offset: 2px;
    border-radius: 2px;
}

.league-page ol.breadcrumb {
    margin-bottom: 12px;
}

.league-page h2 {
    font-family: var(--gh-numeral);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--gh-night);
    margin: 0 0 14px;
}

.league-section {
    margin-top: 40px;
}

/*
 * Die Ligakarte: links der Wettbewerb, rechts hinter der Perforation der Abriss
 * mit den Spielen. Auf dem Telefon sitzt der Abriss unten.
 */
.league-pass {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--gh-paper);
    border-radius: 8px;
    margin: 4px 0 8px;
}

.league-pass__main {
    min-width: 0;
    padding: 18px 20px 16px;
}

.league-pass__league {
    display: flex;
    align-items: center;
    gap: 16px;
}

.league-pass__sport {
    flex: none;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.league-pass__identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.league-pass__kind {
    color: var(--gh-muted);
    font-size: 14px;
}

/* Der Titel der Seite; `page-entity-title` trägt aus self.css nur Abstände mit. */
.league-page .league-pass__name {
    margin: 0;
    padding: 0;
    font-family: var(--gh-numeral);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    color: var(--gh-night);
    text-align: left;
}

.league-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    margin-top: 4px;
}

.league-pass__country {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--gh-numeral);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.2;
    color: var(--gh-muted);
}

.league-pass__country img {
    padding-bottom: 0;
}

/* Leiser als das Land: sie ordnet erst ein, wenn man Sportart und Land kennt. */
.league-level {
    font-size: 14px;
    color: var(--gh-muted);
    white-space: nowrap;
}

/* Das eine Spiel, abgesetzt vom Wettbewerb darüber. */
.league-single {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--gh-rule);
    font-size: 16px;
}

/*
 * Die Saisons als Zeitleiste, immer in einer Zeile: jede Saison eine Säule, so
 * hoch wie ihr Anteil an der stärksten Saison, eine ohne Besuch nur ein Strich
 * auf der Grundlinie. Die Säulen werden schmaler, wenn es viele Saisons sind,
 * und bei wenigen nur so breit, dass erste und letzte Saison darunter Platz haben.
 */
.season-strip {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--gh-rule);
}

.season-strip__caption {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--gh-muted);
}

.season-strip__fields,
.season-strip__years {
    display: grid;
    /* Nie breiter als 25 px je Saison, aber breit genug, dass erste und letzte
       Saison auch bei zwei Säulen nebeneinander Platz haben. */
    width: clamp(9.5rem, calc(var(--seasons) * 25px), 100%);
    grid-template-columns: repeat(var(--seasons), minmax(0, 1fr));
    column-gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.season-strip__fields {
    align-items: end;
    height: 44px;
    border-bottom: 1px solid var(--gh-perforation);
}

.season-strip__field {
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.season-strip__field > a,
.season-strip__field > span {
    display: block;
    width: 100%;
    height: max(6px, calc(var(--share) * 100%));
    border-radius: 2px 2px 0 0;
}

.league-page .season-strip__field > a {
    background: var(--gh-night);
}

.league-page .season-strip__field > a:hover,
.league-page .season-strip__field > a:focus-visible {
    background: var(--gh-grass);
}

.season-strip__field--empty > span {
    height: 2px;
    border-radius: 0;
    background: var(--gh-perforation);
}

/* Die Jahre stehen unter ihrer Säule; das erste bündig links, das letzte rechts. */
.season-strip__years {
    margin-top: 4px;
    font-family: var(--gh-numeral);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    color: var(--gh-muted);
    font-variant-numeric: tabular-nums;
}

.season-strip__years > li {
    grid-row: 1;
    justify-self: center;
    white-space: nowrap;
}

.season-strip__years > .season-strip__year--first {
    justify-self: start;
}

.season-strip__years > .season-strip__year--last {
    justify-self: end;
}

/* Bis lg sind die Säulen schmal; ein Jahrzehnt dicht an einem Ende liefe dort
   in die Saison am Rand. */
@media (max-width: 991.98px) {
    .season-strip__years > .season-strip__year--near-end {
        display: none;
    }
}

.league-pass__stub {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 20px 18px;
    border-top: 2px dashed var(--gh-perforation);
}

.league-pass__stub::before,
.league-pass__stub::after {
    content: '';
    position: absolute;
    top: calc(var(--gh-notch) / -2 - 1px);
    width: var(--gh-notch);
    height: var(--gh-notch);
    border-radius: 50%;
    background: #fff;
}

.league-pass__stub::before {
    left: calc(var(--gh-notch) / -2);
}

.league-pass__stub::after {
    right: calc(var(--gh-notch) / -2);
}

.league-pass__label {
    font-size: 13px;
    color: var(--gh-muted);
}

.league-pass__value {
    font-family: var(--gh-numeral);
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    color: var(--gh-night);
    font-variant-numeric: tabular-nums;
}

.league-pass__value--date {
    font-size: 24px;
    line-height: 1.15;
}

.league-pass__years {
    margin-top: 2px;
    font-family: var(--gh-numeral);
    font-weight: 600;
    font-size: 17px;
    color: var(--gh-muted);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .league-pass:not(.league-pass--without-stub) {
        grid-template-columns: 1fr minmax(170px, auto);
    }

    .league-pass__main {
        padding: 22px 28px;
    }

    .league-pass__sport {
        width: 60px;
        height: 60px;
    }

    .league-page .league-pass__name {
        font-size: 32px;
    }

    .league-pass__country {
        font-size: 21px;
    }

    .league-pass__stub {
        padding: 22px 28px;
        border-top: 0;
        border-left: 2px dashed var(--gh-perforation);
    }

    .league-pass__stub::before,
    .league-pass__stub::after {
        left: calc(var(--gh-notch) / -2 - 1px);
        right: auto;
    }

    .league-pass__stub::before {
        top: calc(var(--gh-notch) / -2);
    }

    .league-pass__stub::after {
        top: auto;
        bottom: calc(var(--gh-notch) / -2);
    }
}

.league-description {
    max-width: 68ch;
    margin: 18px 0 0;
    color: var(--gh-muted);
}

/*
 * Abschluss: Statistik und Karte, ab lg nebeneinander. Bricht eine Zeile der
 * Statistik um, steht der Anteil bündig unter dem Text, nicht unter dem Icon.
 */
.league-closing {
    display: grid;
    gap: 24px;
}

.league-closing > section {
    border-top: 2px solid var(--gh-night);
    padding-top: 14px;
}

.league-closing .stat-box {
    margin: 0;
}

.league-closing .stat-box > li {
    padding-left: 1.5em;
}

.league-closing .stat-box .stat-icon {
    margin-left: -1.5em;
}

.league-closing .stat-box .stat-suffix {
    display: inline-block;
}

.league-page #league-map.league-map {
    height: 320px;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.league-page #league-map.league-map--large {
    height: 70vh;
}

.league-map-actions {
    margin-top: 6px;
}

.league-map-toggle {
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    color: var(--gh-grass);
}

.league-map-toggle:hover {
    text-decoration: underline;
}

/* Ab lg zwei Spalten: links Statistik und Tabelle untereinander, rechts die
   Karte neben beiden. Ohne Karte stehen Statistik und Tabelle nebeneinander. */
@media (min-width: 992px) {
    .league-closing {
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 32px 40px;
    }

    .league-closing--map .league-statistics,
    .league-closing--map .league-table {
        grid-column: 1;
    }

    .league-closing--map .league-location {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: stretch;
        display: flex;
        flex-direction: column;
    }

    /* Neben Statistik und Tabelle füllt die Karte die Höhe beider. */
    .league-page .league-closing--map #league-map.league-map:not(.league-map--large) {
        flex: 1;
        min-height: 320px;
    }
}

/*
 * Tabelle der meistgesehenen Vereine: wie die Tabelle aus der Zeitung, auf Papier. Platz und Zahl in
 * der Ziffernschrift, rechtsbündig, damit die Stellen untereinanderstehen; wer
 * sich den Platz mit dem Verein darüber teilt, lässt ihn frei.
 */
.league-table__table {
    width: 100%;
    border-collapse: collapse;
    background: var(--gh-paper);
    border-radius: 8px;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}

.league-table__table th {
    padding: 10px 12px 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--gh-muted);
    text-align: left;
}

.league-table__table td {
    padding: 7px 12px;
    border-top: 1px solid var(--gh-rule);
    vertical-align: middle;
}

/* So breit wie „10.", nicht breiter: links derselbe Rand wie rechts hinter der Zahl. */
.league-table__table .league-table__rank {
    width: 1%;
    white-space: nowrap;
    padding-right: 4px;
    text-align: right;
    font-family: var(--gh-numeral);
    font-weight: 600;
    font-size: 18px;
    color: var(--gh-muted);
}

.league-table__team a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--gh-numeral);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.25;
    text-decoration: none;
}

.league-page .league-table__team a {
    color: var(--gh-night);
}

.league-page .league-table__team a:hover span {
    text-decoration: underline;
}

.league-table__crest {
    flex: none;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.league-table__table .league-table__count {
    width: 5.5em;
    text-align: right;
    font-family: var(--gh-numeral);
    font-weight: 700;
    font-size: 22px;
    color: var(--gh-night);
}

.league-table__table th.league-table__count {
    font-family: inherit;
    font-weight: 400;
    font-size: 13px;
    color: var(--gh-muted);
}

/* Das eine Spiel einer einmal gesehenen Liga über die volle Breite. */
.league-single-match .ticket-list {
    grid-template-columns: 1fr;
}