/* ==========================================================================
   South Bound River Anglers — landing page
   Standalone stylesheet for the redesigned home page. Independent of the
   Divi export used by the remaining pages, so nothing here can leak into
   them (and their rules cannot reach in here).

   Every colour, size and rhythm value is a token in :root below — retune the
   design from that block alone.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* brand */
  --blue:        #2a4b9b;   /* section eyebrows, links, accents        */
  --blue-deep:   #16357f;   /* primary buttons, "why choose" wash      */
  --ink:         #1a1a2e;   /* headings                                */
  --body:        #5f6368;   /* paragraph copy                          */
  --muted:       #8a8f96;   /* meta, legal line                        */
  --chip:        #e9e9e9;   /* secondary "Explore …" buttons           */
  --chip-hover:  #dcdcdc;
  --hairline:    #dcdcdc;
  --black:       #131313;   /* footer                                  */
  --white:       #ffffff;
  --placeholder: #b9bcc0;   /* shows through until real photos land    */

  /* layout */
  --wrap:        1120px;    /* feature rows, footer                    */
  --wrap-narrow: 720px;     /* centred intro + CTA copy                */
  --gutter:      clamp(20px, 5vw, 60px);
  --radius:      4px;
  --radius-card: 10px;

  /* type */
  --font: "Montserrat", "Open Sans", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* vertical rhythm */
  --section-y:   clamp(56px, 8vw, 104px);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

p { margin: 0; }
/* figure carries a 40px UA side-margin that would shrink every photo slot. */
figure, figcaption { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.wrap        { width: 100%; max-width: var(--wrap);        margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--gutter); }

/* Screen-reader-only helper (skip link, icon labels). */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -60px; z-index: 100;
  background: var(--white); color: var(--ink);
  padding: 10px 18px; border-radius: var(--radius);
  transition: top .2s ease;
}
.skip-link:focus { top: 14px; }

/* Every photo slot renders as a solid grey block until real artwork is
   dropped in, so the layout is exact from the first load. */
.shot {
  position: relative;
  overflow: hidden;
  background: var(--placeholder);
  border-radius: var(--radius-card);
}
.shot > img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Caption words burned over a photo ("MEET THE GUIDE", "LIMAY", …) */
.shot-label {
  position: absolute;
  color: var(--white);
  font-size: clamp(18px, 2.3vw, 30px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
  pointer-events: none;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 17px 42px;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.btn-primary {
  background: var(--blue-deep);
  color: var(--white);
}
.btn-primary:hover { background: #102a68; transform: translateY(-1px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--chip);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  padding: 11px 20px;
  border-radius: var(--radius);
  transition: background-color .2s ease;
}
.btn-ghost:hover { background: var(--chip-hover); }
.btn-ghost .arrow { transition: transform .2s ease; }
.btn-ghost:hover .arrow { transform: translateX(3px); }

/* ==========================================================================
   Header — transparent, sitting over the hero
   ========================================================================== */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--gutter);
}

.brand img { width: clamp(120px, 13vw, 170px); height: auto; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  margin: 5px 0;
  background: var(--white);
  transition: transform .25s ease, opacity .25s ease;
}

.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 38px);
  margin: 0; padding: 0;
  list-style: none;
}
.nav-links a {
  position: relative;
  color: var(--white);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .02em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }

.social { display: flex; align-items: center; gap: 10px; }
.social a {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  color: var(--white);
  border-radius: 3px;
  transition: opacity .2s ease;
}
.social a:hover { opacity: .7; }
.social svg { width: 15px; height: 15px; fill: currentColor; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(520px, 78vh, 860px);
  padding: 140px var(--gutter) 96px;
  text-align: center;
  background: var(--placeholder);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Scrim keeps white type legible over any photo. The mid-band carries real
   weight because the headline can land on bright water or gravel — measured
   at 2.9:1 over the sunlit gravel bar with a lighter wash. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.30) 28%, rgba(0,0,0,.30) 64%, rgba(0,0,0,.44) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: 900px; }

.hero h1 {
  color: var(--white);
  font-size: clamp(32px, 5.4vw, 62px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 3px 26px rgba(0, 0, 0, .4);
}
.hero p {
  margin: 20px auto 38px;
  max-width: 620px;
  color: rgba(255, 255, 255, .95);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 300;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}

/* ==========================================================================
   Intro — eyebrow, headline, ornament, lede
   ========================================================================== */
.intro {
  padding: var(--section-y) 0 clamp(30px, 4vw, 54px);
  text-align: center;
}
.eyebrow {
  margin-bottom: clamp(34px, 5vw, 60px);
  color: var(--blue);
  font-size: clamp(17px, 2.1vw, 25px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.intro h2 {
  font-size: clamp(24px, 3.1vw, 36px);
  font-weight: 500;
}
.ornament {
  display: block;
  width: min(300px, 70%);
  margin: clamp(20px, 3vw, 34px) auto;
  color: var(--hairline);
}
.intro .lede {
  max-width: 620px;
  margin-inline: auto;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.85;
}

/* ==========================================================================
   Feature rows — alternating copy / imagery
   ========================================================================== */
.features {
  display: grid;
  gap: clamp(56px, 8vw, 104px);
  padding-bottom: var(--section-y);
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.95fr);
  align-items: center;
  gap: clamp(28px, 4.5vw, 64px);
}
/* Imagery first, copy second. */
.feature--reverse { grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr); }
.feature--reverse .feature-copy { order: 2; }
.feature--reverse .feature-media { order: 1; }

.feature-copy h3 {
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 500;
  line-height: 1.35;
}
.feature-copy p {
  margin: 18px 0 26px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.85;
}

/* Row 1 — single wide guide photo */
.media-single { aspect-ratio: 16 / 9; }
.media-single .shot-label { right: 8%; top: 50%; transform: translateY(-50%); text-align: right; }

/* Row 2 — three staggered river cards */
.media-rivers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
  align-items: center;
}
.media-rivers .shot { aspect-ratio: 3 / 4; }
/* Bound the label box on both sides so long names ("Collón Curá") wrap
   inside the card instead of being clipped by its overflow. */
.media-rivers .shot-label { right: 10%; font-size: clamp(15px, 1.6vw, 22px); }
.media-rivers .shot:nth-child(1) { transform: translateY(9%);  }
.media-rivers .shot:nth-child(2) { transform: translateY(-6%); }
.media-rivers .shot:nth-child(3) { transform: translateY(2%);  }
.media-rivers .shot:nth-child(1) .shot-label { left: 10%; bottom: 8%; }
.media-rivers .shot:nth-child(2) .shot-label { left: 10%; top: 7%;    }
.media-rivers .shot:nth-child(3) .shot-label { left: 10%; bottom: 8%; }

/* Row 3 — lodge interior + exterior */
/* Both photos share one height, differing only in width — so the row reads as
   a single band rather than two unrelated cards. */
.media-lodges {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(8px, 1.2vw, 16px);
  aspect-ratio: 2 / 1;
}
.media-lodges .shot { height: 100%; }
.media-lodges .shot:nth-child(2) .shot-label { right: 8%; bottom: 7%; }

/* Row 4 — guest stories */
.media-stories { aspect-ratio: 16 / 9; }
.media-stories .shot-label { right: 8%; top: 50%; transform: translateY(-50%); text-align: right; }

/* ==========================================================================
   Planning CTA + full-bleed banner
   ========================================================================== */
.planning {
  padding-bottom: clamp(34px, 5vw, 56px);
  text-align: center;
}
.planning h2 {
  font-size: clamp(24px, 3.1vw, 36px);
  font-weight: 500;
}
.planning p {
  max-width: 620px;
  margin: clamp(18px, 2.4vw, 26px) auto clamp(26px, 3.4vw, 38px);
  font-size: 14px;
  font-weight: 300;
}

.banner {
  position: relative;
  display: block;
  aspect-ratio: 1120 / 300;
  min-height: 200px;
  margin: 0 auto clamp(54px, 7vw, 86px);
  max-width: var(--wrap);
  width: calc(100% - (2 * var(--gutter)));
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--placeholder);
}
.banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.banner:hover img { transform: scale(1.03); }
.banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(0,0,0,.30), rgba(0,0,0,.05) 45%, rgba(0,0,0,.30));
}
.banner span {
  position: absolute;
  z-index: 2;
  color: var(--white);
  font-size: clamp(20px, 3.6vw, 46px);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .45);
}
.banner .w1 { left: 5%;  top: 14%; }
.banner .w2 { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.banner .w3 { right: 5%; bottom: 14%; }

/* ==========================================================================
   "Why anglers choose Southbound"
   ========================================================================== */
.why {
  position: relative;
  padding: clamp(44px, 6vw, 72px) 0 clamp(52px, 7vw, 84px);
  overflow: hidden;
  background: var(--blue-deep);
}
.why-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .35;
}
.why::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,53,127,.82), rgba(22,53,127,.92));
}
.why > .wrap { position: relative; z-index: 2; }

.why h2 {
  margin-bottom: clamp(28px, 4vw, 46px);
  color: var(--white);
  font-size: clamp(18px, 2.3vw, 27px);
  font-weight: 600;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

.why-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
}
.why-card {
  padding: clamp(24px, 3vw, 36px) clamp(18px, 2.2vw, 28px);
  text-align: center;
  background: var(--white);
  border-radius: 6px;
}
.why-card svg {
  width: 34px; height: 34px;
  margin-bottom: 16px;
  color: var(--ink);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.why-card h3 {
  margin-bottom: 12px;
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 500;
}
.why-card p {
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.8;
}

/* ==========================================================================
   Instagram strip
   ========================================================================== */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.insta-grid a {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--placeholder);
}
.insta-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.insta-grid a:hover img { transform: scale(1.05); }

/* Play badge on the video tile */
.insta-grid .is-video::after {
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  width: 0; height: 0;
  border-left: 11px solid rgba(255, 255, 255, .95);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5));
}

.insta-follow {
  padding: clamp(20px, 2.8vw, 30px) var(--gutter);
  color: var(--blue);
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 500;
  text-align: center;
}
.insta-follow a:hover { text-decoration: underline; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--black); color: var(--white); }

.footer-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(38px, 5vw, 58px) var(--gutter);
}

.footer-nav { margin: 0; padding: 0; list-style: none; }
.footer-nav li + li { margin-top: 9px; }
.footer-nav a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: opacity .2s ease;
}
.footer-nav a:hover { opacity: .65; }

.footer-logo { justify-self: center; }
.footer-logo img { width: clamp(150px, 18vw, 215px); height: auto; }

.footer-contact {
  justify-self: end;
  text-align: right;
}
.footer-contact .social {
  justify-content: flex-end;
  margin-bottom: 16px;
}
.footer-contact h4 {
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.footer-contact a[href^="mailto:"] {
  display: inline-block;
  margin-top: 6px;
  color: rgba(255, 255, 255, .82);
  font-size: 12.5px;
  font-weight: 300;
  word-break: break-word;
}
.footer-contact a[href^="mailto:"]:hover { color: var(--white); }
.footer-contact address {
  margin-top: 12px;
  color: rgba(255, 255, 255, .6);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.6;
}

.footer-legal {
  padding: 15px var(--gutter);
  color: rgba(255, 255, 255, .55);
  font-size: 11px;
  font-weight: 300;
  text-align: center;
  background: #0b0b0b;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer-legal a:hover { color: var(--white); text-decoration: underline; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .feature,
  .feature--reverse { grid-template-columns: minmax(0, 1fr); }
  .feature--reverse .feature-copy,
  .feature--reverse .feature-media { order: 0; }
  .feature-copy { text-align: center; }

  .media-rivers .shot { transform: none !important; }

  .why-cards { grid-template-columns: minmax(0, 1fr); }

  .footer-main {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: 30px;
  }
  .footer-nav { text-align: center; }
  .footer-contact { justify-self: center; text-align: center; }
  .footer-contact .social { justify-content: center; }
  .footer-logo { order: -1; }
}

@media (max-width: 760px) {
  /* Collapse the nav behind a toggle. */
  .nav-toggle { display: block; }

  .site-header { align-items: center; }

  .site-nav {
    position: absolute;
    inset: 100% var(--gutter) auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 0;
    background: rgba(12, 14, 22, .96);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
    /* Hidden by default; .is-open (set by the toggle) reveals it. */
    display: none;
  }
  .site-nav.is-open { display: flex; }

  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { display: block; padding: 12px 22px; text-shadow: none; }
  .nav-links a::after { display: none; }
  .nav-links a:hover { background: rgba(255, 255, 255, .07); }

  .social { justify-content: center; padding: 12px 22px 4px; }

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

  .banner { aspect-ratio: 4 / 3; }
  .banner .w1 { left: 7%; top: 12%; }
  .banner .w3 { right: 7%; bottom: 12%; }
}

@media (max-width: 620px) {
  /* Three portrait cards side by side leave ~100px each — too narrow for the
     river names. Stack them landscape instead so the labels stay readable. */
  .media-rivers { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .media-rivers .shot { aspect-ratio: 16 / 9; }
  /* :nth-child(n) matches the per-card desktop rules' specificity so all three
     labels land in the same place once stacked. */
  .media-rivers .shot:nth-child(n) .shot-label {
    left: 7%; right: auto; bottom: auto; top: 50%; transform: translateY(-50%);
  }
}

@media (max-width: 520px) {
  .media-lodges { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; }
  .media-lodges .shot { aspect-ratio: 5 / 4; height: auto; }
  .btn { width: 100%; max-width: 320px; padding-inline: 20px; }
}

/* ---------- motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}