/* ============================================================
   King Slayer Sportfishing: /reviews/ page layout only
   Requires tokens.css then base.css.

   The page leads with the photo band, then puts the Google link
   and the one crew-published statement side by side, then the
   trust line, then a wall of six real Google reviews, then the
   invitation to post. Every rating, star row and guest name on
   this page comes from the live Google listing (5.0 from 307
   reviews), quoted as published.
   ============================================================ */

/* ============ Hero ============ */
/* .page-hero comes from base.css unchanged: the reviews band is a
   full-height hero, only the gallery shortens it. */
.page-hero .crumbs{margin-bottom:1.1rem}

/* ============ Proof band: Google gateway + one crew statement ============ */
.rev-proof-band{background:var(--deep-800);border-top:1px solid var(--line)}
.rev-gate{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.25rem,2.5vw,2rem);
  align-items:stretch;
}

/* ============ Google profile panel ============ */
.rev-google{
  background:var(--panel);
  border:1px solid var(--line);
  border-left:3px solid var(--blue-bright);
  padding:1.5rem 1.7rem 1.7rem;
  display:flex;flex-direction:column;align-items:flex-start;
}
.rev-google h2{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:clamp(1.2rem,2.2vw,1.5rem);
  text-transform:uppercase;
  color:var(--cream);
  margin-bottom:.7rem;
}
.rev-google p{color:var(--dim);font-size:.98rem;margin-bottom:1.25rem}
.rev-google .btn{margin-top:auto}

/* ============ The single crew-published statement ============ */
.rev-gate .review-card .eyebrow{margin-bottom:.9rem}
.rev-gate .review-card blockquote{font-size:1.05rem;line-height:1.5}

/* ============ Trust line ============ */
.rev-trust{
  margin-top:clamp(1.25rem,2.5vw,2rem);
  color:var(--dim);
  font-size:1rem;
  max-width:52rem;
}
.rev-trust .call-link{margin-left:.4rem}

/* ============ Guest review wall ============ */
/* Six of the 307 Google reviews, in the guests' own wording. The
   order is reshuffled on every load, so no one review owns the top
   slot. Stars are inline SVG, never an emoji. */
.rev-wall-band{background:var(--deep-900);border-top:1px solid var(--line)}
.rev-wall{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,2.5vw,2rem);
  align-items:stretch;
}
.rev-wall .review-card{border-top:3px solid var(--blue)}
.rev-wall .review-card blockquote{font-size:1rem;line-height:1.55}
.rev-wall .review-card blockquote::before{content:"\201C"}
.rev-wall .review-card blockquote::after{content:"\201D"}

.gr-name{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blue-bright);
  margin-bottom:.6rem;
}
.gr-stars{display:flex;gap:.18rem;line-height:0;color:var(--blue-bright);margin-bottom:.9rem}
.gr-star{width:1rem;height:1rem;fill:currentColor}

/* ============ Invitation to post a review ============ */
.rev-invite-band{background:var(--deep-700)}
.rev-invite{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;
  gap:clamp(1.25rem,3vw,2.5rem);
}
.rev-invite h2{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  text-transform:uppercase;
  color:var(--cream);
  margin-bottom:.6rem;
}
.rev-invite p{color:var(--dim);font-size:1rem;max-width:34rem}

/* ============ Responsive ============ */
@media (max-width:1000px){
  .rev-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:880px){
  .rev-gate{grid-template-columns:1fr}
}
@media (max-width:680px){
  .rev-wall{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .rev-google{padding:1.25rem 1.25rem 1.4rem}
  .rev-google .btn{display:block;text-align:center;width:100%}
  .rev-invite .btn{display:block;text-align:center;width:100%}
}