/* ============================================================
   King Slayer Sportfishing: /fishing-charters/ page layer
   Requires tokens.css then base.css.
   Spine: shared .page-hero (base.css) > sticky water sub-nav >
   three water sections > Packages and Pricing table > policy
   strip > cta band. This is the ONE charters surface: the old
   per-water subpages folded in here 2026-07-27 and the which-boat
   table moved over from the-boats the same day.
   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.6: spec data lives on every card as chips (duration, guests,
   boat, bathroom, method, season) so each card is self-contained
   on a phone; the group labels above each grid carry no specs.
   ============================================================ */

: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;
}

/* ============ 2. Sticky water sub-nav ============ */
/* moved to base.css on 2026-08-08: the trip-info page now carries the same
   jump bar (client call), and it does not load this stylesheet. Keeping the
   rules here would have shipped an unstyled bar on that page. */

/* anchor targets clear both sticky bars. The per-package ids let a group
   share /fishing-charters/#package-3 and land on the card itself */
.water-sec,
.pkg-card[id]{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}
/* a short last row (packages 4 and 5, and the single 6 and 7 cards) sits
   centred on the measure instead of leaving an empty column beside it */
.pkg-grid.is-2,
.pkg-grid.is-1{margin-left:auto;margin-right:auto}

/* 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)}

/* the package number is the shareable handle ("package 3 is what we
   want"), so it reads at label-plus size, not fine print */
.pkg-num{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.18em;
  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;
}
/* the price is the single dominant element of every card */
.pkg-card .price{font-size:2.6rem}
.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;
}
/* client call 2026-07-29: footnotes were too easy to miss, so they read
   a step bigger and brighter than the old .88rem dim print */
.pkg-notes li{
  color:var(--ice);
  font-size:1rem;
  line-height:1.5;
}
.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);
}

/* ============ 5b. Packages and Pricing table ============ */
/* moved from the-boats 2026-07-27: the one place the seven packages sit
   side by side. On a phone it scrolls inside .table-scroll; the cards
   above carry the mobile comparison, the table is the desktop artifact */
.table-scroll{overflow-x:auto}
/* swipe cue (v2.18). The 44rem table overflows its wrapper below a 766px
   viewport (wrapper = viewport less two 4vw gutters), so the note and the
   right edge fade only show there. Where scroll-driven animation is
   supported the fade clears as the last column scrolls into view. */
.table-frame{position:relative}
.table-swipe{display:none}
@media (max-width:766px){
  .table-swipe{display:block;color:var(--dim);font-size:.9rem;margin-bottom:.6rem}
  .table-frame::after{
    content:"";
    position:absolute;
    top:0;right:0;bottom:0;
    width:2.75rem;
    pointer-events:none;
    background:linear-gradient(to right,rgba(13,23,48,0),var(--deep-900));
  }
  @supports (animation-timeline:scroll()){
    .table-frame{timeline-scope:--pricing-x}
    .table-scroll{scroll-timeline:--pricing-x x}
    .table-frame::after{
      animation:table-fade-out linear both;
      animation-timeline:--pricing-x;
      animation-range:85% 100%;
    }
  }
}
@keyframes table-fade-out{to{opacity:0}}
.trip-table{
  width:100%;
  min-width:44rem;
  border-collapse:collapse;
  background:var(--panel);
  border:1px solid var(--line);
}
.trip-table caption{
  text-align:left;
  color:var(--dim);
  font-size:.9rem;
  padding-bottom:.75rem;
}
.trip-table thead th{
  text-align:left;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:650;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue-bright);
  background:var(--deep-900);
  padding:.85rem 1rem;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.trip-table tbody th,
.trip-table tbody td{
  text-align:left;
  padding:.8rem 1rem;
  border-top:1px solid var(--line);
  font-size:.92rem;
  color:var(--dim);
  white-space:nowrap;
}
.trip-table tbody th{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:1rem;
  color:var(--ice);
  width:3.5rem;
}
.trip-table tbody tr.is-searay td,
.trip-table tbody tr.is-searay th{color:var(--ice)}
.trip-table tbody tr.is-searay th{border-left:3px solid var(--blue-bright)}
.trip-table .num{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:1.02rem;
  color:var(--ice);
}
.trip-table .yes{color:var(--blue-bright)}
.packages-lead{color:var(--dim);max-width:44rem;margin-bottom:1.5rem}

/* ============ 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);
}
/* client call 2026-08-08: the strip now carries the client's five full policy
   sections copied verbatim from their live site, not three one-liners. Those
   paragraphs are far too long for a 3-up row, so the full variant runs 2-up on
   desktop and the left border resets per row instead of per item. */
.policy-strip-full{grid-template-columns:repeat(2,1fr);row-gap:1.6rem}
.policy-strip-full > div{padding-right:2rem}
.policy-strip-full > div + div{padding-left:2rem;border-left:1px solid var(--line)}
.policy-strip-full > div:nth-child(odd){padding-left:0;border-left:0}
@media (max-width:880px){
  .policy-strip-full{grid-template-columns:1fr;row-gap:0}
  .policy-strip-full > div,
  .policy-strip-full > div + div{padding-left:0;padding-right:0;border-left:0}
  .policy-strip-full > div + div{margin-top:1.4rem}
}
.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 responsive rules moved to base.css 2026-08-08, shared with trip-info */
  .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}
  /* owner call 2026-07-27: card details a few notches bigger on phones */
  .pkg-card .chips li{font-size:.95rem}
  .pkg-card .price-note{font-size:.95rem}
  .pkg-notes li{font-size:.95rem}
}