/* Page-specific layout for the Home, Data, About and Methodology pages (T4.4,
   T4.11). Shared design-system tokens and components live in tokens/base/
   components.css; this file only arranges those pieces for these pages. */

/* --- Home ------------------------------------------------------------- */

.home-hero {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 52rem) {
  .home-hero {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-7);
  }
}

/* Panels: thin-ruled blocks, no heavy boxes. */
.panel {
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--bg-elev, transparent);
}

.panel__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  margin: 0 0 var(--space-4);
}

/* Fixture card: two crests + scoreline / date, equal visual weight. */
.fixture {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.fixture__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.fixture__team .club-crest {
  width: 48px;
  height: 48px;
}

.fixture__team-name {
  font-weight: var(--fw-semibold);
}

.fixture__mid {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xl);
}

.fixture__vs {
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.fixture__meta {
  margin-top: var(--space-4);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

.countdown {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-3);
  justify-content: center;
  width: 100%;
}

.countdown__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
}

.on-this-day__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.on-this-day__list > li + li {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--rule-width) solid var(--rule);
}

.mini-season {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}

/* --- Data / About / Methodology --------------------------------------- */

.download-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
}

.download-row .btn {
  white-space: nowrap;
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose h2 {
  font-family: var(--font-display);
  margin-top: var(--space-6);
}

.prose ul {
  padding-left: var(--space-5);
}

.prose li + li {
  margin-top: var(--space-2);
}

/* --- Search results page (T5.2) --------------------------------------- */
.search-page__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: stretch;
}
.search-page__box {
  flex: 1 1 18rem;
  min-width: 0;
}
.search-page__count {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-5);
}

.result-group + .result-group {
  margin-top: var(--space-6);
}
.result-group__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: var(--rule-width) solid var(--rule-strong);
  font-size: var(--fs-lg);
}
.result-group__count {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.result-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.result-item + .result-item {
  border-top: var(--rule-width) solid var(--rule);
}
.result-item__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-2);
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--radius-sm);
}
.result-item__link:hover {
  background: var(--surface-2);
}
.result-item__label {
  font-weight: var(--fw-medium);
}
.result-item__sub {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}