/* =========================================================
   LEAGUE HUBS (2.8.0) - page template "Liga (hub)"
   =========================================================
   Same house style as /pronosticos/, /apuestas/ and Portada v3: white canvas,
   ink #0f1525 headings, one navy hero over the abstract texture, red CTAs,
   gold accents, 18px cards with a soft shadow. Loaded only on pages using
   page-templates/league-hub.php (inc/league-hub.php), on top of the light
   skin (body.mi-light main), so every rule is scoped to main.mlh. The widgets
   ([mi_l2_hero], [mi_today], [mi_standings], [mi_scorers], [mi_news_grid])
   already follow the light-skin tokens; this file only frames them.
   ========================================================= */

main.mlh {
  --mx-ink: #0f1525;
  --mx-ink2: #333a55;
  --mx-mute: #5f6784;
  --mx-line: #e3e7f0;
  --mx-soft: #f5f7fb;
  --mx-red: #e8112a;
  --mx-gold: #f5b431;
  --mx-gold-ink: #b07a12;
  --mx-shadow: 0 14px 34px rgba(15, 21, 37, .07);
  --mx-tint: rgba(232, 17, 42, .22);
  --mx-tex: url("../img/texture-abstract.webp");
  display: block;
  background: #fff;
  color: var(--mx-ink);
  padding: 0 0 56px;
}
main.mlh a { text-decoration: none; }

/* The template is its own layout: undo the single-page card frame and top padding. */
body.mi-light main.mi-single.mlh { padding-top: 0; }
body.mi-light main.mlh article.hentry {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  max-width: none;
  margin: 0;
}
body.mi-light main.mlh .mlh-body a { color: var(--mx-red); text-decoration: none; }
body.mi-light main.mlh .mlh-body a:hover { text-decoration: underline; }

/* Country tint behind the hero texture. */
main.mlh--es { --mx-tint: rgba(198, 11, 30, .26); }
main.mlh--en { --mx-tint: rgba(206, 17, 36, .2); }
main.mlh--ar { --mx-tint: rgba(116, 172, 223, .3); }
main.mlh--mx { --mx-tint: rgba(0, 104, 71, .3); }
main.mlh--br { --mx-tint: rgba(0, 155, 58, .3); }
main.mlh--co { --mx-tint: rgba(252, 209, 22, .22); }
main.mlh--cl { --mx-tint: rgba(213, 43, 30, .26); }
main.mlh--pe { --mx-tint: rgba(217, 16, 35, .3); }

/* ---------- hero ---------- */
.mlh-hero {
  position: relative;
  color: #fff;
  background:
    radial-gradient(900px 420px at 85% -10%, var(--mx-tint), transparent 62%),
    linear-gradient(180deg, rgba(15, 21, 37, .86), rgba(15, 21, 37, .97)),
    var(--mx-tex) center / cover no-repeat,
    var(--mx-ink);
  padding: 42px 0 0;
}
.mlh-hero__in {
  display: grid;
  gap: 28px;
  align-items: center;
  padding-bottom: 34px;
}
@media (min-width: 960px) { .mlh-hero__in { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; } }

body.mi-light main.mlh .mlh-crumb {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
body.mi-light main.mlh .mlh-crumb a { color: rgba(255, 255, 255, .82); }
body.mi-light main.mlh .mlh-crumb a:hover { color: #fff; }

body.mi-light main.mlh .mlh-hero__k {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--mx-gold);
}
.mlh-flag { width: 24px; height: 16px; border-radius: 3px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }

body.mi-light main.mlh h1.mlh-hero__t {
  margin: 0 0 14px;
  font-family: "Kumbh Sans", Inter, sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.02;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #fff;
}
body.mi-light main.mlh .mlh-hero__lead {
  max-width: 640px;
  margin: 0 0 24px;
  font-size: 16.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .84);
}
.mlh-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
body.mi-light main.mlh .mlh-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}
body.mi-light main.mlh .mlh-btn--red { background: var(--mx-red); color: #fff; }
body.mi-light main.mlh .mlh-btn--red:hover { background: #ff2740; }
body.mi-light main.mlh .mlh-btn--ghost { border: 1.5px solid rgba(255, 255, 255, .45); color: #fff; }
body.mi-light main.mlh .mlh-btn--ghost:hover { border-color: #fff; }

.mlh-hero__card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  padding: 22px;
  color: var(--mx-ink);
}
.mlh-hero__logo {
  display: flex;
  justify-content: center;
  padding: 6px 0 18px;
  margin: 0 0 8px;
  border-bottom: 1px solid var(--mx-line);
}
.mlh-hero__logo img { width: auto; height: 120px; max-width: 100%; object-fit: contain; }
.mlh-jump { list-style: none; margin: 0; padding: 0; }
.mlh-jump li { border-bottom: 1px solid var(--mx-line); }
.mlh-jump li:last-child { border-bottom: 0; }
body.mi-light main.mlh .mlh-jump a {
  display: flex;
  justify-content: space-between;
  padding: 11px 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--mx-ink);
}
body.mi-light main.mlh .mlh-jump a::after { content: "\2192"; color: var(--mx-red); }
body.mi-light main.mlh .mlh-jump a:hover { color: var(--mx-red); }
@media (max-width: 959px) {
  .mlh-hero__card { display: flex; gap: 18px; align-items: center; padding: 16px; }
  .mlh-hero__logo { padding: 0; margin: 0; border: 0; }
  .mlh-hero__logo img { height: 76px; }
  .mlh-jump { flex: 1; }
}

/* "Más ligas" strip at the hero foot */
.mlh-leagues {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  overflow-x: auto;
  scrollbar-width: none;
}
.mlh-leagues::-webkit-scrollbar { display: none; }
.mlh-leagues__k {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mx-gold);
}
.mlh-leagues ul { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.mlh-leagues li { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.mlh-leagues__c {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #fff;
}
.mlh-leagues .mlh-flag { width: 20px; height: 13px; }
body.mi-light main.mlh .mlh-leagues a {
  font-size: 13px;
  color: rgba(255, 255, 255, .7);
  white-space: nowrap;
}
body.mi-light main.mlh .mlh-leagues a:hover { color: #fff; }
body.mi-light main.mlh .mlh-leagues a.is-current { color: #fff; font-weight: 700; box-shadow: inset 0 -2px 0 var(--mx-gold); }

/* ---------- body: the page content as sections ---------- */
.mlh-body { padding-top: 40px; }
body.mi-light main.mlh .mlh-body > p {
  max-width: 860px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--mx-ink2);
}
body.mi-light main.mlh .mlh-body > p:first-child { font-size: 17.5px; color: var(--mx-ink); margin-bottom: 30px; }
body.mi-light main.mlh .mlh-body h2 {
  margin: 56px 0 18px;
  padding-top: 0;
  font-family: "Kumbh Sans", Inter, sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: .2px;
  text-transform: none;
  color: var(--mx-ink);
  text-align: left;
  scroll-margin-top: 110px;
}
body.mi-light main.mlh .mlh-body h2::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 0 12px;
  border-radius: 2px;
  background: var(--mx-red);
}
body.mi-light main.mlh .mlh-body h2 + p { margin-top: 0; }

/* summary band: three white cards */
body.mi-light main.mlh .mi-l2hero__card {
  background: #fff;
  border: 1px solid var(--mx-line);
  border-radius: 18px;
  box-shadow: var(--mx-shadow);
}
body.mi-light main.mlh .mi-l2hero__h > span { color: var(--mx-ink); }
body.mi-light main.mlh .mi-l2hero__h a { color: var(--mx-red); }
body.mi-light main.mlh .mi-l2hero__tbl .p { color: var(--mx-gold-ink); }

/* results, standings, scorers: one framed card each */
body.mi-light main.mlh .mi-matches,
body.mi-light main.mlh .mi-standings,
body.mi-light main.mlh .mi-scorers {
  background: #fff;
  border: 1px solid var(--mx-line);
  border-radius: 18px;
  box-shadow: var(--mx-shadow);
  overflow: hidden;
}
body.mi-light main.mlh .mi-matches { padding: 8px 18px 14px; }
body.mi-light main.mlh .mi-standings__head { background: var(--mx-ink); }
body.mi-light main.mlh .mi-standings__head * { color: #fff; }

/* news grid: Portada v3 cards */
body.mi-light main.mlh .mi-card {
  background: #fff;
  border: 1px solid var(--mx-line);
  border-radius: 18px;
  box-shadow: var(--mx-shadow);
  overflow: hidden;
}
body.mi-light main.mlh .mi-card__img { border-radius: 0; }
body.mi-light main.mlh .mi-card__cat { background: var(--mx-ink); color: #fff; border-radius: 6px; }
body.mi-light main.mlh .mi-card__title a { color: var(--mx-ink); }
body.mi-light main.mlh .mi-card__title a:hover { color: var(--mx-red); }

@media (max-width: 700px) {
  .mlh-hero { padding-top: 28px; }
  .mlh-body { padding-top: 28px; }
  body.mi-light main.mlh .mlh-body h2 { margin-top: 42px; }
  body.mi-light main.mlh .mi-matches { padding: 6px 10px 10px; }
}