/* Bolão 2026 — Homepage layout (Geist, gradient hero, cards) */

.bolao-hero { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.bolao-hero .bolao-badge { margin-bottom: var(--space-8); }
.bolao-hero__title {
    font-size: var(--size-5xl); color: #fff; margin: 0 0 var(--space-4);
}
.bolao-hero__highlight { color: var(--brand-yellow); }
.bolao-hero__subtitle {
    font-size: var(--size-xl); color: rgba(255,255,255,0.85);
    max-width: 620px; margin: 0 auto var(--space-8);
}
.bolao-hero__cta { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }

/* Countdown — flat pill fallback (safe for any JS output) */
.bolao-countdown {
    display: inline-block; font-family: var(--font-mono);
    font-size: var(--size-2xl); font-weight: 600;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-lg); padding: var(--space-3) var(--space-6);
    margin: 0 auto var(--space-8);
}
/* If the JS emits per-unit children, these apply (adjust class names to match the JS): */
.bolao-countdown .cd-unit { display:inline-flex; flex-direction:column; align-items:center; min-width:64px; margin:0 var(--space-1); }
.bolao-countdown .cd-num { font-size: var(--size-3xl); line-height:1; }
.bolao-countdown .cd-label { font-size: var(--size-xs); text-transform:uppercase; letter-spacing:.08em; opacity:.8; font-family: var(--font-sans); }

@media (min-width: 768px) {
    .bolao-hero__title { font-size: var(--size-6xl); }
    .bolao-hero__cta { flex-direction: row; justify-content: center; }
}

/* Non-hero homepage sections (next-match, ranking, prize-pot) — Task 4 will restyle */
.bolao-home section {
    padding: var(--space-8) var(--space-4);
    max-width: 960px;
    margin: 0 auto;
}
.bolao-home section h2 {
    font-family: var(--font-display);
    color: var(--brand-blue);
    margin-bottom: var(--space-4);
}

/* Feature grid */
.bolao-feature-grid {
    display: grid; gap: var(--space-6);
    grid-template-columns: 1fr;
}
.bolao-feature-grid h3 { font-size: var(--size-xl); margin: 0 0 var(--space-2); }
.bolao-feature-grid p { color: var(--gray-500); margin: 0; }
.bolao-icon-badge { font-size: 28px; } /* emoji icons until SVGs added */

/* Scoring grid */
.bolao-score-grid {
    display: grid; gap: var(--space-6); grid-template-columns: 1fr;
}
.bolao-score h3 { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); margin:0 0 var(--space-2); font-size: var(--size-xl); }
.bolao-score p { color: var(--gray-700); margin: 0; }
.bolao-score__pts { font-family: var(--font-mono); font-size: var(--size-base); }
.bolao-score--green { background: var(--tint-green); border-color: transparent; }
.bolao-score--green .bolao-score__pts { color: var(--tint-green-ink); }
.bolao-score--blue  { background: var(--tint-blue);  border-color: transparent; }
.bolao-score--blue  .bolao-score__pts { color: var(--tint-blue-ink); }
.bolao-score--amber { background: var(--tint-amber); border-color: transparent; }
.bolao-score--amber .bolao-score__pts { color: var(--tint-amber-ink); }
.bolao-score .bolao-mono-box { background: rgba(0,0,0,0.06); }

@media (min-width: 768px) {
    .bolao-feature-grid { grid-template-columns: repeat(4, 1fr); }
    .bolao-score-grid   { grid-template-columns: repeat(3, 1fr); }
}

/* Scoring table (9-tier) */
.bolao-score-table-wrap { overflow-x: auto; }
.bolao-score-table {
    width: 100%; border-collapse: collapse; font-size: var(--size-base);
}
.bolao-score-table th,
.bolao-score-table td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--gray-100);
}
.bolao-score-table thead th {
    font-size: var(--size-sm); color: var(--gray-500); font-weight: 600;
}
.bolao-score-table td.pts,
.bolao-score-table th.pts {
    width: 3rem; text-align: center; white-space: nowrap;
    font-family: var(--font-mono); font-weight: 700; color: var(--tint-green-ink);
}
.bolao-score-table td.ex,
.bolao-score-table th.ex {
    text-align: right; white-space: nowrap;
    font-family: var(--font-mono); color: var(--gray-500); font-size: var(--size-sm);
}
.bolao-score-foot {
    margin: var(--space-2) 0 0; color: var(--gray-500); font-size: var(--size-sm);
}
.bolao-score-mult {
    margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4);
    background: var(--tint-blue); color: var(--tint-blue-ink);
    border-radius: var(--radius-md); font-size: var(--size-sm);
}
@media (max-width: 640px) {
    .bolao-score-table td.ex,
    .bolao-score-table th.ex { font-size: 0.8rem; }
}