/* ──────────────────────────────────────────────────────────────────────────
   Testimonials V2 — "[Company] Client Testimonials"
   Banded section on the light page background: a centered gold star eyebrow
   over a section title, then a grid of testimonial cards. Each card has a
   rounded project image, a circular avatar (image or initial-letter), a gold
   star rating, a client name and a review paragraph. 3 → 2 → 1 columns.
   Desktop-first: base rules = desktop, step DOWN at 1024 (tablet) / 768 (mobile).
   ────────────────────────────────────────────────────────────────────────── */

/* ── Brand tokens ────────────────────────────────────────────────────────── */
/* Scoped to .aew-tsv2 so they don't leak. Source of truth: design-system.md. */
.aew-tsv2 {
  --aew-cards:             var(--e-global-color-aew-cards, #FFFFFF);
  --aew-background:        var(--e-global-color-aew-background, #F4F4F4);
  --aew-lines:             var(--e-global-color-aew-lines, #DDDDDD);
  --aew-misc-accent:       var(--e-global-color-aew-misc-accent, #666666);
  --aew-secondary-cards:   var(--e-global-color-aew-secondary-cards, #EEEEEE);
  --aew-secondary-bg:      var(--e-global-color-aew-secondary-bg, #333333);
  --aew-secondary-accent:  var(--e-global-color-aew-secondary-accent, #555555);
  --aew-text:              var(--e-global-color-aew-text, #1A1A1A);
  --aew-cta:               var(--e-global-color-aew-cta, #444444);
  --aew-cta-hover:         var(--e-global-color-aew-cta-hover, #2B2B2B);
}

/* ── Strip Elementor's column padding (full-bleed) ───────────────────────── */
.elementor-column
  > .elementor-element-populated:has(.elementor-widget-agency-testimonials-v2),
.e-con:has(> .e-con-inner > .elementor-widget-agency-testimonials-v2),
.e-con:has(.elementor-widget-agency-testimonials-v2) {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  padding: 0 !important;
}

/* ── Force the host section/container to full width so the inner wrapper can
   reach its (≥1440) max-width on wide screens instead of being capped by
   Elementor's boxed content width. ──────────────────────────────────────── */
.elementor-section:has(.elementor-widget-agency-testimonials-v2),
.elementor-section:has(.elementor-widget-agency-testimonials-v2) > .elementor-container,
.e-con:has(.elementor-widget-agency-testimonials-v2) {
  max-width: 100% !important;
  width: 100% !important;
}


/* ── Outer block: full-bleed background ──────────────────────────────────── */
/* The site runs BOXED Elementor containers capped at 1440px. A plain
   width:100% would clamp the band to that box. Break out to the full viewport
   width so the background reaches both edges regardless of the parent
   container's max-width. */
.aew-tsv2 {
  background: var(--aew-tsv2-body-bg, var(--aew-background));
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ── Inner wrapper: max-width + responsive X & Y padding (stylesheet-owned) ─ */
/* Design-system width model: X gutter on the outer block; inner caps at a true 1440. */
.aew-tsv2 { padding-left: 40px; padding-right: 40px; box-sizing: border-box; }

.aew-tsv2__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px 0;        /* banded widget: Y 64px / X 5rem desktop */
  box-sizing: border-box;
}

/* ── Eyebrow stars (top, centered) ───────────────────────────────────────── */
.aew-tsv2 > .aew-tsv2__inner > .aew-tsv2__stars {
  justify-content: center;
  margin-bottom: 16px;
}
.aew-tsv2 > .aew-tsv2__inner > .aew-tsv2__stars .aew-tsv2__star {
  width: 22px;
  height: 22px;
}

/* ── Star rows (shared) ──────────────────────────────────────────────────── */
.aew-tsv2__stars {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--aew-tsv2-star, var(--aew-cta));
  line-height: 0;
}
.aew-tsv2__star { display: block; flex: 0 0 auto; }

/* ── Section title ───────────────────────────────────────────────────────── */
/* Wrapper-class prefix raises specificity to (0,2,0) so the colour beats the
   Elementor kit's `.elementor-kit-N h1..h6 { color }` rule (0,1,1). */
.aew-tsv2 .aew-tsv2__title {
  margin: 0 0 48px;
  text-align: center;
  color: var(--aew-tsv2-title, var(--aew-secondary-bg));
  font-family: var(--aew-teko);
  font-weight: 600;
  font-size: 64px;
  line-height: 85%;
  text-transform: uppercase;
}

/* ── Grid of cards: 3 → 2 → 1 ────────────────────────────────────────────── */
.aew-tsv2__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.aew-tsv2__card {
  display: flex;
  flex-direction: column;
}

/* ── Project image ───────────────────────────────────────────────────────── */
.aew-tsv2__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 24px;        /* design-system card radius */
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
  margin-bottom: 24px;
}

/* Fill the frame. !important + max-width override Elementor's global
   `img { max-width: 100%; height: auto }`. */
.aew-tsv2 .aew-tsv2__img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Card body ───────────────────────────────────────────────────────────── */
.aew-tsv2__body {
  display: flex;
  flex-direction: column;
}

/* ── Avatar (image or initial-letter circle) ─────────────────────────────── */
.aew-tsv2__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aew-cta);
}
.aew-tsv2 .aew-tsv2__avatar-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  display: block;
}
.aew-tsv2__avatar-initial {
  font-family: var(--aew-teko);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  padding-top: 4px;          /* Teko sits high; nudge the glyph optically centered */
}

/* Card star row */
.aew-tsv2__body > .aew-tsv2__stars {
  margin-bottom: 12px;
}

/* ── Client name ─────────────────────────────────────────────────────────── */
.aew-tsv2 .aew-tsv2__name {
  margin: 0 0 12px;
  color: var(--aew-tsv2-name, var(--aew-secondary-bg));
  font-family: var(--aew-teko);
  font-weight: 600;
  font-size: 24px;
  line-height: 100%;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Date (optional, under the name) ─────────────────────────────────────── */
.aew-tsv2__date {
  margin: -6px 0 12px;
  color: var(--aew-tsv2-review, var(--aew-text));
  opacity: 0.7;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
}

/* ── Review paragraph ────────────────────────────────────────────────────── */
.aew-tsv2__review {
  margin: 0;
  color: var(--aew-tsv2-review, var(--aew-text));
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 140%;
}

/* ── Optional Google-reviews summary header ──────────────────────────────── */
.aew-tsv2__summary {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.aew-tsv2__summary-rating {
  font-family: var(--aew-teko);
  font-weight: 600;
  font-size: 56px;
  line-height: 100%;
  color: var(--aew-tsv2-title, var(--aew-secondary-bg));
}
.aew-tsv2__summary .aew-tsv2__stars { color: var(--aew-tsv2-star, var(--aew-cta)); }
.aew-tsv2__summary-count {
  margin: 0;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  color: var(--aew-tsv2-review, var(--aew-text));
  opacity: 0.8;
}
.aew-tsv2__summary-text {
  margin: 0;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  line-height: 140%;
  color: var(--aew-tsv2-review, var(--aew-text));
}
.aew-tsv2__summary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  text-decoration: none;
  font-family: var(--aew-teko);
  font-weight: 600;
  font-size: 20px;
  line-height: 85%;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 20px 24px 16px;
  border-radius: 8px;
  background-color: var(--aew-cta);
  color: #FFFFFF;
  transition: background-color 0.2s ease;
}
.aew-tsv2__summary-btn:hover,
.aew-tsv2__summary-btn:focus-visible { background-color: var(--aew-cta-hover); }

/* ── Tablet: 3 → 2 columns, X padding → 40px ─────────────────────────────── */
@media (max-width: 1024px) {
  /* tablet: inner padding inherited (Y64 desktop / X40 outer) */
  .aew-tsv2__grid  { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .aew-tsv2__title { font-size: 56px; margin-bottom: 40px; }
}

/* ── Mobile: 2 → 1 column, Y padding → 32px ──────────────────────────────── */
@media (max-width: 768px) {
  .aew-tsv2 { padding-left: 16px; padding-right: 16px; }
  .aew-tsv2__inner { padding: 32px 0; }
  .aew-tsv2__grid  { grid-template-columns: 1fr; gap: 40px; }
  .aew-tsv2__title  { font-size: 40px; margin-bottom: 32px; }   /* H2 mobile */
  .aew-tsv2__name   { font-size: 24px; }
  .aew-tsv2__review { font-size: 14px; }
  .aew-tsv2 > .aew-tsv2__inner > .aew-tsv2__stars .aew-tsv2__star { width: 20px; height: 20px; }
}