/* Bordered frame wraps the hero, gallery, meta line and services row */
.single-frame {
  margin: var(--hero-top) var(--page-gutter) var(--section-space);
  padding: calc(60 * var(--u));
  border: 1px solid var(--color-sage-line);
  border-radius: calc(24 * var(--u));
  box-sizing: border-box;
}

/* Single event hero: title left, meta+description right */
.single-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--page-gutter);
  padding-bottom: calc(60 * var(--u));
  flex-wrap: wrap;
}

.single-side {
  max-width: calc(480 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}

.single-text {
  line-height: 1.5;
  color: var(--color-pine-forest);
}

/* Gallery slider: full width of the frame */
.slider {
  position: relative;
  width: 100%;
  margin: 0 0 calc(40 * var(--u));
}

@media (max-width: 767px) {
  .slider {
    width: auto;
    margin: 0 0 calc(40 * var(--u));
  }
}

.slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.slider-track::-webkit-scrollbar {
  display: none;
}

/* Fixed height, not aspect-ratio: photos and landscape videos fill it,
   vertical/reel videos show in full at that same height (letterboxed
   sideways) instead of being cropped down to a 16:9 strip. */
.slide {
  flex: 0 0 100%;
  height: calc(900 * var(--u));
  scroll-snap-align: start;
}

.slider-nav {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(30 * var(--u));
  pointer-events: none;
}

.slide[data-type="image"] {
  cursor: zoom-in;
}

/* the image/video block inside each slide is a <figure>, not a bare img/video */
.slide figure {
  width: 100%;
  height: 100%;
  margin: 0;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* videos keep their own aspect ratio (contain, not cover) so a vertical
   reel shows in full instead of being cropped to match a horizontal one */
.slide video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--color-black);
}

/* arrow buttons (same arrow as the site buttons) */
.slider-btn {
  position: relative;
  width: calc(62 * var(--u));
  height: calc(62 * var(--u));
  padding: 0;
  border: 1px solid var(--color-sea-nymph);
  border-radius: 50%;
  background: rgba(253, 243, 236, 0.7);
  backdrop-filter: blur(calc(10 * var(--u)));
  cursor: pointer;
  pointer-events: auto;
  transition:
    background-color 0.25s ease,
    opacity 0.25s ease;
}

.slider-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-pine-forest);
  -webkit-mask: var(--arrow-mask) center / 100% 100% no-repeat;
  mask: var(--arrow-mask) center / 100% 100% no-repeat;
}

.slider-prev::after {
  transform: scaleX(-1);
}

.slider-btn:hover:not(:disabled),
.slider-btn:focus-visible {
  background: var(--color-sea-nymph);
}

.slider-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* meta line under the gallery */
.single-meta {
  display: block;
  font-size: max(var(--font-min), calc(16 * var(--fu)));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-pastel-blood);
  padding-top: calc(24 * var(--u));
  margin-bottom: calc(40 * var(--u));
  border-top: 1px solid var(--color-sage-line);
}

/* Services Provided row */
.single-services {
  display: flex;
  justify-content: space-between;
  gap: var(--page-gutter);
}

.single-services-title {
  flex: 0 0 33.333%;
  min-width: 0;
  font-size: var(--h3-size);
  font-weight: var(--h1-weight);
  text-transform: uppercase;
}

.single-services-text {
  flex: 0 0 58%;
  min-width: 0;
  line-height: 1.5;
  color: var(--color-pine-forest);
}

@media (max-width: 767px) {
  .single-frame {
    padding: calc(40 * var(--u));
  }

  .single-hero {
    flex-direction: column;
  }

  .single-services {
    flex-direction: column;
    gap: calc(24 * var(--u));
  }

  .single-services-title,
  .single-services-text {
    flex: 1 1 100%;
  }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(60 * var(--u));
  background: rgba(17, 62, 59, 0.85);
}

.lightbox-stage {
  width: min(100%, calc(1400 * var(--u)));
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* No fixed aspect-ratio here: landscape photos and vertical (shorts-style)
   videos both need to size to their own content, not a forced 16:9 box. */
.lightbox-media {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.lightbox-media figure {
  margin: 0;
  display: flex;
  max-width: 100%;
  max-height: 100%;
}

.lightbox-media img,
.lightbox-media video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(82vh, calc(900 * var(--u)));
  object-fit: contain;
  border-radius: calc(16 * var(--u));
}

.lightbox-btn {
  position: absolute;
  width: calc(62 * var(--u));
  height: calc(62 * var(--u));
  padding: 0;
  border: 1px solid var(--color-sea-nymph);
  border-radius: 50%;
  background: rgba(253, 243, 236, 0.7);
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    opacity 0.25s ease;
}

.lightbox-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-pine-forest);
}

.lightbox-btn:hover:not(:disabled),
.lightbox-btn:focus-visible {
  background: var(--color-sea-nymph);
}

.lightbox-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.lightbox-arrow {
  top: 50%;
  margin-top: calc(-31 * var(--u));
}

.lightbox-arrow::after {
  -webkit-mask: var(--arrow-mask) center / 100% 100% no-repeat;
  mask: var(--arrow-mask) center / 100% 100% no-repeat;
}

.lightbox-prev {
  left: calc(30 * var(--u));
}

.lightbox-prev::after {
  transform: scaleX(-1);
}

.lightbox-next {
  right: calc(30 * var(--u));
}

.lightbox-close {
  top: calc(30 * var(--u));
  right: calc(30 * var(--u));
}

.lightbox-close::after {
  -webkit-mask:
    linear-gradient(#000 0 0) center / 40% 2px no-repeat,
    linear-gradient(#000 0 0) center / 2px 40% no-repeat;
  mask:
    linear-gradient(#000 0 0) center / 40% 2px no-repeat,
    linear-gradient(#000 0 0) center / 2px 40% no-repeat;
  transform: rotate(45deg);
}

/* Slider photos and videos keep the card corner radius */
.slide {
  border-radius: calc(24 * var(--u));
  overflow: hidden;
}
.slide img,
.slide video {
  border-radius: calc(24 * var(--u));
}