/* Bluejack Ranch - championship course */

/* Tour the course: hole numbers, then one panel per hole */

.bjr-holes { position: relative; }

/* sits on the line between the intro and the gold bar */
.bjr-holes__label {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  padding: 1.25em 2.6em;
  font-size: clamp(.8rem, 1.1vw, 1.3rem);
  color: var(--bjr-orange);
  background: var(--bjr-white);
  transform: translate(-50%, -50%);
}
.bjr-holes__label::before,
.bjr-holes__label::after { border-color: var(--bjr-orange); }
.bjr-holes__label:hover,
.bjr-holes__label:focus-visible { color: var(--bjr-white); background: var(--bjr-orange); }

/* Hole numbers: front nine, rule, back nine */

.bjr-holes__nav {
  display: flex;
  align-items: center;
  padding: clamp(3.25rem, 5.7vw, 7rem) 8.25vw clamp(2.25rem, 4.2vw, 5.25rem);
  background: var(--bjr-gold);
}
.bjr-holes__group {
  display: flex;
  flex: 1;
  justify-content: space-between;
}
.bjr-holes__rule {
  flex: none;
  width: 1px;
  height: clamp(40px, 4.6vw, 84px);
  margin: 0 4vw;
  background: var(--bjr-orange);
}
.bjr-holes__num {
  display: grid;
  place-items: center;
  width: clamp(30px, 2.45vw, 46px);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--bjr-white);
  border-radius: 50%;
  font-family: var(--bjr-font-body);
  font-size: clamp(.8rem, .95vw, 1.15rem);
  line-height: 1;
  color: var(--bjr-white);
  background: transparent;
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
.bjr-holes__num:hover,
.bjr-holes__num:focus-visible { color: var(--bjr-orange); background: var(--bjr-white); }
.bjr-holes__num.is-active {
  border-color: var(--bjr-orange);
  color: var(--bjr-white);
  background: var(--bjr-orange);
}

/* Panels are stacked in one cell, only the active one shows */

.bjr-holes__panels {
  display: grid;
  background: var(--bjr-white);
}
.bjr-hole {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(360px, 37vw, 720px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s .45s;
}
.bjr-hole.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.bjr-hole__media {
  position: relative;
  background: var(--bjr-cream);
}
.bjr-hole__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* side padding lines the text up with the intro above */
.bjr-hole__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 6.5rem) 8.9vw clamp(2.5rem, 5vw, 6.5rem) 6.1vw;
}
.bjr-hole__title {
  margin: 0;
  font-family: var(--bjr-font-heading);
  font-weight: 400;
  font-size: clamp(2rem, 3vw, 3.75rem);
  line-height: 1.1;
}
.bjr-hole__stats {
  display: flex;
  flex-wrap: wrap;
  margin: clamp(.75rem, 1.3vw, 1.6rem) 0 clamp(1rem, 1.7vw, 2.1rem);
  font-size: clamp(.75rem, .92vw, 1.15rem);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bjr-hole__stats div { display: flex; }
.bjr-hole__stats div + div::before { content: "/"; margin: 0 1.6em; }
.bjr-hole__stats dt { margin-right: .8em; }
.bjr-hole__stats dd {
  margin: 0;
  font-weight: 700;
  color: var(--bjr-orange);
}
.bjr-hole__text {
  margin: 0;
  font-size: clamp(1.05rem, 1.4vw, 1.75rem);
  line-height: 1.4;
}
.bjr-hole__tip-title {
  margin: clamp(1.75rem, 2.9vw, 3.6rem) 0 clamp(.9rem, 1.9vw, 2.4rem);
  font-family: var(--bjr-font-body);
  font-weight: 700;
  font-size: clamp(.75rem, .95vw, 1.2rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bjr-orange);
}
.bjr-hole__tip {
  margin: 0;
  font-style: italic;
  font-size: clamp(.9rem, 1.07vw, 1.35rem);
  line-height: 1.5;
}

/* TGR Design: the photo fades into the cream behind the text (photo and logo are set in the snippet) */

.bjr-tgr {
  position: relative;
  padding: 24vw var(--bjr-gutter) clamp(3rem, 8.4vw, 10.5rem);
  text-align: center;
  background: var(--bjr-cream);
}
.bjr-tgr::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 42vw;
  background:
    linear-gradient(to bottom, rgba(244, 241, 235, .2), rgba(244, 241, 235, .35) 40%, var(--bjr-cream) 88%),
    var(--bjr-tgr-image, none) center 38% / cover no-repeat;
}
.bjr-tgr > * { position: relative; }
.bjr-tgr__logo {
  display: block;
  width: clamp(96px, 11vw, 210px);
  height: auto;
  margin: 0 auto clamp(1rem, 2.6vw, 3.25rem);
}
.bjr-tgr__title {
  margin: 0 0 clamp(.9rem, 1.9vw, 2.4rem);
  font-family: var(--bjr-font-heading);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 4.25rem);
  line-height: 1.15;
}
/* no logo yet: the heading keeps its place under the photo */
.bjr-tgr__title:first-child { margin-top: 13vw; }
.bjr-tgr__text {
  max-width: 58vw;
  margin: 0 auto;
  font-size: clamp(1.05rem, 1.45vw, 1.8rem);
  line-height: 1.6;
}

/* Photo gallery: three across, each photo opens full screen (photos come from Galleries & Sliders) */

.bjr-photos {
  padding: clamp(3rem, 7.4vw, 9.5rem) 8.8vw;
  background: var(--bjr-white);
}
.bjr-photos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.75rem, 2.4vw, 3rem);
}
.bjr-photos__item {
  display: block;
  overflow: hidden;
  cursor: zoom-in;
}
.bjr-photos__item img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transition: transform .6s ease;
}
.bjr-photos__item:hover img,
.bjr-photos__item:focus-visible img { transform: scale(1.04); }

@media (max-width: 991.98px) {
  /* two rows of nine */
  .bjr-holes__nav {
    flex-direction: column;
    gap: 1rem;
    padding: 3.5rem var(--bjr-gutter) 2rem;
  }
  .bjr-holes__group { flex: none; width: 100%; max-width: 460px; }
  .bjr-holes__rule { display: none; }
  .bjr-hole { grid-template-columns: 1fr; align-content: start; min-height: 0; }
  .bjr-hole__media { aspect-ratio: 4 / 3; }
  .bjr-hole__body { padding: 2.25rem var(--bjr-gutter) 3rem; }

  .bjr-tgr { padding-top: 44vw; }
  .bjr-tgr::before { height: 75vw; }
  .bjr-tgr__title:first-child { margin-top: 20vw; }
  .bjr-tgr__text { max-width: 640px; }

  .bjr-photos { padding-inline: var(--bjr-gutter); }
  .bjr-photos__grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bjr-hole,
  .bjr-photos__item img { transition: none; }
}