/* Tournament hub and season pages
   ---------------------------------------------------------------------------
   competitions.css already defines the state pill, the format chip, the
   region/span text and the monogram badge, and both these pages use them as
   they are. Only what is new to a full-width page lives here: the hero, the
   season grid, the tables and the two-column records block.

   Same rule as the list: no image and no web font is introduced. The badge
   is a flag from /css/flags.css, the trophy is the symbol the template
   defines once, and every crest beside a team name is TeamCrest's -- an
   uploaded badge where there is one, initials on the side's own colour
   where there is not.

   Contents
     1. hero
     2. section blocks
     3. season grid
     4. tables
     5. records columns
     6. season nav
     7. phones
*/

/* 1. hero ----------------------------------------------------------------- */

.mf-hub-hero{
  border:1px solid #eceae5; border-radius:16px; background:#fff;
  padding:20px 22px; margin:0 0 20px;
}
html.dark-mode .mf-hub-hero{background:#1b1c20; border-color:#2c2d31;}

.mf-hub-heroTop{display:flex; align-items:center; gap:16px; margin:0 0 16px;}

.mf-hub-badge{
  width:64px; height:64px; border-radius:15px; flex:none;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 2px 6px rgba(24,24,24,.12);
}
.mf-hub-badge.flag-slot{border:1px solid rgba(0,0,0,.10); background-color:#f3f1ec;}
.mf-hub-badge.is-globe{background:#fdecea; color:#c11d15;}
.mf-hub-badge.is-text{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:20px; font-weight:800; letter-spacing:.5px; color:#fff;
  background:linear-gradient(140deg,
              hsl(var(--mf-hue,210) 54% 47%),
              hsl(var(--mf-hue,210) 54% 34%));
}
html.dark-mode .mf-hub-badge.flag-slot{border-color:rgba(255,255,255,.15); background-color:#26272c;}
html.dark-mode .mf-hub-badge.is-globe{background:rgba(226,35,26,.17); color:#ff7a70;}

.mf-hub-heroText{min-width:0;}
.mf-hub-title{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:27px; font-weight:800; line-height:1.18; color:#181818;
  margin:0 0 8px; letter-spacing:-.6px;
}
.mf-hub-title .mf-hub-up{color:inherit; text-decoration:none;}
.mf-hub-title .mf-hub-up:hover{color:#e2231a;}
html.dark-mode .mf-hub-title{color:#f0efe9;}

.mf-hub-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}

/* Five across on a hub, four on a season. auto-fit keeps either honest. */
.mf-hub-tiles{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(84px,1fr));
  gap:8px; margin:0 0 16px;
}
.mf-hub-tile{
  background:#f7f5f0; border-radius:10px; padding:11px 8px; text-align:center;
}
.mf-hub-tile b{
  display:block;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:20px; font-weight:800; color:#181818; line-height:1.15;
  font-variant-numeric:tabular-nums; letter-spacing:-.4px;
}
.mf-hub-tile span{
  display:block; margin-top:2px;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:10px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:#8a887f;
}
html.dark-mode .mf-hub-tile{background:#24252a;}
html.dark-mode .mf-hub-tile b{color:#f0efe9;}
html.dark-mode .mf-hub-tile span{color:#8c8c94;}

.mf-hub-honours{display:flex; flex-wrap:wrap; gap:10px;}
.mf-hub-honour{
  display:flex; align-items:center; gap:10px;
  background:#f7f5f0; border-radius:10px; padding:9px 14px 9px 10px;
}
.mf-hub-honour em{
  display:block; font-style:normal;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:9.5px; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase; color:#a3a19a;
}
.mf-hub-honour b{
  display:block;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:14.5px; font-weight:700; color:#181818;
}
html.dark-mode .mf-hub-honour{background:#24252a;}
html.dark-mode .mf-hub-honour em{color:#7c7b76;}
html.dark-mode .mf-hub-honour b{color:#f0efe9;}

/* TeamCrest sizing. One rule covers the flag shape and the initials
   fallback, which is the point of asking TeamCrest for the badge rather
   than writing two bits of markup. */
.mf-hub-crest{
  width:26px; height:26px; border-radius:6px; 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:9.5px; font-weight:800; color:#fff; letter-spacing:.2px;
  box-shadow:0 1px 2px rgba(24,24,24,.14);
}

.mf-hub-final{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:13.5px; color:#6f6d66; margin:12px 0 0;
}
html.dark-mode .mf-hub-final{color:#9a9890;}

/* 2. section blocks -------------------------------------------------------- */

.mf-hub-block{margin:0 0 26px;}

.mf-hub-head{
  display:flex; align-items:baseline; gap:10px;
  margin:0 0 12px; padding-bottom:8px; border-bottom:2px solid #f2f0eb;
}
.mf-hub-head h2{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:17px; font-weight:800; color:#181818; margin:0; letter-spacing:-.3px;
}
.mf-hub-head span{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12px; color:#8a887f; font-weight:600;
}
.mf-hub-all{
  margin-left:auto;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12.5px; font-weight:700; color:#e2231a; text-decoration:none;
  white-space:nowrap;
}
.mf-hub-all:hover{text-decoration:underline;}
html.dark-mode .mf-hub-head{border-bottom-color:#26272c;}
html.dark-mode .mf-hub-head h2{color:#f0efe9;}
html.dark-mode .mf-hub-head span{color:#8c8c94;}

/* 3. season grid ----------------------------------------------------------- */

.mf-hub-seasons{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(132px,1fr)); gap:8px;
}
.mf-hub-season{
  display:block; padding:11px 12px; border-radius:10px;
  border:1px solid #eceae5; background:#fff; text-decoration:none;
  transition:border-color .14s ease, background .14s ease;
}
.mf-hub-season:hover{border-color:#e2231a; background:#fffbfa;}
.mf-hub-season b{
  display:block;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:17px; font-weight:800; color:#181818; line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.mf-hub-season span{
  display:block; margin-top:2px;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:11px; color:#8a887f; font-weight:600;
}
/* The winner's name, one line, clipped rather than wrapped -- a grid where
   one box is two lines taller than its neighbours reads as broken. */
.mf-hub-season em{
  display:block; margin-top:5px; font-style:normal;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:11.5px; font-weight:700; color:#e2231a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html.dark-mode .mf-hub-season{background:#1b1c20; border-color:#2c2d31;}
html.dark-mode .mf-hub-season:hover{border-color:#e2231a; background:#211d1d;}
html.dark-mode .mf-hub-season b{color:#f0efe9;}
html.dark-mode .mf-hub-season span{color:#8c8c94;}
html.dark-mode .mf-hub-season em{color:#ff7a70;}

/* The tail of a long history: years only, wrapped. A tournament with 37
   seasons does not need 37 boxes. */
.mf-hub-more{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px;}
.mf-hub-more a,
.mf-hub-more span{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12.5px; font-weight:700; text-decoration:none;
  padding:5px 9px; border-radius:7px; background:#f3f1ec; color:#5c5a54;
  font-variant-numeric:tabular-nums;
}
.mf-hub-more a:hover{background:#fdecea; color:#b5211a;}
.mf-hub-more span.is-on{background:#e2231a; color:#fff;}
html.dark-mode .mf-hub-more a,
html.dark-mode .mf-hub-more span{background:#26272c; color:#c9c8c4;}

/* 4. tables ---------------------------------------------------------------- */

/* The wrapper scrolls, not the page. A five-column table on a 360px screen
   either scrolls inside its own box or drags the whole layout sideways. */
.mf-hub-tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}

.mf-hub-table{
  width:100%; border-collapse:collapse;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:13px;
}
.mf-hub-table th{
  text-align:left; padding:8px 10px;
  font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:#a3a19a; border-bottom:1px solid #eceae5; white-space:nowrap;
}
.mf-hub-table td{
  padding:9px 10px; border-bottom:1px solid #f4f2ee; color:#3a3a3a;
  font-variant-numeric:tabular-nums;
}
.mf-hub-table tbody tr:hover{background:#faf9f6;}
.mf-hub-table td b{font-weight:800; color:#181818;}
.mf-hub-table a{color:#3a3a3a; text-decoration:none; font-weight:600;}
.mf-hub-table a:hover{color:#e2231a; text-decoration:underline;}
.mf-hub-muted{color:#8a887f;}
.mf-hub-teamcell{display:flex; align-items:center; gap:8px; min-width:0;}
.mf-hub-teamcell span,
.mf-hub-teamcell a{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
html.dark-mode .mf-hub-table th{color:#7c7b76; border-bottom-color:#2c2d31;}
html.dark-mode .mf-hub-table td{color:#c9c8c4; border-bottom-color:#242529;}
html.dark-mode .mf-hub-table tbody tr:hover{background:#202126;}
html.dark-mode .mf-hub-table td b{color:#f0efe9;}
html.dark-mode .mf-hub-table a{color:#c9c8c4;}
html.dark-mode .mf-hub-muted{color:#8c8c94;}

/* 5. records columns ------------------------------------------------------- */

.mf-hub-cols{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px;}
.mf-hub-col h3{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:13px; font-weight:800; color:#3a3a3a; margin:0 0 8px;
  letter-spacing:-.1px;
}
html.dark-mode .mf-hub-col h3{color:#d6d5d0;}

/* 6. season nav ------------------------------------------------------------ */

.mf-hub-seasonnav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 22px; padding:11px 14px;
  background:#f7f5f0; border-radius:11px;
}
.mf-hub-seasonnav a{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:13px; font-weight:700; color:#3a3a3a; text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.mf-hub-seasonnav a:hover{color:#e2231a;}
.mf-hub-allseasons{color:#e2231a !important;}
html.dark-mode .mf-hub-seasonnav{background:#24252a;}
html.dark-mode .mf-hub-seasonnav a{color:#c9c8c4;}

/* 7. phones ---------------------------------------------------------------- */

@media (max-width:700px){
  /* Two tables side by side on a phone is four columns of three characters.
     Stacked, each one is readable. */
  .mf-hub-cols{grid-template-columns:minmax(0,1fr); gap:20px;}
}

@media (max-width:600px){
  .mf-hub-hero{padding:16px 15px; border-radius:13px;}
  .mf-hub-heroTop{gap:12px;}
  .mf-hub-badge{width:52px; height:52px; border-radius:13px;}
  .mf-hub-badge.is-text{font-size:16px;}
  .mf-hub-title{font-size:21px;}
  .mf-hub-tiles{grid-template-columns:repeat(2, minmax(0,1fr));}
  .mf-hub-honour{width:100%;}
  .mf-hub-seasons{grid-template-columns:repeat(2, minmax(0,1fr));}
  /* Columns that are nice to have go, rather than the table scrolling on
     every single page. What is left is the name and the number. */
  .mf-hub-hide{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .mf-hub-season{transition:none;}
}

/* 8. season table + squads ------------------------------------------------- */

/* The side that won the season, marked in the table rather than only in the
   hero -- a table where the champion is not distinguishable from fourth is
   a table you have to read twice. */
.mf-hub-table tr.is-champ td{background:#fffaf9;}
.mf-hub-table tr.is-champ td b{color:#b5211a;}
.mf-hub-champ{color:#e2231a; margin-left:5px; font-size:11px;}
html.dark-mode .mf-hub-table tr.is-champ td{background:rgba(226,35,26,.07);}
html.dark-mode .mf-hub-table tr.is-champ td b{color:#ff8078;}

.mf-hub-squads{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:14px;
}
.mf-hub-squad{
  border:1px solid #eceae5; border-radius:12px; background:#fff; padding:13px 15px;
}
.mf-hub-squad h3{
  display:flex; align-items:center; gap:8px; margin:0 0 9px;
  padding-bottom:8px; border-bottom:1px solid #f2f0eb;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:13.5px; font-weight:800; color:#181818;
}
.mf-hub-squad h3 span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mf-hub-squad ul{list-style:none; margin:0; padding:0;}
.mf-hub-squad li{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:4px 0;
}
.mf-hub-pname{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12.5px; color:#3a3a3a; font-weight:600;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* The line that turns a list of names into a squad worth reading: what each
   of them actually did that season. */
.mf-hub-pstat{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:11px; color:#a3a19a; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
html.dark-mode .mf-hub-squad{background:#1b1c20; border-color:#2c2d31;}
html.dark-mode .mf-hub-squad h3{color:#f0efe9; border-bottom-color:#26272c;}
html.dark-mode .mf-hub-pname{color:#c9c8c4;}
html.dark-mode .mf-hub-pstat{color:#75746f;}

@media (max-width:600px){
  .mf-hub-squads{grid-template-columns:minmax(0,1fr);}
}