/* DREAMSPIRE RESPONSIVE KITTEN GALLERY V1 | 2026-10-08
   Isolated public album override; saved Studio image crops remain authoritative. */

/* Larger, calmer MacBook layout. A two-column gallery is more readable. */
#ds-album-detail:not([hidden]) #ds-album-photos {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: max-content !important;
  grid-template-rows: none !important;
  width: min(980px, calc(100vw - 44px)) !important;
  max-width: 980px !important;
  gap: 20px !important;
  padding: 8px 5px 26px !important;
  margin: 9px auto 0 !important;
  align-content: start !important;
  align-items: start !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-snap-type: none !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y pinch-zoom !important;
}

#ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot,
#ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot.ds-shot-portrait,
#ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot.ds-shot-square,
#ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot.ds-shot-landscape,
#ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot.ds-shot-ultrawide,
#ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot.ds-no-caption {
  box-sizing: border-box !important;
  display: block !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 5 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 23px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  content-visibility: visible !important;
  contain: none !important;
  background: #171d27 !important;
  border: 1px solid rgba(255,255,255,.17) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.22) !important;
}

#ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-album-media-frame {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

#ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-album-media-frame img,
#ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-album-media-frame video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  /* Do not set object-position or transform here: the crop editor owns both. */
}

#ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot::after {
  height: 54% !important;
  background: linear-gradient(to top,
    rgba(8,13,22,.89) 0%,
    rgba(8,13,22,.66) 30%,
    rgba(8,13,22,.23) 69%,
    rgba(8,13,22,0) 100%) !important;
  pointer-events: none !important;
}

#ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-kitten-caption {
  box-sizing: border-box !important;
  position: absolute !important;
  z-index: 3 !important;
  inset: auto 0 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 22px 24px 24px !important;
  overflow: visible !important;
  background: transparent !important;
  color: #fff !important;
  pointer-events: none !important;
}

#ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-kitten-name {
  font-size: clamp(29px, 3vw, 39px) !important;
  line-height: 1.06 !important;
  margin: 0 !important;
  color: #fff !important;
  white-space: normal !important;
}

#ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-kitten-character {
  display: block !important;
  max-width: 45ch !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
  font-size: 13.5px !important;
  line-height: 1.48 !important;
  font-weight: 450 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

#ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-kitten-forever {
  gap: 5px 7px !important;
  max-width: 100% !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
}
#ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-kitten-forever-label {
  font-size: 9px !important;
  letter-spacing: .10em !important;
}
#ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-kitten-forever-name {
  font-size: 11px !important;
  overflow-wrap: anywhere !important;
}
#ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-kitten-status {
  top: 16px !important;
  right: 16px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  font-size: 9px !important;
}

/* Phone: one photo across, giving text and kitten breathing room. */
@media (max-width: 680px) {
  #ds-album-detail:not([hidden]) {
    grid-template-rows: auto auto minmax(0,1fr) !important;
    min-height: 0 !important;
    padding: max(64px, env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom)) !important;
  }
  #ds-album-detail:not([hidden]) #ds-album-photos {
    grid-template-columns: minmax(0,1fr) !important;
    width: min(430px, calc(100vw - 30px)) !important;
    max-width: 430px !important;
    max-height: calc(100dvh - 160px) !important;
    gap: 17px !important;
    padding: 4px 3px 22px !important;
  }
  #ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot,
  #ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot.ds-shot-portrait,
  #ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot.ds-shot-square,
  #ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot.ds-shot-landscape,
  #ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot.ds-shot-ultrawide,
  #ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot.ds-no-caption {
    aspect-ratio: 4 / 5 !important;
    border-radius: 22px !important;
  }
  #ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot::after {
    height: 58% !important;
  }
  #ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-kitten-caption {
    gap: 6px !important;
    padding: 18px 19px 20px !important;
  }
  #ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-kitten-name {
    font-size: clamp(28px,7.7vw,35px) !important;
  }
  #ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-kitten-character {
    font-size: clamp(12px,3.3vw,14px) !important;
    line-height: 1.43 !important;
  }
  #ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-kitten-forever {
    gap: 4px 6px !important;
    padding: 6px 9px !important;
  }
  #ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-kitten-forever-label {
    font-size: 8px !important;
  }
  #ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-kitten-forever-name {
    font-size: 10px !important;
  }
  #ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-kitten-status {
    top: 14px !important;
    right: 14px !important;
    min-height: 29px !important;
    font-size: 8.5px !important;
  }
}

@media (max-width: 350px) {
  #ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-kitten-caption {
    padding: 13px 15px 15px !important;
    gap: 5px !important;
  }
  #ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-kitten-name {
    font-size: 26px !important;
  }
  #ds-album-detail:not([hidden]) #ds-album-photos > .ds-album-shot .ds-kitten-character {
    font-size: 11.5px !important;
  }
}