/*
 * Match predictions: hub pages, scoreboard single page, slider shortcode.
 * Builds on app.css tokens (cards, rails, chips, hub toolbar).
 */

/* ---------- Slider shortcode ---------- */
.fmp-section { padding-block: 8px; }

/* ---------- Hub ---------- */
.mhub__sports { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1) 14px; padding: 0 var(--gutter) 4px; }
.mhub__sports::-webkit-scrollbar { display: none; }
.mhub__sports .chip { min-height: 40px; padding-inline: 16px; font-size: var(--fs-sm); font-weight: 700; }
.mhub__sports .chip:hover { border-color: var(--line-2); color: var(--text); }
.mhub__sports .chip.is-active { background: var(--green); border-color: var(--green); color: var(--green-ink); }
@media (min-width: 900px) { .mhub__sports { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; } }

.mhub__toolbar { grid-template-columns: 1fr; }
@media (min-width: 900px) { .mhub__toolbar { grid-template-columns: 1fr auto; } }
.mhub__dates { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mhub__dates .seg { flex: 1 1 auto; }
.mhub__dates .seg button { flex: 1; }
.mhub__date { position: relative; flex: 1 1 150px; min-width: 0; }
.mhub__date .ic { position: absolute; inset: 50% 12px auto auto; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.mhub__date input { min-height: 48px; padding-inline-start: 40px; color-scheme: dark; }
@media (min-width: 900px) { .mhub__date { flex: 0 0 170px; } .mhub__dates .seg { flex: 0 0 auto; } }

.mhub__list .sec-head, .mhub__group .sec-head { flex-wrap: wrap; }
.mhub__league { flex: 0 1 220px; }
.mhub__league select { min-height: 44px; }
.mhub .sec { padding-block: 24px; }

.mgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.fmp-ajax-loading .mgrid { opacity: .45; pointer-events: none; transition: opacity .2s; }

/* Collapsible SEO intro on small screens */
@media (max-width: 899px) {
	.hub__desc[data-clamp]:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}
.clamp-toggle { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--green); font-weight: 700; font-size: var(--fs-sm); }
@media (min-width: 900px) { .clamp-toggle { display: none; } }

/* ---------- Promo (bonus code) ---------- */
.promo {
	display: grid; gap: 14px; align-items: center; margin: 8px 0 8px; padding: 18px;
	border-radius: var(--r-xl); border: 1px solid rgba(245, 196, 81, .28);
	background: radial-gradient(120% 160% at 0% 0%, rgba(245, 196, 81, .16), transparent 60%), var(--surface);
}
@media (min-width: 900px) { .promo { grid-template-columns: 1fr auto auto; padding: 20px 24px; gap: 20px; } }
.promo__title { display: block; font-size: var(--fs-lg); font-weight: 900; color: var(--gold); }
.promo__body p { margin: 4px 0 0; color: var(--text-2); font-size: var(--fs-sm); }
.promo__code {
	display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 0 16px;
	border: 1.5px dashed var(--gold); border-radius: 12px; background: rgba(245, 196, 81, .06); color: var(--text);
}
.promo__code span { font-weight: 900; letter-spacing: .08em; direction: ltr; }
.promo__code small { color: var(--gold); font-size: var(--fs-xs); font-weight: 700; }
.promo__cta { min-height: 48px; }
.promo__custom img { border-radius: var(--r-md); }

/* ---------- Single: scoreboard ---------- */
.match { padding-top: 24px; }
.sboard {
	position: relative; overflow: hidden; isolation: isolate; padding: 18px 16px 16px; margin-bottom: 24px;
	border-radius: var(--r-xl); border: 1px solid var(--line-2);
	background: radial-gradient(90% 120% at 50% 0%, rgba(25, 230, 140, .14), transparent 60%), linear-gradient(180deg, #0d1a15, var(--surface));
}
.sboard::after { /* centre circle of the pitch */
	content: ""; position: absolute; z-index: -1; inset: 50% auto auto 50%; width: 260px; height: 260px; transform: translate(-50%, -62%);
	border: 1px solid rgba(255, 255, 255, .06); border-radius: 50%;
}
.sboard::before { content: ""; position: absolute; z-index: -1; inset: 0 50% 0 auto; border-inline-start: 1px solid rgba(255, 255, 255, .05); }
.sboard__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; opacity: .12; filter: grayscale(.4); }
.sboard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.sboard__league { color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; }
.sboard__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; text-align: center; }
.sboard__team { display: grid; justify-items: center; gap: 10px; min-width: 0; }
.sboard__team strong { font-size: var(--fs-lg); line-height: 1.5; overflow-wrap: anywhere; }
.sboard__crest { width: 72px; height: 72px; object-fit: contain; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); }
.sboard__crest--ph { display: grid; place-items: center; font-size: 1.8rem; font-weight: 900; color: var(--muted); }
.sboard__time { display: block; padding: 8px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-2); font-weight: 900; font-size: var(--fs-md); line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sboard__title { margin: 18px 0 16px; text-align: center; font-size: var(--fs-xl); line-height: 1.6; }
@media (min-width: 900px) {
	.sboard { padding: 28px 32px 24px; }
	.sboard__crest { width: 104px; height: 104px; padding: 12px; }
	.sboard__team strong { font-size: var(--fs-2xl); }
	.sboard__time { font-size: 1.5rem; padding: 10px 18px; }
	.sboard__title { font-size: var(--fs-2xl); }
	.sboard::after { width: 360px; height: 360px; }
}

/* Bet slip: the pick, torn off the sboard */
.slip {
	position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0; max-width: 720px; margin-inline: auto;
	background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-lg);
}
.slip > div { display: grid; gap: 4px; padding: 14px 16px; }
.slip small { color: var(--muted); font-size: var(--fs-xs); }
.slip__pick { grid-column: 1 / -1; border-bottom: 1px dashed var(--line-2); }
.slip__pick strong { font-size: var(--fs-lg); line-height: 1.6; color: var(--text); }
.slip__conf b { color: var(--text); }
.slip__conf .meter { margin-top: 6px; }
.slip__odd { text-align: center; border-inline-start: 1px dashed var(--line-2); min-width: 104px; }
.slip__odd b { color: var(--gold); font-size: 1.75rem; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; }
.slip::before, .slip::after { /* ticket notches */
	content: ""; position: absolute; top: calc(50% - 10px); width: 20px; height: 20px; border-radius: 50%; background: #0d1a15; border: 1px solid var(--line-2);
}
.slip::before { right: -11px; clip-path: inset(0 50% 0 0); }
.slip::after { left: -11px; clip-path: inset(0 0 0 50%); }
@media (min-width: 700px) {
	.slip { grid-template-columns: 1.4fr 1fr auto; }
	.slip__pick { grid-column: auto; border-bottom: 0; border-inline-end: 1px dashed var(--line-2); }
	.slip__odd { border-inline-start: 0; }
	.slip__conf { border-inline-end: 1px dashed var(--line-2); }
	.slip::before, .slip::after { display: none; }
}

/* ---------- Single: body ---------- */
.match__layout { display: grid; gap: 24px; }
@media (min-width: 1025px) { .match__layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 32px; } }
.match__h { font-size: var(--fs-xl); margin-bottom: 14px; }
.match__body { min-width: 0; }
.match__side { display: grid; gap: 12px; }
@media (min-width: 1025px) { .match__side { position: sticky; top: calc(var(--header-h) + 16px); } }
.match__facts { padding: 18px; }
.match__facts dl { margin: 0; display: grid; }
.match__facts dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.match__facts dl > div:first-child { border-top: 0; padding-top: 0; }
.match__facts dt { color: var(--muted); }
.match__facts dd { margin: 0; font-weight: 700; text-align: left; }
.match__facts a { color: var(--green); }
.fmp-match-table-scroll { overflow-x: auto; }