/* ===========================================================
   Spacivo Customer Reviews — heading + "View More" link above a row of
   review cards (photo/video thumbnail with name+location overlay, and a
   quote below with configurable font/size/color). Self-contained plugin
   CSS (no theme dependency beyond the theme's own .container wrapper and
   --color-accent variable).
   =========================================================== */

.spacivo-cr-section { padding: 3rem 0; }

.spacivo-cr-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.spacivo-cr-heading { margin: 0; font-size: 1.6rem; font-weight: 700; color: #2A211D; }
.spacivo-cr-view-more {
  display: inline-flex; align-items: center; gap: .25rem;
  color: var(--color-accent, #72192D); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap;
}
.spacivo-cr-view-more:hover { text-decoration: none; }

.spacivo-cr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.spacivo-cr-card {
  position: relative; background: #fff; border-radius: 10px; padding: 1.25rem 1.5rem 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
/* Decorative quote marks, top-left and bottom-right, matching the reference design. */
.spacivo-cr-card::before,
.spacivo-cr-card::after {
  content: '\201C'; position: absolute; font-family: Georgia, serif; font-size: 3.5rem; line-height: 1;
  color: #ECE7DE; z-index: 0;
}
.spacivo-cr-card::before { top: -.5rem; left: .25rem; }
.spacivo-cr-card::after { content: '\201D'; bottom: -2.25rem; right: .25rem; }

.spacivo-cr-card__media {
  position: relative; z-index: 1; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
  margin-bottom: 1rem; background: #F1ECE5;
}
.spacivo-cr-card__image { width: 100%; height: 100%; object-fit: cover; display: block; }

.spacivo-cr-card__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); border: none;
  display: flex; align-items: center; justify-content: center; color: #2A211D; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.2); transition: transform .2s ease;
}
.spacivo-cr-card__play svg { margin-left: 2px; }
.spacivo-cr-card__play:hover { transform: translate(-50%, -50%) scale(1.08); }

.spacivo-cr-card__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 2rem .9rem .7rem; text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  display: flex; flex-direction: column; gap: .1rem;
}
.spacivo-cr-card__name { color: #fff; font-weight: 700; font-size: .95rem; }
.spacivo-cr-card__location { color: #eee; font-size: .8rem; }

.spacivo-cr-card__quote { position: relative; z-index: 1; margin: 0; text-align: center; font-style: italic; line-height: 1.5; }

.spacivo-cr-unconfigured-notice {
  font-size: .85rem; color: #a22022; background: #fff3f3; border: 1px dashed #a22022;
  padding: .75rem 1rem; margin: 1rem auto; max-width: 1280px;
}

/* --- Lightbox --- */
.spacivo-cr-lightbox { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; }
.spacivo-cr-lightbox.is-open { display: flex; }
.spacivo-cr-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.8); }
.spacivo-cr-lightbox__content { position: relative; z-index: 1; width: 90%; max-width: 800px; aspect-ratio: 16 / 9; background: #000; }
.spacivo-cr-lightbox__media { width: 100%; height: 100%; }
.spacivo-cr-lightbox__media iframe,
.spacivo-cr-lightbox__media video { width: 100%; height: 100%; border: none; display: block; }
.spacivo-cr-lightbox__close {
  position: absolute; top: -2.5rem; right: 0; background: none; border: none; color: #fff;
  font-size: 2rem; line-height: 1; cursor: pointer;
}

@media (max-width: 1024px) {
  .spacivo-cr-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .spacivo-cr-grid { grid-template-columns: 1fr; }
}