/* ============================================================
   King Slayer Sportfishing: /trip-info/ page layout only
   Requires tokens.css then base.css.
   Answer-first FAQ page. The .page-hero, .faq-item and
   .faq-answer components live in base.css; this file adds the
   orientation band, the jump list, and the grouped FAQ column.
   v2 conversion pass: the H1 moved into the shared .page-hero,
   so the orientation band is now one short lead plus the jumps.
   ============================================================ */

/* ============ Orientation band ============ */
.trip-open{padding-top:clamp(2rem,4vw,3rem)}
.trip-lede{max-width:44rem}
.trip-lede p{
  color:var(--ice);
  font-size:clamp(1.05rem,1.6vw,1.2rem);
}
.trip-lede p + p{margin-top:.7rem;color:var(--dim);font-size:1rem}

/* ============ Jump list ============ */
.trip-jump{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:.6rem;
  margin-top:clamp(1.5rem,3vw,2.25rem);
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.trip-jump a{
  display:inline-block;
  border:1px solid var(--line);
  padding:.5rem .95rem;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:640;
  font-size:.76rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
  text-decoration:none;
}
.trip-jump a:hover{color:var(--blue-bright);border-color:var(--blue-bright)}

/* ============ Grouped FAQ blocks ============ */
.faq-group{scroll-margin-top:5rem}
.faq-group .section-head{margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.faq-list{
  max-width:52rem;
  border-top:1px solid var(--line);
}
.faq-list .faq-answer a{color:var(--blue-bright)}
.faq-list .faq-item summary{font-size:1.02rem}

/* ============ Responsive ============ */
@media (max-width:640px){
  .trip-jump{gap:.45rem}
  .trip-jump a{padding:.45rem .75rem;font-size:.72rem}
  .faq-list .faq-item summary{font-size:.95rem;padding-right:2.1rem}
}