/* Tournament list -- /cricket/results/competitions/
   ---------------------------------------------------------------------------
   Only the card lives here. The breadcrumb, the heading row, the pager and
   the browse row are the ones results.css already defines, and this page
   uses them rather than growing a second set under different names.

   One rule runs through the whole sheet: no image and no web font is
   introduced. Sixty rows above the fold is the exact situation where a 44px
   logo per card turns a text page into sixty round trips, so every picture
   on this page is a background from a stylesheet the layout already links,
   a symbol defined once in the markup, or letters on a generated colour.

   Contents
     1. section summary
     2. the card shell
     3. badge
     4. title row
     5. identity line
     6. stat tiles
     7. scorecard coverage
     8. honours
     9. last result
    10. phones
*/

/* 1. section summary ------------------------------------------------------ */

.mf-comp-summary{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px; margin:0 0 12px;
}
.mf-comp-sumtile{
  background:#f7f5f0; border:1px solid #eceae5; border-radius:10px;
  padding:11px 12px; text-align:center;
}
.mf-comp-sumtile b{
  display:block;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:19px; font-weight:800; color:#181818; line-height:1.15;
  font-variant-numeric:tabular-nums; letter-spacing:-.3px;
}
.mf-comp-sumtile span{
  display:block; margin-top:2px;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:10.5px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:#8a887f;
}
html.dark-mode .mf-comp-sumtile{background:#1f2024; border-color:#2c2d31;}
html.dark-mode .mf-comp-sumtile b{color:#f0efe9;}
html.dark-mode .mf-comp-sumtile span{color:#8c8c94;}

.mf-comp-intro{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:13px; color:#8a887f; margin:0 0 18px;
}
html.dark-mode .mf-comp-intro{color:#8c8c94;}

/* The symbol holder. It has to stay in the flow for <use> to resolve in
   every browser -- display:none breaks the reference in Safari -- so it is
   sized to nothing instead. */
.mf-comp-defs{position:absolute; width:0; height:0; overflow:hidden;}

/* 2. the card shell ------------------------------------------------------- */

.mf-comp-list{list-style:none; margin:0; padding:0;}
.mf-comp-row{margin:0 0 9px;}

/* Grid rather than flex: the badge column is fixed, the body takes what is
   left, and minmax(0,1fr) is what stops a long tournament name from pushing
   the chevron off the row. */
.mf-comp-card{
  position:relative; display:grid;
  grid-template-columns:auto minmax(0,1fr) 18px;
  gap:15px; align-items:start;
  padding:15px 17px;
  border:1px solid #eceae5; border-radius:14px;
  background:#fff; text-decoration:none;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* The accent rail. Zero width until hover, so it reads as a response to the
   pointer rather than as decoration sixty rows deep. */
.mf-comp-card::before{
  content:''; position:absolute; left:0; top:14px; bottom:14px;
  width:3px; border-radius:0 3px 3px 0; background:#e2231a;
  opacity:0; transition:opacity .15s ease;
}
.mf-comp-card:hover{
  border-color:#dcd9d2;
  box-shadow:0 4px 18px rgba(24,24,24,.07);
  transform:translateY(-1px);
}
.mf-comp-card:hover::before{opacity:1;}
.mf-comp-card:focus-visible{outline:2px solid #e2231a; outline-offset:2px;}

/* The 200-match tournaments. A slightly heavier surface and a larger name:
   enough that the IPL does not look like a three-match tour, not so much
   that the page turns into two lists. */
.mf-comp-card.is-big{background:linear-gradient(180deg,#fffdfc,#fff 42%);}
html.dark-mode .mf-comp-card{background:#1b1c20; border-color:#2c2d31;}
html.dark-mode .mf-comp-card.is-big{background:linear-gradient(180deg,#212226,#1b1c20 42%);}
html.dark-mode .mf-comp-card:hover{border-color:#3a3b41; box-shadow:0 4px 18px rgba(0,0,0,.4);}

/* 3. badge ---------------------------------------------------------------- */

.mf-comp-badgewrap{display:block;}
.mf-comp-badge{
  width:46px; height:46px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex:none;
  box-shadow:0 1px 3px rgba(24,24,24,.10);
}
.is-big .mf-comp-badge{width:52px; height:52px; border-radius:12px;}

/* The flag case. .flag-slot from /css/flags.css supplies the image; only the
   shape, the hairline and the placeholder colour belong to this page -- and
   background-color only, never the background shorthand, or the flag the
   generated sheet painted would be wiped out by this rule. */
.mf-comp-badge.flag-slot{
  border:1px solid rgba(0,0,0,.10);
  background-color:#f3f1ec;
}
html.dark-mode .mf-comp-badge.flag-slot{border-color:rgba(255,255,255,.15); background-color:#26272c;}

.mf-comp-badge.is-globe{background:#fdecea; color:#c11d15;}
html.dark-mode .mf-comp-badge.is-globe{background:rgba(226,35,26,.17); color:#ff7a70;}

/* The monogram. --mf-hue is set per card by the template, so the colour is a
   property of the name rather than of the row's position on the page. */
.mf-comp-badge.is-text{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:14.5px; font-weight:800; letter-spacing:.4px; color:#fff;
  background:linear-gradient(140deg,
              hsl(var(--mf-hue,210) 54% 47%),
              hsl(var(--mf-hue,210) 54% 34%));
}
.is-big .mf-comp-badge.is-text{font-size:16px;}

/* 4. title row ------------------------------------------------------------ */

.mf-comp-body{min-width:0; display:block;}

.mf-comp-top{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:2px 0 7px;}

.mf-comp-name{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:15.5px; font-weight:700; line-height:1.28; color:#181818;
  letter-spacing:-.15px;
}
.is-big .mf-comp-name{font-size:17px; font-weight:800;}
.mf-comp-card:hover .mf-comp-name{color:#e2231a;}
html.dark-mode .mf-comp-name{color:#f0efe9;}

.mf-comp-state{
  display:inline-flex; align-items:center; gap:5px;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:10px; font-weight:800; letter-spacing:.55px; text-transform:uppercase;
  padding:3px 8px; border-radius:20px; white-space:nowrap;
}
.mf-comp-state.is-live{background:#e7f8ec; color:#1a7a35;}
.mf-comp-state.is-recent{background:#fdecea; color:#b5211a;}
.mf-comp-state.is-idle{background:#f3f1ec; color:#79776f;}
.mf-comp-state.is-done{background:#f3f1ec; color:#8a887f;}
html.dark-mode .mf-comp-state.is-live{background:rgba(36,138,61,.20); color:#5fd07f;}
html.dark-mode .mf-comp-state.is-recent{background:rgba(226,35,26,.17); color:#ff8078;}
html.dark-mode .mf-comp-state.is-idle,
html.dark-mode .mf-comp-state.is-done{background:rgba(255,255,255,.06); color:#8c8c94;}

/* The pulse marks the tournaments being played this month, and only those --
   sixty pulsing dots would mark nothing. */
.mf-comp-dot{
  width:5px; height:5px; border-radius:50%; background:currentColor;
  animation:mf-comp-pulse 2s ease-in-out infinite;
}
@keyframes mf-comp-pulse{0%,100%{opacity:1;} 50%{opacity:.25;}}

/* 5. identity line -------------------------------------------------------- */

.mf-comp-meta{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:0 0 9px;}

.mf-comp-chip{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:10px; font-weight:800; letter-spacing:.4px;
  color:#5c5a54; background:#f3f1ec;
  padding:3px 7px; border-radius:5px;
}
html.dark-mode .mf-comp-chip{background:#26272c; color:#b6b5b0;}

.mf-comp-region,
.mf-comp-span{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12px; font-weight:600; color:#8a887f;
  font-variant-numeric:tabular-nums;
}
/* A dot between them, drawn rather than typed, so it never lands at the
   start of a wrapped line. */
.mf-comp-region + .mf-comp-span::before,
.mf-comp-chip + .mf-comp-region::before{
  content:'\00b7'; margin-right:7px; color:#c9c7c1;
}
html.dark-mode .mf-comp-region,
html.dark-mode .mf-comp-span{color:#8c8c94;}

/* 6. stat tiles ----------------------------------------------------------- */

/* auto-fit rather than a fixed four: a tournament with two facts gets two
   tiles that fill the row, not two tiles and two gaps. */
.mf-comp-tiles{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(64px, 1fr));
  gap:6px; margin:0 0 9px; max-width:430px;
}
.mf-comp-tile{
  display:block; text-align:center;
  background:#f7f5f0; border-radius:8px; padding:7px 6px;
}
.mf-comp-tile b{
  display:block;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:15px; font-weight:800; color:#181818; line-height:1.15;
  font-variant-numeric:tabular-nums; letter-spacing:-.3px;
}
.mf-comp-tile span{
  display:block; margin-top:1px;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:9.5px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:#8a887f;
}
html.dark-mode .mf-comp-tile{background:#24252a;}
html.dark-mode .mf-comp-tile b{color:#f0efe9;}
html.dark-mode .mf-comp-tile span{color:#8c8c94;}

/* 7. scorecard coverage --------------------------------------------------- */

/* A share, not a count. "1,140 of 1,142" is two numbers a reader has to
   divide; the bar is the answer they were dividing towards. */
.mf-comp-cover{display:block; max-width:430px; margin:0 0 9px;}
.mf-comp-coverbar{
  display:block; height:3px; border-radius:3px;
  background:#eceae5; overflow:hidden; margin:0 0 5px;
}
.mf-comp-coverbar span{
  display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,#e2231a,#ff6a5f);
}
.mf-comp-covertext{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:11.5px; color:#8a887f;
}
.mf-comp-covertext b{color:#3a3a3a; font-weight:700; font-variant-numeric:tabular-nums;}
.mf-comp-covercount{margin-left:7px; color:#b0aea7;}
html.dark-mode .mf-comp-coverbar{background:#2c2d31;}
html.dark-mode .mf-comp-covertext{color:#8c8c94;}
html.dark-mode .mf-comp-covertext b{color:#d6d5d0;}
html.dark-mode .mf-comp-covercount{color:#6d6c68;}

/* 8. honours -------------------------------------------------------------- */

.mf-comp-honours{display:flex; flex-wrap:wrap; gap:7px 10px; margin:0 0 8px;}

.mf-comp-honour{
  display:inline-flex; align-items:center; gap:7px;
  background:#f7f5f0; border-radius:8px; padding:5px 10px 5px 6px;
}
html.dark-mode .mf-comp-honour{background:#24252a;}

/* TeamCrest prints .mf-crest plus whatever class it is handed; both the flag
   shape and the initials fallback are sized by this one rule, which is the
   point of asking TeamCrest for the badge rather than writing markup here. */
.mf-comp-crest{
  width:20px; height:20px; border-radius:5px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:8.5px; font-weight:800; color:#fff; letter-spacing:.2px;
  box-shadow:0 1px 2px rgba(24,24,24,.12);
}

.mf-comp-honourtext{display:block; line-height:1.25; min-width:0;}
.mf-comp-honourtext em{
  display:block; font-style:normal;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:9px; font-weight:800; letter-spacing:.45px;
  text-transform:uppercase; color:#a3a19a;
}
.mf-comp-honourtext b{
  display:block;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12.5px; font-weight:700; color:#3a3a3a;
}
.mf-comp-honourtext b i{font-style:normal; color:#a3a19a; font-weight:700;}
html.dark-mode .mf-comp-honourtext em{color:#7c7b76;}
html.dark-mode .mf-comp-honourtext b{color:#d6d5d0;}
html.dark-mode .mf-comp-honourtext b i{color:#7c7b76;}

/* 9. last result ---------------------------------------------------------- */

/* Clamped to two lines. A result line is usually short and occasionally a
   paragraph, and one long one must not make its row twice the height of
   every other row on the page. */
.mf-comp-last{
  display:block;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12.5px; line-height:1.5; color:#6f6d66;
  padding-top:8px; border-top:1px solid #f2f0eb;
  overflow:hidden;
}
.mf-comp-lasticon{color:#c9c7c1; vertical-align:-2px; margin-right:3px;}
.mf-comp-date{color:#a3a19a; margin-left:7px; white-space:nowrap;}
html.dark-mode .mf-comp-last{color:#9a9890; border-top-color:#26272c;}
html.dark-mode .mf-comp-lasticon{color:#55565c;}
html.dark-mode .mf-comp-date{color:#75746f;}

.mf-comp-go{color:#c9c7c1; padding-top:14px;}
.mf-comp-card:hover .mf-comp-go{color:#e2231a;}
html.dark-mode .mf-comp-go{color:#55565c;}

/* 10. phones -------------------------------------------------------------- */

@media (max-width:600px){
  .mf-comp-summary{grid-template-columns:repeat(2, minmax(0,1fr));}
  .mf-comp-card{grid-template-columns:auto minmax(0,1fr); gap:12px; padding:13px 14px; border-radius:12px;}
  .mf-comp-badge,
  .is-big .mf-comp-badge{width:40px; height:40px; border-radius:10px;}
  .mf-comp-badge.is-text,
  .is-big .mf-comp-badge.is-text{font-size:13px;}
  .mf-comp-name{font-size:14.5px;}
  .is-big .mf-comp-name{font-size:15.5px;}
  /* Four tiles across a 390px screen is 60px each, which is exactly wide
     enough for "1,142" and not for its label. Two rows of two instead. */
  .mf-comp-tiles{grid-template-columns:repeat(2, minmax(0,1fr)); max-width:none;}
  .mf-comp-cover{max-width:none;}
  .mf-comp-honours{gap:6px;}
  .mf-comp-honour{width:100%;}
  /* The chevron is a hover affordance and there is no hover here. */
  .mf-comp-go{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .mf-comp-card{transition:none;}
  .mf-comp-card:hover{transform:none;}
  .mf-comp-dot{animation:none;}
}