/* Hero Hub Pro reviews: the program sales pages' rating, moderated review form and review cards, scoped to this
   section so the Hero Hub page does not load the program page styles. */
.hub-reviews { width: min(1120px, calc(100% - 88px)); margin: 0 auto 110px; }
.hub-reviews .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Summary: the title, the average and the button that opens the form. */
.hub-reviews .hero-review-summary { display: grid; justify-items: center; gap: 18px; max-width: 760px; margin: 0 auto; text-align: center; }
.hub-reviews .hero-review-summary h2 { margin: 0; color: var(--v2-ink); font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 900; letter-spacing: -.055em; line-height: 1.02; text-transform: uppercase; text-wrap: balance; }
.hub-reviews .hero-review-summary__row { display: flex; align-items: center; justify-content: center; }
.hub-reviews .hero-review-summary__score { display: grid; justify-items: start; gap: 4px; padding: 6px 48px 6px 0; border-right: 1px solid var(--v2-outline); text-align: left; }
.hub-reviews .hero-review-summary__score p { margin: 0; color: var(--v2-ink); font-size: .9rem; }
.hub-reviews .hero-review-stars-display { display: flex; gap: 3px; color: var(--v2-purple); }
.hub-reviews .hero-review-stars-display svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.hub-reviews .hero-review-stars-display svg.is-filled { fill: currentColor; }
.hub-reviews .hero-review-toggle { position: relative; min-width: 240px; margin-left: 48px; padding: 13px 28px; border: 0; border-radius: 12px; color: #fff; background: var(--v2-purple); font: inherit; font-size: .9rem; font-weight: 800; cursor: pointer; }
.hub-reviews .hero-review-toggle:hover { background: #4a3c81; }
.hub-reviews .hero-review-toggle[aria-expanded="true"] { color: var(--v2-ink); background: var(--v2-soft); }
.hub-reviews .hero-review-toggle:focus-visible { outline: 3px solid var(--v2-purple); outline-offset: 3px; }

/* The review form. */
.hub-reviews .hero-review-form { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 760px; margin: 20px auto 0; padding: 26px 28px; border: 0; border-radius: 18px; background: var(--v2-paper); box-shadow: 0 4px 14px rgba(46, 81, 130, .12); }
.hub-reviews .hero-review-form[hidden] { display: none; }
.hub-reviews .hero-review-rating { margin: 0; padding: 0; border: 0; }
.hub-reviews .hero-review-rating legend { margin-bottom: 6px; padding: 0; color: var(--v2-ink); font-size: .72rem; font-weight: 750; }
.hub-reviews .hero-review-rating__stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.hub-reviews .hero-review-rating__stars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hub-reviews .hero-review-rating__stars label { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: var(--v2-purple); cursor: pointer; }
.hub-reviews .hero-review-rating__stars svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; transition: fill .12s ease, transform .12s ease; }
.hub-reviews .hero-review-rating__stars input:checked ~ label svg,
.hub-reviews .hero-review-rating__stars label:hover svg,
.hub-reviews .hero-review-rating__stars label:hover ~ label svg { fill: currentColor; }
.hub-reviews .hero-review-rating__stars label:hover svg { transform: scale(1.08); }
.hub-reviews .hero-review-rating__stars input:focus-visible + label { outline: 2px solid var(--v2-purple); outline-offset: 1px; }
.hub-reviews .hero-review-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.hub-reviews .hero-review-fields label { display: grid; gap: 7px; color: var(--v2-ink); font-size: .72rem; font-weight: 750; }
.hub-reviews .hero-review-fields input, .hub-reviews .hero-review-fields textarea { width: 100%; min-height: 44px; padding: 10px 13px; border: 0; border-radius: 10px; color: var(--v2-ink); background: var(--v2-soft); font: inherit; font-size: .86rem; }
.hub-reviews .hero-review-fields textarea { resize: vertical; }
.hub-reviews .hero-review-fields input:focus-visible, .hub-reviews .hero-review-fields textarea:focus-visible { outline: 2px solid var(--v2-purple); outline-offset: 1px; }
.hub-reviews .hero-review-wide { grid-column: 1 / -1; }
.hub-reviews .hero-review-photo { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px !important; cursor: pointer; }
.hub-reviews .hero-review-photo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hub-reviews .hero-review-photo__button { padding: 8px 14px; border: 1.5px dashed var(--v2-outline); border-radius: 10px; color: var(--v2-ink); background: var(--v2-soft); font-weight: 750; }
.hub-reviews .hero-review-photo:focus-within .hero-review-photo__button { outline: 2px solid var(--v2-purple); outline-offset: 2px; }
.hub-reviews .hero-review-photo small { color: var(--v2-copy); font-size: .66rem; font-weight: 500; }
.hub-reviews .hero-review-preview[hidden] { display: none; }
.hub-reviews .hero-review-preview img { width: 110px; height: 110px; border-radius: 13px; object-fit: cover; }
.hub-reviews .hero-review-submit { display: flex; align-items: center; gap: 18px; }
.hub-reviews .hero-review-submit p { margin: 0; color: var(--v2-copy); font-size: .78rem; line-height: 1.5; }
.hub-reviews .hero-review-send { position: relative; padding: 12px 26px; border: 0; border-radius: 12px; color: #fff; background: var(--v2-purple); font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer; }
.hub-reviews .hero-review-send:hover { background: #4a3c81; }
.hub-reviews .hero-review-send:disabled { cursor: wait; opacity: .65; }

/* Approved reviews: the program pages' ink-framed cards, in columns. */
.hub-reviews__wall { margin-top: 34px; }
.hub-reviews__approved:not([hidden]) { columns: 3 260px; column-gap: 20px; }
.hub-reviews .hero-review-card {
  display: block; break-inside: avoid; margin: 0 0 20px; overflow: hidden;
  border: 3px solid var(--v2-ink); border-radius: 22px; background: var(--v2-ink);
  box-shadow: 1px 1px 0 var(--v2-ink), 2px 2px 0 var(--v2-ink), 3px 3px 0 var(--v2-ink), 4px 4px 0 var(--v2-ink), 5px 5px 0 var(--v2-ink);
}
.hub-reviews .hero-review-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; border-bottom: 3px solid var(--v2-ink); }
.hub-reviews .hero-review-card__body { padding: 16px 18px 18px; background: var(--v2-paper); }
.hub-reviews .hero-review-stars { margin: 0; color: var(--v2-purple); font-size: 1.05rem; letter-spacing: .08em; }
.hub-reviews .hero-review-card h3 { margin: 8px 0 0; color: var(--v2-ink); font-size: 1rem; font-weight: 900; }
.hub-reviews .hero-review-card p { margin: 8px 0 0; color: var(--v2-ink); font-size: .92rem; font-weight: 500; line-height: 1.5; }
.hub-reviews .hero-review-card footer { margin: 12px 0 0; color: var(--v2-purple); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 700px) {
  .hub-reviews { width: calc(100% - 32px); }
  .hub-reviews .hero-review-summary__row { flex-direction: column; gap: 16px; }
  .hub-reviews .hero-review-summary__score { justify-items: center; padding: 0; border: 0; text-align: center; }
  .hub-reviews .hero-review-toggle { width: 100%; min-width: 0; margin: 0; }
  .hub-reviews .hero-review-form { padding: 20px 16px; }
  .hub-reviews .hero-review-fields { grid-template-columns: 1fr; }
  .hub-reviews .hero-review-submit { align-items: stretch; flex-direction: column; }
  .hub-reviews .hero-review-send { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hub-reviews .hero-review-rating__stars svg { transition: none; } }