/* ============================================================
   Hearthstone Mortgages — reviews (section 5)
   ============================================================ */

.hm-reviews__head { margin-bottom: 2.25rem; }
.hm-reviews__intro { max-width: 680px; }
.hm-reviews__title { font-size: var(--hm-h2); color: var(--hm-ink); margin: 0 0 1rem; line-height: 0.98; }
.hm-reviews__lead { font-family: var(--font-body); font-size: 1.1rem; line-height: 1.6; color: var(--hm-slate-600); margin: 0; }
/* Two columns: the review on the left, the trust panel on the right. */
.hm-reviews__body { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,0.85fr); gap: 1.5rem; align-items: start; }
.hm-reviews__panel {
  display: flex; flex-direction: column; gap: 0.85rem;
  background: var(--hm-white); border: 1px solid var(--hm-slate-200);
  border-radius: 1.75rem; box-shadow: var(--shadow-sm); padding: 1.6rem 1.4rem;
}
.hm-reviews__score {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--hm-slate-200);
  text-decoration: none; transition: color 150ms var(--ease-out);
}
.hm-reviews__score-stars { display: inline-flex; gap: 2px; color: var(--hm-gold-500); }
.hm-reviews__score-meta { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-body); font-size: 0.86rem; color: var(--hm-slate-600); }
.hm-reviews__score-meta strong { color: var(--hm-ink); font-weight: 700; }
.hm-reviews__score:hover .hm-reviews__score-meta, .hm-reviews__score:focus-visible .hm-reviews__score-meta { color: var(--hm-blue-700); text-decoration: underline; text-underline-offset: 2px; }

/* Featured rotating card */
.hm-reviews__feature {
  background: var(--hm-white); border-radius: 1.75rem; padding: clamp(2rem,4vw,3rem);
  box-shadow: var(--shadow-lg); border: 1px solid var(--hm-slate-200);
  position: relative; overflow: hidden;
}
.hm-reviews__feature-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--hm-gradient-mid); }
/* Stack all slides in one grid cell so the card height = tallest slide */
.hm-reviews__slides { display: grid; }
.hm-reviews__slide {
  grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden;
  transition: opacity 320ms var(--ease-out);
}
.hm-reviews__slide.is-active { opacity: 1; visibility: visible; }
/* Larger type needs a tighter ratio: at 1.5rem a 1.6 line-height gave 38px of
   leading against 26px in body text, which read as loose. 1.45 lands at ~33px.
   Reads as a quote, not a pull-quote. It was set up to 1.7rem at weight 500
   while every other body block on the page sits near 1.05rem, so it looked
   like it came from a different design. Now matched to the who-we-are quote. */
.hm-reviews__quote {
  margin: 0 0 1.4rem; font-family: var(--font-body); font-weight: 400;
  font-size: clamp(1.2rem,1.75vw,1.5rem); line-height: 1.45; color: var(--hm-ink);
}
.hm-reviews__prov { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.hm-reviews__prov-stars { display: inline-flex; gap: 2px; color: var(--hm-gold-500); }
.hm-reviews__badge {
  display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-body);
  font-size: 0.74rem; font-weight: 600; color: var(--hm-blue-700); background: var(--hm-blue-50);
  border: 1px solid var(--hm-blue-100); border-radius: var(--radius-pill); padding: 0.3rem 0.7rem; text-decoration: none;
}
.hm-reviews__date { font-family: var(--font-body); font-size: 0.74rem; color: var(--hm-slate-400); }
.hm-reviews__author { display: flex; align-items: center; gap: 1rem; }
.hm-reviews__avatar {
  width: 52px; height: 52px; border-radius: 50%; background: var(--hm-gradient-mid);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  font-family: var(--font-heading); font-weight: 900; font-size: 1.3rem; flex-shrink: 0;
}
.hm-reviews__author-name { display: block; font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.95rem; color: var(--hm-ink); }
.hm-reviews__author-meta { display: block; font-family: var(--font-body); font-size: 0.8rem; color: var(--hm-slate-500); margin-top: 0.12rem; }

.hm-reviews__dots { display: flex; gap: 7px; align-items: center; justify-content: flex-end; margin-top: 1.5rem; }
.hm-reviews__dot { width: 9px; height: 9px; border-radius: var(--radius-pill); border: none; padding: 0; background: var(--hm-slate-300); cursor: pointer; transition: width 180ms var(--ease-out), background-color 180ms var(--ease-out); }
.hm-reviews__dot.is-active { width: 26px; background: var(--hm-blue-600); }

/* Stat cards */
/* Stats read as rows inside the panel rather than a card row across the page. */
.hm-reviews__stats { display: flex; flex-direction: column; gap: 0; }
.hm-reviews__stat { display: flex; align-items: baseline; gap: 0.8rem; padding: 0.75rem 0; border-bottom: 1px solid var(--hm-slate-100); }
.hm-reviews__stat:last-child { border-bottom: 0; }
.hm-reviews__stat-val { font-family: var(--font-heading); font-weight: 900; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--hm-blue-600); line-height: 1; flex: 0 0 3.6rem; }
.hm-reviews__stat-label { font-family: var(--font-body); font-size: 0.84rem; color: var(--hm-slate-600); line-height: 1.35; margin: 0; }

.hm-reviews__cta { margin-top: 0.35rem; }
.hm-reviews__cta .hm-btn { width: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .hm-reviews__slide { transition: none; }
}
@media (max-width: 980px) {
  .hm-reviews__body { grid-template-columns: 1fr; }
  .hm-reviews__stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 1.25rem; }
  .hm-reviews__stat:nth-last-child(2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .hm-reviews__stats { grid-template-columns: 1fr; }
  .hm-reviews__stat:nth-last-child(2) { border-bottom: 1px solid var(--hm-slate-100); }
}