/* ============================================================
   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 310
   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. */
/* client call 2026-09-16: the landscape group shot has its faces in the top
   quarter, so the wide band crops from near the top instead of base's 40% */
.page-hero-img{object-position:50% 12%}
/* "King Slayer Sportfishing" set solid runs wider than a phone column
   at the mobile H1 size, so the brand span may wrap here, the same
   trade the home hero makes. Every other brand span keeps .nowrap. */
@media (max-width:640px){
  .page-hero h1 .nowrap{white-space:normal}
}

/* ============ Review wall heading link ============ */
/* client call 2026-09-16: the Google gateway band was dropped, so the wall
   heading carries the link to the Google Business Profile itself */
.rev-wall-band .section-head h2 a{color:inherit;text-decoration:underline;text-decoration-color:var(--blue-bright);text-decoration-thickness:2px;text-underline-offset:.14em}
.rev-wall-band .section-head h2 a:hover{color:var(--blue-bright)}

/* ============ 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 310 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}

/* ============ Guest photo band ============ */
.rev-photo-band{
  padding:clamp(2rem,4vw,3rem) 0 clamp(2.5rem,5vw,4rem);
  background:var(--deep-700);
}
.rev-photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(.75rem,1.6vw,1.15rem);
  list-style:none;
}
.rev-photo-item{
  border:1px solid var(--line);
  background:var(--panel);
  overflow:hidden;
}
/* height:auto is required: the HTML height attribute is a presentational hint
   that would otherwise beat aspect-ratio and render the photo at full pixel height */
.rev-photo-item img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  /* biased above centre: guests and fish sit in the upper half of the frame */
  object-position:50% 42%;
  transition:transform .35s ease,opacity .25s ease;
}
.rev-photo-item:hover img{transform:scale(1.035);opacity:.94}

/* ============ Responsive ============ */
@media (max-width:1000px){
  .rev-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .rev-wall{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .rev-invite .btn{display:block;text-align:center;width:100%}
}
@media (max-width:600px){
  .rev-photo-grid{grid-template-columns:1fr;gap:.9rem}
  .rev-photo-item img{aspect-ratio:3/2}
}