/* review-blocks.css — block system for detail pages & About (scoped) */
:root{ --radius-xl:16px; --radius-lg:14px; }

body#review-detail main.container, body#about main.container{max-width:1040px}
/* Blocks */
.block{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);
  padding:18px;margin:14px auto;box-shadow:0 6px 28px rgba(2,8,23,.22)}
.block header h1,.block header h2{margin:0 0 6px}
.block .lead{color:var(--muted);margin:6px 0 0;line-height:1.6}
.block h2{font-size:1.25rem;line-height:1.3;margin:0 0 10px}
@media(min-width:880px){.block h2{font-size:1.35rem}}
/* Grids */
.grid-2{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:880px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:1000px){.grid-3{grid-template-columns:1fr 1fr 1fr}}
/* Key facts */
.kv{display:grid;grid-template-columns:160px 1fr;gap:8px 10px;margin:0}
.kv li{list-style:none;display:contents}
.kv strong{color:var(--text);opacity:.9}
.kv span{color:var(--text);opacity:.86}
@media(max-width:640px){.kv{grid-template-columns:1fr}}
/* Pros/Cons cards */
.pc-cards{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:820px){.pc-cards{grid-template-columns:1fr 1fr}}
.pc-cards>div{background:rgba(255,255,255,.02);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:14px 16px}
.pc-cards h3{margin:0 0 8px;font-size:1rem}
.pc-cards ul{margin:0;padding-left:18px}
.pc-cards li{margin:6px 0}
/* FAQ */
.faq details{background:rgba(255,255,255,.02);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:12px 14px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin-top:8px;opacity:.92}
/* Buttons */
.btn{display:inline-block;text-decoration:none;border-radius:12px;padding:12px 16px;border:1px solid var(--border)}
.btn-primary{color:#0b1221;border-color:rgba(255,255,255,.12);
  background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 5px 18px rgba(0,0,0,.26)}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-outline{color:var(--text);background:rgba(255,255,255,.05);border-color:var(--border)}
.btn-outline:hover{background:rgba(255,255,255,.08)}
/* Breadcrumbs */
.breadcrumb{font-size:.9rem;color:var(--muted);margin:12px auto 0;max-width:980px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--text);text-decoration:underline}



.btn-outline{
  background: rgba(255,255,255,.10) !important;
  color: #e6e8ee !important;
  border: 1px solid #3a4f78 !important;
}
.btn-outline:hover{ background: rgba(255,255,255,.14) !important; }

/* === TGN REVIEW BLOCKS → use theme tokens === */
#review-detail .block, #about .block, .tgn-block{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin: 16px auto;
  box-shadow: var(--shadow);
}
.pc-cards>div, .tgn-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-inset);
}
.faq details, .tgn-faq details{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
}
.tgn-lead, #review-detail .lead, #about .lead{ color: var(--muted); }

.btn{ display:inline-block; padding:12px 16px; border-radius:12px; font-weight:700; line-height:1; text-decoration:none; border:1px solid var(--border); }
.btn-primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b1221; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
html:not(.dark) .btn-outline{ background: rgba(2,8,23,.05); color: var(--text); border:1px solid var(--border); }
html.dark .btn-outline{ background: rgba(255,255,255,.10); color: var(--text); border:1px solid var(--border); }
.btn-primary:hover{ filter:brightness(1.06); transform: translateY(-1px); }
html:not(.dark) .btn-outline:hover{ background: rgba(2,8,23,.08); }
html.dark .btn-outline:hover{ background: rgba(255,255,255,.14); }
/* === /TGN REVIEW BLOCKS === */
/* === TGN review list layout (safe) === */
#reviewsRoot .review-row{
  display:grid; grid-template-columns:120px 1fr max-content;
  gap:16px; align-items:center; border-radius:14px; padding:16px;
}
@media (max-width:900px){
  #reviewsRoot .review-row{ grid-template-columns:120px 1fr; }
  #reviewsRoot .rv-actions{ grid-column:2; justify-self:start; margin-top:10px; }
}
#reviewsRoot .rv-logo img{ display:block; max-width:120px; height:auto; }
#reviewsRoot .rv-main h3{ margin:0 0 6px; }
#reviewsRoot .kv{ display:grid; grid-template-columns:120px 1fr; gap:6px 12px; margin:8px 0; }
#reviewsRoot .kv li{ list-style:none; display:contents; }
#reviewsRoot .kv strong{ opacity:.9; } 
#reviewsRoot .kv span{ opacity:.86; line-height:1.45; }

/* buttons */
#reviewsRoot .rv-actions{ display:inline-flex; gap:12px; justify-self:end; white-space:nowrap; }
#reviewsRoot .rv-actions a{
  display:inline-block; padding:10px 14px; border-radius:12px; font-weight:700; line-height:1;
  text-decoration:none; border:1px solid var(--border, rgba(148,163,184,.15));
}
#reviewsRoot .rv-actions a.primary{
  color:#0b1221;
  background:linear-gradient(135deg,var(--accent,#23d3e1),var(--accent-2,#22d49a));
  border-color:rgba(255,255,255,.16);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
#reviewsRoot .rv-actions a.outline{
  color:var(--text,#e6e8ee);
  background:rgba(255,255,255,.08);
}

/* stars with fill, no number */
#reviewsRoot .stars{ position:relative; display:inline-block; line-height:1; margin:4px 0 0; }
#reviewsRoot .stars__bg, #reviewsRoot .stars__fg{ position:absolute; top:0; left:0; white-space:nowrap; overflow:hidden; }
#reviewsRoot .stars__bg{ position:relative; color:#5b6473; }
#reviewsRoot .stars__fg{ color:#f9cc45; }


/* -------- Card Refresh v2 (compact, higher contrast) -------- */
:root{
  --radius: 14px;
  --shadow-a: 0 1px 2px rgba(2,8,23,.03);
  --shadow-b: 0 4px 10px rgba(2,8,23,.05);
}

/* Base card */
.tgn-block,
body#review-detail .block,
body#about .block{
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-a), var(--shadow-b);
  padding: clamp(14px, 1.8vw, 20px);
}

/* Spacing rhythm */
body#review-detail .block + .block,
body#about .block + .block{
  margin-top: clamp(14px, 1.6vw, 18px);
}

/* Titles & text */
.tgn-block h2, .tgn-block h3,
body#review-detail .block h2, body#review-detail .block h3,
body#about .block h2, body#about .block h3{
  color: var(--text);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 0 0 .5rem 0;
}

.tgn-block p,
body#review-detail .block p,
body#about .block p{
  color: var(--muted);
  margin: .25rem 0 0 0;
}

/* Soft hover ring without lift */
@media (hover:hover){
  .tgn-block:hover,
  body#review-detail .block:hover,
  body#about .block:hover{
    box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-a), var(--shadow-b);
  }
}

/* List tone */
.tgn-block ul, .tgn-block ol,
body#review-detail .block ul, body#review-detail .block ol,
body#about .block ul, body#about .block ol{
  padding-left: 1.15rem;
  margin: .25rem 0 0 0;
  color: var(--muted);
}

/* Micro badge */
.tgn-badge{
  display:inline-block; padding:.2rem .5rem; border:1px solid var(--border);
  border-radius:999px; background:var(--card); color:var(--text); font-size:.84rem;
}
/* -------- End v2 -------- */