/* ============================================================
   King Slayer Sportfishing: /the-boats/ page layer
   Requires tokens.css then base.css.
   Spine (v2, conversion streamline): shared .page-hero >
   Sea-Ray spec sheet (stat strip, photo + spec table, two
   advantage panels) > Alumacraft spec block >
   which-boat-for-which-trip table > cta band.
   Colour and type come from tokens only. No border-radius.
   --red carries the actions: .btn-book and .btn-action from base.css only.
   ============================================================ */

/* ============ 1. Crumbs inside the shared hero ============ */
/* the crumb line sits above the eyebrow in the protected part of the
   scrim, so it takes the brighter --ice link colour to stay legible */
.page-hero .crumbs{padding:0 0 1.1rem}
.page-hero .crumbs a{color:var(--ice)}

/* ============ 2. Boat section head ============ */
.boat-sec{scroll-margin-top:5rem}
.boat-head{
  display:grid;
  grid-template-columns:1fr 24rem;
  gap:clamp(1.25rem,3vw,3rem);
  align-items:end;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(1.75rem,3.5vw,2.75rem);
}
.boat-head h2{margin-bottom:0}
.boat-head h2::after{display:none}
.boat-head-note{color:var(--dim);font-size:.96rem}

/* ============ 3. Stat strip ============ */
.stat-strip{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:3px solid var(--blue);
  background:var(--panel);
  margin-bottom:clamp(1.75rem,3.5vw,2.75rem);
}
.stat-strip li{padding:1.1rem 1.3rem 1.25rem}
.stat-strip li + li{border-left:1px solid var(--line)}
.stat-strip b,
.stat-list b{
  display:block;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:650;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue-bright);
  margin-bottom:.35rem;
}
.stat-strip span{display:block;color:var(--ice);font-size:.95rem;line-height:1.4}

/* ============ 4. Photo + spec table ============ */
/* width/height attrs on the img are paired with height:auto so the
   presentational height hint cannot beat aspect-ratio */
.spec-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.75rem,4vw,3.25rem);
  align-items:start;
  margin-bottom:clamp(1.75rem,3.5vw,2.75rem);
}
.spec-photo img,
.sled-photos img{
  width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid var(--line);
}
.spec-photo img{aspect-ratio:4/3}

.spec-sheet{
  width:100%;
  border-collapse:collapse;
  background:var(--panel);
  border:1px solid var(--line);
}
.spec-sheet caption{
  text-align:left;
  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);
  padding-bottom:.7rem;
}
.spec-sheet th,
.spec-sheet td{
  text-align:left;
  vertical-align:top;
  padding:.7rem 1.1rem;
  border-top:1px solid var(--line);
  font-size:.93rem;
  line-height:1.4;
}
.spec-sheet tr:first-child th,
.spec-sheet tr:first-child td{border-top:0}
.spec-sheet th{
  width:32%;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--dim);
  border-right:1px solid var(--line);
}
.spec-sheet td{color:var(--ice)}

/* ============ 5. Advantage panels ============ */
.adv-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1.25rem,2.5vw,2rem);
}
.adv-panel{
  background:var(--deep-900);
  border:1px solid var(--line);
  border-top:3px solid var(--blue);
  padding:1.4rem 1.5rem 1.6rem;
}
.adv-panel h3{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:1.2rem;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--cream);
  margin-bottom:.8rem;
}
.adv-num{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.2em;
  color:var(--blue-bright);
  margin-bottom:.7rem;
}
.adv-panel p{color:var(--dim);font-size:.96rem}

/* ============ 6. Alumacraft block ============ */
.sled-grid{
  display:grid;
  grid-template-columns:1fr 40%;
  gap:clamp(1.75rem,4vw,3.25rem);
  align-items:start;
}
.sled-copy{min-width:0}

.stat-list{
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--line);
}
.stat-list li{
  padding:.9rem 1.2rem .95rem 0;
  border-bottom:1px solid var(--line);
}
.stat-list li:nth-child(even){padding-left:1.2rem;border-left:1px solid var(--line)}
.stat-list span{display:block;color:var(--ice);font-size:.95rem;line-height:1.4}

.livescope{
  border-left:3px solid var(--blue-bright);
  background:var(--panel);
  padding:1.1rem 1.3rem 1.2rem;
  margin-top:1.6rem;
}
.livescope .eyebrow{margin-bottom:.5rem}
.livescope p{color:var(--dim);font-size:.95rem}

.sled-photos img{aspect-ratio:16/9}

/* ============ 7. Which-boat table ============ */
.table-scroll{overflow-x:auto}
.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)}

.table-link{margin-top:1.75rem}

/* ============ 8. Responsive ============ */
@media (max-width:1080px){
  .boat-head{grid-template-columns:1fr;align-items:start}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .stat-strip li:nth-child(odd){border-left:0}
  .stat-strip li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:880px){
  .spec-split{grid-template-columns:1fr}
  .spec-photo{max-width:34rem}
  .sled-grid{grid-template-columns:1fr}
  .sled-photos{max-width:34rem}
  .adv-grid{grid-template-columns:1fr}
  .adv-panel{max-width:44rem}
}
@media (max-width:640px){
  .stat-strip{grid-template-columns:1fr}
  .stat-strip li + li{border-left:0;border-top:1px solid var(--line)}
  .stat-list{grid-template-columns:1fr}
  .stat-list li:nth-child(even){padding-left:0;border-left:0}
  .spec-sheet th{width:38%;padding:.7rem .8rem}
  .spec-sheet td{padding:.7rem .8rem}
}