/* Generic page primitives for the redesigned frontend.
 *
 * football-board.css styles the matchday board specifically. Everything else in
 * Section 6.3 (Jackpot Centre, VIP plans, Results, Live scores and the rest) needs the
 * same look without the board, so these are the shared pieces: a page heading, a card,
 * a grid, a chip and an empty state.
 *
 * All of it is scoped under .ap2 and built from that file's custom properties, so it
 * follows light and dark automatically and never has to repeat a colour. Kept separate
 * from football-board.css so the board file stays Codex's to edit without collisions.
 */

.ap2-page { padding: 40px 0 64px }
.ap2-page-head { max-width: 820px; margin-bottom: 28px }
.ap2-page-head h1 {
    font-family: 'Barlow Condensed', Inter, sans-serif;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.02; letter-spacing: -.01em; text-transform: uppercase;
    margin: 0 0 10px;
}
.ap2-page-head p { color: var(--ap-muted); font-size: 15px; line-height: 1.6 }
.ap2-page-head p + p { margin-top: 10px }

.ap2-stack { display: flex; flex-direction: column; gap: 34px }

.ap2-rowhead { display: flex; align-items: center; gap: 14px; margin-bottom: 14px }
.ap2-rowhead h2 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin: 0 }
.ap2-rule { flex: 1; height: 1px; background: var(--ap-border) }

.ap2-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)) }
.ap2-grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)) }
.ap2-grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) }

.ap2-card {
    display: block; background: var(--ap-panel); border: 1px solid var(--ap-border);
    border-radius: 14px; padding: 20px; box-shadow: var(--ap-shadow);
}
a.ap2-card { transition: border-color .15s ease, transform .15s ease }
a.ap2-card:hover { border-color: var(--ap-green); transform: translateY(-2px) }
.ap2-card h2, .ap2-card h3 { font-size: 16px; font-weight: 800; margin: 0 0 8px }
.ap2-card p { color: var(--ap-muted); font-size: 13.5px; line-height: 1.6 }
.ap2-card a:not(.ap2-card) { color: var(--ap-green); font-weight: 700 }

.ap2-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px }
.ap2-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px }

.ap2-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
    background: var(--ap-raised); color: var(--ap-muted); white-space: nowrap;
}
.ap2-chip-green { background: var(--ap-soft); color: var(--ap-green) }
.ap2-chip-gold { background: rgba(255, 176, 32, .14); color: var(--ap-gold) }
.ap2-chip-hot { background: rgba(220, 38, 38, .14); color: #ff6b6b }

.ap2-empty {
    background: var(--ap-panel); border: 1px solid var(--ap-border); border-radius: 14px;
    padding: 56px 24px; text-align: center;
}
.ap2-empty strong { display: block; font-size: 16px; margin-bottom: 6px }
.ap2-empty p { color: var(--ap-muted); font-size: 14px; margin: 0 }
.ap2-empty a { color: var(--ap-green); font-weight: 700 }

.ap2-meta { color: var(--ap-muted); font-size: 12px }
.ap2-big { font-size: 30px; font-weight: 800; line-height: 1 }
.ap2-note { color: var(--ap-muted); font-size: 11.5px; line-height: 1.6; margin-top: 10px }

/* Simple data table, used by the results pages. */
.ap2-table-wrap { overflow-x: auto; background: var(--ap-panel); border: 1px solid var(--ap-border); border-radius: 14px }
.ap2-table { width: 100%; border-collapse: collapse; font-size: 13px }
.ap2-table th { background: var(--ap-raised); text-align: left; padding: 11px 13px; font-weight: 800; white-space: nowrap }
.ap2-table td { padding: 11px 13px; border-top: 1px solid var(--ap-border) }
.ap2-table tbody tr:hover { background: var(--ap-raised) }
.ap2-num { text-align: right; font-variant-numeric: tabular-nums }
.ap2-win { color: var(--ap-green); font-weight: 800 }
.ap2-loss { color: #ff6b6b; font-weight: 700 }

@media (max-width: 760px) {
    .ap2-page { padding: 24px 0 48px }
    .ap2-stack { gap: 26px }
}