/* ============================================================
   King Slayer Sportfishing: Lake Erie walleye charters page (v2)
   Spine: photo hero from base.css, then a spec-sheet data rail.
   The page leads with a guests-and-catch photo and the price, and the
   rail carries the facts the old prose paragraphs used to carry.
   Requires tokens.css then base.css. All colour + type from tokens.
   ============================================================ */

/* ============ 1. Hero tweaks on top of the shared .page-hero ============
   24-1600.webp is a 4:3 frame and the wide hero band takes a slice out of
   the middle of it, so the crop is pulled up from the shared default of
   40%: at 25% every face and every fish stays inside the band, and at 40%
   the tallest guest loses the top of his head. Crumbs live inside the hero,
   above the eyebrow, so the page still opens on the photo. */
.page-hero .page-hero-img{object-position:center 25%}
.page-hero .crumbs{padding:0 0 1.15rem}
.page-hero .crumbs a{color:var(--ice)}
.page-hero .crumbs [aria-current="page"]{color:var(--cream)}
.page-hero .eyebrow{color:var(--ice)}
/* The scrim override that used to sit here was for 06-1600.webp, a bright
   midday boat shot with open sky and a pale brick wall behind the crumbs.
   24-1600.webp is a normal on-water photo, which is exactly what the shared
   scrim in base.css is tuned for: measured against --ice, the weakest line
   on this hero reads 7.7:1 at 768px and about 10:1 from 1024px up, so the
   override is gone and the page takes the base scrim unmodified. */

/* ============ 2. Spec rail: the data block ============
   Full-width band directly under the hero, in the same --deep-700 the
   hero scrim resolves to, so the photo band and the rail read as one unit. */
.erie-spec-band{
  background:var(--deep-700);
  padding:clamp(1.75rem,3.5vw,2.75rem) 0 clamp(2.25rem,4.5vw,3.5rem);
}
.erie-spec{
  background:var(--panel);
  border:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.erie-spec > div{
  padding:1rem 1.15rem 1.05rem;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.erie-spec > div:nth-child(-n+4){border-top:0}
.erie-spec > div:nth-child(4n+1){border-left:0}
.erie-spec dt{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.68rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--blue-bright);
  margin-bottom:.34rem;
}
.erie-spec dd{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:730;
  font-size:1.14rem;
  line-height:1.15;
  letter-spacing:.015em;
  color:var(--ice);
  white-space:nowrap; /* "21' Alumacraft" and "1 to 3" never split */
}
.erie-spec dd small{
  display:block;
  font-family:var(--body);
  font-weight:400;
  font-size:.82rem;
  letter-spacing:0;
  line-height:1.4;
  color:var(--dim);
  margin-top:.25rem;
  white-space:normal;
}

/* ============ 3. Launch-port chips ============ */
.erie-ports{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:var(--panel);
  border:1px solid var(--line);
}
.erie-port{
  padding:1.4rem 1.25rem 1.55rem;
  border-left:1px solid var(--line);
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:730;
  font-size:1.3rem;
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--cream);
}
.erie-port:first-child{border-left:0}
.erie-port::before{
  content:"";display:block;
  width:1.7rem;height:2px;
  background:var(--blue-bright);
  margin-bottom:.75rem;
}

/* ============ 4. Package column + know-before list ============ */
.erie-aside h3{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:1.22rem;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--cream);
  margin-bottom:1rem;
}
.erie-inc{list-style:none;border-top:1px solid var(--line)}
.erie-inc li{
  position:relative;
  padding:.85rem 0 .85rem 1.55rem;
  border-bottom:1px solid var(--line);
  color:var(--dim);
  font-size:.97rem;
}
.erie-inc li::before{
  content:"";position:absolute;
  left:0;top:1.45rem;
  width:.75rem;height:2px;
  background:var(--blue-bright);
}
.erie-inc a{color:var(--ice)}
.erie-inc a:hover{color:var(--blue-bright)}
.erie-aside .btn{margin-top:1.5rem}
/* the package 6 card lost its intro paragraph in the v2 fix round. Left to
   stretch against the taller aside, the `margin-top:auto` on .chips would
   strand the chips, price and button at the bottom of a mostly empty card,
   so the card is pinned to the top of the row instead. */
.grid-2 > .pkg-card{align-self:start}

/* ============ 5. Method block ============ */
.erie-method{
  background:var(--panel);
  border:1px solid var(--line);
  border-top:3px solid var(--blue);
  padding:1.5rem 1.6rem 1.7rem;
  max-width:56rem;
}
.erie-method p{color:var(--ice);font-size:1.02rem}
/* the method block is two short clauses now, not one paragraph, and base.css
   zeroes paragraph margins, so the pair needs its own gap */
.erie-method p + p{margin-top:.85rem}
/* one short block under its heading does not need the full section-head gap.
   :has is a progressive enhancement: without it the section just breathes more */
.section:has(.erie-method) .section-head{margin-bottom:clamp(1.5rem,3vw,2.25rem)}

/* ============ 6. Responsive ============ */
@media (max-width:1000px){
  .erie-spec{grid-template-columns:repeat(2,1fr)}
  .erie-spec > div{border-top:1px solid var(--line);border-left:1px solid var(--line)}
  .erie-spec > div:nth-child(-n+2){border-top:0}
  .erie-spec > div:nth-child(odd){border-left:0}
}
@media (max-width:880px){
  .erie-ports{grid-template-columns:1fr 1fr}
  .erie-port:nth-child(3){border-left:0}
  .erie-port:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .erie-spec{grid-template-columns:1fr}
  .erie-spec > div{border-top:1px solid var(--line);border-left:0}
  .erie-spec > div:first-child{border-top:0}
  .erie-ports{grid-template-columns:1fr}
  .erie-port{border-left:0;border-top:1px solid var(--line)}
  .erie-port:first-child{border-top:0}
}