/* Ride photo cards and gallery viewer */
.ride-photo { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #c7c7b6; overflow: hidden; cursor: zoom-in; font: inherit; color: #fff; }
.ride-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ride-photo:hover img, .ride-photo:focus-visible img { transform: scale(1.04); }
.ride-photo:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.photo-count { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; background: rgba(16, 39, 32, .82); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 56px 72px; background: rgba(10, 20, 17, .97); }
.lightbox[hidden] { display: none; }
.lightbox figure { width: 100%; max-width: 1100px; margin: 0; text-align: center; }
.lightbox img { max-width: 100%; max-height: 78vh; margin: 0 auto; object-fit: contain; }
.lightbox figcaption { margin-top: 12px; color: #d6dccf; font-size: .78rem; letter-spacing: .08em; }
.lb-btn { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: rgba(23, 53, 47, .85); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.lb-btn[hidden] { display: none; }
.lb-btn:hover { background: #285348; }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .lightbox { padding: 68px 10px 84px; }
  .lb-prev, .lb-next { top: auto; bottom: 20px; transform: none; }
  .lb-prev { left: calc(50% - 62px); }
  .lb-next { right: calc(50% - 62px); }
}

/* Story section photo */
.story-photo { display: block; align-self: stretch; width: 100%; height: 100%; min-height: 500px; object-fit: cover; object-position: 30% center; }
@media (max-width: 760px) { .story-photo { height: 360px; min-height: 360px; object-position: 45% center; } }