/* ==========================================================================
   South Bound River Anglers — Fishing page
   Loads on top of sbra.css, which supplies the tokens, reset, header and
   footer. Only the sections unique to this page live here.
   ========================================================================== */

:root {
  --cream: #f6efe7;   /* "Our Home Waters" band                       */
  --panel: #eeeeee;   /* light river rows                             */
  --card:  #ffffff;   /* spec cards                                   */
  --card-line: #e2e2e2;
}

/* ==========================================================================
   Our Home Waters
   The artwork is the whole band - cream ground, heading and map baked in,
   with its right third left intentionally empty. The copy is absolutely
   positioned into that empty area, tracked in % so it stays put as the
   image scales.
   ========================================================================== */
.home-waters {
  position: relative;
  background: var(--cream);
}
.home-waters-art { width: 100%; height: auto; }

.home-waters-copy {
  position: absolute;
  top: 50%;
  right: 6%;
  width: 31%;
  max-width: 425px;   /* 31% alone runs to ~595px on very wide screens */
  transform: translateY(-50%);
}
.home-waters-copy .eyebrow-blue {
  margin-bottom: 18px;
  color: var(--blue);
  /* same clamp as .eyebrow on the home page */
  font-size: clamp(19px, 2.5vw, 30px);
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.22;
  text-transform: uppercase;
}
.home-waters-copy p + p { margin-top: 14px; }
.home-waters-copy p:not(.eyebrow-blue) {
  font-size: var(--copy-size);
  font-weight: var(--copy-weight);
  line-height: 1.8;
}

/* ==========================================================================
   River rows
   Photo + copy share a tinted panel; the spec card sits outside it, on the
   opposite side, and alternates left/right down the page.
   ========================================================================== */
.rivers {
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
  padding: clamp(44px, 6vw, 80px) 0;
}

.river {
  display: grid;
  grid-template-columns: minmax(0, 2.55fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(12px, 1.6vw, 20px);
}
.river--alt { grid-template-columns: minmax(0, 1fr) minmax(0, 2.55fr); }
.river--alt .river-panel { order: 2; }
.river--alt .river-specs { order: 1; }

.river-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(16px, 2.2vw, 34px);
  padding: clamp(14px, 1.6vw, 20px);
  background: var(--panel);
  border-radius: var(--radius-card);
}
/* Blue rows flip the photo to the right and invert the type. */
.river--alt .river-panel { background: var(--blue-deep); }
.river--alt .river-copy { order: 1; }
.river--alt .river-photo { order: 2; }
.river--alt .river-copy h3,
.river--alt .river-copy p { color: var(--white); }

.river-photo {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 6px;
}
.river-copy h3 {
  margin-bottom: 12px;
  font-size: clamp(17px, 1.9vw, 24px);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.river-copy p {
  font-size: var(--copy-size-sm);
  font-weight: var(--copy-weight);
  line-height: 1.7;
}

/* --- spec card --- */
.river-specs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1.3vw, 16px);
  padding: clamp(14px, 1.8vw, 22px);
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-card);
}
/* Icon sits to the left, sized to the height of ONE title line + ONE caption
   line - the intended two-line design - via a calc() built from the same
   font-size tokens the text uses. Earlier this measured .spec-text's actual
   rendered box instead, which looked right almost everywhere but grew
   whenever a caption's content happened to wrap to a second line (e.g. a
   longer species list), inflating that one icon past its neighbours. Tying
   the icon to the type tokens directly keeps every icon on the page the
   same height at a given breakpoint, regardless of how much any one
   caption's text wraps. */
.river-specs {
  --spec-title-fs:   clamp(11px, 1.05vw, 13px);
  --spec-caption-fs: clamp(9.5px, .88vw, 11px);
}
.spec {
  position: relative;
  padding-left: 58px;   /* icon column + gap, comfortably above the tallest
                            computed icon height across the clamp range */
}
.spec-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  /* title line-height (1.75, inherited from body) + caption's 4px margin-top
     + caption line-height (1.45) - i.e. exactly the Chimehuin/single-line
     case, everywhere. */
  height: calc(var(--spec-title-fs) * 1.75 + 4px + var(--spec-caption-fs) * 1.45);
}
.spec-text { display: block; }
.spec-text span {
  display: block;
  color: var(--ink);
  font-size: var(--spec-title-fs);
  font-weight: 700;
  letter-spacing: .01em;
}
.spec-text p {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--spec-caption-fs);
  font-weight: 500;
  line-height: 1.45;
}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery { padding-bottom: clamp(48px, 6vw, 84px); }
.gallery h2 {
  margin-bottom: clamp(22px, 3vw, 38px);
  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}
/* Six columns let each photo claim a different span, which is what gives the
   grid its irregular, gallery-wall rhythm rather than a uniform tile field. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
}
.gallery-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.gallery-grid a,
.gallery-grid figure { margin: 0; min-width: 0; }

.g1 { grid-column: span 3; aspect-ratio: 4 / 3; }
.g2 { grid-column: span 3; aspect-ratio: 4 / 3; }
.g3 { grid-column: span 2; aspect-ratio: 3 / 4; }
.g4 { grid-column: span 2; aspect-ratio: 3 / 4; }
.g5 { grid-column: span 2; aspect-ratio: 3 / 4; }
.g6 { grid-column: span 4; aspect-ratio: 16 / 9; }
.g7 { grid-column: span 2; aspect-ratio: 4 / 5; }
.g8 { grid-column: span 3; aspect-ratio: 4 / 3; }
.g9 { grid-column: span 3; aspect-ratio: 4 / 3; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  /* Below this the empty third of the artwork is too narrow to hold the copy,
     so it drops underneath instead of overlaying. */
  .home-waters-copy {
    position: static;
    width: auto;
    max-width: none;   /* the 425px cap is desktop-overlay only; stacked
                           layout keeps its original full-width paragraph */
    transform: none;
    padding: 0 var(--gutter) clamp(32px, 6vw, 52px);
    text-align: center;
  }
  .home-waters-copy p:not(.eyebrow-blue) { font-size: var(--copy-size-sm); }
}

@media (max-width: 860px) {
  /* Photo/copy/spec stack in reading order, so the alternating sides that
     structure the desktop layout must not reorder the flow here. */
  .river,
  .river--alt { grid-template-columns: minmax(0, 1fr); }
  .river--alt .river-panel,
  .river--alt .river-specs { order: 0; }

  .river-panel { grid-template-columns: minmax(0, 1fr); }
  .river--alt .river-copy,
  .river--alt .river-photo { order: 0; }
  .river-copy { text-align: center; }

  .river-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .g1, .g2, .g6, .g8, .g9 { grid-column: span 6; }
  .g3, .g4, .g5, .g7 { grid-column: span 3; }
}

@media (max-width: 520px) {
  .river-specs { grid-template-columns: minmax(0, 1fr); }
  .gallery-grid > * { grid-column: span 6 !important; aspect-ratio: 4 / 3; }
}