/* Album lightbox — Clarity Farms photos_r5 pattern, wedding palette */

.album_lb {
  --album-lb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lb-photo-h: min(58vh, 560px);
  --lb-photo-max-w: min(82vw, 820px);
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: grid;
  place-items: center;
  padding: 4vh 16px;
  background: rgba(20, 20, 20, 0);
  backdrop-filter: blur(0);
  opacity: 0;
  pointer-events: none;
  overscroll-behavior: contain;
  transition: opacity 0.45s ease, background 0.45s ease, backdrop-filter 0.45s ease;
}

.album_lb.open {
  opacity: 1;
  pointer-events: auto;
  background: rgba(16, 18, 16, calc(0.92 * var(--album-lb-drag-opacity, 1)));
  backdrop-filter: blur(10px);
}

.album_lb_inner--dragging {
  cursor: grabbing;
  touch-action: none;
}

.album_lb--dragging .album_lb_inner {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .album_lb_inner--dragging {
    touch-action: auto;
  }
}

.album_lb_inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(1040px, 100%);
  max-height: 94vh;
  transform: translateY(24px) scale(0.96);
  opacity: 0;
  background: #101210;
  border-radius: 4px;
  transition: transform 0.5s var(--album-lb-ease);
}

.album_lb.open .album_lb_inner {
  transform: none;
  opacity: 1;
  box-shadow: 0 24px 80px -24px rgba(0, 0, 0, 0.85);
  transition:
    transform 0.5s var(--album-lb-ease),
    opacity 0.32s ease;
}

/* Image stage — stack crossfade + peek carousel for multi-slide posts */
.album_lb_img_stage {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  background: #0a0a0a;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}

.album_lb_img_stage.has-carousel {
  overflow: hidden;
}

.album_lb_img_stage.has-carousel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #0a0a0a 0%,
    transparent 12%,
    transparent 88%,
    #0a0a0a 100%
  );
}

.album_lb_carousel[hidden],
.album_lb_stack[hidden] {
  display: none;
}

.album_lb_carousel {
  position: relative;
  width: 100%;
  min-height: calc(var(--lb-photo-h) + 30px);
}

.album_lb_track {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.4vw, 18px);
  padding: 12px clamp(6px, 1.5vw, 14px) 18px;
  will-change: transform;
  transition: transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
}

.album_lb_track.is-resetting {
  transition: none;
}

.album_lb_track.is-resetting .album_lb_panel {
  transition: none;
}

.album_lb_panel {
  flex: 0 0 auto;
  opacity: 0.42;
  transform: scale(0.9);
  transition:
    opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.58s cubic-bezier(0.22, 1, 0.36, 1);
  filter: brightness(0.72);
  pointer-events: none;
}

.album_lb_panel.is-current {
  opacity: 1;
  transform: scale(1);
  filter: brightness(1);
  z-index: 2;
}

.album_lb_panel.is-empty {
  opacity: 0;
  visibility: hidden;
  flex-basis: 0;
  width: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

/* A freshly revealed peek eases in via keyframes so it never flicks — this runs
   even while the track's transition is suppressed during re-centering. */
@keyframes album_lb_peek_in {
  from { opacity: 0; }
  to { opacity: 0.42; }
}

.album_lb_panel.is-appearing:not(.is-current) {
  animation: album_lb_peek_in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .album_lb_panel.is-appearing:not(.is-current) {
    animation-duration: 0.28s;
  }
}

.album_lb_panel img {
  display: block;
  height: var(--lb-photo-h);
  width: auto;
  max-width: var(--lb-photo-max-w);
  object-fit: contain;
  object-position: center center;
  background: #0a0a0a;
  box-shadow: 0 20px 52px -24px rgba(0, 0, 0, 0.72);
}

.album_lb_panel:not(.is-current) img {
  box-shadow: none;
}

.album_lb_panel .album_lb_video {
  display: none;
}

.album_lb_panel.is-video img {
  display: none;
}

.album_lb_panel.is-video .album_lb_video {
  display: block;
  height: var(--lb-photo-h);
  width: auto;
  max-width: var(--lb-photo-max-w);
  object-fit: contain;
  object-position: center center;
  background: #0a0a0a;
  box-shadow: 0 20px 52px -24px rgba(0, 0, 0, 0.72);
}

.album_lb_panel:not(.is-current).is-video .album_lb_video {
  box-shadow: none;
}

.album_lb_stack {
  width: 100%;
}

.album_lb_img_layer {
  width: 100%;
}

.album_lb_img_layer.is-active {
  position: relative;
  z-index: 1;
}

.album_lb_img_layer[aria-hidden="true"]:not(.is-on-top):not(.is-fade-in):not(.is-fade-out) {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.album_lb_img_layer.is-on-top {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.album_lb_img_layer.is-fade-out {
  opacity: 0;
  transition: opacity 0.25s linear;
}

.album_lb_img_layer.is-fade-in {
  opacity: 1;
  transition: opacity 0.25s linear;
}

.album_lb_img_layer.is-pre-fade {
  opacity: 0;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .album_lb_track {
    transition: none;
  }

  .album_lb_panel {
    transition: none;
  }

  .album_lb_img_layer.is-fade-out,
  .album_lb_img_layer.is-fade-in {
    transition: none;
  }
}

.album_lb_img {
  display: block;
  width: 100%;
  max-height: min(64vh, 720px);
  object-fit: contain;
  object-position: center top;
  box-shadow: none;
  background: #0a0a0a;
}

/* When the stack is showing a post that will settle into the peek carousel,
   size it exactly like the carousel's centered photo so switching layouts
   after the crossfade never resizes (no "large then flick smaller"). */
.album_lb_img_layer.is-carousel-size {
  display: flex;
  align-items: center;
  justify-content: center;
}

.album_lb_img_layer.is-carousel-size .album_lb_img,
.album_lb_img_layer.is-carousel-size.is-video .album_lb_video {
  width: auto;
  height: var(--lb-photo-h);
  max-width: var(--lb-photo-max-w);
  max-height: none;
  margin: 0 auto;
}

.album_lb_img_layer .album_lb_video {
  display: none;
}

.album_lb_img_layer.is-video img {
  display: none;
}

.album_lb_img_layer.is-video .album_lb_video {
  display: block;
  width: 100%;
  max-height: min(64vh, 720px);
  object-fit: contain;
  object-position: center top;
  background: #0a0a0a;
}

.album_lb_pips {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 6;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  pointer-events: none;
}

.album_lb_pips[hidden] {
  display: none;
}

.album_lb_pip {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  transition: transform 0.2s ease, background 0.2s ease;
}

.album_lb_pip.is-active {
  background: #fff;
  transform: scale(1.15);
}

.album_lb_text {
  flex: 0 1 auto;
  min-height: 0;
  margin-top: -1px;
  padding: 22px 26px 20px;
  text-align: center;
  color: #fff;
  font-family: Lato, sans-serif;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.album_lb_meta {
  display: block;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}

.album_lb_meta[hidden] {
  display: none;
}

.album_lb_desc {
  max-height: min(30vh, 260px);
  overflow-y: auto;
  margin: 0;
  padding-right: 4px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.album_lb_desc[hidden] {
  display: none;
}

.album_lb_desc::-webkit-scrollbar {
  width: 5px;
}

.album_lb_desc::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
}

.album_lb_desc p {
  margin: 0 0 1.15em;
}

.album_lb_desc p:last-child {
  margin-bottom: 0;
}

.album_lb_link {
  display: block;
  margin-top: 18px;
  padding-top: 14px;
  border-top: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.62);
}

.album_lb_desc:not([hidden]) + .album_lb_link {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.album_lb_link:hover {
  color: #fff;
}

.album_lb_link[hidden] {
    display: none;
}

.album_lb_close {
  position: fixed;
  top: 20px;
  right: 22px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(10, 10, 10, 0.6);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 9810;
}

.album_lb_close:hover {
  background: rgba(255, 255, 255, 0.16);
}

.album_lb_nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 10, 10, 0.5);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 9810;
}

.album_lb_nav.prev {
  left: 18px;
}

.album_lb_nav.next {
  right: 18px;
}

.album_lb_nav:hover {
  background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 575.98px) {
  .album_lb {
    padding: 3vh 12px 12px;
  }

  .album_lb_text {
    padding: 18px 18px 16px;
  }

  .album_lb_desc {
    font-size: 14px;
    line-height: 1.65;
    max-height: min(34vh, 220px);
  }
}