/* ==========================================================================
   Grid Review — Elementor widget additions
   grid-review.css is an unchanged copy of the original; this file only
   adds what the widget needs on top of it.
   ========================================================================== */

/* ---- Style-tab hooks -------------------------------------------------------
   The original gradient and single grid gap, re-expressed with custom
   properties (same default values) so the widget can change them. */
.grid-review-section {
  --gr-bg-glow: #FFFFFF;
  --gr-bg-top: #F1F7FF;
  --gr-bg-bottom: #E5F0FC;
  background:
    radial-gradient(55% 40% at 50% 20%, var(--gr-bg-glow) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--gr-bg-top) 0%, var(--gr-light-blue) 55%, var(--gr-bg-bottom) 100%);
}

.grid-review-section .grid-review-grid {
  column-gap: var(--gr-col-gap, var(--gr-gap));
  row-gap: var(--gr-row-gap, var(--gr-gap));
}

/* ---- Elementor's global image reset ---------------------------------------
   Elementor's frontend.css has `.elementor img { height: auto; ... }`
   (specificity 0,1,1, same as the original rule), which would leave the
   photo short of its fixed-ratio frame. */
.grid-review-section .grid-review-photo img {
  height: 100%;
}

/* ---- Optional parts left empty ---------------------------------------------
   Without a photo the text spans the whole card and the hover accent line
   starts at the card padding. */
.grid-review-card--no-photo {
  grid-template-columns: minmax(0, 1fr);
}

.grid-review-card--no-photo::before {
  left: var(--gr-pad);
}

@media (max-width: 899px) {
  .grid-review-card--no-photo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "meta"
      "author"
      "quote"
      "more";
  }
}

/* Rating hidden: the quote badge stays on the right. */
.grid-review-meta > .grid-review-quote-icon:only-child {
  margin-left: auto;
}

/* Editor-only empty state */
.grid-review-empty {
  padding: 48px 24px;
  border: 2px dashed rgba(11, 53, 109, 0.2);
  font: 500 15px/1.5 "DM Sans", system-ui, sans-serif;
  color: #4D6280;
  text-align: center;
}