/* ==========================================================================
   South Bound River Anglers — Guides page
   Loads on top of sbra.css, which supplies the tokens, reset, header, footer
   and the shared interior-page hero + CTA band. Only this page's own
   sections live here.
   ========================================================================== */

/* ==========================================================================
   Guide portraits
   Names ("MEET NICOLAS URIBE" etc.) are baked into the artwork, so these are
   plain images: no overlay text, and never cropped - a cover-crop could
   clip the wordmark off the edge of the frame.
   ========================================================================== */
.guide-feature {
  padding: clamp(28px, 4vw, 52px) 0 clamp(24px, 3.4vw, 44px);
}
.guide-feature img,
.guide-pair img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

.guide-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  padding-bottom: clamp(24px, 3.4vw, 44px);
}

/* ==========================================================================
   Prose blocks — "Founder & Head Guide" / "The Southbound Team"
   ========================================================================== */
/* Blue section heading. Sized off the same clamp as the home page's .eyebrow
   and the Fishing page's .eyebrow-blue so all three pages share one scale;
   title case rather than uppercase, matching the design. */
.guide-heading {
  margin-bottom: clamp(14px, 1.8vw, 22px);
  color: var(--blue);
  font-size: clamp(19px, 2.5vw, 30px);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.22;
}
.guide-prose p {
  font-size: var(--copy-size);
  font-weight: var(--copy-weight);
  line-height: 1.8;
}
.guide-prose p + p { margin-top: 14px; }

/* Founder block: copy left, timeline artwork right. */
.founder {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 60px);
  padding-bottom: clamp(30px, 4.5vw, 56px);
}
.founder-timeline {
  width: 100%;
  height: auto;
}

/* Team block: full-width copy above the photo wall. */
.team-intro { padding-bottom: clamp(24px, 3.4vw, 40px); }
.team-intro .guide-prose p { max-width: 1000px; }

/* ==========================================================================
   Team photo wall
   Column widths mirror the design's proportions (roughly 33% / 43% / 21%).
   Photos keep their natural aspect - nothing is cropped - so the columns end
   at different heights, which is what gives the wall its staggered rhythm.
   ========================================================================== */
.team-wall {
  display: grid;
  grid-template-columns: 1.45fr 1.9fr 1.25fr;
  align-items: stretch;   /* columns share the tallest height, so the short
                              third column can bottom-align inside it */
  gap: clamp(8px, 1.1vw, 15px);
  padding-bottom: clamp(44px, 6vw, 80px);
}
.tw-col {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.1vw, 15px);
  min-width: 0;
}
/* Third column: top photo starts level with the first row and absorbs all the
   column's spare height, so it reads at a comparable size to the other
   gallery items instead of sitting small with a gap above it. The bottom
   photo keeps its natural aspect; only the top one is allowed to crop. */
/* Same Safari caveat as the Reviews page: height:100% against a flex:1
   parent is indefinite in WebKit, so the image is absolutely filled into a
   positioned figure instead of relying on percentage resolution. */
.tw-col:last-child figure:first-child {
  flex: 1;
  min-height: 0;
  position: relative;
}
.tw-col:last-child figure:first-child img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.team-wall figure { margin: 0; min-width: 0; }
.team-wall img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .founder { grid-template-columns: minmax(0, 1fr); }
  .founder-timeline { max-width: 420px; margin-inline: auto; }
}

@media (max-width: 700px) {
  .guide-pair { grid-template-columns: minmax(0, 1fr); }
  /* Two columns keep some stagger; three would leave each photo too narrow. */
  .team-wall { grid-template-columns: 1fr 1fr; }
  .team-wall .tw-col:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .team-wall .tw-col:last-child figure { flex: 1; min-width: 0; }
}

@media (max-width: 460px) {
  .team-wall { grid-template-columns: 1fr; }
  .team-wall .tw-col:last-child { grid-column: auto; flex-direction: column; }
}