/* ==========================================================================
   Layout v3 — "300FeetOut"-inspired components
   Structural pattern borrowed from a client-supplied reference site
   (300feetout.com): a huge bold rotating-word hero headline, pill-shaped
   buttons/nav CTA, a horizontally-scrolling carousel for listings, and a
   full-bleed accent-color closing CTA band.

   One deliberate departure from the reference: 300feetout has a "trusted
   by" client-logo strip. VT Properties is a newly-founded business with
   no real clients or logos to show, and every round on this project has
   kept that kind of claim excluded to avoid implying relationships that
   don't exist. Rather than fabricate placeholder client names/logos,
   this file styles an honest equivalent instead — a "where we work"
   strip using VT's own real plot/village names — see .trust-strip below.

   Everything here is built on the site's existing --clr-* custom
   properties, so it automatically follows whichever palette a given copy
   of the site is running (Arctic Prestige blue on the base/structure
   copies, burnt-orange on the full-style copy) — no hardcoded colors.
   The existing scroll-scrubbed video ("3D scroll") sections are
   completely untouched by this file and this round's changes.
   ========================================================================== */

/* ---- Pill buttons / nav ---- */
.btn{ border-radius: 999px; }
.wa-fab{ border-radius: 999px; }

/* ---- Rotating hero word ---- */
.rotate-word{
  display: inline-block;
  color: var(--clr-green-bright);
  transition: opacity 0.26s ease;
}

/* ---- Honest "where we work" strip (in place of a fabricated client-logo strip) ---- */
.trust-strip{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 40px;
  padding: 26px 0;
  border-top: 1px solid var(--clr-line);
  border-bottom: 1px solid var(--clr-line);
}
.trust-strip .trust-label{
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-mist);
  margin-right: 6px;
}
.trust-strip .trust-word{
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.8vw, 1.5rem);
  font-weight: 600;
  color: var(--clr-white);
  opacity: 0.72;
  letter-spacing: -0.01em;
  transition: opacity var(--dur-fast);
}
.trust-strip .trust-word:hover{ opacity: 1; }

/* ---- Horizontal-scroll carousel ----
   Round 40: hid the native browser scrollbar. It rendered as a visible
   gray track under the cards on Chrome/Windows (and anywhere without
   overlay scrollbars) — redundant clutter since ".h-carousel-hint" ("Scroll
   for more →") already signals the scrollability more cleanly. Scrolling
   itself (mouse-drag, touch swipe, trackpad, keyboard) is unaffected —
   only the visual scrollbar chrome is hidden. */
.h-carousel{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 22px;
  margin: 0 -2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.h-carousel::-webkit-scrollbar{ display: none; }
.h-carousel > *{
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(78vw, 340px);
}
@media (min-width: 900px){ .h-carousel > *{ width: min(30vw, 380px); } }
.h-carousel-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.h-carousel-hint{
  font-size: 0.76rem;
  color: var(--clr-mist);
  letter-spacing: 0.03em;
}

/* ---- Video gallery (properties.html, Round 19) ----
   Real on-site footage (VT's own WhatsApp video, not stock), shown as a
   swipeable gallery of portrait 9:16 tiles rather than the old text-header
   + photo-carousel it replaced. Each tile autoplays muted/looped/inline —
   browsers require muted for autoplay, and initVideoGallery() in main.js
   pauses/resumes tiles as they scroll in and out of view so an off-screen
   gallery isn't burning battery/bandwidth. No caption overlay by design —
   kept intentionally clean per the request that removed the old heading. */
.video-gallery{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 22px;
  margin: 0 -2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.video-card{
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(66vw, 300px);
  aspect-ratio: 9/16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--clr-black-soft);
  border: 1px solid var(--clr-line);
}
.video-card video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--clr-black-soft);
}
@media (min-width: 900px){ .video-card{ width: min(24vw, 320px); } }

/* ---- Full-bleed accent CTA band ---- */
.bg-accent{ background: var(--clr-green-bright); color: var(--clr-ink); }
.bg-accent .eyebrow{ color: var(--clr-ink); opacity: 0.68; }
.bg-accent .lede{ color: rgba(0,0,0,0.6); }
.cta-band.solid{
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
.cta-band.solid::before{ display: none; }
.cta-band.solid h2{ color: var(--clr-ink); }
.cta-band.solid .btn-light{ background: var(--clr-black); color: var(--clr-white); }
.cta-band.solid .btn-light:hover{ background: var(--clr-black-soft); }
.cta-band.solid .btn-ghost{ border-color: rgba(11,15,20,0.35); color: var(--clr-ink); }
.cta-band.solid .btn-ghost:hover{ border-color: var(--clr-ink); color: var(--clr-ink); }

/* anchor targets should clear the sticky nav (reused from Round 9) */
[id]{ scroll-margin-top: calc(var(--nav-h) + 24px); }