/* reviews.css — ReviewBadge (hero rating pill) + ReviewSection (grid/strip/
 * cards of Hub reviews, spec 2026-09-17 §4). Both replace the Trustindex
 * placeholder images (approved change #2); real content now, so both carry
 * data-gate-mask — the set/count changes on every rebuild.
 *
 * Badge: inline pill, same 99px box the placeholder occupied so the
 * surrounding hero layout does not move. Section: white cards on the page
 * background, Anton-32 uppercase heading, fixed-height cards via the
 * 6-line clamp + min-height so a 3-card row and a 6-card row read the same. */

/* ReviewBadge — the hero pill. STYLE CONTRACT (CLAUDE.md): this block is
 * the only place the pill is styled; colours/fonts are kit tokens
 * (tokens.css) plus --shadow-soft; exactly two sizes (desktop, < 768px);
 * a change here = re-freeze the four hero pages (/, offices, about). */
.review-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: 64px;
  padding: 0 22px 0 14px;
  border: 1px solid var(--color-surface);
  border-radius: 999px;
  background: var(--color-secondary);
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-body);
  box-shadow: var(--shadow-soft);
}
/* Colour only, element-qualified to (0,1,1): .rdp-theme a is (0,1,1)
 * and used to win on `color`. Both say the kit's text black, so nothing
 * changes on screen — this makes the pill's colour its own, so it cannot
 * move when the kit rule does (rebase R4). scripts/qa-cascade.mjs checks it. */
a.review-badge { color: var(--color-text); }
.review-badge__avatars { display: inline-flex; margin-right: 4px; }
.review-badge__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: -10px;
  border: 2px solid var(--color-secondary);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-secondary);
}
.review-badge__avatar:first-child { margin-left: 0; }
.review-badge__avatar--0 { background: var(--color-sky); }
.review-badge__avatar--1 { background: var(--color-accent); }
.review-badge__avatar--2 { background: var(--color-lime); }
.review-badge__avatar--3 { background: var(--color-primary); }
.review-badge__star { width: 22px; height: 22px; flex: none; fill: var(--color-sky); }
.review-badge__rating { font-size: 20px; font-weight: 700; line-height: 1; }
.review-badge__source { font-size: 16px; font-weight: 500; line-height: 1; }
.review-badge__divider { width: 1px; height: 24px; margin: 0 4px; background: var(--color-surface); }
.review-badge__count { font-size: 16px; line-height: 1; white-space: nowrap; }
@media (max-width: 767px) {
  .review-badge { width: 100%; max-width: 350px; height: 56px; justify-content: center; gap: 6px; padding: 0 14px 0 10px; }
  .review-badge__avatar { width: 30px; height: 30px; margin-left: -8px; font-size: 12px; }
  .review-badge__star { width: 18px; height: 18px; }
  .review-badge__rating { font-size: 18px; }
  .review-badge__source, .review-badge__count { font-size: 14px; }
  .review-badge__divider { height: 20px; }
}

.reviews {
  padding: 50px 20px;
  font-family: var(--font-body);
}
.reviews__inner {
  max-width: min(100%, var(--container-max));
  margin: 0 auto;
}
/* The kit's Primary heading, as "Our Latest Tree Service Blog Posts" just
 * above it wears it: Montserrat 700, 45px (36px on a phone), the dark green. */
.reviews__heading {
  margin: 0 0 30px;
  font-family: var(--font-display);
  font-size: var(--font-size-primary);
  font-weight: 700;
  line-height: 1.2em;
  text-align: center;
  color: var(--color-primary);
}
@media (max-width: 767px) { .reviews__heading { font-size: 36px; } }
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reviews__card {
  box-shadow: var(--shadow-soft); /* white cards on a white page */
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--color-surface);
  border-radius: 4px;
  padding: 24px;
}
.reviews__stars { display: flex; gap: 2px; }
.reviews__star { width: 18px; height: 18px; fill: var(--color-surface); }
.reviews__star.is-on { fill: var(--color-accent); }
.reviews__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 9em;
}
.reviews__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}
.reviews__meta strong { font-size: 16px; font-weight: 700; }
.reviews__meta span { font-size: 14px; color: var(--color-text); }
.reviews__source {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
}
.reviews__source:hover { text-decoration: underline; }
/* Colour only, at (0,2,0): `.elementor-kit-6 a` is (0,1,1) and would
 * paint "Read on Google" in the kit's link colour. The kit's accent, as the
 * site's "READ MORE »" links wear it. */
.reviews__card .reviews__source,
.reviews__card .reviews__source:hover { color: var(--color-accent); }
.reviews__more {
  margin: 30px 0 0;
  text-align: center;
}
.reviews__more a {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
}
.reviews__more a:hover { text-decoration: underline; }

/* reviews-page — /reviews/, the full 5-star corpus (B5, spec §4.4). No
 * frozen baseline (authored post-conversion): heading matches the archive
 * hero (Anton-45 uppercase primary), body Inter-16/1.5, cards share
 * .reviews__card's border/radius, one narrow column (800px) like a post. */
.reviews-page {
  padding: 50px 20px;
  font-family: var(--font-body);
}
.reviews-page__inner {
  max-width: min(100%, 800px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.reviews-page__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 45px;
  font-weight: 700;
  line-height: 1.2em;
  text-transform: capitalize;
  text-align: center;
  color: var(--color-primary);
}
.reviews-page__locations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.reviews-page__locations li {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);
}
.reviews-page__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reviews-page__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--color-surface);
  border-radius: 4px;
  padding: 24px;
}
.reviews-page__stars {
  margin: 0;
  color: var(--color-sky);
  font-size: 18px;
  letter-spacing: 2px;
}
.reviews-page__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
}
.reviews-page__meta {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}
.reviews-page__meta strong { font-weight: 700; }
.reviews-page__meta a {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
}
.reviews-page__meta a:hover { text-decoration: underline; }
.reviews-page__reply {
  margin: 0;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--color-surface);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}
@media (max-width: 767px) {
  .reviews-page__heading { font-size: 32px; }
}
/* Desktop: two columns. Grid (not CSS columns) so the newest-first order
 * reads left-to-right, row by row; cards keep their own height. */
@media (min-width: 1025px) {
  .reviews-page__inner { max-width: min(100%, var(--container-max)); }
  .reviews-page__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}