/* reviews.css - shared review UI (testimonials.html + homepage section). Design A: Clean Minimal.
   Uses the site tokens from studio-style.css only. Every class is prefixed rv- so nothing leaks. */

.rv-eyebrow { display: inline-flex; gap: 8px; align-items: center; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-dark); }
.rv-head { margin-bottom: 28px; }
.rv-head h1 { font-family: var(--heading-font); font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--text-color); margin: 8px 0 10px; }
.rv-head p { color: var(--text-light); max-width: 620px; line-height: 1.6; }
.rv-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

.rv-btn { display: inline-flex; gap: 8px; align-items: center; border: 0; cursor: pointer; border-radius: 30px; padding: 11px 24px; font-weight: 700; font-family: var(--heading-font); font-size: 0.9rem; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s; }
.rv-btn:active { transform: scale(0.97); }
.rv-btn:focus-visible, .rv-chip:focus-visible, .rv-note button:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 3px; }
.rv-btn--coral { background: linear-gradient(135deg, var(--highlight-color), var(--highlight-dark)); color: #fff; box-shadow: 0 4px 15px rgba(232, 141, 120, 0.3); }
.rv-btn--coral:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(232, 141, 120, 0.4); }
.rv-btn--line { background: #fff; border: 2px solid var(--primary-color); color: var(--primary-dark); }
.rv-btn--line:hover { background: var(--primary-color); color: #fff; transform: translateY(-2px); }

/* Summary: score / distribution / language reach */
.rv-summary { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 22px 28px; background: #fff; border: 1px solid var(--border-color); border-radius: 16px; margin-bottom: 22px; }
.rv-score { text-align: center; }
.rv-score b { display: block; font: 800 3rem/1 var(--heading-font); color: var(--text-color); font-variant-numeric: tabular-nums; }
.rv-stars { color: var(--highlight-color); font-size: 0.9rem; letter-spacing: 2px; }
.rv-score small { color: var(--text-light); font-size: 0.78rem; }
.rv-dist { display: grid; gap: 5px; min-width: 200px; }
.rv-dist div { display: grid; grid-template-columns: 34px 1fr 38px; gap: 8px; align-items: center; font-size: 0.74rem; color: var(--text-light); }
.rv-dist i { display: block; height: 7px; border-radius: 4px; background: var(--border-color); position: relative; overflow: hidden; }
.rv-dist i::after { content: ''; position: absolute; inset: 0; width: var(--w, 0%); background: var(--primary-color); border-radius: 4px; transition: width 0.6s ease; }
.rv-reach { text-align: center; font-size: 0.78rem; color: var(--text-light); max-width: 220px; }
.rv-reach strong { display: block; color: var(--text-color); font-family: var(--heading-font); margin-bottom: 8px; }
.rv-reach__langs { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.rv-reach__langs span { padding: 2px 9px; border-radius: 10px; background: rgba(var(--primary-color-rgb), 0.15); color: var(--primary-dark); font-size: 0.7rem; font-weight: 700; }

/* Toolbar */
.rv-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.rv-search { flex: 1; min-width: 200px; position: relative; }
.rv-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-lighter); font-size: 0.85rem; pointer-events: none; }
.rv-search input { width: 100%; padding: 11px 16px 11px 42px; border: 2px solid var(--border-color); border-radius: 30px; background: #fff; font-family: var(--font-family); font-size: 0.92rem; transition: border-color 0.2s, box-shadow 0.2s; }
.rv-search input:focus { outline: 0; border-color: var(--highlight-color); box-shadow: 0 0 0 3px rgba(232, 141, 120, 0.15); }
.rv-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-chip { border: 2px solid var(--border-color); background: #fff; border-radius: 20px; padding: 8px 15px; font-family: var(--font-family); font-size: 0.82rem; font-weight: 600; color: var(--text-light); cursor: pointer; transition: all 0.2s; }
.rv-chip:hover { border-color: var(--highlight-light); color: var(--highlight-dark); }
.rv-chip.is-on { background: var(--highlight-color); border-color: var(--highlight-color); color: #fff; }
.rv-lang { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 6px 8px 6px 14px; border: 2px solid var(--primary-color); border-radius: 30px; background: var(--celestial-dark); font-size: 0.82rem; font-weight: 600; color: var(--text-color); }
.rv-lang i { color: var(--primary-dark); }
.rv-lang select { border: 0; background: transparent; font-family: var(--font-family); font-size: 0.82rem; font-weight: 700; color: var(--text-color); cursor: pointer; padding: 4px; max-width: 160px; }
.rv-lang--plain { border-color: var(--border-color); background: #fff; }
.rv-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.rv-topics .rv-chip { padding: 5px 13px; font-size: 0.74rem; border-width: 1.5px; }
.rv-topics .rv-chip.is-on { background: var(--primary-dark); border-color: var(--primary-dark); }

/* Cards */
.rv-grid { columns: 3; column-gap: 22px; }
.rv-grid > .rv-card, .rv-grid > .rv-sk { break-inside: avoid; margin-bottom: 22px; }
.rv-hgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1100px; margin: 0 auto; text-align: left; }
.rv-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 24px; position: relative; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; animation: rvRise 0.45s ease both; }
.rv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary-light); }
@keyframes rvRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rv-who { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.rv-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--highlight-light), var(--highlight-color)); color: #fff; font: 700 0.92rem var(--heading-font); flex: none; }
.rv-who b { display: block; font: 700 0.95rem var(--heading-font); color: var(--primary-dark); overflow-wrap: anywhere; }
.rv-who small { display: block; color: var(--text-lighter); font-size: 0.74rem; }
.rv-card .rv-stars { display: block; margin-bottom: 8px; }
.rv-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.rv-tag { padding: 3px 10px; border-radius: 12px; background: rgba(var(--primary-color-rgb), 0.15); color: var(--primary-dark); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.rv-quote { font-style: italic; color: var(--text-light); font-size: 0.95rem; line-height: 1.7; overflow-wrap: anywhere; transition: opacity 0.2s; }
.rv-card.is-loading .rv-quote { opacity: 0.55; }
.rv-note { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-color); font-size: 0.72rem; color: var(--text-light); }
.rv-note[hidden] { display: none; }
.rv-note i { color: var(--primary-dark); }
.rv-note .rv-lc { padding: 1px 8px; border-radius: 8px; background: rgba(var(--primary-color-rgb), 0.15); font-weight: 700; color: var(--primary-dark); }
.rv-note button { border: 0; background: none; color: var(--highlight-dark); font: 700 0.72rem var(--font-family); cursor: pointer; text-decoration: underline; padding: 0; }
.rv-note button:hover { color: var(--text-color); }

/* States */
.rv-sk { background: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 24px; }
.rv-sk i { display: block; height: 13px; border-radius: 6px; margin-bottom: 10px; background: linear-gradient(90deg, var(--border-color) 25%, var(--celestial-dark) 50%, var(--border-color) 75%); background-size: 200% 100%; animation: rvPulse 1.4s ease-in-out infinite; }
.rv-sk i.rv-sk__av { width: 44px; height: 44px; border-radius: 50%; }
@keyframes rvPulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.rv-state { text-align: center; padding: 56px 16px; color: var(--text-light); column-span: all; grid-column: 1 / -1; }
.rv-state i { display: block; font-size: 2.4rem; color: var(--primary-light); margin-bottom: 12px; }
.rv-state.is-error i { color: var(--highlight-color); }
.rv-state h3 { font-family: var(--heading-font); color: var(--text-color); margin-bottom: 6px; }
.rv-state .rv-btn { margin-top: 14px; }
.rv-more { text-align: center; margin-top: 30px; }
.rv-more small { display: block; margin-top: 10px; color: var(--text-light); font-size: 0.82rem; }
.rv-foot-note { text-align: center; font-size: 0.76rem; color: var(--text-light); margin-top: 18px; }
.rv-foot-note i { color: var(--primary-dark); }
.rv-toast { position: fixed; bottom: 22px; right: 22px; max-width: 360px; display: flex; gap: 10px; align-items: center; padding: 12px 16px; background: #fff; border: 1px solid var(--border-color); border-left: 3px solid var(--primary-dark); border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 0.82rem; color: var(--text-color); z-index: 1100; animation: rvRise 0.3s ease; }
.rv-toast[hidden] { display: none; }
.rv-toast i { color: var(--primary-dark); }

/* Homepage strip above the cards */
.rv-home-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto 22px; }
.rv-home-bar p { color: var(--text-light); font-size: 0.85rem; }
.rv-home-bar p i { color: var(--primary-dark); margin-right: 6px; }

@media (max-width: 1024px) { .rv-grid { columns: 2; } .rv-hgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
	.rv-summary { grid-template-columns: 1fr; text-align: center; }
	.rv-dist { margin: 0 auto; width: 100%; }
	.rv-reach { max-width: none; }
	.rv-home-bar { justify-content: center; text-align: center; }
}
@media (max-width: 640px) {
	.rv-grid { columns: 1; }
	.rv-hgrid { grid-template-columns: 1fr; }
	.rv-toolbar { flex-direction: column; align-items: stretch; }
	.rv-lang { justify-content: space-between; }
	.rv-toast { left: 16px; right: 16px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .rv-card, .rv-sk i, .rv-toast { animation: none; } .rv-card, .rv-btn { transition: none; } }