/* LYZOO homepage: Google Reviews section ("What Our Clients Say").
   NOT YET LINKED from index.html. Fully isolated: every selector starts with .home-reviews, no existing class
   (.wrap, .center, .kicker, .btn, .card, .grid ...) is restyled here. It only reads the site tokens defined in index.css
   (:root --ink, --muted, --line, --blue, --violet, --red, --radius, --shadow), each with a fallback value.
   No JavaScript, no images, no external requests (the star shape is an inline data-URI mask). */

.home-reviews {
  --hr-gold: #F5B301;
  --hr-star-off: #D9D5EA;
  --hr-lavender: #F3F0FF;
  --hr-border: #E3DCFF;
  --hr-hover-border: #cec6ff;                 /* same hover border the homepage .card uses */
  --hr-star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
  /* soft lavender, with a faint violet / pink glow top-right as a background layer (no pseudo-element, no stacking changes) */
  background:
    radial-gradient(520px 420px at 92% 0%, rgba(139, 63, 252, .13), rgba(236, 52, 90, .05) 50%, transparent 72%),
    linear-gradient(180deg, var(--hr-lavender) 0%, #F8F6FF 100%);
  color: var(--ink, #071126);
}

/* ---- Google rating summary (inside the shared .center heading block) ---- */
.home-reviews__summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 22px;
  padding: 14px 26px;
  background: #fff;
  border: 1px solid var(--hr-border);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(50, 22, 111, .07);
  text-align: left;
}
.home-reviews__score {
  font-size: 2rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink, #071126);
}
.home-reviews__outof { font-size: 1.05rem; font-weight: 700; color: var(--muted, #5f6b82); letter-spacing: 0; }
.home-reviews__basis { display: grid; gap: 2px; font-size: .92rem; line-height: 1.35; color: var(--muted, #5f6b82); }
.home-reviews__basis strong { color: var(--ink, #071126); font-size: 1rem; }

/* ---- Gold stars: width of the gold fill = --rate / 5 (so 4.6 is four full stars and 60% of the fifth) ---- */
.home-reviews__stars {
  --rate: 0;
  display: inline-block;
  flex: none;
  width: 110px;
  height: 22px;
  background: linear-gradient(90deg, var(--hr-gold) calc(var(--rate) / 5 * 100%), var(--hr-star-off) 0);
  -webkit-mask: var(--hr-star-shape) 0 0 / 22px 22px repeat-x;
  mask: var(--hr-star-shape) 0 0 / 22px 22px repeat-x;
}
.home-reviews__stars--lg { width: 130px; height: 26px; -webkit-mask-size: 26px 26px; mask-size: 26px 26px; }

/* ---- Review cards: 3 columns on desktop, 1 column at 900px and below ---- */
.home-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-reviews__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--hr-border);
  border-radius: var(--radius, 22px);
  box-shadow: 0 8px 28px rgba(50, 22, 111, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* small violet-to-pink accent tab on the top edge */
.home-reviews__card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 28px;
  width: 34px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--blue, #4e46e5), var(--violet, #8b3ffc), var(--red, #ec345a));
}
.home-reviews__card:hover {
  transform: translateY(-5px);
  border-color: var(--hr-hover-border);
  box-shadow: var(--shadow, 0 22px 70px rgba(19, 34, 84, .12));
}
.home-reviews__text {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink, #071126);
  overflow-wrap: break-word;
}
.home-reviews__text p { margin: 0; }

.home-reviews__who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.home-reviews__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--blue, #4e46e5), var(--violet, #8b3ffc));
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.home-reviews__id { display: grid; gap: 2px; min-width: 0; }
.home-reviews__name { font-size: 1rem; line-height: 1.3; color: var(--ink, #071126); overflow-wrap: break-word; }
.home-reviews__meta { font-size: .85rem; line-height: 1.4; color: var(--muted, #5f6b82); }

/* ---- CTA + source note (the button itself uses the existing .btn .btn-primary) ---- */
.home-reviews__cta { margin: 40px 0 0; text-align: center; }
.home-reviews__cta .home-reviews__btn:focus-visible { outline: 3px solid #6842F5; outline-offset: 3px; }
.home-reviews__note { margin: 14px 0 0; text-align: center; font-size: .85rem; color: var(--muted, #5f6b82); }
.home-reviews__grid + .home-reviews__note { margin-top: 28px; }   /* note directly after the cards (no CTA button) */
.home-reviews__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Guard: any unfilled placeholder is impossible to miss. Inert once the data-placeholder attributes are removed. ---- */
.home-reviews [data-placeholder] { outline: 2px dashed #ec345a; outline-offset: 2px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .home-reviews__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .home-reviews__summary { padding: 14px 20px; border-radius: 22px; }
  .home-reviews__card { padding: 24px 22px; }
  .home-reviews__card::before { left: 22px; }
}
@media (max-width: 480px) {
  .home-reviews__cta .home-reviews__btn { display: flex; width: 100%; }
}

/* ---- Accessibility / preferences ---- */
@media (hover: none) {
  .home-reviews__card:hover { transform: none; box-shadow: 0 8px 28px rgba(50, 22, 111, .06); border-color: var(--hr-border); }
}
@media (prefers-reduced-motion: reduce) {
  .home-reviews__card { transition: none; }
  .home-reviews__card:hover { transform: none; }
}
@media (forced-colors: active) {
  .home-reviews__stars { forced-color-adjust: none; }
}