/* VTTL Ploegresultaten: erft lettertype en kleuren van het thema. */

.vttl-pr {
    --vttl-pr-line: color-mix(in srgb, currentColor 15%, transparent);
    --vttl-pr-muted: color-mix(in srgb, currentColor 65%, transparent);
    margin: 1.5em 0;
}

.vttl-pr-group + .vttl-pr-group {
    margin-top: 2em;
}

.vttl-pr-group-title {
    margin: 0 0 0.75em;
}

.vttl-pr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1em;
}

.vttl-pr-card {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    padding: 1em 1.1em;
    border: 1px solid var(--vttl-pr-line);
    border-radius: 8px;
}

.vttl-pr-card-head {
    display: flex;
    flex-direction: column;
}

.vttl-pr-team {
    font-weight: 700;
    font-size: 1.1em;
}

.vttl-pr-division,
.vttl-pr-meta,
.vttl-pr-source {
    color: var(--vttl-pr-muted);
    font-size: 0.875em;
}

.vttl-pr-meta,
.vttl-pr-badges,
.vttl-pr-source {
    margin: 0;
}

.vttl-pr-match {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    gap: 0.75em;
}

.vttl-pr-side {
    overflow-wrap: anywhere;
}

.vttl-pr-away {
    text-align: right;
}

.vttl-pr-side.is-ours {
    font-weight: 700;
}

.vttl-pr-score {
    font-weight: 700;
    font-size: 1.25em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vttl-pr-badges {
    display: flex;
    gap: 0.4em;
}

.vttl-pr-badge {
    display: inline-block;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    font-size: 0.8em;
    font-weight: 600;
    background: var(--vttl-pr-line);
}

.vttl-pr-badge.is-win {
    background: rgba(34, 160, 80, 0.18);
}

.vttl-pr-badge.is-loss {
    background: rgba(210, 50, 50, 0.18);
}

.vttl-pr-ranking {
    margin-top: auto;
    padding-top: 0.6em;
    border-top: 1px solid var(--vttl-pr-line);
    font-size: 0.9em;
}

.vttl-pr-source {
    margin-top: 1.5em;
}