/* Grounds -- /cricket/results/venues/
   ---------------------------------------------------------------------------
   Only what is new lives here. The breadcrumb, the heading row, the pager and
   the match grid are results.css's, and these pages use them rather than
   growing a second set under different names.

   No image and no web font is introduced. The mark beside a ground is an
   inline SVG drawn from its name, and the decade graph is bars whose heights
   the controller worked out -- so a page of sixty grounds is one request.

   Contents
     1. summary tiles
     2. country chips
     3. the ground list
     4. one ground: head
     5. panels, tables, tags
     6. decade graph
     7. year grid
     8. phones
*/

/* 1. summary tiles -------------------------------------------------------- */

.mf-venue-summary{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:8px; margin:0 0 14px;
}
.mf-venue-sumtile{
  background:#f7f5f0; border:1px solid #e2ddd0; border-radius:10px;
  padding:11px 12px; text-align:center;
  box-shadow:0 1px 2px rgba(24,24,24,.04);
}
.mf-venue-sumtile b{
  display:block; font-size:19px; font-weight:800; color:#181818;
  line-height:1.15; font-variant-numeric:tabular-nums; letter-spacing:-.3px;
}
.mf-venue-sumtile span{
  display:block; margin-top:2px; font-size:11px; color:#777;
  text-transform:uppercase; letter-spacing:.4px;
}

/* 2. country chips -------------------------------------------------------- */

.mf-venue-filter{
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px;
}
.mf-venue-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; border:1px solid #e6e3dd; border-radius:999px;
  background:#fff; color:#333; font-size:12.5px; text-decoration:none;
  line-height:1.4;
}
.mf-venue-chip span{ color:#8a8a8a; font-variant-numeric:tabular-nums; }
.mf-venue-chip:hover{ border-color:#c9c4ba; }
.mf-venue-chip.is-on{ background:#12233d; border-color:#12233d; color:#fff; }
.mf-venue-chip.is-on span{ color:rgba(255,255,255,.7); }

/* 3. the ground list ------------------------------------------------------ */

.mf-venue-list{ list-style:none; margin:0; padding:0; }
.mf-venue-row + .mf-venue-row{ border-top:1px solid #efece7; }
.mf-venue-link{
  display:flex; align-items:center; gap:12px;
  padding:11px 6px; text-decoration:none; color:inherit;
}
.mf-venue-link:hover{ background:#faf9f6; }
.mf-venue-icon{ width:38px; height:38px; flex:0 0 38px; border-radius:10px; display:block; }
.mf-venue-icon.is-big{ width:60px; height:60px; flex:0 0 60px; border-radius:14px; }
.mf-venue-text{ flex:1 1 auto; min-width:0; }
.mf-venue-name{
  display:block; font-size:15px; font-weight:700; color:#12233d;
  line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mf-venue-place{ display:block; font-size:12.5px; color:#7a7a7a; margin-top:1px; }
.mf-venue-meta{ flex:0 0 auto; text-align:right; }
.mf-venue-meta b{
  display:block; font-size:15px; font-weight:800; color:#181818;
  font-variant-numeric:tabular-nums;
}
.mf-venue-meta span{ display:block; font-size:11px; color:#8a8a8a; }

.mf-venue-empty{ padding:22px 0; color:#777; }

/* 4. one ground: head ----------------------------------------------------- */

.mf-venue-head{ display:flex; align-items:center; gap:14px; margin:4px 0 14px; }
.mf-venue-headtext{ min-width:0; }
.mf-venue-sub{ margin:2px 0 0; color:#7a7a7a; font-size:13.5px; }
.mf-venue-sub a{ color:#12233d; font-weight:600; text-decoration:none; }
.mf-venue-sub a:hover{ color:#c0392b; text-decoration:underline; }
.mf-venue-aka{
  margin:0 0 14px; padding:9px 11px; background:#f7f5f0;
  border-left:3px solid #d9d4c9; border-radius:0 8px 8px 0;
  font-size:12.5px; color:#666;
}

/* 5. panels, tables, tags ------------------------------------------------- */

.mf-venue-panel{ margin:0 0 18px; }
.mf-venue-h2{
  margin:0 0 9px; padding-left:9px; border-left:3px solid #c0392b;
  font-size:14px; font-weight:800; color:#12233d;
  text-transform:uppercase; letter-spacing:.4px;
}
.mf-venue-table{ width:100%; border-collapse:collapse; }
.mf-venue-table th,
.mf-venue-table td{
  padding:7px 8px; border-bottom:1px solid #f0ede8;
  font-size:13.5px; text-align:left; font-weight:500;
}
.mf-venue-table td{ text-align:right; font-variant-numeric:tabular-nums; font-weight:700; }

.mf-venue-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.mf-venue-tags li{
  padding:5px 10px; border:1px solid #eceae5; border-radius:8px;
  background:#faf9f6; font-size:12.5px; color:#666;
}
.mf-venue-tags b{ color:#12233d; font-weight:700; }

.mf-venue-more{ margin:10px 0 0; font-size:13.5px; }
.mf-venue-more a{ color:#c0392b; text-decoration:none; font-weight:600; }
.mf-venue-more a:hover{ text-decoration:underline; }

/* 6. decade graph --------------------------------------------------------- */

.mf-venue-graph{
  display:flex; align-items:flex-end; gap:6px;
  height:132px; padding:8px 2px 0;
  border-bottom:1px solid #eceae5;
}
.mf-venue-bar{
  flex:1 1 0; min-width:0; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
}
.mf-venue-barfill{
  display:block; width:100%; border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,#2b4a72,#12233d);
}
.mf-venue-barlabel{
  margin-top:5px; font-size:10.5px; color:#8a8a8a; white-space:nowrap;
}

/* 7. year grid ------------------------------------------------------------ */

.mf-venue-years{ display:flex; flex-wrap:wrap; gap:6px; }
.mf-venue-year{
  display:flex; flex-direction:column; align-items:center;
  min-width:62px; padding:7px 9px; text-decoration:none;
  border:1px solid #eceae5; border-radius:8px; background:#fff;
}
.mf-venue-year:hover{ border-color:#c9c4ba; background:#faf9f6; }
.mf-venue-year b{ font-size:13.5px; color:#12233d; font-variant-numeric:tabular-nums; }
.mf-venue-year span{ font-size:11px; color:#8a8a8a; }

/* 8. phones --------------------------------------------------------------- */

@media (max-width:600px){
  .mf-venue-summary{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .mf-venue-icon{ width:32px; height:32px; flex:0 0 32px; }
  .mf-venue-icon.is-big{ width:48px; height:48px; flex:0 0 48px; }
  .mf-venue-name{ font-size:14px; }
  .mf-venue-graph{ height:104px; }
  .mf-venue-barlabel{ font-size:9.5px; }
}

/* ===========================================================================
   9.  The redesign (Aug 2026)
   ---------------------------------------------------------------------------
   The list is ranked rather than alphabetical, the rows carry figures, and a
   ground's own page is two columns of panels instead of one long scroll.
   Everything below is new shapes; nothing above was thrown away, because the
   match list page still uses it.
   =========================================================================== */

/* 9.1 sort bar ------------------------------------------------------------ */

.mf-venue-sortbar{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin:14px 0 4px; padding-bottom:9px; border-bottom:1px solid #efece7;
}
.mf-venue-sortbar > span{
  font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:#9a9a9a;
  margin-right:4px;
}
.mf-venue-sortbar a{
  font-size:12.5px; color:#444; text-decoration:none; padding:4px 10px; border-radius:7px;
}
.mf-venue-sortbar a:hover{ background:#f3f1ec; }
.mf-venue-sortbar a.is-on{ background:#12233d; color:#fff; font-weight:600; }

/* 9.2 country chips, and the fold ----------------------------------------- */

.mf-venue-cflag{
  width:17px; height:12px; flex:0 0 17px; border-radius:2px; display:inline-block;
  vertical-align:-1px; background-color:#f3f1ec; box-shadow:0 0 0 1px rgba(0,0,0,.08) inset;
}
.mf-venue-morec{ margin:0 0 14px; }
.mf-venue-morec > summary{
  cursor:pointer; font-size:12.5px; color:#c0392b; list-style:none;
  padding:4px 2px; font-weight:600;
}
.mf-venue-morec > summary::-webkit-details-marker{ display:none; }
.mf-venue-morec > summary::after{ content:' \25be'; }
.mf-venue-morec[open] > summary::after{ content:' \25b4'; }
.mf-venue-morec .mf-venue-filter{ margin-top:8px; }

/* 9.3 the ranked row ------------------------------------------------------ */

.mf-venue-rank{
  flex:0 0 28px; width:28px; text-align:right;
  font-size:13px; font-weight:800; color:#b6b1a8; font-variant-numeric:tabular-nums;
}
.mf-venue-place{ display:flex; align-items:center; gap:6px; }
.mf-venue-forms{ flex:0 0 auto; display:flex; gap:4px; }
.mf-venue-fpill{
  font-size:10.5px; font-weight:600; padding:3px 7px; border-radius:5px;
  background:#eef1f6; color:#3b4d6b; white-space:nowrap;
}
.mf-venue-fpill b{ font-weight:800; }
.mf-venue-tiles{ flex:0 0 auto; display:flex; gap:6px; }
.mf-venue-tile{
  min-width:58px; text-align:center; background:#f7f5f0; border:1px solid #eceae5;
  border-radius:8px; padding:5px 8px;
}
.mf-venue-tile b{
  display:block; font-size:13.5px; font-weight:800; color:#181818;
  font-variant-numeric:tabular-nums; line-height:1.2;
}
.mf-venue-tile span{
  display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; color:#8a8a8a;
}

/* 9.4 sections, as rows ---------------------------------------------------- */

/* Was a two-column grid (result panel beside the teams table, and so on).
   One column now, top to bottom, on every width -- so the phone breakpoint
   below that used to collapse this to 1fr has nothing left to do. */
.mf-venue-cols{ display:grid; grid-template-columns:1fr; gap:0; }
.mf-venue-summary.is-wide{ grid-template-columns:repeat(5, minmax(0,1fr)); }

/* 9.5 split bars ---------------------------------------------------------- */

.mf-venue-split{
  display:flex; height:30px; border-radius:8px; overflow:hidden;
  background:#efece7; font-size:11px; font-weight:700; color:#fff;
}
.mf-venue-seg{ display:flex; align-items:center; justify-content:center; min-width:0; }
.mf-venue-seg.is-bat,      .mf-venue-legend i.is-bat{ background:#2b4a72; }
.mf-venue-seg.is-chase,    .mf-venue-legend i.is-chase{ background:#c0392b; }
.mf-venue-seg.is-bowl,     .mf-venue-legend i.is-bowl{ background:#1f6b43; }
.mf-venue-seg.is-batfirst, .mf-venue-legend i.is-batfirst{ background:#8a6d3b; }
.mf-venue-legend i.is-none{ background:#b6b1a8; }

.mf-venue-legend{
  display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:8px;
  font-size:12px; color:#555;
}
.mf-venue-legend i{
  width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:6px;
}
.mf-venue-cap{ margin:7px 0 0; font-size:11.5px; color:#8a8a8a; line-height:1.5; }

/* 9.6 tags, now links ----------------------------------------------------- */

.mf-venue-tag{
  display:inline-block; padding:5px 10px; border:1px solid #eceae5; border-radius:8px;
  background:#faf9f6; font-size:12.5px; color:#666; text-decoration:none;
}
.mf-venue-tag b{ color:#12233d; font-weight:700; }
.mf-venue-tag:hover{ border-color:#c9c4ba; background:#f3f1ec; }

/* 9.7 the table, with a header row now ------------------------------------ */

.mf-venue-table thead th{
  font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:#9a9a9a;
  font-weight:700; text-align:right; padding-bottom:4px;
}
.mf-venue-table thead th:first-child{ text-align:left; }
.mf-venue-table tbody th a{ color:#12233d; text-decoration:none; }
.mf-venue-table tbody th a:hover{ color:#c0392b; text-decoration:underline; }

/* 9.8 the decade sparkline ------------------------------------------------ */

.mf-venue-spark{ display:flex; align-items:flex-end; gap:5px; height:76px; }
.mf-venue-sbar{
  flex:1 1 0; min-width:0; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
}
.mf-venue-sbar > span{
  display:block; width:100%; min-height:3px; border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#2b4a72,#12233d);
}
.mf-venue-sbar > em{ font-style:normal; margin-top:4px; font-size:9.5px; color:#9a9a9a; }

/* 9.9 phones -------------------------------------------------------------- */

@media (max-width:860px){
  .mf-venue-summary.is-wide{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:700px){
  /* The row keeps the rank, the mark and the name; the figures drop to a
     second line rather than squeezing the name to nothing. */
  .mf-venue-link{ flex-wrap:wrap; }
  .mf-venue-text{ flex:1 1 100%; order:2; }
  .mf-venue-rank{ order:1; }
  .mf-venue-icon{ order:1; }
  .mf-venue-forms{ order:3; flex:1 1 100%; margin-left:70px; }
  .mf-venue-tiles{ order:4; margin-left:70px; }
  .mf-venue-text{ flex:1 1 auto; }
}
@media (max-width:600px){
  .mf-venue-summary.is-wide{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .mf-venue-forms, .mf-venue-tiles{ margin-left:0; }
  .mf-venue-tile{ min-width:0; flex:1 1 0; }
  .mf-venue-spark{ height:60px; }
}