/* /slots/ archive — filter pills + grid of slot cards.
   Scoped under body.ccs-rev-fullwidth (added when ccs_slots_v2_is_active()). */

body.ccs-rev-fullwidth .ccs-slot-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: var(--ccs-radius-xl);
  box-shadow: var(--ccs-shadow-card);
  padding: 14px 18px;
  margin: 0 0 24px;
  font-family: var(--ccs-font-display);
}
body.ccs-rev-fullwidth .ccs-slot-filter__label {
  font-family: var(--ccs-font-label, "Inter"), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ccs-outline);
  margin-right: 4px;
}
body.ccs-rev-fullwidth .ccs-slot-filter__pill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--ccs-radius-full, 999px);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ccs-primary);
  background: var(--ccs-primary-fixed, #f3e9ff);
  transition: background 0.15s, color 0.15s;
}
body.ccs-rev-fullwidth .ccs-slot-filter__pill:hover {
  background: var(--ccs-primary);
  color: #fff;
}
body.ccs-rev-fullwidth .ccs-slot-filter__pill.is-active {
  background: var(--ccs-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(49, 0, 88, 0.25);
}

body.ccs-rev-fullwidth .ccs-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0 0 32px;
}
@media (min-width: 600px)  { body.ccs-rev-fullwidth .ccs-slot-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { body.ccs-rev-fullwidth .ccs-slot-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
@media (min-width: 1400px) { body.ccs-rev-fullwidth .ccs-slot-grid { grid-template-columns: repeat(5, 1fr); } }

body.ccs-rev-fullwidth .ccs-slot-card {
  background: #fff;
  border-radius: var(--ccs-radius-xl);
  box-shadow: var(--ccs-shadow-card);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
body.ccs-rev-fullwidth .ccs-slot-card:hover {
  box-shadow: var(--ccs-shadow-card-hover);
  transform: translateY(-2px);
}
body.ccs-rev-fullwidth .ccs-slot-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
body.ccs-rev-fullwidth .ccs-slot-card__image {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--ccs-primary, #310058), var(--ccs-cta-orange, #f7a335));
  overflow: hidden;
}
body.ccs-rev-fullwidth .ccs-slot-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
body.ccs-rev-fullwidth .ccs-slot-card__mono {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ccs-font-display);
  font-size: 56px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
body.ccs-rev-fullwidth .ccs-slot-card__body {
  display: block;
  padding: 14px 16px 18px;
}
body.ccs-rev-fullwidth .ccs-slot-card__title {
  font-family: var(--ccs-font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ccs-primary);
  margin: 0 0 4px;
}
body.ccs-rev-fullwidth .ccs-slot-card__provider {
  font-family: var(--ccs-font-label, "Inter"), sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ccs-outline);
}

body.ccs-rev-fullwidth .ccs-slot-pager {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding: 8px 0 32px;
  font-family: var(--ccs-font-display);
}
body.ccs-rev-fullwidth .ccs-slot-pager a {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: #fff;
  border-radius: var(--ccs-radius-full, 999px);
  box-shadow: var(--ccs-shadow-card);
  color: var(--ccs-primary);
  font-weight: 700;
  text-decoration: none;
}
body.ccs-rev-fullwidth .ccs-slot-pager a:hover {
  background: var(--ccs-primary);
  color: #fff;
}
body.ccs-rev-fullwidth .ccs-slot-empty {
  background: #fff;
  border-radius: var(--ccs-radius-xl);
  box-shadow: var(--ccs-shadow-card);
  padding: 32px;
  text-align: center;
  color: var(--ccs-on-surface-variant);
}

/* ============================================================
   Single slot page — review-style layout. The default markup is:
     <article class="game">
       <header class="entry-header"><h1 class="entry-title">...</h1></header>
       <div class="featured-image"><img ...></div>
       <div class="entry-content">
         <p>... copy ...</p>
         <h2>Theme</h2> ... etc.
         <h2 class="info-headings">{Title} Slot Details</h2>
         <table class="slot-info-table"> ... </table>
       </div>
     </article>
   We re-skin this in-place with V2 tokens — no template rewrite.
   ============================================================ */

body.ccs-rev-fullwidth.single-game .inside-article,
body.ccs-rev-fullwidth.single-game article.game {
  background: transparent;
  padding: 0;
  margin: 0;
}

body.ccs-rev-fullwidth.single-game article.game > .inside-article,
body.ccs-rev-fullwidth.single-game article.game {
  display: block;
  max-width: var(--ccs-container-max, 1700px);
  margin: 0 auto;
  padding: 0 16px;
}

/* Hero: featured image left, title + meta right at desktop; stacked on mobile. */
body.ccs-rev-fullwidth.single-game article.game .entry-header {
  display: none !important;  /* render an in-content hero instead */
}
body.ccs-rev-fullwidth.single-game article.game .featured-image {
  background: #fff;
  border-radius: var(--ccs-radius-xl);
  box-shadow: var(--ccs-shadow-card);
  padding: 24px;
  margin: 0 0 24px;
  text-align: center;
}
body.ccs-rev-fullwidth.single-game article.game .featured-image img {
  max-width: 360px;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: var(--ccs-radius-lg, 12px);
}

/* Editorial body — same white-card treatment as listing-body. The !important
   here overrides the broad `.entry-content` transparency rule in tokens.css.
   `display: flow-root` establishes a new block formatting context so the
   floated featured image inside is contained within the white card (otherwise
   the card collapses to text height and the image bleeds out the bottom). */
body.ccs-rev-fullwidth.single-game article.game .entry-content {
  background: #fff !important;
  border-radius: var(--ccs-radius-xl);
  box-shadow: var(--ccs-shadow-card);
  padding: 32px !important;
  margin: 0 0 32px !important;
  display: flow-root;
  font-family: var(--ccs-font-display);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ccs-on-surface-variant);
}
@media (max-width: 1023px) {
  body.ccs-rev-fullwidth.single-game article.game .entry-content { padding: 20px 16px !important; }
}
@media (max-width: 600px) {
  body.ccs-rev-fullwidth.single-game article.game .entry-content { padding: 16px 12px !important; }
}
body.ccs-rev-fullwidth.single-game article.game .entry-content > p { margin: 0 0 16px; }
body.ccs-rev-fullwidth.single-game article.game .entry-content > p:first-child {
  font-size: 19px;
  color: var(--ccs-on-surface);
}
body.ccs-rev-fullwidth.single-game article.game .entry-content h2 {
  font-family: var(--ccs-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ccs-primary);
  margin: 28px 0 12px;
  line-height: 1.3;
}
body.ccs-rev-fullwidth.single-game article.game .entry-content h2.info-headings {
  border-top: 1px solid var(--ccs-outline-variant);
  padding-top: 24px;
  margin-top: 32px;
  font-size: 22px;
}
body.ccs-rev-fullwidth.single-game article.game .entry-content h3 {
  font-family: var(--ccs-font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--ccs-primary);
  margin: 20px 0 10px;
}
body.ccs-rev-fullwidth.single-game article.game .entry-content a {
  color: var(--ccs-primary);
  text-decoration: underline;
}
/* Float-left/right images in the article body need breathing room from the
   wrapping text — both the featured slot thumbnail and any inline images. */
body.ccs-rev-fullwidth.single-game article.game .entry-content img.alignleft,
body.ccs-rev-fullwidth.single-game article.game .entry-content .alignleft img,
body.ccs-rev-fullwidth.single-game article.game .entry-content .wp-caption.alignleft {
  float: left;
  margin: 4px 24px 16px 0;
  max-width: 35%;
  height: auto;
}
body.ccs-rev-fullwidth.single-game article.game .entry-content img.alignright,
body.ccs-rev-fullwidth.single-game article.game .entry-content .alignright img,
body.ccs-rev-fullwidth.single-game article.game .entry-content .wp-caption.alignright {
  float: right;
  margin: 4px 0 16px 24px;
  max-width: 35%;
  height: auto;
}
@media (max-width: 600px) {
  body.ccs-rev-fullwidth.single-game article.game .entry-content img.alignleft,
  body.ccs-rev-fullwidth.single-game article.game .entry-content img.alignright {
    float: none;
    margin: 0 auto 16px;
    display: block;
    max-width: 100%;
  }
}

/* "Slot Details" heading rendered by GP element 32383 — sits outside the
   entry-content, on generate_after_entry_content. Wrap it visually so it
   matches the V2 card pattern. */
body.ccs-rev-fullwidth.single-game .info-headings,
body.ccs-rev-fullwidth.single-game h2.info-headings {
  background: #fff;
  border-radius: var(--ccs-radius-xl) var(--ccs-radius-xl) 0 0;
  padding: 24px 32px 0;
  margin: 0;
  font-family: var(--ccs-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ccs-primary);
  line-height: 1.3;
}
/* Slot info table */
body.ccs-rev-fullwidth.single-game .slot-info-table {
  width: calc(100% - 0px);
  border-collapse: collapse;
  margin: 0 0 32px;
  background: #fff;
  padding: 16px 32px 32px;
  border-radius: 0 0 var(--ccs-radius-xl) var(--ccs-radius-xl);
  box-shadow: var(--ccs-shadow-card);
  font-family: var(--ccs-font-display);
  /* The table is inline-collapsed; use display:table inside a block parent
     so padding & border-radius render correctly. */
  display: table;
}
/* The two H2 + table sit as siblings on generate_after_entry_content, but the
   shadow + radius look right if they stack flush. Pull the table up to meet
   the heading. */
body.ccs-rev-fullwidth.single-game .info-headings + .slot-info-table {
  margin-top: 0;
}
body.ccs-rev-fullwidth.single-game .slot-info-table tr {
  border-bottom: 1px solid var(--ccs-outline-variant);
}
body.ccs-rev-fullwidth.single-game .slot-info-table tr:last-child {
  border-bottom: 0;
}
body.ccs-rev-fullwidth.single-game .slot-info-table td {
  padding: 12px 8px;
  font-size: 15px;
  vertical-align: top;
}
body.ccs-rev-fullwidth.single-game .slot-info-table td:first-child {
  width: 38%;
  font-family: var(--ccs-font-label, "Inter"), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ccs-outline);
}
body.ccs-rev-fullwidth.single-game .slot-info-table td:last-child {
  font-weight: 600;
  color: var(--ccs-on-surface);
}

/* Auto-injected byline + author box already styled via author-box.css. We just
   make sure the byline at the top of the slot doesn't bump up against
   the featured image. */
body.ccs-rev-fullwidth.single-game .sf-byline {
  margin-bottom: 16px;
}

/* ─── Slot info table — overflow fix + breathing room + clean mobile stack ─
   The original CSS rendered with default content-box sizing, so the table's
   `padding: 16px 32px 32px` overflowed its parent by 64px on the right.
   Forcing border-box keeps padding inside the width.
   On viewports where a global stylesheet already forces `display: block` on
   td/tr (≤1024px in the inline mobile block on every page), we kill ALL
   table-internal borders and add ONE clean divider per row at the top so
   there's no double-line noise. */

/* Wrapper added in GP element 32383 around the heading + table. Outer padding
   here is the breathing room between the card and its parent container. */
body.ccs-rev-fullwidth.single-game .slot-info-wrap {
  padding: 20px 40px 40px;
  box-sizing: border-box;
  max-width: 100%;
  background-color: #fff;
}

/* Kill the desktop tr border-bottom when the table is forced to stack —
   we re-introduce a single clean divider via border-top below. */
@media (max-width: 1024px) {
  body.ccs-rev-fullwidth.single-game .info-headings,
  body.ccs-rev-fullwidth.single-game h2.info-headings {
    max-width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding: 20px 20px 0 !important;
    font-size: 20px;
  }

  body.ccs-rev-fullwidth.single-game .slot-info-table {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding: 8px 20px 16px !important;
    display: block !important;
  }

  /* Reset every internal border before re-applying just the divider we want.
     This kills the leftover desktop tr border-bottom + any default cell
     borders the global block-display rule exposes. */
  body.ccs-rev-fullwidth.single-game .slot-info-table,
  body.ccs-rev-fullwidth.single-game .slot-info-table tbody,
  body.ccs-rev-fullwidth.single-game .slot-info-table tr,
  body.ccs-rev-fullwidth.single-game .slot-info-table td {
    border: 0 !important;
    border-collapse: collapse !important;
  }

  body.ccs-rev-fullwidth.single-game .slot-info-table tbody {
    display: block !important;
    width: 100% !important;
  }

  /* Each row is a stacked block. ONE divider at the top, none elsewhere.
     First row gets no top divider so the table starts cleanly. */
  body.ccs-rev-fullwidth.single-game .slot-info-table tr {
    display: block !important;
    width: 100% !important;
    padding: 14px 0 !important;
    border-top: 1px solid var(--ccs-outline-variant) !important;
  }
  body.ccs-rev-fullwidth.single-game .slot-info-table tr:first-child {
    border-top: 0 !important;
    padding-top: 6px !important;
  }
  body.ccs-rev-fullwidth.single-game .slot-info-table tr:last-child {
    padding-bottom: 4px !important;
  }

  /* Cells stack — label above value, both full width, no padding overhead. */
  body.ccs-rev-fullwidth.single-game .slot-info-table td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    font-size: 14px;
    line-height: 1.4;
  }
  body.ccs-rev-fullwidth.single-game .slot-info-table td:first-child {
    padding-bottom: 4px !important;
  }
}

/* ─── Theme tag chips on the single-slot pagehead ──────────────────────── */
.ccs-slot-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.ccs-slot-theme-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ccs-surface-container-low);
  color: var(--ccs-primary);
  font-family: var(--ccs-font-label, "Inter"), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  text-decoration: none;
  border: 1px solid var(--ccs-outline-variant);
  transition: background 0.15s ease, color 0.15s ease;
}
.ccs-slot-theme-chip:hover {
  background: var(--ccs-primary);
  color: #fff;
}

/* ─── Screenshot gallery (image1/image2/image3 attachments) ────────────── */
.ccs-slot-gallery {
  display: grid;
  /* Cap thumbnail width so 1-2 screenshots don't stretch to full container
     width on desktop; auto-fit still wraps them to a grid when there are more. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 280px));
  justify-content: start;
  gap: 16px;
  margin: 24px 0 32px;
}
.ccs-slot-gallery__item {
  margin: 0;
  background: #fff;
  border-radius: var(--ccs-radius-xl);
  overflow: hidden;
  box-shadow: var(--ccs-shadow-card);
}
.ccs-slot-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
@media (max-width: 600px) {
  .ccs-slot-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ─── Provider filter drawer (top-N + "Show all" expandable list) ─────── */
.ccs-slot-filter__drawer {
  position: relative;
  display: inline-block;
}
.ccs-slot-filter__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ccs-primary);
  color: #fff;
  font-family: var(--ccs-font-label, "Inter"), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  list-style: none;
  transition: filter 0.15s ease;
}
.ccs-slot-filter__more::-webkit-details-marker { display: none; }
.ccs-slot-filter__more::marker { content: ''; }
.ccs-slot-filter__more:hover { filter: brightness(1.1); }
.ccs-slot-filter__drawer[open] .ccs-slot-filter__more-caret {
  transform: rotate(180deg);
}
.ccs-slot-filter__more-caret {
  font-size: 14px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.ccs-slot-filter__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: min(720px, 95vw);
  max-height: min(540px, 75vh);
  background: #fff;
  border-radius: var(--ccs-radius-xl);
  box-shadow: var(--ccs-shadow-lg);
  border: 1px solid var(--ccs-outline-variant);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 700px) {
  .ccs-slot-filter__panel {
    position: fixed;
    top: auto;
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    max-height: 70vh;
  }
}

.ccs-slot-filter__search {
  flex-shrink: 0;
  margin: 14px 16px 8px;
  padding: 10px 14px;
  border: 1px solid var(--ccs-outline-variant);
  border-radius: var(--ccs-radius-lg, 12px);
  font-family: var(--ccs-font-display);
  font-size: 15px;
  color: var(--ccs-on-surface);
  background: var(--ccs-surface-container-low);
  outline: none;
}
.ccs-slot-filter__search:focus {
  border-color: var(--ccs-primary);
  background: #fff;
}

.ccs-slot-filter__groups {
  overflow-y: auto;
  padding: 4px 16px 16px;
  scrollbar-width: thin;
}
.ccs-slot-filter__group {
  margin-top: 14px;
}
.ccs-slot-filter__group:first-child { margin-top: 6px; }
.ccs-slot-filter__letter {
  font-family: var(--ccs-font-label, "Inter"), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ccs-on-surface-variant);
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ccs-outline-variant);
}
.ccs-slot-filter__group-pills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
}
.ccs-slot-filter__drawer-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--ccs-radius-lg, 8px);
  background: var(--ccs-surface-container-low);
  color: var(--ccs-on-surface);
  font-family: var(--ccs-font-display);
  font-size: 14px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.ccs-slot-filter__drawer-pill:hover {
  background: var(--ccs-primary-fixed, #f3e9ff);
  color: var(--ccs-primary);
}
.ccs-slot-filter__drawer-pill.is-active {
  background: var(--ccs-primary);
  color: #fff;
}
.ccs-slot-filter__drawer-pill.is-active .ccs-slot-filter__drawer-count {
  color: rgba(255,255,255,0.85);
}
.ccs-slot-filter__drawer-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ccs-slot-filter__drawer-count {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--ccs-on-surface-variant);
  font-variant-numeric: tabular-nums;
}
.ccs-slot-filter__empty {
  text-align: center;
  font-style: italic;
  color: var(--ccs-on-surface-variant);
  padding: 24px 16px;
  margin: 0;
}

/* ─── Slot single — casino list section + CTA ──────────────────────────── */
body.ccs-rev-fullwidth.single-game .ccs-slot-casinos {
  margin: 32px auto 0;
  max-width: var(--ccs-container-max, 1700px);
  padding: 0 16px;
}
/* The H2 + intro paragraph live in their own white "section header" card so
   they don't float on the grey page background. The casino cards below this
   already carry their own white backgrounds (.ccs-cmp-card). */
body.ccs-rev-fullwidth.single-game .ccs-slot-casinos__header {
  background: #fff;
  padding: 20px 40px 28px;
  margin: 0 0 16px;
  box-sizing: border-box;
  max-width: 100%;
}
body.ccs-rev-fullwidth.single-game .ccs-slot-casinos__header .info-headings {
  margin-top: 0;
}
body.ccs-rev-fullwidth.single-game .ccs-slot-casinos__intro {
  font-family: var(--ccs-font-display);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ccs-on-surface-variant);
  margin: 4px 0 0;
}
@media (max-width: 1024px) {
  body.ccs-rev-fullwidth.single-game .ccs-slot-casinos__header {
    padding: 18px 24px 24px;
  }
}

body.ccs-rev-fullwidth.single-game .ccs-slot-casinos__cta-wrap {
  display: flex;
  justify-content: center;
  margin: 32px 0 48px;
}
body.ccs-rev-fullwidth.single-game .ccs-slot-casinos__cta {
  display: inline-block;
  background: var(--ccs-cta-orange);
  color: #fff;
  padding: 16px 36px;
  border: none;
  border-radius: var(--ccs-radius-xl);
  font-family: var(--ccs-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(247, 163, 53, 0.35);
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
body.ccs-rev-fullwidth.single-game .ccs-slot-casinos__cta:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 16px rgba(247, 163, 53, 0.45);
}
body.ccs-rev-fullwidth.single-game .ccs-slot-casinos__cta:active {
  transform: scale(0.98);
}