/* ============================================================
   King Slayer Sportfishing: home page layout only
   Requires tokens.css then base.css.
   Component rules live in base.css. This file holds the hero
   spine (ported from bakeoff/a4) and the two home-only bands.
   ============================================================ */

/* ============ Hero: split panel with waterline seam ============ */
.hero{
  display:grid;
  grid-template-columns:minmax(0,46%) minmax(0,54%);
  min-height:min(88vh,820px);
  background:var(--deep-700);
}
.hero-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3rem,7vw,5.5rem) clamp(1.5rem,4.5vw,4.5rem) clamp(3rem,7vw,5.5rem) var(--gutter);
  position:relative;
}
.hero h1{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:760;
  font-size:clamp(2.1rem,3.9vw,3.4rem);
  line-height:1.04;
  text-transform:uppercase;
  letter-spacing:.008em;
  color:var(--cream);
  margin-bottom:1.5rem;
}
.hero-sub{
  max-width:34rem;
  color:var(--dim);
  font-size:clamp(1rem,1.35vw,1.125rem);
  margin-bottom:2.2rem;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem}
.hero-photo-wrap{
  position:relative;
  min-height:420px;
  border-left:2px solid var(--blue); /* the waterline seam */
}
.hero-photo{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  transform:translateZ(0); /* forces layer promotion; Chrome can skip painting the abs-positioned photo under the ::after scrim without it */
}
.hero-photo-wrap::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(20,34,74,.55),rgba(20,34,74,0) 40%),
             linear-gradient(to top,rgba(20,34,74,.5),rgba(20,34,74,0) 35%);
  pointer-events:none;
}

/* ============ Inline prose link ============ */
/* used in the section lead and the biting-now phone number */
.inline-link{
  color:var(--ice);
  text-decoration:none;
  border-bottom:1px solid var(--blue);
}
.inline-link:hover{color:var(--blue-bright);border-color:var(--blue-bright)}

/* ============ Biting now + crew pair ============ */
/* the two panels share one row, so they align on the top edge */
.grid-2 > .biting-now{align-self:stretch}

/* scoped past .eyebrow and .review-meta so base.css keeps owning both */
.review-card > p:not(.eyebrow):not(.review-meta){color:var(--dim);font-size:1rem}
.review-card .eyebrow{margin-bottom:.9rem}
.review-card .btn{align-self:flex-start;margin:1.2rem 0 1.4rem}

/* ============ Stay-and-fish bridge ============ */
/* the fact line sits above the button, so the button needs its own gap */
.bridge-cta-note + .btn{margin-top:1.5rem}
.review-meta a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--blue)}
.review-meta a:hover{color:var(--blue-bright);border-color:var(--blue-bright)}
.review-meta a + a{margin-left:1.4rem}

/* ============ Google reviews band ============ */
/* Real Google data: 5.0 average across 307 reviews. Stars are inline
   SVG on purpose, so they take the accent colour and never render as
   a platform emoji. */
.gr-band{
  background:var(--deep-800);
  border-top:1px solid var(--line);
  padding:clamp(3.5rem,7vw,6rem) 0;
  overflow:hidden;
}
.gr-head{
  display:flex;flex-wrap:wrap;
  align-items:flex-end;justify-content:space-between;
  gap:clamp(1.25rem,3vw,2.5rem);
  margin-bottom:clamp(2rem,4vw,3rem);
}
.gr-head h2{margin-bottom:0}
.gr-rating{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.gr-rating-line{color:var(--dim);font-size:1rem}
.gr-rating .btn{margin-top:.7rem}

/* ============ Star row ============ */
.gr-stars{display:flex;gap:.18rem;line-height:0;color:var(--blue-bright)}
.gr-star{width:1rem;height:1rem;fill:currentColor}
.gr-stars-lg .gr-star{width:1.45rem;height:1.45rem}

/* ============ Marquee viewport ============ */
/* Without the script this stays a plain horizontal scroller, so every
   card is still reachable. .is-marquee is added by the script only
   after the duplicate track exists. */
.gr-marquee{
  --gr-gap:clamp(1rem,2vw,1.5rem);
  overflow-x:auto;overflow-y:hidden;
  padding:.25rem var(--gutter) .5rem;
  scrollbar-width:thin;
}
.gr-marquee.is-marquee{overflow:hidden;padding-bottom:.25rem}
.gr-marquee:focus-visible{outline:2px solid var(--blue-bright);outline-offset:-3px}
.gr-lane{display:flex;gap:var(--gr-gap);width:max-content}
.gr-track{display:flex;gap:var(--gr-gap)}
/* 98s holds the old ~50px/s drift now that the script keeps 14 cards
   per load instead of 10. A shorter duration would run the wider lane
   past the reader faster. */
.gr-marquee.is-marquee .gr-lane{animation:gr-drift 98s linear infinite}
.gr-marquee.is-marquee:hover .gr-lane,
.gr-marquee.is-marquee:focus-within .gr-lane{animation-play-state:paused}
/* the lane holds two equal tracks plus one gap between them, so half
   the lane is half a gap short of one full frame */
@keyframes gr-drift{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - (var(--gr-gap) / 2)))}
}

/* ============ Review card ============ */
.gr-card{
  flex:0 0 340px;width:340px;
  background:var(--panel);
  border:1px solid var(--line);
  border-top:3px solid var(--blue);
  padding:1.35rem 1.45rem 1.15rem;
  display:flex;flex-direction:column;
}
.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-card .gr-stars{margin-bottom:.9rem}
.gr-quote{
  color:var(--ice);
  font-size:.97rem;
  line-height:1.55;
  margin-bottom:1.1rem;
}
.gr-quote::before{content:"\201C"}
.gr-quote::after{content:"\201D"}
.gr-date{
  margin-top:auto;
  border-top:1px solid var(--line);
  padding-top:.9rem;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
}
.gr-note{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  color:var(--dim);
  font-size:.92rem;
}

/* ============ Motion ============ */
@media (prefers-reduced-motion:reduce){
  /* back to a static row the reader scrolls themselves */
  .gr-marquee.is-marquee{overflow-x:auto;overflow-y:hidden;padding-bottom:.5rem}
  .gr-marquee.is-marquee .gr-lane{animation:none}
  .gr-track[aria-hidden="true"]{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .hero-copy > *{
    opacity:0;transform:translateY(12px);
    animation:surface .65s ease forwards;
  }
  .hero-copy > *:nth-child(2){animation-delay:.1s}
  .hero-copy > *:nth-child(3){animation-delay:.2s}
  .hero-copy > *:nth-child(4){animation-delay:.3s}
  @keyframes surface{to{opacity:1;transform:none}}
}

/* ============ Responsive ============ */
@media (max-width:960px){
  /* minmax(0,1fr) plus min-width:0 stops the single column from being sized by
     the longest unbreakable line inside it. A plain 1fr track keeps a
     min-content floor, so one wide line would push the whole page sideways */
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-copy,
  .hero-photo-wrap{min-width:0;max-width:100%}
  .hero-photo{max-width:100%}
  .hero-photo-wrap{
    order:-1;
    min-height:46vh;
    border-left:none;
    border-bottom:2px solid var(--blue);
  }
  .hero-copy{padding-top:clamp(2.5rem,6vw,3.5rem);padding-bottom:clamp(2.75rem,7vw,4rem)}
}
@media (max-width:640px){
  .hero-cta .btn{flex:1 1 100%;text-align:center}
  /* matches base.css's shared .page-hero h1 mobile floor: the 320px fine-tune
     below takes over from here, but 641-360 needs its own shrink step too */
  .hero h1{font-size:clamp(1.75rem,7.4vw,2.3rem)}
  /* "St. Catharines" set solid measures 372px at the mobile H1 size, wider than
     a 390 or a 320 column, and that one line was setting the hero column width.
     The place name may break here. The brand name in .hero-sub keeps its
     .nowrap, and so does every other brand span on the site */
  .hero h1 .nowrap{white-space:normal}
  /* the marina and waters line runs four segments, so it wraps on phones */
  .hero .eyebrow{white-space:normal;overflow-wrap:break-word}
  /* a 340px card plus the gutter overflows a 360px column */
  .gr-card{flex-basis:min(300px,80vw);width:min(300px,80vw)}
  .gr-rating{width:100%}
  .gr-rating .btn{display:block;text-align:center;width:100%}
}
@media (max-width:360px){
  /* 320 leaves a 280px column: the H1 floor comes down until CATHARINES fits it */
  .hero h1{font-size:clamp(1.6rem,8.2vw,2.1rem)}
}