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

/* ============ Meeting-spot map ============ */
/* keyless Google embed; max-width guard keeps the 390/320 audit clean */
.map-embed{margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.map-embed iframe{
  display:block;
  width:100%;
  max-width:100%;
  aspect-ratio:16/10;
  min-height:280px;
  border:1px solid var(--line);
}
.map-note{margin-top:.9rem;font-size:.95rem}
.map-note a{color:var(--blue-bright);text-decoration:none;border-bottom:1px solid var(--blue)}
.map-note a:hover{color:var(--cream);border-color:var(--blue-bright)}

/* ============ Section photo ============ */
.trip-photo{
  margin:0 0 clamp(1.5rem,3vw,2.25rem);
  max-width:46rem;
  border:1px solid var(--line);
  background:var(--panel);
  overflow:hidden;
}
/* height:auto is required: the HTML height attribute is a presentational hint
   that would otherwise beat aspect-ratio and render the photo at full pixel height */
.trip-photo img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
@media (max-width:600px){
  .trip-photo img{aspect-ratio:3/2}
}