/* ==========================================================================
   /slots/reviews/ — every published slot review (scope srl, on the .crx system).
   Template: template-slots-reviews.php. The cards themselves are the shared
   review card (slots-section.css .slv-rv); this file lays them out as a grid and
   styles the head accent, KPI strip, studio chips and sort.
   ========================================================================== */

/* accent + identity tile: slots-section.css (.crx.srl, green) */
.srl .crx-mark{display:grid;place-items:center}
.srl .crx-mark svg{width:28px;height:28px}

.srl .srl-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.srl .srl-kpis .val small{margin-left:2px;font-size:14px;font-weight:600;color:var(--ink-3)}
.srl .srl-kpis .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.srl .srl-sec{margin-top:22px}
.srl .srl-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;margin:4px 0 8px}
.srl .srl-chips{display:flex;flex-wrap:wrap;gap:6px}
.crx .srl-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;
	color:var(--ink-3);background:transparent;border:1px solid var(--hair-2);cursor:pointer;transition:color .16s,background .16s,border-color .16s}
.crx .srl-chip em{font-style:normal;font:600 11.5px/1 var(--font-mono,ui-monospace,monospace);color:var(--ink-4)}
.crx .srl-chip:hover{color:#fff;color:light-dark(#0B1220,#fff);border-color:var(--hair-2)}
.crx .srl-chip[aria-pressed="true"]{color:#fff;color:light-dark(#0B1220,#fff);background:color-mix(in srgb,var(--slv-ac) 12%,transparent);border-color:color-mix(in srgb,var(--slv-ac) 45%,transparent)}
.crx .srl-chip[aria-pressed="true"] em{color:var(--slv-ac)}
.srl .srl-results{margin:0 0 12px;font-size:12.5px;color:var(--ink-4)}

/* the cards as a grid (the same component the review page rails) */
.srl .srl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px 14px}
.srl .srl-grid .slv-rv[hidden]{display:none}

.srl .srl-note{margin-top:28px;padding:14px 16px;border-radius:12px;font-size:12.5px;line-height:1.65;color:var(--ink-4);background:var(--card);border:1px solid var(--hair)}
.srl .srl-note b{color:var(--ink-2)}
.srl .srl-note a{color:var(--cyan,#4FC7EA);text-decoration:underline;text-underline-offset:2px}

@media (max-width:1040px){
	.srl .srl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
	.srl .srl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
	.srl .srl-toolbar{align-items:stretch}
	.srl .srl-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--pad,18px));padding-inline:var(--pad,18px)}
	.srl .srl-chips::-webkit-scrollbar{display:none}
	.crx .srl-chip{flex:0 0 auto;min-height:40px}
	.srl .srl-sort{align-self:flex-start}
	.srl .srl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}
	.srl .srl-grid .slv-rv-name{font-size:13px}
}
@media (max-width:360px){
	.srl .srl-grid{grid-template-columns:minmax(0,1fr)}
}