/* ============================================================
   Harmony Clinic — Casi studio pubblici (griglia + filtri + card)
   Modello immagine singola quadrata. Usa le variabili di site.css.
   ============================================================ */

.cs-section{padding-top:34px}

/* ---- Filtri (chip) ---- */
.cs-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 30px}
.cs-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,249,251,.04);
  border:1px solid var(--line-dark,#301D2A);color:var(--white-100,#FFF9FB);
  border-radius:999px;padding:9px 16px;font-family:inherit;font-size:.86rem;font-weight:600;
  cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.cs-chip:hover{border-color:var(--rose-500,#F39BBB)}
.cs-chip.active{background:var(--rose-500,#F39BBB);color:var(--text-dark,#211B20);border-color:var(--rose-500,#F39BBB)}
.cs-chip-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:999px;background:rgba(0,0,0,.18);font-size:.72rem;font-weight:700}
.cs-chip.active .cs-chip-n{background:rgba(33,27,32,.18)}

/* ---- Griglia ---- */
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cs-grid-status{text-align:center;color:var(--text-muted,#B9A6B2);padding:20px;font-size:.9rem}
.cs-empty{grid-column:1/-1;text-align:center;color:var(--text-muted,#B9A6B2);padding:40px 0}

/* ---- Card ---- */
.cs-card{background:linear-gradient(180deg,rgba(255,249,251,.03),rgba(255,249,251,.01));
  border:1px solid var(--line-dark,#301D2A);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.cs-card-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--bg-800,#171119)}
.cs-card-img .cs-slot,.cs-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.cs-card-tag{position:absolute;left:12px;top:12px;background:rgba(17,13,19,.72);color:var(--rose-300,#F9DDE7);
  border:1px solid rgba(243,155,187,.35);border-radius:999px;padding:5px 12px;font-size:.72rem;font-weight:700;
  backdrop-filter:blur(4px);letter-spacing:.2px}
/* Badge PRIMA/DOPO in sovraimpressione (stesso stile del tag categoria) */
.cs-ba-badge{position:absolute;bottom:12px;background:rgba(17,13,19,.72);color:var(--rose-300,#F9DDE7);
  border:1px solid rgba(243,155,187,.35);border-radius:999px;padding:5px 12px;font-size:.72rem;font-weight:700;
  backdrop-filter:blur(4px);letter-spacing:.2px;pointer-events:none}
.cs-ba-badge.b{left:12px}
.cs-ba-badge.a{right:12px}
.cs-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.cs-card-who{font-family:var(--display,'Cormorant Garamond',serif);font-size:1.3rem;font-weight:600;color:var(--white-100,#FFF9FB);line-height:1.1}
.cs-card-res{color:var(--rose-300,#F9DDE7);font-weight:600;font-size:.92rem}
.cs-card-desc{color:var(--text-muted,#B9A6B2);font-size:.86rem;line-height:1.5;margin:2px 0 0}
.cs-card .stars{color:var(--rose-500,#F39BBB);font-size:.9rem;letter-spacing:2px;margin-top:auto;padding-top:6px}

/* ---- Carica altri ---- */
.cs-more-wrap{display:flex;justify-content:center;margin:30px 0 6px}
.cs-more[hidden]{display:none}

/* ---- Responsive ---- */
@media(max-width:900px){
  .cs-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media(max-width:560px){
  .cs-grid{grid-template-columns:1fr}
  .cs-filters{gap:8px}
  .cs-chip{font-size:.8rem;padding:8px 13px}
}