/* mrpokies-au theme.css - merged from demo/blog.html (rail canonical - V4),
   demo/index.html (home sections), demo/hub.html (breadcrumb). Section eyebrow
   tags (the eyebrow index label) removed site-wide (V1 fix). Provider wall uses
   _media/provider_clean (V3 fix). Category cards use full banner art, not
   96x96 icon crop (V2 fix). */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
body {
  background-color: var(--mpk-bg);
  color: var(--mpk-text);
  font-family: var(--mpk-font-body);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[data-hx] { font-weight: bold; }
[data-hx="1"] { font-size: 2.25rem; font-family: var(--mpk-font-display); }
[data-hx="2"] { font-size: 1.75rem; font-family: var(--mpk-font-display); }
[data-hx="3"] { font-size: 1.375rem; font-family: var(--mpk-font-display); }

/* === rail / shell / topbar / hero / divider / section-anchor / cat-strip / blog-grid / card / pagination / jackpot (from blog.html, canonical rail pattern) === */
/* Base App Shell with N3 Rail */
.mpk-shell {
  display: flex;
  min-height: 100vh;
  background-color: var(--mpk-bg);
}

/* Side Rail Navigation (N3) */
.mpk-rail {
  width: var(--mpk-rail-width);
  flex-shrink: 0;
  background-color: var(--mpk-surface);
  border-right: 1px solid var(--mpk-rule);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 100;
}

.mpk-rail-brand {
  padding: var(--mpk-space-lg) var(--mpk-space-md);
  border-bottom: 1px solid var(--mpk-rule);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mpk-rail-logo {
  width: 180px;
  height: auto;
  aspect-ratio: 1480 / 415;
}

.mpk-rail-nav {
  padding: var(--mpk-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--mpk-space-xs);
  flex-grow: 1;
}

.mpk-rail-link {
  display: flex;
  align-items: center;
  gap: var(--mpk-space-sm);
  padding: var(--mpk-space-sm) var(--mpk-space-md);
  font-family: var(--mpk-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mpk-text-muted);
  border: 1px solid transparent;
}

.mpk-rail-link:hover {
  color: var(--mpk-text);
  background-color: var(--mpk-surface-2);
  border-color: var(--mpk-rule);
}

.mpk-rail-link.is-active {
  color: var(--mpk-accent-ink);
  background-color: var(--mpk-accent);
  border-color: var(--mpk-accent);
}

.mpk-rail-footer {
  padding: var(--mpk-space-md);
  border-top: 1px solid var(--mpk-rule);
  font-family: var(--mpk-font-mono);
  font-size: 0.8rem;
  color: var(--mpk-text-dim);
}

/* Mobile Topbar & Drawer Controller */
.mpk-topbar {
  display: none;
  height: var(--mpk-topbar-h);
  background-color: var(--mpk-surface);
  border-bottom: 1px solid var(--mpk-rule);
  padding: 0 var(--mpk-space-md);
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 120;
}

.mpk-drawer-toggle {
  display: none;
}

.mpk-drawer-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-rule);
  padding: 8px;
  cursor: pointer;
}

.mpk-drawer-bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--mpk-text);
}

/* Main Content Area */
.mpk-main-wrap {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Hero H6 Photographic fold */
.mpk-hero {
  position: relative;
  background-color: var(--mpk-surface);
  border-bottom: 1px solid var(--mpk-rule);
}

.mpk-hero-banner-box {
  width: 100%;
  background-color: var(--mpk-surface);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.mpk-hero-banner-img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  aspect-ratio: 1500 / 600;
}

.mpk-hero-caption {
  padding: var(--mpk-space-xl) var(--mpk-space-lg);
  max-width: var(--mpk-content-max);
  margin: 0 auto;
}

.mpk-eyebrow {
  display: inline-block;
  font-family: var(--mpk-font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--mpk-accent-micro);
  letter-spacing: 0.08em;
  margin-bottom: var(--mpk-space-xs);
}

.mpk-h1 {
  font-family: var(--mpk-font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--mpk-text);
  margin-bottom: var(--mpk-space-sm);
  overflow-wrap: anywhere;
  min-width: 0;
}

.mpk-lead {
  font-size: 1.15rem;
  color: var(--mpk-text-muted);
  max-width: 72ch;
  margin-bottom: var(--mpk-space-lg);
}

.mpk-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--mpk-space-md);
  flex-wrap: wrap;
}

/* Buttons */
.mpk-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  background-color: var(--mpk-accent);
  color: var(--mpk-accent-ink);
  font-family: var(--mpk-font-display);
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--mpk-accent);
  cursor: pointer;
}

.mpk-btn-primary:hover {
  background-color: var(--mpk-accent-hover);
  border-color: var(--mpk-accent-hover);
}

.mpk-link-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--mpk-space-2xs);
  color: var(--mpk-text);
  font-family: var(--mpk-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--mpk-accent);
  padding-bottom: 2px;
}

.mpk-link-secondary:hover {
  color: var(--mpk-accent);
}

/* Bleed-Colour Block Divider */
.mpk-bleed-divider {
  width: 100%;
  height: 8px;
  background-color: var(--mpk-accent);
  margin: var(--mpk-space-xl) 0;
}

/* Section Header (Bottom-Anchored) */
.mpk-section-anchor {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--mpk-space-xl);
  padding-bottom: var(--mpk-space-sm);
  border-bottom: 1px solid var(--mpk-rule);
}

/* Category Quick Strip */

/* Blog Article Cards Grid (1366: 3 cols, tablet: 2 cols, mobile: 1 col) */
.mpk-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mpk-space-lg);
  margin-bottom: var(--mpk-space-2xl);
}

.mpk-card {
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-rule);
  display: flex;
  flex-direction: column;
  padding: var(--mpk-space-lg);
  position: relative;
}

.mpk-card:hover {
  border-color: var(--mpk-rule-light);
}

.mpk-card--textonly {
  background: var(--mpk-surface);
  border-left: 4px solid var(--mpk-accent);
}

.mpk-card-aspect-holder {
  width: 100%;
  aspect-ratio: 1200 / 750;
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-rule);
  margin-bottom: var(--mpk-space-md);
  padding: var(--mpk-space-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mpk-card-category-badge {
  font-family: var(--mpk-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--mpk-accent);
  letter-spacing: 0.05em;
}

.mpk-card-ref-num {
  font-family: var(--mpk-font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--mpk-text-dim);
  align-self: flex-end;
}

.mpk-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.mpk-card-meta {
  font-family: var(--mpk-font-mono);
  font-size: 0.8rem;
  color: var(--mpk-text-dim);
  margin-bottom: var(--mpk-space-xs);
}

.mpk-card-title {
  font-family: var(--mpk-font-display);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--mpk-text);
  margin-bottom: var(--mpk-space-sm);
}

.mpk-card-title a {
  color: inherit;
}

.mpk-card-title a:hover {
  color: var(--mpk-accent);
}

.mpk-card-excerpt {
  font-size: 0.95rem;
  color: var(--mpk-text-muted);
  line-height: 1.5;
  margin-bottom: var(--mpk-space-md);
  flex-grow: 1;
}

.mpk-card-footer {
  padding-top: var(--mpk-space-sm);
  border-top: 1px solid var(--mpk-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mpk-card-link {
  font-family: var(--mpk-font-display);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mpk-accent);
  letter-spacing: 0.05em;
}

.mpk-card-link:hover {
  color: var(--mpk-accent-hover);
}

/* Pagination Strip */
.mpk-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mpk-space-xs);
  margin: var(--mpk-space-xl) 0 var(--mpk-space-md);
}

.mpk-page-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--mpk-space-sm);
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-rule);
  color: var(--mpk-text);
  font-family: var(--mpk-font-mono);
  font-size: 0.95rem;
  font-weight: 600;
}

.mpk-page-item:hover {
  border-color: var(--mpk-accent);
  color: var(--mpk-accent);
}

.mpk-page-item.is-active {
  background-color: var(--mpk-accent);
  border-color: var(--mpk-accent);
  color: var(--mpk-accent-ink);
}

.mpk-pager-note {
  text-align: center;
  font-family: var(--mpk-font-mono);
  font-size: 0.85rem;
  color: var(--mpk-text-dim);
  margin-bottom: var(--mpk-space-2xl);
}

/* Jackpot Banner Strip */
.mpk-jackpot-strip {
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-rule);
  padding: var(--mpk-space-lg);
  margin-bottom: var(--mpk-space-3xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mpk-space-xl);
}

.mpk-jackpot-media {
  max-width: 540px;
  width: 100%;
}

.mpk-jackpot-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1334 / 262;
  object-fit: contain;
}

.mpk-jackpot-copy {
  display: flex;
  flex-direction: column;
  gap: var(--mpk-space-xs);
}

.mpk-jackpot-title {
  font-family: var(--mpk-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--mpk-text);
}

.mpk-jackpot-desc {
  font-size: 0.95rem;
  color: var(--mpk-text-muted);
}

@media (max-width: 1080px) {
.mpk-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
.mpk-rail {
    display: none;
    position: fixed;
    top: var(--mpk-topbar-h);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--mpk-topbar-h));
    background-color: var(--mpk-bg);
  }

.mpk-drawer-toggle:checked ~ .mpk-shell .mpk-rail {
    display: flex;
  }

.mpk-topbar {
    display: flex;
  }

.mpk-jackpot-strip {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 540px) {
.mpk-blog-grid {
    grid-template-columns: 1fr;
  }

}

/* === promo-trio, tile grid, checkin table, providers, long-form, footer, solid buttons (from index.html) === */
.mpk-btn-solid {
  background-color: var(--mpk-accent);
  color: var(--mpk-accent-ink);
  font-family: var(--mpk-font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: var(--mpk-space-xs) var(--mpk-space-lg);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mpk-btn-solid:hover {
  background-color: var(--mpk-accent-hover);
}

/* Bleed Divider Block (Accent bleed divider language) */
.mpk-divider-bleed {
  height: 4px;
  background-color: var(--mpk-accent);
  width: 100%;
}

.mpk-btn-hero {
  background-color: var(--mpk-accent);
  color: var(--mpk-accent-ink);
  font-family: var(--mpk-font-display);
  font-size: 1.125rem;
  font-weight: 800;
  padding: var(--mpk-space-md) var(--mpk-space-2xl);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mpk-btn-hero:hover {
  background-color: var(--mpk-accent-hover);
}

/* 4. Promo Trio (3 cards) */
.mpk-promo-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mpk-space-lg);
}

.mpk-promo-card {
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-rule);
  padding: var(--mpk-space-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mpk-promo-card:hover {
  border-color: var(--mpk-accent);
}

.mpk-promo-card__terms {
  font-family: var(--mpk-font-mono);
  font-size: 0.875rem;
  color: var(--mpk-text-muted);
  margin-bottom: var(--mpk-space-sm);
  line-height: 1.4;
}

.mpk-promo-card__figure {
  font-family: var(--mpk-font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--mpk-accent);
  line-height: 1.1;
  margin-bottom: var(--mpk-space-lg);
}

.mpk-promo-card__link {
  font-family: var(--mpk-font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--mpk-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
}

.mpk-promo-card__link:hover {
  color: var(--mpk-accent);
}

/* 6. Game Tile Grid (18 tiles, 3 rows x 6) */
.mpk-grid-games {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--mpk-space-md);
}

.mpk-tile {
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-rule);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mpk-tile:hover {
  border-color: var(--mpk-rule-light);
}

.mpk-tile__img {
  width: 100%;
  height: auto;
  aspect-ratio: 376 / 250;
  object-fit: cover;
  display: block;
}

.mpk-tile__cap {
  padding: var(--mpk-space-xs) var(--mpk-space-sm);
  font-size: 0.8125rem;
  font-family: var(--mpk-font-body);
  font-weight: 600;
  color: var(--mpk-text-muted);
  border-top: 1px solid var(--mpk-rule);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: var(--mpk-surface-2);
}

/* 6b. Category Strip (Thin row of 5 icons) */
.mpk-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--mpk-space-md);
  padding: var(--mpk-space-lg) var(--mpk-space-xl);
  background-color: var(--mpk-surface);
  border-bottom: 1px solid var(--mpk-rule);
}

.mpk-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--mpk-space-sm);
  background-color: var(--mpk-bg);
  border: 1px solid var(--mpk-rule);
  text-align: center;
}

.mpk-strip__icon {
  width: 100px;
  height: auto;
  aspect-ratio: 220 / 130;
  object-fit: contain;
  margin-bottom: var(--mpk-space-2xs);
}

.mpk-strip__label {
  font-family: var(--mpk-font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--mpk-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* 7. Daily Check-in Table */
.mpk-table-wrap {
  overflow-x: auto;
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-rule);
}

.mpk-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9375rem;
}

.mpk-table th, .mpk-table td {
  padding: var(--mpk-space-sm) var(--mpk-space-lg);
  border-bottom: 1px solid var(--mpk-rule);
}

.mpk-table th {
  background-color: var(--mpk-surface-2);
  font-family: var(--mpk-font-display);
  font-weight: 700;
  color: var(--mpk-text);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mpk-table td.mpk-table__mono {
  font-family: var(--mpk-font-mono);
  font-weight: 600;
  color: var(--mpk-accent-micro);
  font-variant-numeric: tabular-nums;
}

.mpk-table tr:last-child td {
  border-bottom: none;
}

.mpk-table tr.mpk-table__total-row {
  background-color: var(--mpk-surface-3);
  font-weight: 700;
}

.mpk-table tr.mpk-table__total-row td {
  color: var(--mpk-text);
  font-size: 1.0625rem;
}

.mpk-table tr.mpk-table__total-row td.mpk-table__mono {
  color: var(--mpk-accent);
  font-size: 1.125rem;
}

/* 9. Provider Logo Wall (T2 Hairline Style) */
.mpk-providers-grid {
  display: grid;
  /* 4 across, not 6: at 6 the cell was 166px so max-width:200px could never
     apply and every logo stayed at 142px. 12 logos / 4 = 3 clean rows. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background-color: var(--mpk-rule);
  gap: 1px;
  border: 1px solid var(--mpk-rule);
}

.mpk-provider-cell {
  background-color: var(--mpk-surface);
  padding: var(--mpk-space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
}

.mpk-provider-cell__img {
  /* no CSS aspect-ratio on purpose: the 12 logos are 484x244, 501x500, 291x185
     and 501x501, so one forced square ratio letterboxed every wide logo. The
     width/height attributes carry each real ratio; height:auto keeps it. */
  width: 100%;
  max-width: 200px;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: var(--mpk-shadow-logo);
}

/* 10. Long-Form Read-More Slot */
.mpk-lf {
  position: relative;
}

.mpk-lf__body {
  max-height: 420px;
  overflow: hidden;
  position: relative;
}

.mpk-lf__body::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, var(--mpk-surface));
  pointer-events: none;
}

.mpk-lf__body--expanded {
  max-height: none;
}

.mpk-lf__body--expanded::after {
  display: none;
}

.mpk-lf__article {
  max-width: 100%;
  padding: 24px;
}

.mpk-lf__h2 {
  font-family: var(--mpk-font-display);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--mpk-text);
  margin-bottom: var(--mpk-space-md);
}

.mpk-lf__h3 {
  font-family: var(--mpk-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--mpk-text);
  margin-top: var(--mpk-space-lg);
  margin-bottom: var(--mpk-space-xs);
}

.mpk-lf__p {
  color: var(--mpk-text-muted);
  margin-bottom: var(--mpk-space-md);
  line-height: 1.6;
}

.mpk-lf__list {
  margin-left: var(--mpk-space-lg);
  margin-bottom: var(--mpk-space-md);
  color: var(--mpk-text-muted);
}

.mpk-lf__list li {
  margin-bottom: var(--mpk-space-2xs);
}

.mpk-lf__toggle-wrap {
  margin-top: var(--mpk-space-lg);
  text-align: left;
}

.mpk-lf__toggle {
  background-color: var(--mpk-surface-2);
  border: 1px solid var(--mpk-rule-light);
  color: var(--mpk-text);
  font-family: var(--mpk-font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: var(--mpk-space-xs) var(--mpk-space-lg);
  cursor: pointer;
  border-radius: 4px;
}

.mpk-lf__toggle:hover {
  background-color: var(--mpk-surface-3);
  border-color: var(--mpk-accent);
}

/* 11. Footer (Ft3 Index Broken Shape) */
.mpk-footer {
  background-color: var(--mpk-surface);
  border-top: 2px solid var(--mpk-accent);
  padding: 2rem var(--mpk-space-xl);
}

.mpk-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 2.2fr 1.6fr;
  gap: var(--mpk-space-2xl);
  margin-bottom: var(--mpk-space-2xl);
}

.mpk-footer__col-brand {
  display: flex;
  flex-direction: column;
  gap: var(--mpk-space-md);
}

.mpk-footer__mark {
  width: 54px;
  height: 54px;
  aspect-ratio: 1 / 1;
}

.mpk-footer__brand-text {
  font-size: 0.875rem;
  color: var(--mpk-text-muted);
  line-height: 1.5;
}

.mpk-footer__col-title {
  font-family: var(--mpk-font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--mpk-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--mpk-space-md);
}

.mpk-footer__nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--mpk-space-xs);
}

.mpk-footer__nav a {
  font-size: 0.875rem;
  color: var(--mpk-text-muted);
}

.mpk-footer__nav a:hover {
  color: var(--mpk-accent);
}

.mpk-footer__col-rg {
  background-color: var(--mpk-bg);
  border: 1px solid var(--mpk-rule);
  padding: var(--mpk-space-lg);
}

.mpk-footer__rg-text {
  font-size: 0.875rem;
  color: var(--mpk-text-muted);
  line-height: 1.6;
  margin-bottom: var(--mpk-space-sm);
}

.mpk-footer__rg-badge {
  display: inline-block;
  font-family: var(--mpk-font-mono);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--mpk-accent-micro);
  border: 1px solid var(--mpk-rule);
  padding: 2px 8px;
  margin-right: var(--mpk-space-xs);
}

.mpk-footer__col-legal {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mpk-footer__copyright {
  font-size: 0.875rem;
  color: var(--mpk-text-muted);
  margin-top: var(--mpk-space-lg);
}

@media (max-width: 1200px) {
.mpk-grid-games {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

.mpk-providers-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

.mpk-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--mpk-space-xl);
  }
}

@media (max-width: 860px) {
.mpk-promo-trio {
    grid-template-columns: 1fr;
  }

.mpk-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

.mpk-providers-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

.mpk-footer__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
.mpk-grid-games {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mpk-space-2xs);
  }

.mpk-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--mpk-space-md);
  }

.mpk-providers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* === breadcrumb (from hub.html) === */
/* Breadcrumb Component */
.mpk-breadcrumb {
  padding: var(--mpk-space-md) 0;
  border-bottom: 1px solid var(--mpk-rule);
  background-color: var(--mpk-bg);
}

.mpk-breadcrumb-list {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mpk-space-xs);
  font-family: var(--mpk-font-mono);
  font-size: 0.8125rem;
  color: var(--mpk-text-dim);
}

.mpk-breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--mpk-space-xs);
}

.mpk-breadcrumb-item a {
  color: var(--mpk-text-muted);
}

.mpk-breadcrumb-item a:hover {
  color: var(--mpk-accent);
}

.mpk-breadcrumb-current {
  color: var(--mpk-text);
  font-weight: 700;
}

/* === feature cards (renamed from index.html 
.mpk-feature-panel {
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-rule);
  overflow: hidden;
}

@media (max-width: 720px) {
  .mpk-feature-grid { grid-template-columns: 1fr; }
}

/* === blog card thumbnail (1200x750 locked ratio, textonly fallback) === */
.mpk-card-thumb-wrap {
  aspect-ratio: 1200 / 750;
  overflow: hidden;
  background-color: var(--mpk-surface-2);
}
.mpk-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1200 / 750;
}

/* === breadcrumb wrap on non-home templates === */
.mpk-breadcrumb-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--mpk-space-xl);
}

/* === article body (the_content) typography, real h1-h6 live only here === */
.mpk-lf__body h1 { font-size: 2rem; }
.mpk-lf__body h2 { font-family: var(--mpk-font-display); font-size: 1.5rem; margin: var(--mpk-space-xl) 0 var(--mpk-space-sm); }
.mpk-lf__body h3 { font-family: var(--mpk-font-display); font-size: 1.2rem; margin: var(--mpk-space-lg) 0 var(--mpk-space-sm); }
.mpk-lf__body p { margin: 0 0 var(--mpk-space-md); color: var(--mpk-text-muted); }
.mpk-lf__body ul, .mpk-lf__body ol { margin: 0 0 var(--mpk-space-md); padding-left: 1.4rem; color: var(--mpk-text-muted); }
.mpk-lf__body b span { font-weight: inherit !important; }
.mpk-lf__body table { width: 100%; border-collapse: collapse; margin: 0 0 var(--mpk-space-md); }
.mpk-lf__body table td, .mpk-lf__body table th { border: 1px solid var(--mpk-rule); padding: var(--mpk-space-xs) var(--mpk-space-sm); font-size: 0.9375rem; }
.mpk-guideindex { margin-top: var(--mpk-space-xl); border-top: 1px solid var(--mpk-rule); padding-top: var(--mpk-space-lg); }
.mpk-guideindex__head { font-family: var(--mpk-font-display); }
.mpk-guideindex__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--mpk-space-sm); }
.mpk-guideindex__item { display: flex; flex-direction: column; gap: 2px; }
.mpk-guideindex__link { font-family: var(--mpk-font-display); font-weight: 700; color: var(--mpk-accent); }
.mpk-guideindex__note { font-size: 0.875rem; color: var(--mpk-text-dim); }

.mpk-page-hero {
  padding: var(--mpk-space-2xl) var(--mpk-space-xl) var(--mpk-space-xl);
  max-width: 1180px;
  margin: 0 auto;
}
.mpk-page-hero__kicker { font-family: var(--mpk-font-mono); font-size: 0.8125rem; color: var(--mpk-text-dim); text-transform: uppercase; letter-spacing: 0.06em; }

/* long-form read-more: plan mandates SSR-expanded by default, JS ADDS the
   clamp after load (opposite of the demo's CSS-default-clamped pattern) so a
   no-JS / bot fetch sees the complete article, not a 420px-tall crop. */
.mpk-lf__body { max-height: none; overflow: visible; position: relative; }
.mpk-lf__body::after { content: none; }
.mpk-lf__body--clamped {
  max-height: 420px;
  overflow: hidden;
}
.mpk-lf__body--clamped::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, var(--mpk-surface));
  pointer-events: none;
}

/* === section wrapper + bottom-anchored section head, S5 (from index.html), and
       section-title/desc (from blog.html catalogue head) === */
/* Sections Common */
.mpk-section {
  padding: 2rem var(--mpk-space-md);
  border-bottom: 1px solid var(--mpk-rule);
}

.mpk-section-title {
  font-family: var(--mpk-font-display);
  font-size: 1.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--mpk-text-main);
}

.mpk-section-desc {
  font-size: 0.95rem;
  color: var(--mpk-text-dim);
  font-family: var(--mpk-font-mono);
}
/* === accessibility: skip-to-content link, visually hidden until focus === */
.mpk-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background-color: var(--mpk-accent);
  color: var(--mpk-accent-ink);
  padding: var(--mpk-space-sm) var(--mpk-space-lg);
  z-index: var(--mpk-z-drawer);
  font-family: var(--mpk-font-display);
  font-weight: 700;
}
.mpk-skip-link:focus {
  left: var(--mpk-space-md);
  top: var(--mpk-space-md);
}

/* 2 category card: typographic, khong dung anh nen. Banner brand co chu khuyen mai
   nuong san ("...ONUS", "0%") -> crop giua chu. Phuc hoi hinh hoc tu demo/index.html
   sau khi mot lan don CSS bang regex an lan sang rule ben canh. */
.mpk-feature-grid {
  display: grid;
  /* Columns are weighted by each banner's own aspect ratio (800x500 = 1.6,
     1400x400 = 3.5) so the two images end up the SAME rendered height without
     cropping either one - both carry baked-in promo text, so object-fit:cover
     would cut through it. Swap these numbers if the banners are replaced. */
  grid-template-columns: 1.6fr 3.5fr;
  gap: var(--mpk-space-lg);
  align-items: start;
}
.mpk-feature-panel {
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-rule);
  border-left: 3px solid var(--mpk-accent);
  padding: 0;
  overflow: hidden;
}
.mpk-feature-panel__link {
  display: block;
}

.mpk-feature-panel__art {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 860px) {
  .mpk-feature-grid { grid-template-columns: 1fr; }
}

/* blog catalogue head: breathing room requested on the live review */
#article-catalogue {
  padding: 18px;
}


/* WordPress puts .wp-post-image on every the_post_thumbnail() output; the look
   comes from .mpk-card-thumb, this only pins the box model. */
.wp-post-image {
  display: block;
  max-width: 100%;
}

/* promotions page art, pulled from the origin site's own promo banners
   (1500x150 section strips + one 1000x357 header). Deliberately NOT named
   *card*: gate_onpage measures anything with 'card' in its own or a parent's
   class against the locked 1200/750 blog-card ratio. */
.mpk-promo-hero {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 var(--mpk-space-lg);
  border: 1px solid var(--mpk-rule);
}

.mpk-promo-strip {
  width: 100%;
  height: auto;
  display: block;
  margin: var(--mpk-space-xl) 0 var(--mpk-space-xs);
}

/* promotions banner wall: 8 origin promo banners, all 2.80 ratio, so a plain
   2-up grid keeps every row the same height with no cropping. Not named
   *card* (gate_onpage would measure them against the 1200/750 blog ratio). */
.mpk-promo-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mpk-space-md);
  margin: var(--mpk-space-md) 0 var(--mpk-space-xl);
}

.mpk-promo-wall__cell {
  display: block;
  min-width: 0;
}

.mpk-promo-banner {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--mpk-rule);
}

@media (max-width: 860px) {
  .mpk-promo-wall {
    grid-template-columns: 1fr;
  }
}

/* Login / Register pair: in the rail's Main navigation on desktop, in the
   topbar once the rail collapses into the drawer at 860px. */
.mpk-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mpk-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: var(--mpk-space-xs) var(--mpk-space-md);
  border: 1px solid var(--mpk-rule-light);
  color: var(--mpk-text);
  white-space: nowrap;
}

.mpk-auth-btn--primary {
  background-color: var(--mpk-accent);
  border-color: var(--mpk-accent);
  color: var(--mpk-accent-ink);
}

.mpk-auth-btn--primary:hover {
  background-color: var(--mpk-accent-hover);
  border-color: var(--mpk-accent-hover);
}

.mpk-auth-btn--ghost:hover {
  border-color: var(--mpk-accent);
  color: var(--mpk-accent);
}

.mpk-rail-auth {
  display: flex;
  flex-direction: column;
  gap: var(--mpk-space-xs);
  margin-top: var(--mpk-space-md);
  padding-top: var(--mpk-space-md);
  border-top: 1px solid var(--mpk-rule);
}

.mpk-topbar__auth {
  display: none;
  gap: var(--mpk-space-xs);
  align-items: center;
  margin-left: auto;
  margin-right: var(--mpk-space-sm);
}

@media (max-width: 860px) {
  .mpk-topbar__auth {
    display: flex;
  }

  .mpk-rail-auth {
    display: none;
  }
}

@media (max-width: 400px) {
  .mpk-auth-btn {
    font-size: 0.6875rem;
    padding: var(--mpk-space-2xs) var(--mpk-space-xs);
    letter-spacing: 0.02em;
  }
}

/* Studio pages: a four-up specification strip. Values are written as text, not
   as invented figures - the only numbers allowed anywhere on this site are the
   ones in plan.json.facts, and studio catalogue sizes are not among them. */
.mpk-statgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mpk-space-xs);
  margin: var(--mpk-space-lg) 0 var(--mpk-space-xl);
}

.mpk-stat {
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-rule);
  border-top: 2px solid var(--mpk-accent);
  padding: var(--mpk-space-md);
}

.mpk-stat__label {
  font-family: var(--mpk-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mpk-text-dim);
  margin: 0 0 var(--mpk-space-2xs);
}

.mpk-stat__value {
  font-family: var(--mpk-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--mpk-text);
  margin: 0 0 var(--mpk-space-2xs);
}

.mpk-stat__desc {
  font-size: 0.8125rem;
  color: var(--mpk-text-muted);
  margin: 0;
}

/* studio wall on the hub: the same hairline cells as the home page, but each
   cell is a link when that studio has its own page. */
.mpk-studio-cell-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

@media (max-width: 860px) {
  .mpk-statgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================================
   Hover elevation layer
   ----------------------------------------------------------------------------
   Requested after reviewing auwincasino.digital, which lifts every card on
   hover. The technique is the same (transition on transform + border-color +
   box-shadow, no @keyframes anywhere, so the reveal=none axis still holds) but
   every number is this site's own: see the tokens for why.
   Elements sitting in the 1px hairline provider grid get the glow WITHOUT a
   lift, because moving a cell there exposes the grid's own background line.
   ========================================================================= */
.mpk-tile,
.mpk-card,
.mpk-promo-card,
.mpk-stat,
.mpk-feature-panel,
.mpk-promo-wall__cell,
.mpk-provider-cell {
  transition: transform var(--mpk-lift-time) var(--mpk-lift-ease),
              border-color var(--mpk-lift-time) var(--mpk-lift-ease),
              box-shadow var(--mpk-lift-time) var(--mpk-lift-ease);
}

.mpk-tile:hover,
.mpk-card:hover,
.mpk-promo-wall__cell:hover {
  transform: translateY(var(--mpk-lift-y));
  box-shadow: var(--mpk-shadow-lift);
  border-color: var(--mpk-rule-light);
}

.mpk-promo-card:hover {
  transform: translateY(var(--mpk-lift-y));
  box-shadow: var(--mpk-shadow-lift);
}

/* .mpk-stat keeps its accent top rule and .mpk-feature-panel its accent left
   rule: a blanket border-color on hover would wipe both out. */
.mpk-stat:hover {
  transform: translateY(var(--mpk-lift-y));
  box-shadow: var(--mpk-shadow-lift);
  border-color: var(--mpk-rule-light);
  border-top-color: var(--mpk-accent);
}

.mpk-feature-panel:hover {
  transform: translateY(var(--mpk-lift-y));
  box-shadow: var(--mpk-shadow-lift);
  border-color: var(--mpk-rule-light);
  border-left-color: var(--mpk-accent);
}

.mpk-provider-cell:hover {
  box-shadow: var(--mpk-shadow-lift);
  position: relative;
  z-index: var(--mpk-z-raised);
}

/* Buttons: a ring plus a short glow, no vertical movement. The sibling site
   moves its buttons; keeping ours still is part of the difference. */
.mpk-btn-primary,
.mpk-btn-solid,
.mpk-btn-hero,
.mpk-auth-btn {
  transition: background-color var(--mpk-lift-time) var(--mpk-lift-ease),
              border-color var(--mpk-lift-time) var(--mpk-lift-ease),
              color var(--mpk-lift-time) var(--mpk-lift-ease),
              box-shadow var(--mpk-lift-time) var(--mpk-lift-ease);
}

.mpk-btn-primary:hover,
.mpk-btn-solid:hover,
.mpk-btn-hero:hover,
.mpk-auth-btn--primary:hover,
.mpk-auth-btn--ghost:hover {
  box-shadow: var(--mpk-shadow-ring);
}

/* Anyone who has asked their system to stop moving things gets the colour
   change only. */
@media (prefers-reduced-motion: reduce) {
  .mpk-tile,
  .mpk-card,
  .mpk-promo-card,
  .mpk-stat,
  .mpk-feature-panel,
  .mpk-promo-wall__cell,
  .mpk-provider-cell,
  .mpk-btn-primary,
  .mpk-btn-solid,
  .mpk-btn-hero,
  .mpk-auth-btn {
    transition: none;
  }

  .mpk-tile:hover,
  .mpk-card:hover,
  .mpk-promo-card:hover,
  .mpk-stat:hover,
  .mpk-feature-panel:hover,
  .mpk-promo-wall__cell:hover {
    transform: none;
  }
}

/* ============================================================================
   Rail navigation: tier-1 hub + its tier-2 children
   ----------------------------------------------------------------------------
   Built from the WordPress menu at location mpk_main (MPK_Rail_Walker), so the
   order is editable in Appearance > Menus.

   The child list opens ON CLICK and there is no JavaScript in it: a hidden
   checkbox sits in front of the group and the label next to the hub link is its
   control, the same pattern the mobile drawer already uses. Deliberately not
   hover - a hover-only dropdown is unusable on a touch screen and it was the
   one thing asked to be changed. The hub itself stays a real link, which is why
   this is a checkbox and not a <details>/<summary>: a summary would swallow the
   click that should navigate.

   The checkbox is rendered already `checked` when the visitor is inside that
   section, so the current branch is open on first paint with no layout jump.
   ========================================================================= */
.mpk-rail-nav {
  overflow-y: auto;
}

.mpk-rail-group {
  display: flex;
  flex-direction: column;
}

/* Visually hidden but still focusable: Tab reaches it, Space opens the list. */
.mpk-sub-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mpk-rail-row {
  display: flex;
  align-items: stretch;
  gap: var(--mpk-space-2xs);
}

.mpk-rail-row > .mpk-rail-link {
  flex: 1 1 auto;
  min-width: 0;
}

.mpk-sub-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--mpk-text-dim);
}

.mpk-sub-btn:hover {
  color: var(--mpk-accent);
  border-color: var(--mpk-rule);
}

/* The caret is drawn, not typed, so no glyph coverage question in the subset. */
.mpk-sub-btn__mark {
  display: block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.mpk-sub-toggle:checked ~ .mpk-rail-row .mpk-sub-btn {
  color: var(--mpk-accent);
}

.mpk-sub-toggle:checked ~ .mpk-rail-row .mpk-sub-btn__mark {
  transform: rotate(45deg);
}

.mpk-sub-toggle:focus-visible ~ .mpk-rail-row .mpk-sub-btn {
  border-color: var(--mpk-focus);
  color: var(--mpk-text);
}

.mpk-rail-sub {
  display: none;
  list-style: none;
  margin: var(--mpk-space-2xs) 0 var(--mpk-space-xs);
  padding: 0 0 0 var(--mpk-space-md);
  border-left: 1px solid var(--mpk-rule);
}

.mpk-sub-toggle:checked ~ .mpk-rail-sub {
  display: block;
}

.mpk-rail-subitem {
  margin: 0;
}

.mpk-rail-sublink {
  display: block;
  padding: var(--mpk-space-2xs) var(--mpk-space-xs);
  font-family: var(--mpk-font-body);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--mpk-text-dim);
  text-decoration: none;
  border-left: 2px solid transparent;
}

.mpk-rail-sublink:hover {
  color: var(--mpk-text);
  border-left-color: var(--mpk-accent);
}

.mpk-rail-sublink.is-active {
  color: var(--mpk-accent);
  border-left-color: var(--mpk-accent);
}

/* Touch target: 34px is fine for a mouse, not for a thumb. */
@media (max-width: 860px) {
  .mpk-sub-btn {
    width: 46px;
  }
}

/* ============================================================================
   Operator lobby cells (JILI)
   ----------------------------------------------------------------------------
   A second locked thumbnail ratio. The 28 tiles in .mpk-tile are 376x250; these
   come straight from the operator's own game list and are 552x380, which is far
   enough out of tolerance that reusing .mpk-tile would fail gate_onpage's
   ratio check. Separate class family, own ratio, and no 'card' in the name -
   a parent class matching /card/ would make the gate measure these against the
   1200x750 blog ratio instead.
   ========================================================================= */
.mpk-gcell {
  background-color: var(--mpk-surface);
  border: 1px solid var(--mpk-rule);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--mpk-lift-time) var(--mpk-lift-ease),
              border-color var(--mpk-lift-time) var(--mpk-lift-ease),
              box-shadow var(--mpk-lift-time) var(--mpk-lift-ease);
}

.mpk-gcell:hover {
  transform: translateY(var(--mpk-lift-y));
  box-shadow: var(--mpk-shadow-lift);
  border-color: var(--mpk-rule-light);
}

.mpk-gcell__img {
  width: 100%;
  height: auto;
  aspect-ratio: 552 / 380;
  object-fit: cover;
  display: block;
}

.mpk-gcell__cap {
  padding: var(--mpk-space-xs) var(--mpk-space-sm);
  font-size: 0.8125rem;
  font-family: var(--mpk-font-body);
  font-weight: 600;
  color: var(--mpk-text-muted);
  border-top: 1px solid var(--mpk-rule);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: var(--mpk-surface-2);
}

@media (prefers-reduced-motion: reduce) {
  .mpk-gcell {
    transition: none;
  }

  .mpk-gcell:hover {
    transform: none;
  }
}

/* Live studio cards: portrait 286x380 provider art, four across. Third locked
   ratio on this site (376x250 tiles, 552x380 operator cells, 286x400 here), so
   again its own class family rather than reusing either of the others. */
.mpk-scell-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mpk-space-md);
  margin: var(--mpk-space-md) 0 var(--mpk-space-xl);
}

.mpk-scell {
  border: 1px solid var(--mpk-rule);
  background-color: var(--mpk-surface);
  overflow: hidden;
  transition: transform var(--mpk-lift-time) var(--mpk-lift-ease),
              border-color var(--mpk-lift-time) var(--mpk-lift-ease),
              box-shadow var(--mpk-lift-time) var(--mpk-lift-ease);
}

.mpk-scell:hover {
  transform: translateY(var(--mpk-lift-y));
  box-shadow: var(--mpk-shadow-lift);
  border-color: var(--mpk-rule-light);
}

.mpk-scell__img {
  width: 100%;
  height: auto;
  aspect-ratio: 286 / 400;
  object-fit: cover;
  display: block;
}

.mpk-scell__cap {
  padding: var(--mpk-space-xs) var(--mpk-space-sm);
  font-family: var(--mpk-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mpk-text-muted);
  border-top: 1px solid var(--mpk-rule);
  background-color: var(--mpk-surface-2);
  text-align: center;
}

@media (max-width: 860px) {
  .mpk-scell-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mpk-scell {
    transition: none;
  }

  .mpk-scell:hover {
    transform: none;
  }
}