/* fs-home.css — home page v2 (mobile first), extends fs.css + fs-pred.css */
.hhero{background:linear-gradient(120deg,var(--fs-navy) 0%,var(--fs-navy2) 60%,#15325a 100%);color:#fff}
.hhero .w{padding:22px 16px 18px}
.hhero h1{margin:0 0 8px;font-size:26px;line-height:1.2;font-weight:800;color:#fff}
.hhero p{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:#c9d6ea;max-width:720px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;margin:0 -16px;padding:0 16px 4px}
.chips a{flex:none;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:600;text-decoration:none}
.chips a:hover{background:rgba(255,255,255,.2)}
.hwrap{padding-top:16px}

/* featured tips */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fcard{display:flex;flex-direction:column;gap:10px;background:var(--fs-bg);border:1px solid var(--fs-line);border-radius:var(--fs-rad);padding:14px;text-decoration:none;color:var(--fs-ink)}
.fcard:hover{border-color:var(--fs-green)}
.fcl{font-size:12px;color:var(--fs-muted);font-weight:600}
.fct{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fct>span{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;text-align:center;font-size:13.5px}
.fct img{object-fit:contain}
.fct em{font-style:normal;font-size:11px;font-weight:700;color:var(--fs-faint)}
.fcp{background:var(--fs-navy);color:#fff;border-radius:var(--fs-rad-s);padding:9px 12px;font-weight:700;font-size:14.5px;text-align:center}
.fcs{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--fs-muted)}
.fcs b{color:var(--fs-green-ink)}
.hgo{color:var(--fs-green-ink);font-weight:700}

/* day tabs */
.dtabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -2px 12px;padding:2px}
.dtab{flex:none;border:1px solid var(--fs-line2);background:var(--fs-card);color:var(--fs-ink2);border-radius:999px;padding:9px 14px;font-weight:700;font-size:13.5px;cursor:pointer;min-height:40px}
.dtab small{color:var(--fs-faint);font-weight:600;margin-left:4px}
.dtab.on{background:var(--fs-navy);border-color:var(--fs-navy);color:#fff}
.dtab.on small{color:#9fb3cf}
.lgrp{border:1px solid var(--fs-line);border-radius:var(--fs-rad-s);margin-bottom:10px;overflow:hidden}
.lgrp summary{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 14px;background:var(--fs-bg);cursor:pointer;list-style:none;font-size:14px}
.lgrp summary::-webkit-details-marker{display:none}
.lgrp summary a{font-weight:800;color:var(--fs-ink);text-decoration:none}
.lgrp summary small{color:var(--fs-muted);font-weight:600}
.mrow{display:grid;grid-template-columns:44px 1fr auto;gap:6px 10px;align-items:center;padding:11px 14px;border-top:1px solid var(--fs-line);text-decoration:none;color:var(--fs-ink)}
.mrow:hover{background:#f8fafd}
.mrow .ht{font-size:13px;font-weight:700;color:var(--fs-muted)}
.mrow .htm{display:flex;flex-direction:column;gap:4px;font-size:14.5px;font-weight:600;min-width:0}
.mrow .htm span{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .htm img{object-fit:contain;flex:none}
.mrow .htp{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;max-width:140px}
.mrow .htp b{font-size:12.5px;line-height:1.25}
.mrow .htp i{font-style:normal;background:var(--fs-green-l);color:var(--fs-green-ink);font-weight:800;font-size:13px;border-radius:6px;padding:2px 8px}
.hpb{grid-column:1/-1;display:flex;gap:2px;height:20px;border-radius:6px;overflow:hidden}
.hpb .hs{display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;min-width:0;white-space:nowrap}
.hpb .h{background:#1f3a66}.hpb .d{background:#94a3b8}.hpb .a{background:var(--fs-green)}

/* leagues + news + bookmakers */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.hlg{display:flex;flex-direction:column;gap:2px;background:var(--fs-bg);border:1px solid var(--fs-line);border-radius:var(--fs-rad-s);padding:12px;text-decoration:none;color:var(--fs-ink)}
.hlg:hover{border-color:var(--fs-green)}
.hlg small{color:var(--fs-muted)}
.bk{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--fs-line)}
.bk:last-of-type{border-bottom:0}
.bkl{width:44px;height:44px;flex:none;border-radius:10px;overflow:hidden;background:var(--fs-bg);display:grid;place-items:center}
.bkl img{width:100%;height:100%;object-fit:contain}
.bki{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bki b{font-size:15px}
.bki span{font-size:13px;color:var(--fs-green-ink);font-weight:600}
.bki small{color:var(--fs-muted)}
.bk .btn{flex:none;min-height:40px;display:inline-flex;align-items:center}

@media(max-width:980px){.fgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -14px;padding:0 14px 6px;scrollbar-width:none}.fcard{flex:0 0 78%;scroll-snap-align:start}}
@media(min-width:641px){.hhero h1{font-size:32px}.hhero .w{padding:34px 20px 26px}.chips{margin:0;padding:0}}
@media(min-width:760px){.mrow{grid-template-columns:54px 1.4fr 1fr 220px;}.mrow .hpb{grid-column:auto}.mrow .htp{max-width:none;align-items:flex-start;text-align:left;flex-direction:row;gap:10px;align-items:center}}

/* ---- v3 fixes: rows, bars, league logos, seo ---- */
.mrow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px 12px;align-items:center}
.mrow .htp{display:flex;align-items:center;gap:8px;flex-direction:row;justify-content:flex-end;text-align:right;max-width:none;min-width:0}
.mrow .htp b{font-size:12.5px;line-height:1.25;overflow-wrap:anywhere}
.mrow .htp i{flex:none;min-width:48px;text-align:center}
.hpb{height:24px;gap:3px}
.hpb .hs{min-width:42px;font-size:11.5px}
.hpb .h{background:#1f3a66}.hpb .d{background:#94a3b8}.hpb .a{background:var(--fs-green)}
@media(min-width:760px){
  .mrow{grid-template-columns:54px minmax(0,1.3fr) minmax(0,1.1fr) 190px;gap:12px}
  .mrow .htp{justify-content:flex-start;text-align:left}
  .mrow .htp b{flex:1}
  .mrow .hpb{grid-column:auto;width:190px}
}
.ll{width:22px;height:22px;object-fit:contain;margin-right:8px;vertical-align:middle;background:#fff;border-radius:4px}
.lgrp summary a{display:inline-flex;align-items:center}
.hlg{position:relative}
.hlg .lb{width:34px;height:34px;object-fit:contain;margin-bottom:6px}
.lc{width:18px;height:18px;object-fit:contain;margin-right:8px;vertical-align:middle;background:#fff;border-radius:4px;padding:1px}
.chips a{display:inline-flex;align-items:center}
.seo .prose h3{margin:18px 0 6px}
.seo .prose a{color:var(--fs-green-ink);font-weight:600}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--fs-muted);margin:0 0 10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}

/* league tables on the home page */
.gtab .ll{margin-right:6px;vertical-align:middle}
.gpanel .lt{margin-bottom:6px}
.gpanel .tops{margin-bottom:8px}
.hm{display:none}
@media(min-width:641px){.hm{display:table-cell}.lt .fdot2{margin-right:2px}}

/* grid children must be allowed to shrink, otherwise scrollers (tabs, chips, tables) widen the whole page */
.hwrap{grid-template-columns:minmax(0,1fr) 360px}
.hwrap>*{min-width:0}
@media(max-width:980px){.hwrap{grid-template-columns:minmax(0,1fr)}}
.dtabs,.chips,.fgrid{max-width:100%}

/* mobile match row: teams get the full width, tip + odds and the bar go below */
@media(max-width:759px){
  .mrow{grid-template-columns:44px minmax(0,1fr)}
  .mrow .htp{grid-column:1/-1;justify-content:space-between;text-align:left}
  .mrow .htp b{flex:1;font-size:13px}
  .mrow .hpb{grid-column:1/-1}
}

/* equal-height tip cards: fixed rows, footer pinned to the bottom */
.fgrid{align-items:stretch}
.fcard{height:100%}
.fct{min-height:104px;align-items:flex-start}
.fct>span{justify-content:flex-start}
.fct em{margin-top:14px}
.fcp{min-height:62px;display:flex;align-items:center;justify-content:center}
.fcs{margin-top:auto}
/* light bookmaker logos stay visible */
.bkl{background:#14213a}
