/* ============================================================
   MEA Reviews — Ranked list (category page). Rewritten from
   scratch: mobile-first, IBM Carbon (flat, sharp), one spacing
   scale (--sp-*). Row = a card that reflows via grid-areas.
   ============================================================ */
.mea-rank { --rk: var(--pg-accent); padding: var(--sp-section) 0; background: var(--pg-bg); color: var(--pg-text); }
.mea-rank--casino  { --rk: #0f62fe; }
.mea-rank--betting { --rk: #0043ce; }
.mea-rank--slots   { --rk: #8a3ffc; }
.mea-rank--crash   { --rk: #da1e28; }

.mea-rank__inner { max-width: var(--pg-wrap); margin: 0 auto; padding: 0 var(--pg-gutter); }

/* ---- section heading ---- */
.mea-rank__head { max-width: 64ch; margin: 0 0 var(--sp-6); }
.mea-rank__kicker { display: inline-block; font-family: var(--pg-mono); font-size: .78rem; color: var(--pg-muted); margin-bottom: var(--sp-3); }
.mea-rank__title { margin: 0 0 var(--sp-3); font-size: clamp(1.5rem, 1.2rem + 2vw, 2.25rem); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.mea-rank__sub { margin: 0; color: var(--pg-muted); font-size: 1rem; line-height: 1.55; }

/* ---- list ---- */
.mea-rank__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }

/* ---- row (card) — mobile-first grid ---- */
.mea-rank__row {
  position: relative;
  background: var(--pg-surface);
  border: 1px solid var(--pg-border);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "pos    brand"
    "rating rating"
    "bonus  bonus"
    "cta    cta";
  column-gap: var(--sp-4);
  row-gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5) var(--sp-4);
  transition: border-color .15s;
}
.mea-rank__row:hover { border-color: var(--rk); }

/* position badge */
.mea-rank__pos {
  grid-area: pos; align-self: start;
  display: inline-flex; align-items: center; gap: 2px; justify-content: center;
  min-width: 2.75rem; height: 2.75rem; padding: 0 var(--sp-2);
  background: var(--pg-surface-2); border: 1px solid var(--pg-border);
  color: var(--pg-ink-2); font-family: var(--pg-mono); font-weight: 500; font-size: 1rem;
}
.mea-rank__pos svg { width: 1rem; height: 1rem; color: var(--rk); }

/* brand column: logo + name + tags */
.mea-rank__brandcol { grid-area: brand; display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.mea-rank__avatar {
  flex: 0 0 auto; width: 3.9rem; height: 3.9rem; display: inline-flex; align-items: center; justify-content: center;
  background: #ffffff; border: 1px solid var(--pg-border);
  box-shadow: 0 4px 12px -9px rgba(15,98,254,.4);
  font-family: var(--pg-mono); font-weight: 500; font-size: .9rem; color: var(--pg-muted); overflow: hidden;
}
.mea-rank__avatar img { width: 100%; height: 100%; object-fit: cover; }
.mea-rank__id { min-width: 0; }
.mea-rank__brand { margin: 0; font-size: 1.1rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.mea-rank__tags { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mea-rank__tag {
  display: inline-flex; align-items: center; padding: 2px var(--sp-2);
  background: var(--pg-surface); border: 1px solid var(--pg-border);
  color: var(--pg-muted); font-family: var(--pg-mono); font-size: .68rem; white-space: nowrap;
}

/* rating */
.mea-rank__ratingcol { grid-area: rating; display: flex; align-items: center; gap: var(--sp-3); }
.mea-rank__score { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--pg-text); }
.mea-rank__score small { font-size: .8rem; font-weight: 400; color: var(--pg-muted); }
.mea-rank__stars { display: inline-flex; gap: 1px; }
.mea-rank__stars svg { width: .95rem; height: .95rem; color: #f1a208; }
.mea-rank__stars svg.is-empty { color: var(--pg-border-strong); }

/* bonus */
.mea-rank__bonuscol { grid-area: bonus; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--pg-surface-2); border: 1px solid var(--pg-border); }
.mea-rank__bonuscol svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: var(--rk); }
.mea-rank__bonus { min-width: 0; line-height: 1.3; }
.mea-rank__bonuslabel { display: block; font-family: var(--pg-mono); font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: var(--pg-muted); }
.mea-rank__bonusval { display: block; font-size: 1rem; font-weight: 600; color: var(--pg-text); }

/* CTA */
.mea-rank__ctacol { grid-area: cta; display: flex; flex-direction: column; gap: var(--sp-2); }
.mea-rank__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-4); text-decoration: none; font-size: .95rem; font-weight: 400;
  border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s; white-space: nowrap;
}
.mea-rank__btn svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.mea-rank__btn--visit { background: var(--rk); color: #fff; justify-content: space-between; }
.mea-rank__btn--visit:hover { background: var(--pg-accent-ink); }
.mea-rank__btn--review { background: var(--pg-surface); color: var(--pg-text); border-color: var(--pg-border-strong); }
.mea-rank__btn--review:hover { border-color: var(--pg-text); background: var(--pg-surface-2); }

/* ---- #1 featured pick ---- */
.mea-rank__row--first { border: 2px solid var(--rk); padding-top: var(--sp-6); }
.mea-rank__row--first::before {
  content: "TOP PICK"; position: absolute; top: 0; left: 0;
  background: var(--rk); color: #fff; font-family: var(--pg-mono); font-size: .62rem; letter-spacing: .08em;
  font-weight: 500; padding: 3px var(--sp-3);
}
.mea-rank__row--first .mea-rank__avatar { width: 4.9rem; height: 4.9rem; }
.mea-rank__row--first .mea-rank__score { font-size: 1.9rem; }

/* ============================================================
   Desktop: one horizontal row
   ============================================================ */
@media (min-width: 880px) {
  .mea-rank__row {
    grid-template-columns: auto minmax(0, 1.5fr) auto minmax(0, 1.3fr) minmax(190px, auto);
    grid-template-areas: "pos brand rating bonus cta";
    column-gap: var(--sp-5); row-gap: 0;
    padding: var(--sp-4) var(--sp-5);
  }
  .mea-rank__row--first { padding-top: var(--sp-5); padding-left: var(--sp-6); }
  .mea-rank__ratingcol { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
  .mea-rank__ctacol { min-width: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .mea-rank__row, .mea-rank__btn { transition: none; }
}