/* ==========================================================================
   South Bound River Anglers — Lodges page
   Loads on top of sbra.css, which supplies the tokens, reset, header, footer
   and the shared interior-page hero + CTA band.
   ========================================================================== */

:root {
  --band-light: #eeeeee;
  --band-dark:  #1a1a1a;
  /* These bands run wider than the standard --wrap content column. */
  --wrap-band:  1360px;
}

/* ==========================================================================
   Lodge bands
   One band per lodge, alternating light and dark down the page: photo on top,
   name and description centred beneath.
   ========================================================================== */
.lodges {
  display: grid;
  gap: clamp(14px, 1.8vw, 24px);
  width: 100%;
  max-width: var(--wrap-band);
  margin-inline: auto;
  padding: clamp(30px, 4vw, 56px) var(--gutter) clamp(20px, 3vw, 36px);
}

.lodge {
  padding: clamp(26px, 3.4vw, 52px) clamp(18px, 2.4vw, 40px);
  text-align: center;
  border-radius: var(--radius-card);
}
.lodge--light { background: var(--band-light); }
.lodge--dark  { background: var(--band-dark); }

/* ---------- carousel ----------
   Every lodge shows six photos. The slides are laid out in a flex track and
   moved with a transform, so only one is visible at a time. aspect-ratio on
   the <img> gives each slide a definite height without any percentage-height
   chain - the pattern that broke Safari on the Reviews page. */
.carousel {
  position: relative;
  width: min(84%, 1040px);
  margin-inline: auto;
}
.carousel-viewport {
  overflow: hidden;
  border-radius: 6px;
}
.carousel-track {
  display: flex;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
}
.carousel-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;   /* sources are 1.58:1, so this crops top and bottom */
  object-fit: cover;
}

/* Arrows float over the photo. A translucent dark disc keeps them legible on
   both the light and the dark bands, and over any photo behind them. */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: clamp(34px, 3.2vw, 44px);
  aspect-ratio: 1;
  padding: 0;
  color: var(--white);
  background: rgba(0, 0, 0, .42);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.carousel-btn:hover {
  background: rgba(0, 0, 0, .68);
  transform: translateY(-50%) scale(1.06);
}
.carousel-btn svg { width: 55%; height: 55%; }
.carousel-btn--prev { left: clamp(8px, 1.1vw, 16px); }
.carousel-btn--next { right: clamp(8px, 1.1vw, 16px); }

.lodge-name {
  margin-top: clamp(18px, 2.4vw, 30px);
  color: var(--blue);
  font-size: clamp(17px, 1.9vw, 24px);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.3;
}
.lodge--dark .lodge-name { color: var(--white); }

.lodge-copy {
  max-width: 760px;
  margin: clamp(10px, 1.4vw, 16px) auto 0;
  font-size: var(--copy-size-sm);
  font-weight: var(--copy-weight);
  line-height: 1.75;
}
.lodge--dark .lodge-copy { color: rgba(255, 255, 255, .82); }

/* ==========================================================================
   Closing CTA
   Unlike the other pages, this one's CTA is an inset rounded panel matching
   the lodge bands rather than a full-bleed band.
   ========================================================================== */
.cta-band--inset {
  width: 100%;
  max-width: var(--wrap-band);
  margin: clamp(18px, 2.6vw, 34px) auto clamp(40px, 5vw, 70px);
  padding-inline: clamp(24px, 4vw, 64px);
  border-radius: var(--radius-card);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 700px) {
  /* The 2:1 frame gets too letterboxed on a phone; give it more height back
     (which also happens to crop these 1.58:1 sources far less). */
  .carousel { width: 100%; }
  .carousel-slide img { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition: none; }
}