/* ==========================================================================
   Energy Camp — Google Reviews
   Scoped under .ecr-scope and wrapped in :where() so specificity stays at one
   class: Elementor's .elementor-element-XXX rules always win, and the host
   theme's global type rules never leak in.
   Fonts deliberately inherit from the page so the section picks up whatever
   the rest of the site already uses.
   ========================================================================== */

.ecr-scope {
  --ecr-ink: #0B0B0B;
  --ecr-muted: #6B7280;
  --ecr-eyebrow: #8A94A6;
  --ecr-rule: #DCDCDC;
  --ecr-star: #111111;
  --ecr-star-empty: #D4D4D4;
  --ecr-btn-bg: #000000;
  --ecr-btn-text: #FFFFFF;
  --ecr-avatar-bg: #111111;
  --ecr-avatar-text: #FFFFFF;

  --ecr-per: 3;
  --ecr-gap: 34px;

  color: var(--ecr-ink);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}

:where(.ecr-scope) *,
:where(.ecr-scope) *::before,
:where(.ecr-scope) *::after { box-sizing: border-box; }

:where(.ecr-scope) p,
:where(.ecr-scope) h2,
:where(.ecr-scope) h3,
:where(.ecr-scope) figure { margin: 0; padding: 0; }

:where(.ecr-scope) a { color: inherit; text-decoration: none; }
:where(.ecr-scope) img { max-width: 100%; display: block; }

/* --- Heading block ------------------------------------------------------ */
:where(.ecr-scope) .ecr-eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ecr-eyebrow);
  font-weight: 600;
  margin-bottom: 18px;
}

:where(.ecr-scope) .ecr-heading {
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 800;
  color: var(--ecr-ink);
}

/* --- Rating summary ----------------------------------------------------- */
:where(.ecr-scope) .ecr-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  flex-wrap: wrap;
}
:where(.ecr-scope) .ecr-score {
  font-size: 40px;
  line-height: 1;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.01em;
}
:where(.ecr-scope) .ecr-summary-meta { display: flex; flex-direction: column; gap: 5px; }
:where(.ecr-scope) .ecr-summary-count {
  font-size: 13px;
  color: var(--ecr-muted);
  letter-spacing: 0.02em;
}

/* --- Stars -------------------------------------------------------------- */
:where(.ecr-scope) .ecr-stars {
  display: inline-flex;
  gap: 3px;
  line-height: 0;
}
:where(.ecr-scope) .ecr-stars svg {
  width: 1em;
  height: 1em;
  display: block;
  fill: var(--ecr-star);
}
:where(.ecr-scope) .ecr-stars .ecr-star-off { fill: var(--ecr-star-empty); }
:where(.ecr-scope) .ecr-summary .ecr-stars { font-size: 17px; }
:where(.ecr-scope) .ecr-card .ecr-stars { font-size: 13px; }

/* --- Carousel ----------------------------------------------------------- */
:where(.ecr-scope) .ecr-carousel { margin-top: 40px; position: relative; }

:where(.ecr-scope) .ecr-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--ecr-per) - 1) * var(--ecr-gap)) / var(--ecr-per));
  gap: var(--ecr-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
:where(.ecr-scope) .ecr-track::-webkit-scrollbar { display: none; }

:where(.ecr-scope) .ecr-card {
  scroll-snap-align: start;
  border-top: 1px solid var(--ecr-rule);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

:where(.ecr-scope) .ecr-quote {
  font-size: 16.5px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--ecr-ink);
  margin-top: 12px;
  /* Cards in a row stay level regardless of quote length. */
  flex: 1 1 auto;
}
:where(.ecr-scope) .ecr-card--no-stars .ecr-quote { margin-top: 0; }

:where(.ecr-scope) .ecr-who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
:where(.ecr-scope) .ecr-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ecr-avatar-bg);
  color: var(--ecr-avatar-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
:where(.ecr-scope) .ecr-avatar img { width: 100%; height: 100%; object-fit: cover; }
:where(.ecr-scope) .ecr-name {
  font-size: 13.5px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.01em;
}
:where(.ecr-scope) .ecr-meta {
  font-size: 12px;
  font-style: italic;
  color: var(--ecr-muted);
  margin-top: 2px;
}

/* --- Dots --------------------------------------------------------------- */
:where(.ecr-scope) .ecr-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 26px;
}
.ecr-scope .ecr-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--ecr-ink);
  background: transparent !important;
  padding: 0;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none !important;
}
.ecr-scope .ecr-dot.is-active { background: var(--ecr-ink) !important; }
.ecr-scope .ecr-dot:focus-visible { outline: 2px solid var(--ecr-ink); outline-offset: 3px; }

/* --- Call to action ----------------------------------------------------- */
:where(.ecr-scope) .ecr-cta-row { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 14px; }
:where(.ecr-scope) .ecr-btn {
  display: inline-block;
  background: var(--ecr-btn-bg);
  color: var(--ecr-btn-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 20px 34px;
  transition: opacity .18s ease, transform .18s ease;
}
:where(.ecr-scope) .ecr-btn:hover { opacity: 0.86; transform: translateY(-2px); }
:where(.ecr-scope) .ecr-btn--ghost {
  background: transparent;
  color: var(--ecr-ink);
  border: 1px solid var(--ecr-ink);
}

:where(.ecr-scope) .ecr-empty {
  border: 1px dashed var(--ecr-rule);
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ecr-muted);
}

.ecr-scope .ecr-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Breakpoints match Elementor's defaults so the plugin fallback and any
   Elementor-generated override always agree. */
@media (max-width: 1024px) {
  .ecr-scope { --ecr-per: 2; --ecr-gap: 26px; }
}

@media (max-width: 767px) {
  .ecr-scope { --ecr-per: 1; --ecr-gap: 20px; }
  :where(.ecr-scope) .ecr-carousel { margin-top: 30px; }
  :where(.ecr-scope) .ecr-cta-row { margin-top: 32px; }
  :where(.ecr-scope) .ecr-btn { padding: 17px 26px; width: 100%; text-align: center; }
  /* One card at a time: stretching the quote to the tallest card's height
     would leave a hole between the quote and the author, so let each card
     keep its natural height instead. */
  :where(.ecr-scope) .ecr-track { align-items: start; }
  :where(.ecr-scope) .ecr-quote { flex: 0 0 auto; }
  :where(.ecr-scope) .ecr-who { margin-top: 20px; }
  :where(.ecr-scope) .ecr-dots { flex-wrap: wrap; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ecr-scope .ecr-track { scroll-behavior: auto; }
  .ecr-scope * { transition-duration: 0.01ms !important; }
}