/* ==========================================================================
   EG Google Reviews — Frontend styles

   All variables are prefixed --ngr-* with fallbacks to --egr-* (theme override)
   with sensible defaults. Themes can override any --egr-* variable at :root
   or any parent scope.
   ========================================================================== */

.egr-reviews {
  /* Colours */
  --ngr-accent:        var(--egr-accent, #79C68C);
  --ngr-accent-start:  var(--egr-accent-start, #119F6B);
  --ngr-accent-end:    var(--egr-accent-end, #87CC9F);
  --ngr-stars:         var(--egr-stars, #f5c518);
  --ngr-text:          var(--egr-text, currentColor);
  --ngr-muted:         var(--egr-muted, rgba(128, 128, 128, 0.9));
  --ngr-heading:       var(--egr-heading, currentColor);
  --ngr-surface:       var(--egr-surface, rgba(128, 128, 128, 0.04));
  --ngr-border:        var(--egr-border, rgba(128, 128, 128, 0.2));

  /* Layout */
  --ngr-gap:           var(--egr-gap, 33px);
  --ngr-padding:       var(--egr-padding, 28px);
  --ngr-radius:        var(--egr-radius, 0);

  /* Typography */
  --ngr-font:          var(--egr-font, inherit);
  --ngr-fs-body:       var(--egr-fs-body, 1rem);
  --ngr-fs-small:      var(--egr-fs-small, 0.875rem);
  --ngr-fs-heading:    var(--egr-fs-heading, 1.5rem);
  --ngr-fw-regular:    var(--egr-fw-regular, 400);
  --ngr-fw-bold:       var(--egr-fw-bold, 700);
  --ngr-line-height:   var(--egr-line-height, 1.6);

  font-family: var(--ngr-font);
  color: var(--ngr-text);
}

/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */

.egr-reviews__heading {
  font-size: var(--ngr-fs-heading);
  font-weight: var(--ngr-fw-bold);
  color: var(--ngr-heading);
  margin: 0 0 1.5em 0;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.egr-reviews__grid {
  display: grid;
  gap: var(--ngr-gap);
  grid-template-columns: 1fr;
}

.egr-reviews--cols-2 .egr-reviews__grid { grid-template-columns: repeat(2, 1fr); }
.egr-reviews--cols-3 .egr-reviews__grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1024px) {
  .egr-reviews--cols-3 .egr-reviews__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .egr-reviews--cols-2 .egr-reviews__grid,
  .egr-reviews--cols-3 .egr-reviews__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Review card
   -------------------------------------------------------------------------- */

.egr-review {
  position: relative;
  margin: 0;
  padding: var(--ngr-padding);
  background: var(--ngr-surface);
  border: 1px solid var(--ngr-border);
  border-radius: var(--ngr-radius);
  font-family: var(--ngr-font);
  line-height: var(--ngr-line-height);
}

/* Green left-border accent (gradient) */
.egr-review::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--ngr-accent-end), var(--ngr-accent-start));
}

/* --------------------------------------------------------------------------
   Stars
   -------------------------------------------------------------------------- */

.egr-review__stars {
  color: var(--ngr-stars);
  font-size: 1.1rem;
  letter-spacing: 2px;
  margin-bottom: 1em;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Review text
   -------------------------------------------------------------------------- */

.egr-review__text {
  font-size: var(--ngr-fs-body);
  color: var(--ngr-text);
  margin: 0 0 1em 0;
  line-height: var(--ngr-line-height);
}

/* --------------------------------------------------------------------------
   Reviewer name
   -------------------------------------------------------------------------- */

.egr-review__name {
  display: block;
  font-style: normal;
  font-weight: var(--ngr-fw-bold);
  color: var(--ngr-accent);
  font-size: var(--ngr-fs-body);
}

/* --------------------------------------------------------------------------
   Owner reply
   -------------------------------------------------------------------------- */

.egr-review__reply {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid var(--ngr-border);
}

.egr-review__reply-label {
  display: block;
  font-size: 0.75rem;
  font-weight: var(--ngr-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ngr-muted);
  margin-bottom: 0.25em;
}

.egr-review__reply-text {
  font-size: var(--ngr-fs-small);
  color: var(--ngr-muted);
  margin: 0;
  line-height: var(--ngr-line-height);
}