/* ===================================
   GALLERY SYSTEM CSS - ASPECT RATIO BASED LAYOUTS
   Dedicated styles for the gallery system with aspect ratio control
   =================================== */

/* ===================================
   GALLERY CONTAINER WIDTH CONTROL
   =================================== */
.gallery-container {
  width: 100%;
  max-width: var(--gallery-width, 100%);
  margin: 0 auto;
}

.gallery-container.align-left {
  margin-left: 0;
  margin-right: auto;
}

.gallery-container.align-right {
  margin-left: auto;
  margin-right: 0;
}

.gallery-container.align-center {
  margin-left: auto;
  margin-right: auto;
}

/* ===================================
   REGULAR GRID LAYOUT - NATURAL PROPORTIONS (DEFAULT)
   =================================== */
.gallery-layout-regular {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), 1fr);
  grid-auto-rows: auto;
  align-items: start;
}

.gallery-layout-regular-cols-1 {
  --columns: 1;
}

.gallery-layout-regular-cols-2 {
  --columns: 2;
}

.gallery-layout-regular-cols-3 {
  --columns: 3;
}

.gallery-layout-regular-cols-4 {
  --columns: 4;
}

.gallery-layout-regular-cols-5 {
  --columns: 5;
}

.gallery-layout-regular .gallery-item {
  display: block;
  width: 100%;
  min-width: 0;
}

.gallery-layout-regular .gallery-image-container {
  width: 100%;
  height: auto;
  border-radius: var(--gallery-border-radius, 0);
  overflow: hidden;
}

.gallery-layout-regular .gallery-image,
.gallery-layout-regular .project-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.5s ease-in-out;
  border-radius: var(--gallery-border-radius, 0);
}

/* ===================================
   SQUARE GRID LAYOUT - 1:1 ASPECT RATIO
   =================================== */
.gallery-layout-square {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), 1fr);
}

.gallery-layout-square-cols-1 {
  --columns: 1;
}

.gallery-layout-square-cols-2 {
  --columns: 2;
}

.gallery-layout-square-cols-3 {
  --columns: 3;
}

.gallery-layout-square-cols-4 {
  --columns: 4;
}

.gallery-layout-square-cols-5 {
  --columns: 5;
}

.gallery-layout-square .gallery-item {
  display: block;
  width: 100%;
  min-width: 0;
}

.gallery-layout-square .gallery-image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--gallery-border-radius, 0);
}

.gallery-layout-square .gallery-image,
.gallery-layout-square .project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease-in-out;
  border-radius: var(--gallery-border-radius, 0);
}

/* ===================================
   LANDSCAPE GRID LAYOUT - 4:3 ASPECT RATIO
   =================================== */
.gallery-layout-landscape {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), 1fr);
}

.gallery-layout-landscape-cols-1 {
  --columns: 1;
}

.gallery-layout-landscape-cols-2 {
  --columns: 2;
}

.gallery-layout-landscape-cols-3 {
  --columns: 3;
}

.gallery-layout-landscape-cols-4 {
  --columns: 4;
}

.gallery-layout-landscape-cols-5 {
  --columns: 5;
}

.gallery-layout-landscape .gallery-item {
  display: block;
  width: 100%;
  min-width: 0;
}

.gallery-layout-landscape .gallery-image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--gallery-border-radius, 0);
}

.gallery-layout-landscape .gallery-image,
.gallery-layout-landscape .project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease-in-out;
  border-radius: var(--gallery-border-radius, 0);
}

/* ===================================
   PORTRAIT GRID LAYOUT - 3:4 ASPECT RATIO
   =================================== */
.gallery-layout-portrait {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), 1fr);
}

.gallery-layout-portrait-cols-1 {
  --columns: 1;
}

.gallery-layout-portrait-cols-2 {
  --columns: 2;
}

.gallery-layout-portrait-cols-3 {
  --columns: 3;
}

.gallery-layout-portrait-cols-4 {
  --columns: 4;
}

.gallery-layout-portrait-cols-5 {
  --columns: 5;
}

.gallery-layout-portrait .gallery-item {
  display: block;
  width: 100%;
  min-width: 0;
}

.gallery-layout-portrait .gallery-image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--gallery-border-radius, 0);
}

.gallery-layout-portrait .gallery-image,
.gallery-layout-portrait .project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease-in-out;
  border-radius: var(--gallery-border-radius, 0);
}

/* ===================================
   WIDESCREEN GRID LAYOUT - 16:9 ASPECT RATIO
   =================================== */
.gallery-layout-widescreen {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), 1fr);
}

.gallery-layout-widescreen-cols-1 {
  --columns: 1;
}

.gallery-layout-widescreen-cols-2 {
  --columns: 2;
}

.gallery-layout-widescreen-cols-3 {
  --columns: 3;
}

.gallery-layout-widescreen-cols-4 {
  --columns: 4;
}

.gallery-layout-widescreen-cols-5 {
  --columns: 5;
}

.gallery-layout-widescreen .gallery-item {
  display: block;
  width: 100%;
  min-width: 0;
}

.gallery-layout-widescreen .gallery-image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--gallery-border-radius, 0);
}

.gallery-layout-widescreen .gallery-image,
.gallery-layout-widescreen .project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease-in-out;
  border-radius: var(--gallery-border-radius, 0);
}

/* ===================================
   VERTICAL GRID LAYOUT - 9:16 ASPECT RATIO
   =================================== */
.gallery-layout-vertical {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), 1fr);
}

.gallery-layout-vertical-cols-1 {
  --columns: 1;
}

.gallery-layout-vertical-cols-2 {
  --columns: 2;
}

.gallery-layout-vertical-cols-3 {
  --columns: 3;
}

.gallery-layout-vertical-cols-4 {
  --columns: 4;
}

.gallery-layout-vertical-cols-5 {
  --columns: 5;
}

.gallery-layout-vertical .gallery-item {
  display: block;
  width: 100%;
  min-width: 0;
}

.gallery-layout-vertical .gallery-image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--gallery-border-radius, 0);
}

.gallery-layout-vertical .gallery-image,
.gallery-layout-vertical .project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease-in-out;
  border-radius: var(--gallery-border-radius, 0);
}

/* ===================================
   CAPTION STYLES
   =================================== */
.gallery-caption-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Caption visibility classes */
.gallery-caption-show {
  opacity: 1;
}

/* Caption alignment classes */
.gallery-caption-left {
  justify-content: flex-start;
}

.gallery-caption-center {
  justify-content: center;
}

.gallery-caption-right {
  justify-content: flex-end;
}

.gallery-caption-justify {
  justify-content: space-between;
}

.gallery-caption-flex {
  display: flex;
  flex-wrap: wrap;
}

/* Gallery link hover effects */
.gallery-project-link:hover,
.gallery-link:hover {
  opacity: 0.8;
}

/* No-lead projects (non-clickable) */
.gallery-item .no-lead {
  cursor: default;
}

.gallery-item .no-lead:hover {
  opacity: 1;
}

/* Show on hover - start hidden, show on hover */
.gallery-caption-show-on-hover {
  opacity: 0 !important;
  transition: opacity 0.3s ease-in-out;
}

.gallery-item:hover .gallery-caption-show-on-hover,
figure.gallery-item:hover .gallery-caption-show-on-hover,
.gallery-item:hover .gallery-caption-overlay.gallery-caption-show-on-hover,
.gallery-item:hover .project-caption-above.gallery-caption-show-on-hover,
.gallery-item:hover .project-caption-below.gallery-caption-show-on-hover,
.gallery-item:hover .gallery-caption.gallery-caption-show-on-hover {
  opacity: 1 !important;
}

/* Hide on hover - start visible, hide on hover */
.gallery-caption-hide-on-hover {
  opacity: 1 !important;
  transition: opacity 0.3s ease-in-out;
}

.gallery-item:hover .gallery-caption-hide-on-hover,
figure.gallery-item:hover .gallery-caption-hide-on-hover,
.gallery-item:hover .gallery-caption-overlay.gallery-caption-hide-on-hover,
.gallery-item:hover .project-caption-above.gallery-caption-hide-on-hover,
.gallery-item:hover .project-caption-below.gallery-caption-hide-on-hover,
.gallery-item:hover .gallery-caption.gallery-caption-hide-on-hover {
  opacity: 0 !important;
}

.gallery-caption-above,
.gallery-caption-below {
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Caption content containers */
.project-caption-above,
.project-caption-below,
.project-caption-overlay {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Category containers */
.project-caption-above .text-sm,
.project-caption-below .text-sm,
.project-caption-overlay .text-sm {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure category flex containers respect padding */
.project-caption-above div[style*="gap"],
.project-caption-below div[style*="gap"],
.project-caption-overlay div[style*="gap"] {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

/* Overlay specific category containers need to account for px-4 padding */
.gallery-caption-overlay div[style*="gap"] {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

/* Ensure category flex containers don't overflow */
.project-category {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ===================================
   RESPONSIVE ADJUSTMENTS
   Smart column scaling based on backend settings
   =================================== */

/* Smaller screens (≤1400px): 5 columns → 4 columns */
@media (max-width: 1400px) {
  .gallery-layout-regular-cols-5,
  .gallery-layout-square-cols-5,
  .gallery-layout-landscape-cols-5,
  .gallery-layout-portrait-cols-5,
  .gallery-layout-widescreen-cols-5,
  .gallery-layout-vertical-cols-5 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* iPad/Tablet (≤1024px): Scale down intelligently */
@media (max-width: 1024px) {
  /* 5 columns → 3 columns */
  .gallery-layout-regular-cols-5,
  .gallery-layout-square-cols-5,
  .gallery-layout-landscape-cols-5,
  .gallery-layout-portrait-cols-5,
  .gallery-layout-widescreen-cols-5,
  .gallery-layout-vertical-cols-5 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* 4 columns → 3 columns */
  .gallery-layout-regular-cols-4,
  .gallery-layout-square-cols-4,
  .gallery-layout-landscape-cols-4,
  .gallery-layout-portrait-cols-4,
  .gallery-layout-widescreen-cols-4,
  .gallery-layout-vertical-cols-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* 3 columns → 2 columns */
  .gallery-layout-regular-cols-3,
  .gallery-layout-square-cols-3,
  .gallery-layout-landscape-cols-3,
  .gallery-layout-portrait-cols-3,
  .gallery-layout-widescreen-cols-3,
  .gallery-layout-vertical-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile (≤768px): All multi-column layouts → 1 column, reduce gap */
@media (max-width: 768px) {
  .gallery-layout-regular-cols-2,
  .gallery-layout-regular-cols-3,
  .gallery-layout-regular-cols-4,
  .gallery-layout-regular-cols-5,
  .gallery-layout-square-cols-2,
  .gallery-layout-square-cols-3,
  .gallery-layout-square-cols-4,
  .gallery-layout-square-cols-5,
  .gallery-layout-landscape-cols-2,
  .gallery-layout-landscape-cols-3,
  .gallery-layout-landscape-cols-4,
  .gallery-layout-landscape-cols-5,
  .gallery-layout-portrait-cols-2,
  .gallery-layout-portrait-cols-3,
  .gallery-layout-portrait-cols-4,
  .gallery-layout-portrait-cols-5,
  .gallery-layout-widescreen-cols-2,
  .gallery-layout-widescreen-cols-3,
  .gallery-layout-widescreen-cols-4,
  .gallery-layout-widescreen-cols-5,
  .gallery-layout-vertical-cols-2,
  .gallery-layout-vertical-cols-3,
  .gallery-layout-vertical-cols-4,
  .gallery-layout-vertical-cols-5 {
    grid-template-columns: 1fr !important;
    column-gap: 16px !important; /* Reduce gap on mobile */
    row-gap: 16px !important;
  }

  /* Single column layouts stay as-is */
  .gallery-layout-regular-cols-1,
  .gallery-layout-square-cols-1,
  .gallery-layout-landscape-cols-1,
  .gallery-layout-portrait-cols-1,
  .gallery-layout-widescreen-cols-1,
  .gallery-layout-vertical-cols-1 {
    column-gap: 16px !important; /* Just reduce gap */
    row-gap: 16px !important;
  }

  .gallery-layout-feed .gallery-feed-item {
    max-width: 100% !important;
  }
}