/* Page-level styles: error page and the M2b sports pages. */
.error-page { max-width: 560px; margin-block: var(--space-16); text-align: center; }
.error-page__code { color: var(--color-primary); font: 700 88px/1 var(--font-head); }
.error-page h1 { margin: var(--space-3) 0; font-size: 32px; }
.error-page p:not(.error-page__code) { margin-bottom: var(--space-6); color: var(--color-muted); }

/* Sports pages (M2b): header with filters, main + side column. */
.page-head { padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
.page-head__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.page-head__title { font-size: 34px; }
.page-head__sub { margin-top: var(--space-2); color: var(--color-muted); font-size: 14px; }
.page-head__hub { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-primary); font-weight: 700; font-size: 14px; }
.page-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-top: var(--space-5); }
.page-filters__field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 170px; }
.page-filters__label { color: var(--color-muted); font-size: 12px; font-weight: 600; }
.page-filters select { min-height: 44px; padding: 0 var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.page-body > :first-child, .page-grid { margin-top: var(--space-8); }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.page-grid__main > .section, .page-grid__aside > .section { margin-top: 0; }
.page-grid__aside { display: grid; gap: var(--space-6); align-content: start; }
.liga-group__title { margin-bottom: var(--space-4); font-size: 22px; }
@media (min-width: 1024px) {
    .page-head__title { font-size: 48px; }
    .page-grid { grid-template-columns: minmax(0, 1fr) 340px; }
}
.panel-grid { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.panel-grid > .section { margin-top: 0; }
@media (min-width: 1024px) {
    .panel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* League hub (M2b spec §3.5). */
.liga-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.liga-header__logo { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-lg); background: var(--color-surface); font-family: var(--font-head); font-size: 24px; }
.liga-header__logo img { width: 72px; height: 72px; object-fit: contain; }
.liga-header__text { flex: 1 1 260px; }
.liga-header__kicker { color: var(--color-primary); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.liga-header__title { font-size: 34px; }
.liga-header__tagline { color: var(--color-text-soft); }
.liga-header__actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.liga-header__actions .page-filters { margin-top: 0; }
.hub-tabs { position: sticky; top: var(--header-h); z-index: 20; margin-top: var(--space-6); background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.hub-tabs__list { display: flex; gap: var(--space-5); overflow-x: auto; margin: 0; padding: 0; list-style: none; }
.hub-tabs__link { display: flex; align-items: center; min-height: 44px; border-bottom: 3px solid transparent; color: var(--color-text-soft); font-weight: 600; white-space: nowrap; }
.hub-tabs__link[aria-current] { border-color: var(--color-primary); color: var(--color-text); }
.liga-hub-page [id] { scroll-margin-top: calc(var(--header-h) + 60px); }
.sejarah { display: grid; gap: var(--space-6); }
.sejarah__text > * + * { margin-top: var(--space-3); }
.sejarah__more summary { display: flex; align-items: center; min-height: 44px; color: var(--color-primary); font-weight: 700; cursor: pointer; }
.fakta { align-self: start; padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-lg); }
.fakta__title { margin-bottom: var(--space-3); font-size: 18px; }
.fakta dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.fakta dt { color: var(--color-muted); }
.fakta dd { margin: 0; font-weight: 600; }
@media (min-width: 1024px) {
    .liga-header__title { font-size: 48px; }
    .sejarah { grid-template-columns: minmax(0, 1fr) 320px; }
}