/* WheelShell Reviews Pro XL v4.2 */

/* Legacy stacked layout */
.wsr-box{display:flex;align-items:flex-start;gap:22px;margin:28px 0;padding:20px;border-radius:16px;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.06)}
.wsr-box.wsr-reverse{flex-direction:row-reverse}
.wsr-left{flex:0 0 auto;width:var(--wsr-desktop-img,552px)}
.wsr-left img{width:100%;height:auto;border-radius:14px;display:block;object-fit:cover;box-shadow:0 6px 20px rgba(0,0,0,.10)}
.wsr-right{flex:1;min-width:0}
.wsr-header{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.wsr-stars{font-size:var(--wsr-star-size,28px);line-height:1;color:var(--wsr-star-color,#f7b500)}
.wsr-star{opacity:.35;display:inline-block}
.wsr-star.filled{opacity:1}
.wsr-summary{display:flex;flex-direction:column;gap:2px}
.wsr-name{font-weight:700}
.wsr-date{font-size:15px;color:#666}
.wsr-loc{font-size:15px;color:#444}
.wsr-text{font-style:italic;color:#1a1a1a;margin:8px 0 14px}

/* New GRID layout */
.wsr-grid{display:grid;grid-template-columns:repeat(var(--wsr-cols,4), minmax(0,1fr));gap:var(--wsr-gap,24px)}
.wsr-card{background:#fff;border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.06);overflow:hidden;display:flex;flex-direction:column;height:100%}
/* Aspect ratio control via CSS var */
.wsr-card-media{position:relative}
.wsr-card-media img{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:var(--wsr-aspect,1/1);border-bottom:1px solid rgba(0,0,0,.06)}
.wsr-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.wsr-card-header{display:flex;align-items:center;gap:10px;justify-content:space-between}
.wsr-card .wsr-stars{font-size:var(--wsr-star-size,22px)}
.wsr-card .wsr-text{margin:0;color:#1a1a1a;font-style:italic}
.wsr-card .wsr-meta{font-size:16px;color:#333}
.wsr-card .wsr-name{font-weight:700}
.wsr-card .wsr-date{font-size:14px;color:#666}

/* Responsiveness using CSS vars for per-breakpoint column counts */
@media (max-width: 1200px){
  .wsr-grid{grid-template-columns:repeat(var(--wsr-cols-md,3), minmax(0,1fr))}
}
@media (max-width: 900px){
  .wsr-grid{grid-template-columns:repeat(var(--wsr-cols-md,2), minmax(0,1fr))}
}
@media (max-width: 600px){
  .wsr-grid{grid-template-columns:repeat(var(--wsr-cols-sm,1), minmax(0,1fr))}
  .wsr-box{flex-direction:column;padding:16px;gap:18px}
  .wsr-box.wsr-reverse{flex-direction:column}
  .wsr-left{width:100%}
}