/* Homepage only (loaded by the homepage through the layout's styles): the hero, its match bar, the live list and the next-match card. */
.hero { padding-top: var(--space-6); }
.hero__title { max-width: 1100px; font-size: 28px; }
.hero__intro { max-width: 900px; margin-top: var(--space-3); color: var(--color-muted); font-size: 15px; line-height: 1.55; }
.hero__grid { display: grid; gap: var(--space-8); margin-top: var(--space-6); }
.match-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-4); }
.match-bar__info { flex: 1 1 320px; }
.match-bar__teams { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); font-weight: 700; font-size: 17px; }
.match-bar__score { padding: 0 var(--space-1); font: 700 30px var(--font-head); white-space: nowrap; }
/* Narrow screens: crest | home | score | away | crest stays one row, long names wrap in place. */
.match-bar__teams--versus { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: var(--space-2); font-size: 15px; line-height: 1.25; }
.match-bar__teams--versus .match-bar__score { font-size: 24px; }
.match-bar__name { overflow-wrap: anywhere; }
.match-bar__name--away { text-align: right; }
.match-bar__room { margin-top: var(--space-2); font: 700 22px var(--font-head); }
.match-bar__host { color: var(--color-muted); font-size: 14px; }
.match-bar__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.live-list { display: flex; flex-direction: column; gap: var(--space-2); }
.live-list__head { display: flex; align-items: center; gap: var(--space-2); }
.live-list__title { font-size: 22px; }
/* Every card in one column; once "Tampilkan semua" is open the whole list is a box about five cards tall with its own scroll bar. */
.live-list__items { display: flex; flex-direction: column; gap: var(--space-2); }
.live-list__items:has(> .live-list__more[open]) { max-height: 39rem; overflow-y: auto; overscroll-behavior: contain; padding-right: var(--space-1); }
.live-list__more[open] summary { display: none; }
.live-list__more .live-card { margin-top: var(--space-2); }
.next-card { padding: var(--space-4); }
.next-card__when { margin-top: 2px; font-weight: 700; font-size: 14px; }
.next-card__team { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: 14px; }
@media (min-width: 640px) {
    .match-bar__teams--versus { display: flex; flex-wrap: nowrap; gap: var(--space-3); font-size: 17px; line-height: inherit; }
    .match-bar__teams--versus .match-bar__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .match-bar__teams--versus .match-bar__score { font-size: 30px; }
    .match-bar__name--away { text-align: left; }
}

@media (min-width: 1024px) {
    .hero__title { font-size: 40px; }
    .hero__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-6); }
}