/* ============================================================
   MAESTRO CLO. — Customer Reviews
   Used by reviews.html and the "What our customers say" strip on index.html.
   Cards, "Write a review" popup, photo viewer and floating button.
   ============================================================ */

/* ---------- Page hero ---------- */
.rv-hero{ padding:calc(var(--header-h) + 64px) 0 36px; text-align:center; }
.rv-hero .eyebrow{ margin-bottom:14px; }
.rv-hero h1{ font-family:var(--font-editorial); font-size:clamp(36px,6.5vw,68px); font-weight:500; line-height:1.04; margin-bottom:18px; }
.rv-hero > .wrap > p.rv-lead{ max-width:560px; margin:0 auto; color:var(--stone); font-size:16px; line-height:1.7; }

.rv-summary{ display:inline-flex; align-items:center; gap:18px; margin:30px auto 26px; padding:14px 26px; background:#fff; border:1px solid var(--border); border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.05); }
.rv-summary[hidden]{ display:none; }
.rv-summary-num{ font-family:var(--font-editorial); font-size:40px; font-weight:500; line-height:1; }
.rv-summary-meta{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; }
.rv-summary-meta small{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); }

/* ---------- Stars ---------- */
.rv-stars{ display:inline-flex; font-size:16px; letter-spacing:2px; line-height:1; }
.rv-stars .on{ color:var(--black); }
.rv-stars .off{ color:#D9D6CF; }

/* ---------- Buttons ---------- */
.rv-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 28px; border-radius:999px; background:var(--black); color:var(--ivory); border:1px solid var(--black); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.rv-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.22); }
.rv-btn:active{ transform:none; }
.rv-btn[disabled]{ opacity:.6; cursor:wait; transform:none; box-shadow:none; }
.rv-btn.ghost{ background:transparent; color:var(--black); }
.rv-btn.ghost:hover{ background:var(--black); color:var(--ivory); }
.rv-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* ---------- Review cards ---------- */
.rv-wrap{ padding-bottom:110px; }
.rv-wall{ column-count:3; column-gap:22px; }
.rv-card{ break-inside:avoid; -webkit-column-break-inside:avoid; display:block; margin:0 0 22px; background:#fff; border:1px solid var(--border); border-radius:24px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.05); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.rv-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.10); }

.rv-photo{ display:block; width:calc(100% - 24px); margin:12px 12px 0; padding:0; border:0; border-radius:16px; overflow:hidden; background:#E9E4DA; cursor:zoom-in; }
.rv-photo img{ width:100%; height:auto; max-height:440px; object-fit:cover; transition:transform .7s var(--ease); }
.rv-card:hover .rv-photo img{ transform:scale(1.04); }

.rv-body{ padding:20px 22px 22px; }
.rv-card.no-photo .rv-body{ padding-top:26px; }
.rv-card.no-photo .rv-body::before{ content:"“"; display:block; font-family:var(--font-editorial); font-size:64px; line-height:.5; height:26px; color:#CFCAC0; }
.rv-text{ margin:12px 0 18px; font-size:15px; line-height:1.75; color:#2b2a27; overflow-wrap:anywhere; }
.rv-who{ display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid #EEEBE4; }
.rv-avatar{ flex:none; width:38px; height:38px; border-radius:50%; background:var(--black); color:var(--ivory); display:grid; place-items:center; font-family:var(--font-editorial); font-size:18px; font-weight:500; text-transform:uppercase; }
.rv-who-text{ min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.rv-who-text b{ font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rv-who-text span{ font-size:12px; color:var(--stone); }

/* skeleton while loading */
.rv-skel{ min-height:260px; background:linear-gradient(100deg,#EFECE5 30%,#F8F6F1 50%,#EFECE5 70%); background-size:200% 100%; animation:rvShimmer 1.4s linear infinite; border-color:transparent; box-shadow:none; }
.rv-skel:nth-child(2){ min-height:340px; }
@keyframes rvShimmer{ to{ background-position:-200% 0; } }

.rv-more{ display:flex; justify-content:center; margin-top:10px; }
.rv-empty{ max-width:520px; margin:10px auto 0; padding:44px 30px; text-align:center; background:#fff; border:1px dashed var(--border); border-radius:24px; }
.rv-empty h3{ font-family:var(--font-editorial); font-size:30px; font-weight:500; margin-bottom:8px; }
.rv-empty p{ color:var(--stone); margin-bottom:22px; line-height:1.7; }

/* ---------- Home strip ---------- */
.rv-strip-section{ padding:110px 40px 100px; }
@media (max-width:768px){ .rv-strip-section{ padding:70px 20px 80px; } }
.rv-strip-box{ position:relative; }
.rv-strip{ display:flex; gap:20px; overflow-x:auto; padding:6px 4px 26px; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.rv-strip::-webkit-scrollbar{ display:none; }
.rv-strip .rv-card{ flex:0 0 min(310px,82vw); margin:0; scroll-snap-align:start; display:flex; flex-direction:column; }
.rv-strip .rv-photo img{ aspect-ratio:4/4.4; max-height:none; }
.rv-strip .rv-body{ flex:1; display:flex; flex-direction:column; }
.rv-strip .rv-text{ display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.rv-strip .rv-who{ margin-top:auto; }
.rv-strip-nav{ display:flex; gap:10px; justify-content:center; margin:2px 0 26px; }
.rv-strip-nav button{ width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:#fff; font-size:18px; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.rv-strip-nav button:hover{ background:var(--black); color:var(--ivory); border-color:var(--black); }
.rv-strip-nav[hidden]{ display:none; }

/* ---------- Floating "Write a review" button (reviews page) ---------- */
.rv-fab{ position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom,0px)); z-index:900; display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px; background:var(--black); color:var(--ivory); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 12px 30px rgba(0,0,0,.28); opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.rv-fab.show{ opacity:1; transform:none; pointer-events:auto; }
.rv-fab:hover{ transform:translateY(-2px); }

/* ---------- "Write a review" popup ---------- */
html.rv-lock, html.rv-lock body{ overflow:hidden; }
.rv-overlay{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(17,17,17,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s; }
.rv-overlay.open{ opacity:1; visibility:visible; }
.rv-dialog{ position:relative; width:100%; max-width:540px; max-height:calc(100vh - 36px); max-height:calc(100dvh - 36px); overflow-y:auto; background:var(--ivory); border-radius:28px; padding:34px 32px 30px; box-shadow:0 30px 80px rgba(0,0,0,.35); transform:translateY(18px) scale(.98); transition:transform .3s var(--ease); }
.rv-overlay.open .rv-dialog{ transform:none; }
.rv-close{ position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--border); font-size:20px; line-height:1; display:grid; place-items:center; }
.rv-close:hover{ background:var(--black); color:var(--ivory); }
.rv-dialog h2{ font-family:var(--font-editorial); font-size:32px; font-weight:500; line-height:1.1; margin-bottom:6px; padding-right:40px; }
.rv-dialog .rv-sub{ color:var(--stone); font-size:14px; line-height:1.6; margin-bottom:22px; }

.rv-field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; border:0; min-width:0; }
.rv-field > label, .rv-field > legend{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#3a3935; padding:0; }
.rv-field > label i, .rv-field > legend i{ font-style:normal; font-weight:400; letter-spacing:.04em; text-transform:none; color:var(--stone); }
.rv-field input[type="text"], .rv-field textarea{ width:100%; padding:13px 15px; font-size:15px; font-family:inherit; color:var(--black); background:#fff; border:1px solid var(--border); border-radius:14px; transition:border-color .2s, box-shadow .2s; }
.rv-field textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.rv-field input[type="text"]:focus, .rv-field textarea:focus{ outline:none; border-color:var(--black); box-shadow:0 0 0 3px rgba(17,17,17,.08); }
.rv-count{ align-self:flex-end; font-size:12px; color:var(--stone); }

/* photo picker */
.rv-drop{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:130px; padding:18px; text-align:center; background:#fff; border:1.5px dashed #C7C2B8; border-radius:18px; cursor:pointer; overflow:hidden; transition:border-color .2s, background .2s; }
.rv-drop:hover, .rv-drop.drag{ border-color:var(--black); background:#FBFAF7; }
.rv-drop svg{ color:var(--stone); }
.rv-drop strong{ font-size:14px; font-weight:600; }
.rv-drop span{ font-size:12px; color:var(--stone); }
.rv-drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.rv-preview{ position:relative; display:none; }
.rv-preview img{ width:100%; max-height:260px; object-fit:cover; border-radius:18px; border:1px solid var(--border); }
.rv-preview button{ position:absolute; top:10px; right:10px; padding:7px 14px; border-radius:999px; background:rgba(17,17,17,.85); color:#fff; font-size:12px; font-weight:600; }
.rv-field.has-photo .rv-drop{ display:none; }
.rv-field.has-photo .rv-preview{ display:block; }

/* star picker: markup is 5..1, shown 1..5 so hovering a star fills the ones before it */
.rv-rate{ display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px; align-self:flex-start; }
.rv-rate input{ position:absolute; opacity:0; pointer-events:none; }
.rv-rate label{ font-size:34px; line-height:1; color:#D2CDC3; cursor:pointer; transition:color .15s, transform .15s; letter-spacing:0; }
.rv-rate label:hover, .rv-rate label:hover ~ label, .rv-rate input:checked ~ label{ color:var(--black); }
.rv-rate label:hover{ transform:scale(1.12); }
.rv-rate input:focus-visible + label{ outline:2px solid var(--black); outline-offset:3px; border-radius:6px; }

.rv-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }
.rv-error{ min-height:20px; margin:-4px 0 12px; font-size:13px; color:#b03a2e; }
.rv-submit{ width:100%; }
.rv-note{ margin-top:12px; font-size:12px; text-align:center; color:var(--stone); }

.rv-thanks{ text-align:center; padding:18px 6px 6px; }
.rv-thanks .rv-check{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:var(--black); color:var(--ivory); display:grid; place-items:center; font-size:30px; }
.rv-thanks h2{ padding:0; margin-bottom:10px; }
.rv-thanks p{ color:var(--stone); line-height:1.7; margin-bottom:24px; }

/* ---------- Photo viewer ---------- */
.rv-lightbox{ position:fixed; inset:0; z-index:10001; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(10,10,10,.88); cursor:zoom-out; }
.rv-lightbox.open{ display:flex; }
.rv-lightbox img{ max-width:min(94vw,1100px); max-height:90vh; border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.rv-lightbox button{ position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:50%; background:#fff; color:#111; font-size:22px; }

/* ---------- Responsive ---------- */
@media (max-width:980px){ .rv-wall{ column-count:2; } }
@media (max-width:620px){
  .rv-hero{ padding-top:calc(var(--header-h) + 36px); }
  .rv-wall{ column-count:1; }
  .rv-dialog{ padding:28px 20px 22px; border-radius:24px; }
  .rv-overlay{ align-items:flex-end; padding:10px; }
  .rv-summary{ gap:14px; padding:12px 20px; }
  .rv-fab{ right:14px; padding:13px 18px; }
}
@media (prefers-reduced-motion:reduce){
  .rv-card, .rv-photo img, .rv-dialog, .rv-overlay, .rv-fab, .rv-btn{ transition:none; }
  .rv-skel{ animation:none; }
}

.rv-strip-empty{ text-align:center; color:var(--stone); font-family:var(--font-editorial); font-style:italic; font-size:22px; margin:0 0 28px; }