/* cv2-reviews.css — /top-casinos/ V2 overrides (#capy-reviews-v2). Loaded on the
   top-casinos route only. Depends on capy-v2 (core). */

/* ================================================================
   TOP-CASINOS V2 (#capy-reviews-v2) — per-viewport, isolated bands.
   Scoped to this page; the shared .cv2 system is untouched.

   To avoid cross-viewport bleed, layout INTENT lives inside the
   breakpoint bands below — NOT in shared base rules:
     • BASE      : structure + colour only (no per-viewport sizing)
     • PHONES    : <= 599px   (covers 375 / 390)
     • TABLET    : 600–1023px (covers 768)
     • DESKTOP   : >= 1024px  (covers 1280)
   Edit one band without touching the others.
   ================================================================ */

/* ---- BASE (all viewports): structure + colour only ---- */

#capy-reviews-v2 .cv2-trust--hero {              /* full-width band spanning both hero cols */
  grid-column: 1 / -1;
  display: grid;
  gap: 1px;                                        /* 1px gaps = subtle neutral dividers (was harsh gold) */
  margin: 10px 0 0;
  padding: 0;
  border: 1px solid var(--cv2-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--cv2-line);
}

#capy-reviews-v2 .cv2-trust--hero span {
  margin: 0; font-weight: 600; line-height: 1.25;
  color: var(--cv2-body); background: #101a2c;
}

#capy-reviews-v2 .cv2-trust--hero span svg { width: 18px; height: 18px; color: var(--cv2-gold); }

#capy-reviews-v2 .cv2-toolbar__sort strong { color: var(--cv2-gold); margin-left: 5px; }

#capy-reviews-v2 .cv2-toolbar__count {            /* gold "N results" pill */
  display: inline-flex; align-items: center; padding: 5px 12px;
  border-radius: 999px; background: rgba(251,191,36,.10);
  color: var(--cv2-gold); font-size: 12.5px; font-weight: 700;
}

#capy-reviews-v2 .cv2-toolbar__note { font-size: 11.5px; line-height: 1.35; max-width: 240px; }

/* Compact cards on ALL viewports (Daniel: "smaller like the 375 example") — drop the
   bulky feature strip, trusted-by line and terms row; keep score + offer + CTAs. */
#capy-reviews-v2 .cv2-ccard__features,
#capy-reviews-v2 .cv2-ccard__trusted,
#capy-reviews-v2 .cv2-ccard__terms { display: none; }

/* ================= PHONES  (<= 599px : 375 / 390) ================= */

@media (max-width: 599px) {
  /* clear the fixed mobile header so the breadcrumb isn't cropped under it */
  #capy-reviews-v2.cv2-page { padding-top: calc(var(--capy-mobile-header-block, 68px) + 12px); }
  /* pull the banner up snug to the breadcrumb */
  #capy-reviews-v2 .cv2-crumb { margin-bottom: 9px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* compact hero — capybara art IN-FLOW in its own column (mirrors the home hero);
     the new DALL-E mascot is landscape and overflowed the old absolute layout. */
  #capy-reviews-v2 .cv2-hero { display: grid; grid-template-columns: 1fr 42%; gap: 8px; align-items: center; position: relative; padding: 0; }
  #capy-reviews-v2 .cv2-hero__copy { min-width: 0; }
  #capy-reviews-v2 .cv2-hero__art {
    position: static; width: 100%; max-width: none; margin: 0 -4px 0 0; justify-self: end;
  }
  #capy-reviews-v2 .cv2-eyebrow { font-size: 9.5px; letter-spacing: .09em; margin-bottom: 5px; padding-right: 0; }
  #capy-reviews-v2 .cv2-hero h1 { font-size: 1.4rem; line-height: 1.1; padding-right: 0; }
  #capy-reviews-v2 .cv2-hero h1 .cv2-gold { white-space: nowrap; }
  #capy-reviews-v2 .cv2-hero__sub { font-size: .82rem; line-height: 1.4; margin-top: 8px; }
  #capy-reviews-v2 .cv2-hero__sub-more { display: none; }
  /* trim 2nd sentence */
  /* trust band: 3 cells in one row (hide the 4th) */
  #capy-reviews-v2 .cv2-trust--hero { grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
  #capy-reviews-v2 .cv2-trust--hero span { padding: 10px 8px; font-size: 10.5px; }
  #capy-reviews-v2 .cv2-trust__four { display: none; }
  /* toolbar: drop the results pill + note to save height */
  #capy-reviews-v2 .cv2-toolbar { margin-top: 11px; padding: 10px 12px; gap: 8px 12px; }
  #capy-reviews-v2 .cv2-toolbar__count,
  #capy-reviews-v2 .cv2-toolbar__note { display: none; }
  /* SEO heading kept in the DOM but visually removed so it doesn't sit on top of
     the reviews (per Daniel: "move somewhere for SEO, not on top of the review") */
  #capy-reviews-v2 .cv2-section { margin-top: 14px; }
  #capy-reviews-v2 .cv2-section__head {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  #capy-reviews-v2 .cv2-listing { margin-top: 0; }
  /* every phone card: drop the feature strip, "trusted by" line, terms + 2nd link
     (the mockup's cards don't carry these) */
  #capy-reviews-v2 .cv2-ccard__features,
  #capy-reviews-v2 .cv2-ccard__trusted,
  #capy-reviews-v2 .cv2-ccard__terms,
  #capy-reviews-v2 .cv2-ccard__readlink { display: none; }
  /* featured #1 stays full (keeps offer + score bars) but slimmer chrome */
  #capy-reviews-v2 .cv2-ccard--feat { padding: 14px 14px 12px; }
  #capy-reviews-v2 .cv2-ccard--feat .cv2-ccard__logo { width: 66px; height: 66px; flex-basis: 66px; }
  /* ---- compact review rows for ranks 2+ ---- */
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) { padding: 12px 13px; }
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-ccard__scores { display: none; }
  /* head as a compact row: logo (spans) | name+stars+score | VISIT (spans) */
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-ccard__head {
    grid-template-columns: 44px minmax(0,1fr) auto; grid-template-rows: auto auto;
    align-items: center; gap: 2px 10px;
  }
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-ccard__logo { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; flex-basis: 44px; padding: 5px; align-self: center; }
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-ccard__id { grid-column: 2; grid-row: 1; }
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-ccard__name h3 { font-size: 1rem; }
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-ccard__rate { margin-top: 2px; }
  /* score box → inline gold "9.4/10" under the stars */
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-ccard__trust {
    grid-column: 2; grid-row: 2; justify-self: start;
    flex-direction: row; align-items: baseline; gap: 0; min-width: 0;
    padding: 0; border: 0; background: none; margin-top: 1px;
  }
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-ccard__trust svg,
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-ccard__trust small { display: none; }
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-ccard__trust b { font-size: .92rem; color: var(--cv2-gold); }
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-ccard__trust b::after { content: '/10'; font-size: .7em; font-weight: 600; color: var(--cv2-muted); margin-left: 1px; }
  /* VISIT button on the right, spanning both rows */
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-ccard__actions { grid-column: 3; grid-row: 1 / span 2; min-width: 0; align-self: center; }
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-ccard__actions .cv2-btn { padding: 9px 15px; font-size: 13px; }
  /* welcome-offer box → plain one-line bonus under the row */
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-ccard__offer { margin-top: 9px; padding: 0; border: 0; background: none; }
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-offer__k,
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-offer__best,
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-exclusive { display: none; }
  #capy-reviews-v2 .cv2-ccard:not(.cv2-ccard--feat) .cv2-offer__v { font-size: .8rem; font-weight: 600; color: var(--cv2-body); margin: 0; line-height: 1.35; }
}

/* ================= TABLET  (600–1023px : 768) ================= */

@media (min-width: 600px) and (max-width: 1023px) {
  #capy-reviews-v2.cv2-page { padding-top: clamp(80px, 11vw, 96px); }
  #capy-reviews-v2 .cv2-hero { padding: 10px 0 4px; gap: 28px; }
  #capy-reviews-v2 .cv2-hero h1 { font-size: clamp(2.1rem, 5vw, 2.6rem); }
  /* full 4-cell trust band in one row */
  #capy-reviews-v2 .cv2-trust--hero { grid-template-columns: repeat(4, 1fr); }
  #capy-reviews-v2 .cv2-trust--hero span { padding: 13px 14px; font-size: 12.5px; }
  #capy-reviews-v2 .cv2-toolbar { gap: 10px 14px; }
  /* methodology + quiz side-by-side under the list (mockup) */
  #capy-reviews-v2 .cv2-listing { margin-top: 18px; }
  #capy-reviews-v2 .cv2-listing__rail { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
}

/* ================= DESKTOP  (>= 1024px : 1280) ================= */

@media (min-width: 1024px) {
  #capy-reviews-v2.cv2-page { padding-top: clamp(88px, 7vw, 104px); }
  #capy-reviews-v2 .cv2-hero { padding: 14px 0 8px; gap: 36px; }
  /* full 4-cell trust band in one row */
  #capy-reviews-v2 .cv2-trust--hero { grid-template-columns: repeat(4, 1fr); }
  #capy-reviews-v2 .cv2-trust--hero span { padding: 14px 16px; font-size: 12.5px; }
  #capy-reviews-v2 .cv2-toolbar { gap: 10px 14px; }
}

/* ===== Card refinements (Daniel 2026-06-21) ===== */
/* Read Review = visible outline button next to Visit Casino (was a hidden text link). */
#capy-reviews-v2 .cv2-ccard__readbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--cv2-line-gold);
  background: transparent; color: var(--cv2-gold); font-weight: 700; font-size: 13px; text-decoration: none;
}
#capy-reviews-v2 .cv2-ccard__readbtn:hover { background: rgba(251,191,36,.08); }
#capy-reviews-v2 .cv2-ccard__readbtn svg { width: 15px; height: 15px; }

/* Featured card: drop the generic "Welcome offer" box (no concrete bonus on these ops). */
#capy-reviews-v2 .cv2-ccard--feat .cv2-ccard__offer { display: none; }

/* Compact score row like the home cards — drop progress bars, tight 5-col, less height. */
#capy-reviews-v2 .cv2-ccard__scores { grid-template-columns: repeat(5,1fr) !important; gap: 0 !important; margin-top: 12px; padding-top: 12px; }
#capy-reviews-v2 .cv2-sbar { text-align: center; padding: 0 4px; }
#capy-reviews-v2 .cv2-sbar:not(:first-child) { border-left: 1px solid var(--cv2-line); }
#capy-reviews-v2 .cv2-sbar__l { justify-content: center; font-size: 9.5px; gap: 3px; }
#capy-reviews-v2 .cv2-sbar__l svg { display: none; }
#capy-reviews-v2 .cv2-sbar__v { font-size: 13px; margin: 3px 0 0; }
#capy-reviews-v2 .cv2-sbar__bar { display: none; }

/* Mobile: trust score + action buttons share a row (fills the empty space next to the score). */
@media (max-width: 599px) {
  #capy-reviews-v2 .cv2-ccard__head > .cv2-ccard__trust { grid-column: 1; align-self: stretch; }
  #capy-reviews-v2 .cv2-ccard__head > .cv2-ccard__actions { grid-column: 2; align-self: center; }
}