/* ============================================================
   King Slayer Sportfishing: /fishing-charters/ page layer
   Requires tokens.css then base.css.
   Spine: shared .page-hero (base.css) > breadcrumb bar > sticky
   water sub-nav > three water sections > policy strip > cta band.
   Colour and type come from tokens only. No border-radius.
   --red carries the actions: .btn-book, .btn-action and .badge, all from base.css.
   v2: intro band, fact grid, per-card spec lists and the long
   policy definition list are gone. Facts that used to repeat on
   every card now sit once in the group label above each grid,
   and the shared fine print sits once under it.
   ============================================================ */

:root{
  /* the sticky site header height, used to offset the water sub-nav
     and to keep anchor targets clear of both sticky bars. The 76px
     logo (was 62px) adds 14px of header height, carried into this value */
  --hdr:89px;
}

/* ============ 1. Breadcrumb bar under the hero ============ */
/* the hero is full-bleed, so the crumb needs its own measured rail */
.crumbs-bar{
  max-width:var(--measure);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* ============ 2. Sticky water sub-nav ============ */
.water-nav{
  position:sticky;
  top:var(--hdr);
  z-index:40;
  background:var(--deep-900);
  border-bottom:1px solid var(--line);
}
.water-nav-inner{
  max-width:var(--measure);
  margin:0 auto;
  padding:0 var(--gutter);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
}
.water-nav-label{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dim);
  padding-right:1.4rem;
}
.water-nav a{
  display:block;
  padding:.95rem 1.35rem;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:650;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ice);
  border-bottom:3px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.water-nav a:hover{color:var(--blue-bright);border-bottom-color:var(--blue-bright)}

/* anchor targets clear both sticky bars */
.water-sec{scroll-margin-top:calc(var(--hdr) + 3.4rem)}

/* ============ 3. Water section head ============ */
.water-head{
  display:grid;
  grid-template-columns:1fr 38%;
  gap:clamp(1.5rem,3.5vw,3rem);
  align-items:start;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.water-copy h2{margin-bottom:.9rem}
.water-copy > p{color:var(--dim);max-width:44rem}
.water-line{margin-top:1.4rem}

/* width/height attrs on the img are paired with height:auto here so the
   presentational height hint cannot beat aspect-ratio */
.accent-photo img{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  border:1px solid var(--line);
}
.accent-photo.is-portrait img{object-position:50% 38%}

/* ============ 4. Package grids ============ */
.group-label{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue-bright);
  padding-bottom:.7rem;
  border-bottom:1px solid var(--line);
  margin-bottom:1.5rem;
}
/* every group grid on this page is followed by its hoisted note block,
   which carries the gap down to the next group label */
.group-label + .pkg-grid{margin-bottom:0}
.pkg-grid{
  display:grid;
  gap:clamp(1.25rem,2.5vw,2rem);
  align-items:stretch;
}
.pkg-grid.is-3{grid-template-columns:repeat(3,1fr)}
.pkg-grid.is-2{grid-template-columns:repeat(2,1fr);max-width:56rem}
.pkg-grid.is-1{grid-template-columns:1fr;max-width:34rem}

/* every package card is photo-topped now, so the badge sits inside
   .card-photo and takes its inset from base.css, exactly as the Lake
   Ontario cards do. position:relative stays as a fallback frame */
.pkg-card{position:relative}
.pkg-card.is-featured{border-color:var(--blue-bright)}

.pkg-num{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blue-bright);
}
.card-body > .pkg-num{margin-bottom:.5rem}

/* price sits under the trip name: this page is the pricing surface */
.pkg-card .price-row{
  border-top:0;
  border-bottom:1px solid var(--line);
  padding-top:0;
  padding-bottom:1.15rem;
  margin-bottom:1.15rem;
}
.pkg-card .price{font-size:2.35rem}
.pkg-card .chips{margin-top:0;margin-bottom:1.4rem}
.pkg-card .btn{margin-top:auto}

/* ============ 5. Package notes ============ */
/* verbatim client fine print. Identical notes used to repeat on every
   card in a boat group; they now print once under the grid instead */
.pkg-notes{
  list-style:none;
  border-left:2px solid var(--blue);
  padding-left:1rem;
  margin-bottom:1.4rem;
}
.pkg-notes li{
  color:var(--dim);
  font-size:.88rem;
  line-height:1.45;
}
.pkg-notes li + li{margin-top:.5rem}
.group-notes{
  max-width:52rem;
  margin-top:clamp(1.25rem,2.5vw,1.75rem);
  margin-bottom:clamp(2rem,4vw,3.25rem);
}

/* ============ 6. Policy strip ============ */
/* three one-line policies, side by side, replacing the old prose list */
.policy-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--line);
}
.policy-strip > div{
  padding:1.3rem 1.75rem 0 0;
  border-top:3px solid var(--blue);
  margin-top:-1px;
}
.policy-strip > div + div{padding-left:1.75rem;border-left:1px solid var(--line)}
.policy-strip dt{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:650;
  font-size:.76rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue-bright);
  margin-bottom:.45rem;
}
.policy-strip dd{color:var(--ice);font-size:.95rem;line-height:1.5}
.policy-strip dd a{color:var(--blue-bright)}
.policy-strip dd a:hover{color:var(--cream)}

/* ============ 7. Responsive ============ */
@media (max-width:1080px){
  .pkg-grid.is-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:880px){
  .water-head{grid-template-columns:1fr}
  .accent-photo{max-width:34rem}
  .pkg-grid.is-3,
  .pkg-grid.is-2{grid-template-columns:1fr;max-width:34rem}
  .water-nav-inner{gap:0 .25rem}
  .water-nav a{padding:.85rem .9rem;font-size:.74rem;letter-spacing:.08em}
  .water-nav-label{display:none}
  .policy-strip{grid-template-columns:1fr}
  .policy-strip > div{padding-right:0}
  .policy-strip > div + div{padding-left:0;border-left:0;margin-top:1.4rem}
}
@media (max-width:640px){
  /* the 50px mobile logo (was 40px) adds 10px of header height at this
     breakpoint, carried into --hdr the same way the desktop value was */
  :root{--hdr:70px}
  .group-label{font-size:.72rem;letter-spacing:.12em}
}