/* Review card design — fully tokenized.
   Tokens come from style.css :root (--rc-*, --c-*).
   To retheme, override those tokens in :root or [data-theme="..."]. */

.c879ae1-casino-grid.c879ae1-card-style-horizontal-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  padding: 0.5rem 0;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 3rem;
  box-sizing: border-box;
}

.c879ae1-casino-grid.c879ae1-card-style-horizontal-container > .c879ae1-rev-card {
  width: 100%;
  box-sizing: border-box;
}

.c879ae1-rev-card {
  background: var(--rc-bg);
  border: 1px solid var(--rc-border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  color: var(--rc-fg);
  box-shadow: var(--rc-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.c879ae1-rev-card:hover {
  border-color: var(--rc-pos-border);
  box-shadow: var(--rc-shadow-hover);
}

.c879ae1-rev-card--exclusive {
  border-color: var(--rc-excl-border);
}

/* Head row: position, logo, title, exclusive badge.
   Fixed track widths rather than flex sizing: the rank bubble and the logo are
   the same size on every card, so the brand names all start at one x-position
   instead of stepping in and out down the list. */
.c879ae1-rev-card__head {
  display: grid;
  grid-template-columns: 28px 80px minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rc-divider);
}

.c879ae1-rev-card__pos {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--rc-pos-border);
  background: transparent;
  color: var(--rc-fg-muted);
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.c879ae1-rev-card__logo {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 14px;
  background: var(--rc-bg-elev);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
  box-sizing: border-box;
}

/* Awaiting artwork: a monogram reads as intentional where an empty tile
   reads as a failed image. Remove nothing when the real logo lands - the
   placeholder class simply stops being emitted. */
.c879ae1-rev-card__logo--placeholder {
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--rc-accent) 14%, var(--rc-bg-elev)),
              var(--rc-bg-elev));
  border: 1px solid var(--rc-divider);
}

.c879ae1-rev-card__logo-initial {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--rc-accent);
  opacity: 0.75;
}

/* The supplied logos are square tiles with their own solid background, not
   cut-out marks. Filling the box edge to edge stops a white tile sitting on a
   tinted panel with a mismatched ring around it. */
.c879ae1-rev-card__logo:not(.c879ae1-rev-card__logo--placeholder) {
  padding: 0;
  background: transparent;
}

.c879ae1-rev-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.c879ae1-rev-card__title {
  flex: 1 1 auto;
  min-width: 0;
}

.c879ae1-rev-card__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rc-fg);
  line-height: 1.2;
}

.c879ae1-rev-card__rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.c879ae1-rev-card__stars {
  display: inline-flex;
  gap: 1px;
  font-size: 0.95rem;
  letter-spacing: 1px;
  color: var(--rc-star-off);
}

.c879ae1-rev-card__star--on {
  color: var(--rc-star-on);
}

.c879ae1-rev-card__rating-num {
  color: var(--rc-fg-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.c879ae1-rev-card__excl {
  flex: 0 0 auto;
  align-self: flex-start;
  background: var(--rc-excl-bg);
  color: var(--rc-excl-fg);
  border: 1px solid var(--rc-excl-border);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

/* Stats row: min deposit + bonus.
   Two fixed tracks, not auto-fit: every card must put its deposit figure and
   its offer at the same x-position as the card above it, otherwise the column
   zig-zags down the page. The deposit column is a fixed width because the
   values are short and similar ("£10", "£20"); the bonus takes the rest. */
.c879ae1-rev-card__stats {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  column-gap: 1.5rem;
  row-gap: 0.75rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rc-divider);
}

/* The offer is the reason the card exists, so it is the one that gets the
   slack and sits hard right, lining up across every card in the list. */
.c879ae1-rev-card__stats .c879ae1-rev-card__stat:has(.c879ae1-rev-card__stat-value--bonus) {
  text-align: right;
  align-items: flex-end;
}

.c879ae1-rev-card__stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.c879ae1-rev-card__stat-label {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rc-fg-muted);
}

.c879ae1-rev-card__stat-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--rc-fg);
  line-height: 1.3;
}

.c879ae1-rev-card__stat-value--bonus {
  color: var(--rc-accent);
  font-weight: 800;
}

/* Foot row: promo + actions */
.c879ae1-rev-card__foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  flex-wrap: wrap;
}

.c879ae1-rev-card__promo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
}

.c879ae1-rev-card__promo-label {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rc-fg-muted);
}

.c879ae1-rev-card__promo-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--rc-accent-soft);
  border: 1px dashed var(--rc-accent);
  color: var(--rc-accent);
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.c879ae1-rev-card__promo-chip:hover {
  background: var(--rc-accent-soft);
  border-color: var(--rc-accent-strong);
  color: var(--rc-accent-strong);
}

.c879ae1-rev-card__promo-chip.c879ae1-copied {
  border-style: solid;
  border-color: var(--rc-accent);
  background: var(--rc-accent-soft);
  color: var(--rc-accent);
}

.c879ae1-rev-card__promo-code {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.c879ae1-rev-card__promo-icon {
  flex: 0 0 auto;
  opacity: 0.7;
}

.c879ae1-rev-card__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.c879ae1-rev-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--rc-fg);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.c879ae1-rev-card__btn--review {
  order: 2;
  background: var(--rc-review-btn-bg);
  border-color: var(--rc-review-btn-border);
  color: var(--rc-review-btn-fg);
  font-weight: 500;
}

.c879ae1-rev-card__btn--review:hover {
  background: var(--rc-review-btn-bg-hover);
  border-color: var(--rc-review-btn-border-hover);
  color: var(--rc-review-btn-fg);
}

.c879ae1-rev-card__btn--play {
  order: 1;
  background: var(--rc-play-btn-bg);
  border-color: var(--rc-play-btn-bg);
  color: var(--rc-play-btn-fg);
}

.c879ae1-rev-card__btn--play:hover {
  background: var(--rc-play-btn-bg-hover);
  border-color: var(--rc-play-btn-bg-hover);
  color: var(--rc-play-btn-fg);
}

/* Listing-position badge override (the partial may emit it; we hide the old absolute one) */
.c879ae1-rev-card .c879ae1-listing-position-badge,
.c879ae1-rev-card .c879ae1-exclusive-badge {
  display: none;
}

/* ==========================================================================
   Responsive layout
   ------------------------------------------------------------------------
   Three bands, no overlap between them:

     >= 1024px   desktop   one row: head | stats, actions underneath
     768-1023px  tablet    same two-column head, stats drop to their own row
     <= 767px    mobile    single centred column

   The previous rules overlapped - a desktop grid opened at 901px while a
   block labelled "tablet & mobile" ran to 1023px, so 901-1023px got half of
   each and the cards sat differently there than on either side of the range.
   Every query below is bounded so exactly one band applies at any width.
   ========================================================================== */

/* ---------- Desktop: >= 1024px ---------- */
@media (min-width: 1024px) {
  .c879ae1-rev-card {
    display: grid;
    /* Fixed head track: the head column is identical on every card, so the
       stats block starts at the same x-position all the way down the list. */
    grid-template-columns: 22rem minmax(0, 1fr);
    grid-template-areas:
      "head stats"
      "foot foot";
    column-gap: 2rem;
    align-items: center;
    padding: 1rem 1.75rem;
  }

  .c879ae1-rev-card__head {
    grid-area: head;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .c879ae1-rev-card__stats {
    grid-area: stats;
    padding: 0;
    border-bottom: 0;
    align-items: center;
    /* Deposit column, then the offer taking the remaining width. */
    grid-template-columns: 7rem minmax(0, 1fr);
  }

  .c879ae1-rev-card__foot {
    grid-area: foot;
    border-top: 1px solid var(--rc-divider);
    margin-top: 1rem;
    padding-top: 1rem;
  }

  .c879ae1-rev-card__excl {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--rc-bg);
    z-index: 1;
    white-space: nowrap;
    align-self: auto;
  }
}

/* ---------- Tablet: 768px - 1023px ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .c879ae1-casino-grid.c879ae1-card-style-horizontal-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .c879ae1-rev-card {
    padding: 1rem 1.1rem;
  }

  .c879ae1-rev-card__name {
    font-size: 1.1rem;
  }

  .c879ae1-rev-card__head {
    grid-template-columns: 28px 70px minmax(0, 1fr);
  }

  .c879ae1-rev-card__logo {
    width: 70px;
    height: 70px;
  }

  /* Deposit narrower here - the offer text needs the room at this width. */
  .c879ae1-rev-card__stats {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    column-gap: 1rem;
  }

  .c879ae1-rev-card__btn {
    width: 150px;
    height: 42px;
    font-size: 0.95rem;
  }
}

/* ---------- Mobile: <= 767px ---------- */
@media (max-width: 767px) {
  .c879ae1-casino-grid.c879ae1-card-style-horizontal-container {
    padding-left: 10px;
    padding-right: 10px;
    gap: 0.75rem;
  }

  .c879ae1-rev-card {
    padding: 1.75rem 1rem 1rem;
  }

  /* Logo and name stay on one line, centred as a pair; stacking them made
     the card tall and left the name floating under a wide gap. */
  .c879ae1-rev-card__head {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0.75rem;
    text-align: left;
    padding-bottom: 0.85rem;
  }

  .c879ae1-rev-card__pos {
    position: absolute;
    top: 0.6rem;
    left: 0.75rem;
  }

  .c879ae1-rev-card__logo {
    width: 64px;
    height: 64px;
    border-radius: 12px;
  }

  .c879ae1-rev-card__title {
    min-width: 0;
  }

  .c879ae1-rev-card__name {
    font-size: 1.05rem;
    /* A long brand name wraps rather than pushing the card sideways. */
    overflow-wrap: anywhere;
  }

  .c879ae1-rev-card__rating {
    justify-content: flex-start;
  }

  .c879ae1-rev-card__excl {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    background: var(--rc-bg);
    z-index: 1;
    white-space: nowrap;
  }

  /* Label above value, left-aligned: a centred column of mixed-length text
     reads as ragged, and the offer is often two or three lines. */
  .c879ae1-rev-card__stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    text-align: left;
    padding: 0.85rem 0;
  }

  .c879ae1-rev-card__stat {
    align-items: flex-start;
  }

  .c879ae1-rev-card__stats .c879ae1-rev-card__stat:has(.c879ae1-rev-card__stat-value--bonus) {
    text-align: left;
    align-items: flex-start;
  }

  .c879ae1-rev-card__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding-top: 0.85rem;
  }

  .c879ae1-rev-card__promo {
    justify-content: center;
    flex: 0 0 auto;
  }

  .c879ae1-rev-card__actions {
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  /* Full-width tap targets: a 140px pill centred in a 360px screen is a small
     target with a lot of dead space either side of it. */
  .c879ae1-rev-card__btn {
    width: 100%;
    height: 46px;
    font-size: 0.95rem;
  }
}

/* ---------- Very narrow: <= 360px ---------- */
@media (max-width: 360px) {
  .c879ae1-rev-card__head {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .c879ae1-rev-card__logo {
    width: 52px;
    height: 52px;
  }

  .c879ae1-rev-card__name {
    font-size: 1rem;
  }

  .c879ae1-rev-card__stat-value {
    font-size: 0.95rem;
  }
}

/* Cards keep an even rhythm regardless of how long the offer text runs.
   Offers vary from four words to a full sentence, so without a cap the list
   steps up and down as each card sizes to its own text. Clamping the offer to
   a fixed number of lines gives every card the same height; the full wording
   still lives on the brand's own page. */
.c879ae1-casino-grid.c879ae1-card-style-horizontal-container > .c879ae1-rev-card {
  align-content: start;
}

.c879ae1-rev-card__stat-value--bonus {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (min-width: 1024px) {
  /* One row per card on desktop: head and stats are both centred in it, so a
     fixed min-height keeps the whole list on a single rhythm. */
  .c879ae1-rev-card {
    min-height: 191px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .c879ae1-rev-card__stat-value--bonus {
    -webkit-line-clamp: 3;
  }
}

@media (max-width: 767px) {
  .c879ae1-rev-card__stat-value--bonus {
    -webkit-line-clamp: 3;
  }
}

/* Reserve the clamped height rather than only capping it: a one-line offer
   and a three-line offer otherwise give the list three different card heights.
   Reserving the space makes every card in the column the same height, which is
   what makes the row of Play buttons line up down the page. */
.c879ae1-rev-card__stat-value--bonus {
  min-height: calc(2 * 1.3em);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .c879ae1-rev-card__stat-value--bonus { min-height: calc(3 * 1.3em); }
}

@media (max-width: 767px) {
  .c879ae1-rev-card__stat-value--bonus { min-height: calc(3 * 1.3em); }
}