/* ============================================================
   King Slayer Sportfishing: /captains/ page layer
   Requires tokens.css then base.css.
   Spine (v2, conversion streamline): shared .page-hero >
   three proof figures + three captain cards > credential badge
   wall (base .trust-item treatment, re-gridded here) >
   two-sentence method note with species chips > cta band.
   No captain portraits exist, so the cards carry their weight
   with type, rules and a monogram.
   Colour and type come from tokens only. No border-radius.
   ============================================================ */

/* ============ 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. The three numbers this page proves ============ */
.proof-figs{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-bottom:clamp(2.25rem,4.5vw,3.5rem);
  border-top:1px solid var(--line);
}
.proof-figs li{
  display:flex;
  align-items:baseline;
  gap:1rem;
  padding:1.35rem 1.75rem 0 0;
  border-top:3px solid var(--blue);
  margin-top:-1px;
}
.proof-figs li + li{padding-left:1.75rem;border-left:1px solid var(--line)}
.proof-figs b{
  flex:none;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:760;
  font-size:clamp(2.4rem,4.5vw,3.4rem);
  line-height:.9;
  color:var(--ice);
}
.proof-figs > li > span{color:var(--dim);font-size:.94rem;line-height:1.4}

/* ============ 3. Captain cards ============ */
.cap-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.25rem,2.5vw,2rem);
  align-items:stretch;
}
.cap-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-top:3px solid var(--blue-bright);
  padding:1.5rem 1.6rem 1.7rem;
  display:flex;
  flex-direction:column;
  transition:border-color .2s ease;
}
.cap-card:hover{border-color:var(--blue-bright)}

/* a monogram stands in for a portrait rather than borrowing a catch photo */
.cap-mono{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:760;
  font-size:2.6rem;
  line-height:1;
  letter-spacing:.02em;
  color:var(--blue);
  margin-bottom:1rem;
}
.cap-card h3{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:1.28rem;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--cream);
  margin-bottom:.35rem;
}
.cap-role{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue-bright);
  margin-bottom:1.35rem;
}
.cap-cred-label{
  margin-top:auto;
  border-top:1px solid var(--line);
  padding-top:.9rem;
  margin-bottom:.75rem;
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
}
.cap-creds{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.cap-creds li{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue-bright);
  border:1px solid var(--blue);
  padding:.3em .65em;
  white-space:nowrap;
}

/* ============ 4. Credential badge wall ============ */
/* .trust-item comes from base.css and brings the tick mark and the
   display type. The wall re-grids it and lets the full name sit in
   sentence case beside the code. */
.cred-wall{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  border-top:1px solid var(--line);
}
.cred-badge{
  flex-wrap:wrap;
  align-items:baseline;
  gap:.65rem;
  padding:1.1rem 1.5rem 1.15rem 0;
  border-bottom:1px solid var(--line);
}
.cred-wall li:nth-child(even){padding-left:1.5rem;border-left:1px solid var(--line)}
.cred-badge::before{align-self:center}
.cred-badge b{
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.1em;
  color:var(--ice);
}
.cred-badge span{
  font-family:var(--body);
  font-weight:400;
  font-size:.92rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--dim);
}
.cred-note{
  color:var(--dim);
  font-size:.96rem;
  max-width:52rem;
  margin-top:1.75rem;
  border-left:2px solid var(--blue);
  padding-left:1rem;
}

/* ============ 5. How the crew fishes ============ */
.crew-split{
  display:grid;
  grid-template-columns:1fr 34%;
  gap:clamp(1.75rem,4vw,3.25rem);
  align-items:start;
}
.crew-copy > p{color:var(--dim);max-width:46rem}
.crew-species-label{
  font-family:var(--display);
  font-stretch:125%;
  font-variation-settings:'wdth' 125;
  font-weight:600;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue-bright);
  margin-top:1.75rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--line);
}
.crew-copy .chips{margin-top:1rem;margin-bottom:0}
.hold-links{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:1.9rem;
}

/* width/height attrs on the img are paired with height:auto so the
   presentational height hint cannot beat aspect-ratio */
.crew-photo img{
  width:100%;
  height:auto;
  aspect-ratio:9/16;
  object-fit:cover;
  border:1px solid var(--line);
}

/* ============ 6. Responsive ============ */
@media (max-width:1080px){
  .proof-figs{grid-template-columns:1fr}
  .proof-figs li + li{padding-left:0;border-left:0;margin-top:1.25rem}
  .cap-grid{grid-template-columns:1fr;max-width:34rem}
  .crew-split{grid-template-columns:1fr}
  .crew-photo{max-width:22rem}
}
@media (max-width:880px){
  .cred-wall{grid-template-columns:1fr}
  .cred-wall li:nth-child(even){padding-left:0;border-left:0}
  .cred-badge{padding-right:0}
}
@media (max-width:640px){
  .hold-links .btn{flex:1 1 100%;text-align:center}
}