/* Bluejack Ranch - lifestyle + golf */

/* Featured item: wide photo, text box overlapping the bottom */

.bjr-feature {
  padding: clamp(3rem, 7.9vw, 10rem) 0 clamp(3rem, 7.2vw, 9rem);
  text-align: center;
  background: var(--bjr-cream);
}
.bjr-feature__media {
  position: relative;
  width: 78vw;
  margin: 0 auto;
}
/* gold frame behind the photo */
.bjr-feature__media::before {
  content: "";
  position: absolute;
  inset: 3.6vw -1.9vw 3.45vw;
  border: 1px solid var(--bjr-gold);
}
.bjr-feature__media img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1560 / 809;
  object-fit: cover;
  cursor: zoom-in;
}
.bjr-feature__body {
  position: relative;
  width: 58.1vw;
  margin: -6.35vw auto 0;
  padding: 4vw 5.9vw 0;
  background: var(--bjr-cream);
}
.bjr-feature__title {
  margin: 0 0 clamp(.75rem, 1.75vw, 2.25rem);
  font-family: var(--bjr-font-heading);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 4.25rem);
  line-height: 1.1;
}
.bjr-feature__text {
  margin: 0;
  font-size: clamp(1.05rem, 1.45vw, 1.8rem);
  line-height: 1.52;
}

/* The rest use the residence rows (residences.css) */

.bjr-amenities .bjr-btn { margin-top: clamp(1.75rem, 2.5vw, 3.25rem); }

@media (min-width: 992px) {
  .bjr-amenities .bjr-residence__caption { max-width: 35vw; }
  .bjr-amenities .bjr-residence:nth-of-type(even) { padding-left: 9.1vw; }
}
@media (max-width: 991.98px) {
  .bjr-feature__media { width: calc(100% - var(--bjr-gutter) * 2); }
  .bjr-feature__media::before { inset: 1.25rem -10px; }
  .bjr-feature__body {
    width: calc(100% - var(--bjr-gutter) * 4);
    margin-top: -2rem;
    padding: 1.75rem 1rem 0;
  }
}

/* Video on The Ranch page (Snippets > bjr_ranch_video). Gold box until a video link is set */
.bjr-onpage-video {
  padding: 9vw 9.2vw;
  background: var(--bjr-cream);
}
.bjr-onpage-video__player {
  aspect-ratio: 16 / 9;
  background: var(--bjr-gold);
}
.bjr-onpage-video__player iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 991.98px) {
  .bjr-onpage-video { padding: 3rem var(--bjr-gutter); }
}

/* Explore the Ranch slider (Custom Modules > Explore the Ranch, js/explore.js)
   Cards start at the left edge of the content and run off the right side of the screen,
   so the next card peeks in. Drag or swipe to move, dots below. */
.bjr-explore {
  --bjr-explore-side: 9.2vw;
  --bjr-explore-card: 60vw;
  --bjr-explore-gap: clamp(20px, 2.6vw, 50px);
  overflow: hidden;
  padding: clamp(3.5rem, 7.2vw, 9rem) var(--bjr-explore-side) clamp(3.5rem, 6.4vw, 8rem);
  text-align: center;
  color: var(--bjr-white);
  background: var(--bjr-brown);
}
.bjr-explore__eyebrow {
  margin: 0 0 .6em;
  font-weight: 500;
  font-size: clamp(.8rem, 1.05vw, 1.3rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bjr-gold);
}
.bjr-explore__heading {
  margin: 0;
  font-family: var(--bjr-font-heading);
  font-weight: 400;
  font-size: clamp(2.25rem, 3.6vw, 4.5rem);
  line-height: 1.1;
}
.bjr-explore__slider {
  margin-top: clamp(2.5rem, 5.6vw, 7rem);
}
/* reaches past the right padding to the edge of the screen */
.bjr-explore__viewport {
  margin-right: calc(var(--bjr-explore-side) * -1);
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.bjr-explore__track {
  display: flex;
  gap: var(--bjr-explore-gap);
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.bjr-explore__track.is-dragging { transition: none; }
.bjr-explore__slide {
  flex: 0 0 var(--bjr-explore-card);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: 6px;
  text-align: left;
  color: var(--bjr-brown);
  background: var(--bjr-cream);
}
.bjr-explore__photo {
  position: relative;
  min-height: clamp(300px, 28vw, 560px);
  background: #e6e1d8;
}
.bjr-explore__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%; /* keeps faces in tall photos */
  pointer-events: none;
}
.bjr-explore__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 3.4vw, 4.5rem) clamp(1.5rem, 3.2vw, 4.25rem);
}
/* icon picked in the slide's Icon dropdown (files are /images/lifestyle/icon-*.svg) */
.bjr-explore__icon {
  display: block;
  width: clamp(46px, 3.8vw, 72px);
  aspect-ratio: 1;
  margin-bottom: clamp(.9rem, 1.4vw, 1.6rem);
  background: var(--bjr-orange);
  -webkit-mask: var(--bjr-icon) left center / contain no-repeat;
  mask: var(--bjr-icon) left center / contain no-repeat;
}
.bjr-explore__title {
  margin: 0 0 clamp(.75rem, 1.2vw, 1.5rem);
  font-family: var(--bjr-font-heading);
  font-weight: 400;
  font-size: clamp(1.8rem, 2.6vw, 3.4rem);
  line-height: 1.15;
}
.bjr-explore__text {
  font-size: clamp(1rem, 1.15vw, 1.45rem);
  line-height: 1.65;
}
.bjr-explore__text > * { margin: 0; }
.bjr-explore__text > * + * { margin-top: 1em; }
.bjr-explore__arrow { display: none; }
.bjr-explore__dots {
  display: flex;
  justify-content: center;
  gap: clamp(1.1rem, 2vw, 2.4rem);
  margin-top: clamp(2rem, 4vw, 5rem);
}
.bjr-explore__dot {
  width: clamp(10px, .75vw, 14px);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--bjr-gold);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease;
}
.bjr-explore__dot.is-active { border-color: var(--bjr-orange); background: var(--bjr-orange); }
@media (max-width: 991.98px) {
  .bjr-explore {
    --bjr-explore-side: var(--bjr-gutter);
    --bjr-explore-card: 72vw;
  }
  .bjr-explore__slide { grid-template-columns: 1fr; align-content: start; }
  .bjr-explore__photo { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 575.98px) {
  .bjr-explore { --bjr-explore-card: 82vw; }
}
@media (prefers-reduced-motion: reduce) {
  .bjr-explore__track { transition: none; }
}