/* match-centre block + the "compact" cap on a top-level data block
   (templates/content/blocks/match_centre.html, _mc_compact_*.html).
   Platform stylesheet: neutral defaults any theme can live with; the tiger
   accents are scoped to .theme-malaysia-tiger. Tabs are radio inputs (no JS);
   the height cap is JS-only (.mc-js), so without JS nothing is hidden. */
.mc { position: relative; margin: 0; }
.mc-title { margin: 0 0 12px; }
.mc-promo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
  background: #fff8db; border: 1px solid #f1d675; font-size: 15px; line-height: 1.45;
}
.mc-promo-tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; background: #102344; color: #fff;
}
.mc-promo a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* tabs: radio + label, visually hidden radios stay keyboard-reachable */
.mc-r { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mc-tabs {
  display: flex; gap: 6px; margin: 0 0 12px; padding: 0 0 2px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mc-tabs::-webkit-scrollbar { display: none; }
.mc-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; border: 1px solid #c9d1dd; background: #fff; color: #1d2a3d;
  font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; user-select: none;
}
.mc--tabs .mc-panel { display: none; }
.mc--single .mc-panel { display: block; }
.mc-r:nth-of-type(1):checked ~ .mc-panels > .mc-panel:nth-child(1),
.mc-r:nth-of-type(2):checked ~ .mc-panels > .mc-panel:nth-child(2),
.mc-r:nth-of-type(3):checked ~ .mc-panels > .mc-panel:nth-child(3),
.mc-r:nth-of-type(4):checked ~ .mc-panels > .mc-panel:nth-child(4),
.mc-r:nth-of-type(5):checked ~ .mc-panels > .mc-panel:nth-child(5),
.mc-r:nth-of-type(6):checked ~ .mc-panels > .mc-panel:nth-child(6) { display: block; }
.mc-r:nth-of-type(1):checked ~ .mc-tabs > .mc-tab:nth-child(1),
.mc-r:nth-of-type(2):checked ~ .mc-tabs > .mc-tab:nth-child(2),
.mc-r:nth-of-type(3):checked ~ .mc-tabs > .mc-tab:nth-child(3),
.mc-r:nth-of-type(4):checked ~ .mc-tabs > .mc-tab:nth-child(4),
.mc-r:nth-of-type(5):checked ~ .mc-tabs > .mc-tab:nth-child(5),
.mc-r:nth-of-type(6):checked ~ .mc-tabs > .mc-tab:nth-child(6) { background: #102344; border-color: #102344; color: #fff; }
.mc-r:nth-of-type(1):focus-visible ~ .mc-tabs > .mc-tab:nth-child(1),
.mc-r:nth-of-type(2):focus-visible ~ .mc-tabs > .mc-tab:nth-child(2),
.mc-r:nth-of-type(3):focus-visible ~ .mc-tabs > .mc-tab:nth-child(3),
.mc-r:nth-of-type(4):focus-visible ~ .mc-tabs > .mc-tab:nth-child(4),
.mc-r:nth-of-type(5):focus-visible ~ .mc-tabs > .mc-tab:nth-child(5),
.mc-r:nth-of-type(6):focus-visible ~ .mc-tabs > .mc-tab:nth-child(6) { outline: 2px solid #2b6cb0; outline-offset: 2px; }

/* the panels' own block spacing: no double gap at the top of a tab */
.mc-panel > :first-child { margin-top: 0; }
.mc-panel section:first-child { margin-top: 0; }

/* height cap (JS adds .mc-js + .is-capped when the panel is taller than the cap) */
.mc-js.is-capped:not(.is-open) .mc-panels {
  max-height: var(--mc-limit, 420px); overflow: hidden; position: relative;
}
.mc-js.is-capped:not(.is-open) .mc-panels::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--mc-fade, #fff));
}
.mc-more {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 8px 0 0;
  border: 1px solid #c9d1dd; border-radius: 10px; background: #fff; color: #102344;
  font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
}
.mc-more[hidden] { display: none; }
.mc-more::after { content: "\25BE"; margin-left: 8px; font-size: 12px; }
.mc.is-open .mc-more::after { content: "\25B4"; }

/* tiger accents (navy #102344 / gold #FFCC22) */
.theme-malaysia-tiger .mc { --mc-fade: var(--likme-content-bg, #fff); }
.theme-malaysia-tiger .mc-promo { background: #fff6d1; border-color: #FFCC22; }
.theme-malaysia-tiger .mc-tab:hover { border-color: #102344; }
.theme-malaysia-tiger .mc-r:nth-of-type(n):checked ~ .mc-tabs > .mc-tab { box-shadow: none; }
@media (max-width: 640px) {
  .mc-tab { padding: 0 14px; font-size: 14px; }
  .mc-promo { font-size: 14px; padding: 10px 12px; }
}