/**
 * reviews-hub.css
 *
 * Reviews Hub block styles — team, methodology, scoring,
 * AI monitoring, exclusions, corrections/disputes.
 * Mobile-first with min-width breakpoints.
 *
 * @package BeatTheFish
 * @since   2.1.0
 */

/* ═══ Hero Stats ═════════════════════════════════════════════════ */

.hero-reviews .hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-reviews .hero-stat-val {
  font-family: 'Instrument Serif', serif;
  font-size: 2rem;
  font-weight: 400;
  font-style: italic;
  color: rgba(244, 239, 230, 0.85);
  display: block;
  line-height: 1;
  margin-bottom: 5px;
}
.hero-reviews .hero-stat-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.38);
  line-height: 1.4;
}
.hero-reviews .hero-stat-label a {
  color: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

@media (min-width: 600px) {
  .hero-reviews .hero-stats { grid-template-columns: repeat(4, 1fr); }
}

/* ═══ Offshore Notice ════════════════════════════════════════════ */

/* Offshore notice uses shared .offshore-bar from base.css */

/* ═══ Action Boxes ══════════════════════════════════════════════ */

.rh-action-boxes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 40px;
}
.rh-action-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
}
.rh-action-box--green { background: var(--felt-bg); border: 1px solid rgba(27, 58, 45, 0.15); }
.rh-action-box--red   { background: var(--red-bg); border: 1px solid rgba(139, 45, 45, 0.12); }
.rh-action-text { font-size: 0.82rem; font-weight: 500; flex: 1; line-height: 1.5; }
.rh-action-box--green .rh-action-text { color: var(--felt); }
.rh-action-box--red .rh-action-text   { color: var(--red); }
.rh-action-btn {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  white-space: nowrap;
  text-decoration: none;
}
.rh-action-btn--green { color: var(--felt); border: 1px solid rgba(27, 58, 45, 0.2); }
.rh-action-btn--red   { color: var(--red); border: 1px solid rgba(139, 45, 45, 0.2); }

@media (min-width: 600px) {
  .rh-action-boxes { grid-template-columns: 1fr 1fr; }
}

/* ═══ Hero Disclosure ════════════════════════════════════════════ */

.rh-disclosure {
  margin-top: 24px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  max-width: 640px;
}
.rh-disclosure-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 8px;
}
.rh-disclosure p {
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.65;
  margin: 0 0 8px;
}
.rh-disclosure p:last-child { margin-bottom: 0; }
.rh-disclosure a {
  color: rgba(200, 169, 81, 0.8);
  font-weight: 600;
}

/* ═══ Team Grid: moved to cards.css so the btf-rh-team block works
   wherever it's embedded (Reviews, About, etc.) without pulling the
   entire reviews-hub stylesheet. ══════════════════════════════════ */

/* ═══ Methodology Steps ══════════════════════════════════════════ */

.rh-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  margin-top: 32px;
}

.rh-steps::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: 48px;
  width: 1px;
  background: var(--rule);
}

.rh-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 0;
  position: relative;
}

.rh-step:not(:last-child) {
  border-bottom: 1px solid var(--rule);
}

.rh-step-num {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--felt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(244, 239, 230, 0.8);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.rh-step-body {
  flex: 1;
  min-width: 0;
  padding-top: 10px;
}

.rh-step-title {
  font-family: 'Instrument Serif', serif;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 6px;
}

.rh-step-desc {
  font-size: 0.88rem;
  color: var(--ink3);
  line-height: 1.7;
}

.rh-step-detail {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--felt3);
  background: var(--felt-bg);
  border-radius: 6px;
  padding: 6px 12px;
  margin-top: 10px;
  display: inline-block;
  line-height: 1.5;
}

/* Sidebar checklist items */
.rh-sidebar-check {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink2);
  padding: 5px 0;
  line-height: 1.5;
}

.rh-sidebar-check-icon {
  flex-shrink: 0;
  font-size: 0.9rem;
}

.rh-sidebar-note {
  font-size: 0.78rem;
  color: var(--ink4);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  line-height: 1.5;
}

/* Anonymous steps */
.rh-anon-intro {
  font-size: 0.85rem;
  color: var(--ink3);
  line-height: 1.6;
  margin-bottom: 12px;
}

.rh-anon-step {
  display: flex;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink2);
  padding: 4px 0;
  line-height: 1.5;
}

.rh-anon-step-num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--brass);
  flex-shrink: 0;
}

/* ═══ Scoring Accordion ══════════════════════════════════════════ */

.rh-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 40px;
}

.rh-acc-item {
  background: var(--surface);
}

.rh-acc-item + .rh-acc-item {
  border-top: 1px solid var(--rule);
}

.rh-acc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s;
}

.rh-acc-summary:hover {
  background: var(--bg);
}

.rh-acc-summary::-webkit-details-marker { display: none; }
.rh-acc-summary::marker { content: ''; }

.rh-acc-summary::after {
  content: '+';
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink4);
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform 0.2s;
}

.rh-acc-item[open] > .rh-acc-summary::after {
  content: '−';
  color: var(--felt);
}

.rh-acc-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.rh-acc-weight {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--felt3);
  background: var(--felt-bg);
  padding: 3px 9px;
  border-radius: 4px;
  flex-shrink: 0;
}

.rh-acc-title {
  font-family: 'Instrument Serif', serif;
  font-size: 1.05rem;
  color: var(--ink);
}

.rh-acc-summary-text {
  width: 100%;
  font-size: 0.78rem;
  color: var(--ink4);
}
.rh-acc-summary-text::before {
  content: '—';
  margin-right: 9px;
}

@media (min-width: 600px) {
  .rh-acc-header { flex-wrap: nowrap; gap: 12px; }
  .rh-acc-summary-text { width: auto; }
}

.rh-acc-content {
  padding: 0 22px 22px;
}

.rh-acc-desc {
  font-size: 0.88rem;
  color: var(--ink3);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Score bands */
.rh-band-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.rh-band-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  background: var(--surface);
}

.rh-band-row + .rh-band-row {
  border-top: 1px solid var(--rule);
}

.rh-band-score {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rh-band-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
}

.rh-band-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rh-band-criteria {
  font-size: 0.82rem;
  color: var(--ink3);
  line-height: 1.5;
}

/* Band color coding */
.rh-band--excellent .rh-band-num   { color: var(--felt); }
.rh-band--excellent .rh-band-label { color: var(--felt); }
.rh-band--excellent { background: var(--felt-bg); }

.rh-band--good .rh-band-num   { color: var(--felt3); }
.rh-band--good .rh-band-label { color: var(--felt3); }

.rh-band--mid .rh-band-num   { color: var(--amber); }
.rh-band--mid .rh-band-label { color: var(--amber); }
.rh-band--mid { background: var(--amber-bg); }

.rh-band--fail .rh-band-num   { color: var(--red); }
.rh-band--fail .rh-band-label { color: var(--red); }
.rh-band--fail { background: var(--red-bg); }

/* ═══ AI Monitoring ══════════════════════════════════════════════ */

.rh-ai-grid {
  margin-top: 28px;
}

.rh-ai-card {
  overflow: hidden;
}

.rh-ai-card-body {
  padding: 0;
}

.rh-ai-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.84rem;
}

.rh-ai-row:last-child { border-bottom: none; }

.rh-ai-row-icon {
  font-size: 1rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.rh-ai-row-text {
  color: var(--ink2);
  font-weight: 500;
  flex: 1;
}

.rh-ai-row-freq {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--felt3);
  flex-shrink: 0;
}

/* Human responsibilities box */
.rh-ai-card--human {
  background: var(--brass-bg);
  border: 1px solid rgba(154, 123, 60, 0.15);
  border-radius: var(--radius, 12px);
  height: 100%;
}

.rh-ai-card--human > div {
  padding: 22px 24px;
}

.rh-ai-human-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--brass);
  margin-bottom: 12px;
}

.rh-ai-human-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rh-ai-human-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--ink2);
  line-height: 1.55;
}

.rh-ai-human-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass);
  flex-shrink: 0;
  margin-top: 6px;
}

/* Caveat box */
.rh-ai-card--caveat {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.rh-ai-card--caveat .rh-ai-card-body {
  padding: 20px 22px;
}

.rh-ai-caveat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink4);
  margin-bottom: 10px;
}

.rh-ai-caveat-text {
  font-size: 0.85rem;
  color: var(--ink3);
  line-height: 1.7;
  margin: 0;
}

/* Triggers box */
.rh-ai-card--triggers {
  background: var(--brass-bg);
  border: 1px solid rgba(154, 123, 60, 0.15);
  border-radius: var(--radius, 12px);
}

.rh-ai-card--triggers > div {
  padding: 20px 22px;
}

.rh-ai-trigger-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rh-ai-trigger {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.83rem;
  color: var(--ink2);
  line-height: 1.55;
}

.rh-ai-trigger-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* ═══ Exclusion Grid ═════════════════════════════════════════════ */

.rh-excl-grid {
  margin-top: 20px;
}

.rh-excl-card {
  padding: 18px 20px;
}

.rh-excl-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--red);
  opacity: 0.45;
  margin-bottom: 5px;
}

.rh-excl-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 5px;
}

.rh-excl-desc {
  font-size: 0.81rem;
  color: var(--ink3);
  line-height: 1.6;
}

/* ═══ Corrections / Disputes ═════════════════════════════════════ */

.rh-policy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.rh-policy-col {
  min-width: 0;
}

.rh-policy-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 24px;
}

.rh-policy-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 16px;
  font-size: 0.88rem;
  color: var(--ink2);
  line-height: 1.6;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: background 0.15s;
}

.rh-policy-item + .rh-policy-item {
  margin-top: 8px;
}

.rh-policy-item:hover {
  background: var(--bg);
}

.rh-policy-item--reject {
  background: var(--red-bg);
  border-color: rgba(139, 45, 45, 0.12);
}

.rh-policy-item--reject:hover {
  background: rgba(139, 45, 45, 0.08);
}

.rh-policy-icon {
  flex-shrink: 0;
  font-size: 1rem;
}

.rh-policy-text {
  flex: 1;
  min-width: 0;
}

.rh-policy-note {
  font-size: 0.82rem;
  color: var(--ink4);
  margin-top: 16px;
  line-height: 1.5;
}

/* ═══ Responsive: 600px ══════════════════════════════════════════ */

@media (min-width: 600px) {
  .rh-policy-grid     { grid-template-columns: repeat(2, 1fr); }

  .rh-band-row {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .rh-band-score {
    min-width: 120px;
    flex-shrink: 0;
  }
}

/* ═══ Expand Button ════════════════════════════════════════════ */

.btn-expand {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--felt);
  margin-top: 11px;
  padding: 0;
}
.btn-expand:hover {
  color: var(--felt2);
}

/* ═══ Filter Buttons ════════════════════════════════════════════ */

.reviews-filter {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 24px;
  position: relative;
  mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}
.reviews-filter::-webkit-scrollbar { display: none; }

@media (min-width: 600px) {
  .reviews-filter {
    flex-wrap: wrap;
    overflow-x: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
}
.filter-btn {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink3);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-btn:hover,
.filter-btn.active {
  background: var(--felt);
  color: rgba(244, 239, 230, 0.9);
  border-color: var(--felt);
}

/* ═══ Casino Card Pills ════════════════════════════════════════ */

.rc-pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.rc-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.pill-green { background: var(--felt-bg); color: var(--felt); }
.pill-amber { background: var(--brass-bg); color: var(--brass); }
.pill-red   { background: var(--red-bg);   color: var(--red); }

/* ═══ Quick Picks ══════════════════════════════════════════════ */

.qp-card {
  padding: 20px;
  transition: all 0.18s;
  position: relative;
  overflow: hidden;
}
.qp-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--felt3);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.qp-card:hover {
  border-color: rgba(58, 112, 87, 0.3);
  box-shadow: 0 4px 16px rgba(27, 58, 45, 0.08);
}
.qp-card:hover::before { transform: scaleX(1); }
.qp-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--felt3);
  margin-bottom: 6px;
}
.qp-title {
  font-family: 'Instrument Serif', serif;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 5px;
}
.qp-desc {
  font-size: 0.8rem;
  color: var(--ink3);
  line-height: 1.55;
  margin-bottom: 10px;
}
.qp-pick {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qp-avi {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Serif', serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.qp-casino-name {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--felt);
}
.qp-casino-why {
  font-size: 0.73rem;
  color: var(--ink4);
}
.qp-link {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--felt);
  flex-shrink: 0;
}

/* ═══ Methodology Changelog ════════════════════════════════════ */

.rh-cl-wrap {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.rh-cl-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 11px 22px;
  align-items: center;
  border-bottom: 1px solid var(--rule);
}
.rh-cl-row:nth-child(odd)  { background: var(--surface); }
.rh-cl-row:nth-child(even) { background: #fff; }
.rh-cl-row:last-child       { border-bottom: none; }
.rh-cl-date {
  grid-row: 1; grid-column: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: var(--ink4);
}
.rh-cl-text {
  grid-row: 2; grid-column: 1 / -1;
  font-size: 0.88rem;
  color: var(--ink2);
}
.rh-cl-tags { grid-row: 1; grid-column: 2; display: flex; gap: 5px; flex-shrink: 0; justify-self: end; }

@media (min-width: 600px) {
  .rh-cl-row  { grid-template-columns: 66px 1fr auto; gap: 14px; }
  .rh-cl-date { grid-row: auto; grid-column: auto; }
  .rh-cl-text { grid-row: auto; grid-column: auto; }
  .rh-cl-tags { grid-row: auto; grid-column: auto; justify-self: auto; }
}
.rh-cl-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.67rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
}
.rh-cl-tag--method  { background: rgba(154, 123, 60, 0.12); color: #8a6d2f; }
.rh-cl-tag--score   { background: rgba(34, 113, 177, 0.12); color: #1a5a8a; }
.rh-cl-tag--terms    { background: rgba(214, 54, 56, 0.10); color: #a82d2e; }
.rh-cl-tag--bonus    { background: rgba(13, 115, 119, 0.10); color: #0a5c5f; }
.rh-cl-tag--content  { background: rgba(140, 94, 0, 0.10);  color: #7a5200; }
.rh-cl-tag--factual  { background: rgba(110, 74, 180, 0.10); color: #5a3d96; }
.rh-cl-tag--games    { background: rgba(110, 74, 180, 0.08); color: #5a3d96; }
.rh-cl-tag--payments { background: rgba(0, 163, 42, 0.10);  color: #1a7a2e; }
.rh-cl-tag--ai       { background: rgba(102, 102, 102, 0.10); color: #666; }
.rh-cl-tag--team     { background: rgba(155, 58, 58, 0.10); color: #8a3333; }
.rh-cl-tag--other    { background: rgba(102, 102, 102, 0.10); color: #666; }
.rh-cl-extra { display: none; }
.rh-cl-extra.open { display: block; }
.rh-cl-full-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--felt);
}

.rh-rg-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}