/*
 * Die Ticketsammlung als Wand: je Jahr ein Stück Papier, die Karten leicht
 * schief daran geheftet — die einzigen Dinge der Seite, die wirklich obenauf
 * liegen, und deshalb die einzigen mit Schatten. Das Eigene der Seite ist die
 * Zeitleiste darüber: eine Säule je Jahr, so hoch wie die Zahl seiner Karten,
 * Jahre ohne Karte als Lücke. Sie zeigt, wie die Sammlung gewachsen ist, und
 * jede Säule führt zu ihrem Jahr. Mobil zuerst. Die Versprechen stehen in
 * specs/tickets.md.
 */

.tickets-page {
    --tk-bar: 64px;

    color: var(--gh-ink);
    margin-bottom: 48px;
}

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

/* Vorspann: der Kasten aus intro-text.md, ruhig wie auf „Ich war dabei". */
.tickets-page .collection-intro {
    margin: 4px 0 20px;
    background: transparent;
    border: 0;
}

.tickets-page .collection-intro .card-header {
    padding: 0;
    background: transparent;
    border: 0;
    font-family: var(--gh-numeral);
    font-weight: 700;
    font-size: 22px;
    color: var(--gh-night);
}

.tickets-page .collection-intro .card-body {
    padding: 4px 0 0;
    font-style: normal;
    font-size: 16px;
    line-height: 1.55;
    color: var(--gh-ink);
}

/* Die Zeitleiste: Säulen auf einer gemeinsamen Grundlinie, Jahreszahlen nur an
   den Zehnern und an beiden Enden, die übrigen im Tooltip. */
.year-nav {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    margin: 0 0 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gh-rule);
}

.year-nav__year {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    height: var(--tk-bar);
    text-decoration: none;
}

.year-nav__bar {
    display: block;
    height: max(3px, calc(var(--share) * 100%));
    background: var(--gh-night);
    border-radius: 2px 2px 0 0;
}

.year-nav__year--empty .year-nav__bar {
    height: 1px;
    background: var(--gh-perforation);
}

.tickets-page a.year-nav__year:hover .year-nav__bar,
.tickets-page a.year-nav__year:focus-visible .year-nav__bar {
    background: var(--gh-grass);
}

.tickets-page a.year-nav__year:focus-visible {
    outline: 2px solid var(--gh-night);
    outline-offset: 2px;
}

.year-nav__label {
    position: absolute;
    top: 100%;
    left: 50%;
    display: none;
    margin-top: 4px;
    transform: translateX(-50%);
    font-family: var(--gh-numeral);
    font-weight: 600;
    font-size: 13px;
    color: var(--gh-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.year-nav__label--shown {
    display: block;
}

.year-nav__year:first-child .year-nav__label {
    left: 0;
    transform: none;
}

.year-nav__year:last-child .year-nav__label {
    right: 0;
    left: auto;
    transform: none;
}

/* Ein Jahr: die Zahl laut, wie viele Karten leise daneben. */
.year-section {
    margin-bottom: 40px;
    scroll-margin-top: 70px;
}

.year-section h2 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 12px;
    font-family: var(--gh-numeral);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    color: var(--gh-night);
    font-variant-numeric: tabular-nums;
}

.year-section .year-count {
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    color: var(--gh-muted);
}

/* Die Wand: Papier, die Karten darauf geheftet. */
.ticket-wall {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 22px 18px;
    padding: 22px 16px 18px;
    background: var(--gh-paper);
    border-radius: 8px;
}

.ticket-card {
    flex: 0 0 auto;
    max-width: calc(50% - 9px);
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(37, 48, 50, .2), 0 4px 10px rgba(37, 48, 50, .14);
    transform: rotate(var(--tilt));
}

.ticket-card__image {
    display: block;
}

.ticket-card__image:focus-visible {
    outline: 3px solid var(--gh-night);
    outline-offset: 2px;
}

.ticket-card img {
    display: block;
    max-width: 100%;
    max-height: 170px;
    border-radius: 3px 3px 0 0;
}

.ticket-meta {
    max-width: 260px;
    padding: 7px 9px 9px;
    border-top: 2px dashed var(--gh-perforation);
    font-size: 13px;
    line-height: 1.3;
    color: var(--gh-muted);
}

.ticket-meta .ticket-date {
    font-family: var(--gh-numeral);
    font-weight: 700;
    font-size: 15px;
    color: var(--gh-night);
    font-variant-numeric: tabular-nums;
}

.ticket-meta .ticket-match {
    color: var(--gh-ink);
    overflow-wrap: anywhere;
}

.ticket-meta .ticket-ground {
    margin-top: 1px;
    overflow-wrap: anywhere;
}

.ticket-meta .ticket-sport {
    display: inline-block;
    margin-top: 4px;
    padding: 0 6px;
    background: var(--gh-paper);
    border-radius: 2px;
    font-family: var(--gh-numeral);
    font-weight: 600;
    font-size: 13px;
    color: var(--gh-night);
}

/* Unter dem Zeiger hängt eine Karte gerade und tritt ein Stück hervor. */
@media (prefers-reduced-motion: no-preference) {
    .ticket-card {
        transition: transform .18s ease;
    }

    .ticket-card:hover,
    .ticket-card:focus-within {
        position: relative;
        z-index: 1;
        transform: rotate(0deg) scale(1.03);
    }
}

@media (min-width: 768px) {
    .tickets-page {
        --tk-bar: 88px;
    }

    .year-nav {
        gap: 3px;
    }

    .ticket-wall {
        gap: 26px 22px;
        padding: 28px 24px 22px;
    }

    .ticket-card {
        max-width: none;
    }

    .ticket-card img {
        max-width: 280px;
        max-height: 280px;
    }

    .ticket-meta {
        max-width: 280px;
    }
}