/* Photos Embed SDK - CSS */

:root {
  --pe-gap: 2px;
  --pe-radius: 0px;
  --pe-bg: transparent;
  --pe-fg: inherit;
  --pe-aspect-ratio: 1 / 1; /* Default: square */
  --pe-border-width: 0px; /* Default: no border (uses gap for spacing) */
}

.photos-embed-gallery {
  display: grid;
  /* Defensively stretch when embedded inside flex/grid wrappers (e.g. Webflow w-embed) */
  width: 100%;
  min-width: 0;
  align-self: stretch;
  row-gap: var(--pe-gap, 1px);
  column-gap: var(--pe-gap, 1px);
  background: var(--pe-bg);
  color: var(--pe-fg);
}

/* Fallback only: JS sets final column count based on container width */
.photos-embed-gallery {
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 768px) {
  .photos-embed-gallery:not(.photos-embed-custom-border) {
    row-gap: 2px;
    column-gap: 2px;
  }
  
  /* Column count is managed in JS from container width */
}

/* Viewport-based column breakpoints removed:
   actual column count now follows container width in photos-embed.js */

.photos-embed-item {
  position: relative;
  width: 100%;
  aspect-ratio: var(--pe-aspect-ratio, 1 / 1);
  overflow: hidden;
  cursor: pointer;
  border-radius: var(--pe-radius);
  background: #f0f0f0;
}

/* Custom border width support - when borderWidth is set, use it for gap */
.photos-embed-gallery.photos-embed-custom-border {
  row-gap: var(--pe-border-width, var(--pe-gap, 0px));
  column-gap: var(--pe-border-width, var(--pe-gap, 0px));
}

.photos-embed-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s;
}

.photos-embed-item img.loading {
  opacity: 0;
}

.photos-embed-item img.loaded {
  opacity: 1;
}

.photos-embed-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s;
  pointer-events: none;
}

.photos-embed-item:hover::after {
  background: rgba(0, 0, 0, 0.3);
}

.photos-embed-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--pe-fg);
  opacity: 0.7;
}

/* Hide loading message for individual photo containers */
.photos-embed-individual .photos-embed-loading {
  display: none;
}

.photos-embed-error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #dc2626;
}

/* Lightbox / Modal */
.photos-embed-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  padding-bottom: 120px; /* Reserve space for filmstrip */
  border: none;
  background: rgba(0, 0, 0, 0.95);
  z-index: 999999;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none; /* Don't block clicks when closed */
}

@media (max-width: 768px) {
  .photos-embed-lightbox {
    padding-bottom: 100px; /* Smaller filmstrip on mobile */
  }
}

.photos-embed-lightbox.open {
  display: flex; /* Show when open */
  opacity: 1;
  pointer-events: auto; /* Allow interactions when open */
}

.photos-embed-lightbox-content {
  width: 100%;
  height: calc(100% - 120px); /* Reserve space for filmstrip */
  max-height: calc(100vh - 120px); /* Ensure it doesn't exceed viewport minus filmstrip */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden; /* Prevent content from overflowing */
  padding: 20px;
  padding-left: 80px; /* Reserve space for left navigation arrow */
  padding-right: 80px; /* Reserve space for right navigation arrow */
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .photos-embed-lightbox-content {
    height: calc(100% - 100px); /* Smaller filmstrip on mobile */
    max-height: calc(100vh - 100px); /* Ensure it doesn't exceed viewport minus filmstrip */
    padding-left: 0; /* No padding on mobile - arrows are positioned over image */
    padding-right: 0; /* No padding on mobile - arrows are positioned over image */
    padding-top: 20px;
    padding-bottom: 20px;
  }
  
  .photos-embed-lightbox-image-wrapper {
    width: 100%;
    max-width: 100%;
    position: relative; /* Enable absolute positioning for arrows on mobile */
  }
}

.photos-embed-lightbox-image-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  max-width: 100%; /* Ensure image doesn't exceed container */
}

.photos-embed-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.photos-embed-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: white;
  border: none;
  padding: 1rem;
  cursor: pointer;
  font-size: 1.5rem;
  transition: background 0.2s;
  z-index: 1000002;
  user-select: none;
  -webkit-user-select: none;
}

.photos-embed-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.1);
}

.photos-embed-lightbox-nav.prev {
  left: 1rem;
}

.photos-embed-lightbox-nav.next {
  right: 1rem;
}

@media (max-width: 768px) {
  .photos-embed-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.75rem;
    font-size: 1.25rem;
    z-index: 1000002;
  }
  
  .photos-embed-lightbox-nav.prev {
    left: 0.5rem;
  }
  
  .photos-embed-lightbox-nav.next {
    right: 0.5rem;
  }
}

.photos-embed-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  z-index: 1000001;
  user-select: none;
  -webkit-user-select: none;
}

.photos-embed-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .photos-embed-lightbox-close {
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.5rem;
  }
}

.photos-embed-lightbox-download {
  background-color: var(--pe-accent, #0A0A0A) !important;
  font-family: var(--pe-download-font, inherit);
  font-size: var(--pe-download-size, inherit);
  color: var(--pe-download-color, white);
  transition: opacity 0.2s;
  margin-top: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  z-index: 1000010;
}

.photos-embed-lightbox-download:hover {
  opacity: 0.9;
}

.photos-embed-lightbox-download:focus-visible {
  outline: 2px solid var(--pe-accent, #0A0A0A);
  outline-offset: 2px;
}

.photos-embed-lightbox-download-icon {
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 768px) {
  .photos-embed-lightbox-download {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem;
  }
  
  .photos-embed-lightbox-download-icon {
    font-size: 0.875rem;
  }
}

/* Filmstrip styles */
.photos-embed-lightbox-filmstrip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center; /* Center thumbnails when there are few */
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px;
  z-index: 1000001;
  scroll-behavior: smooth;
}

.photos-embed-lightbox-filmstrip-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: min-content; /* Allow shrinking when content is small */
  margin: 0 auto; /* Center when content is smaller than container */
}

@media (min-width: 1024px) {
  .photos-embed-lightbox-filmstrip-inner {
    max-width: max-content; /* On large screens, center when content is small */
  }
}

@media (max-width: 768px) {
  .photos-embed-lightbox-filmstrip {
    height: 100px;
    padding: 8px;
  }
  
  .photos-embed-lightbox-filmstrip-inner {
    gap: 6px;
  }
}

.photos-embed-lightbox-filmstrip::-webkit-scrollbar {
  height: 6px;
}

.photos-embed-lightbox-filmstrip::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.photos-embed-lightbox-filmstrip::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.photos-embed-lightbox-filmstrip::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.photos-embed-filmstrip-thumbnail {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.2s;
  opacity: 0.6;
}

@media (max-width: 768px) {
  .photos-embed-filmstrip-thumbnail {
    width: 80px;
    height: 80px;
    border-width: 2px;
  }
}

.photos-embed-filmstrip-thumbnail:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

.photos-embed-filmstrip-thumbnail.active {
  border-color: rgba(255, 255, 255, 0.9);
  opacity: 1;
  transform: scale(1.1);
}

.photos-embed-filmstrip-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Prevent body scroll when lightbox is open */
body.photos-embed-lightbox-open {
  overflow: hidden;
}

/* Individual photo displays */
.photos-embed-individual {
  display: grid;
  width: 100%;
  margin: 1rem 0;
}

.photos-embed-individual-item {
  position: relative;
  width: 100%;
  /* aspect-ratio is set inline via JavaScript, don't override it */
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.2s;
}

.photos-embed-individual-item:hover {
  opacity: 0.9;
}

.photos-embed-individual-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s;
  pointer-events: none;
}

.photos-embed-individual-item:hover::after {
  background: rgba(0, 0, 0, 0.3);
}

.photos-embed-individual-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slider styles */
.photos-embed-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.95);
  border-radius: 4px;
  margin: 1rem 0;
}

.photos-embed-slider-image-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.photos-embed-slider-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.photos-embed-slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: white;
  border: none;
  padding: 1rem;
  cursor: pointer;
  font-size: 1.5rem;
  transition: background 0.2s;
  z-index: 10;
  user-select: none;
  -webkit-user-select: none;
}

.photos-embed-slider-nav:hover {
  background: rgba(255, 255, 255, 0.1);
}

.photos-embed-slider-nav.prev {
  left: 1rem;
}

.photos-embed-slider-nav.next {
  right: 1rem;
}

@media (max-width: 768px) {
  .photos-embed-slider-nav {
    padding: 0.75rem;
    font-size: 1.25rem;
  }
  
  .photos-embed-slider-nav.prev {
    left: 0.5rem;
  }
  
  .photos-embed-slider-nav.next {
    right: 0.5rem;
  }
}