/* ============================================================
   MASONRY LAYOUT MODE - STANDALONE STYLES
   Loaded exclusively on masonry-enabled pages
   Pure percentage widths for uniform column layout
   4 columns on desktop, 50px gutter
   ============================================================ */

/* ===== GRID LAYOUT (Masonry-specific) ===== */

/* Container base */
.thumbs.isotope-grid-container {
  position: relative;
}

/* Desktop: 3 columns with FIXED 50px horizontal gutter and 50px vertical gap */

.thumbs.isotope-grid-container .gutter-sizer {
  width: 50px; /* Fixed horizontal gap */
}

.thumbs.isotope-grid-container .grid-sizer {
  width: calc((100% - 100px) / 3); /* 1 column: (100% - 2×50px) / 3 */
}

/* All cards use uniform 1-column width (Masonry doesn't support multi-column spans) */
.thumbs.isotope-grid-container .project.small {
  width: calc((100% - 100px) / 3); /* 1 column base width */
  margin-bottom: 50px; /* Vertical spacing between rows */
  box-sizing: border-box;
}

/* ===== ISOTOPE CORE BEHAVIOR ===== */

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/* Isotope CSS3 transitions */
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
}

/* ===== CARD BASE STYLES ===== */

/* GSAP Container size transitions only (never animate opacity) */
.ssck-gallery-projects .isotope-grid-container.thumbs {
  margin: 0 auto;
  transition: height 0.8s ease, width 0.8s ease;
  overflow: hidden;
}

/* Base card: no geometry here; Masonry block will set width & spacing */
.ssck-masonry-gallery .project.small {
  height: auto;
  /* Let container rules control vertical rhythm (margin-bottom) */
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  /* (no margin-bottom here) */
  padding-bottom: 0;
  cursor: pointer;
}

/* Vertical rhythm (rows) */
.thumbs.isotope-grid-container .project.small {
  margin-bottom: 50px;
}

/* Inner wrapper */
.ssck-masonry-gallery .project.small .inside {
  position: relative;
  overflow: hidden;
}

/* Link container */
.ssck-masonry-gallery .project.small a {
  position: relative;
  display: block;
}

.ssck-masonry-gallery .project.small .inside a {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Primary image (thumb) */
.ssck-masonry-gallery .project.small .inside a img.thumb {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== REVEAL IMAGE STYLES ===== */

/* Revealed image layer (for gallery-card-reveal.php) */
.ssck-masonry-gallery .project.small .inside a img.thumb-revealed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
  z-index: 10;
}

/* Show revealed image on hover */
.ssck-masonry-gallery .project.small .inside:hover img.thumb-revealed {
  opacity: 1;
}

/* ===== PLAY ICON FOR VIDEO CONTENT ===== */

/* Play icon base styles - positioned absolutely, centered, non-interactive */
.ssck-masonry-gallery .project.small .inside a .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Clamp sets the width to the 2nd (preferred) value, but ensures it's no smaller than the 1st (minimum) and no larger than the 3rd (maximum). */
  width: clamp(36px, 30%, 216px);
  height: clamp(36px, 30%, 216px);
  background: center / contain no-repeat url("../images/play-icon.png");
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

/* Primary play icon - always visible, above primary image */
.ssck-masonry-gallery .project.small .inside a .play-icon-primary {
  z-index: 5;
}

/* Revealed play icon - hidden by default, visible on hover */
.ssck-masonry-gallery .project.small .inside a .play-icon-revealed {
  z-index: 20;
  opacity: 0;
}

/* Show revealed play icon on hover */
.ssck-masonry-gallery .project.small .inside:hover .play-icon-revealed {
  opacity: 0.85;
}

/* ===== HOVER & INTERACTION STATES ===== */

/* Title link wrapper - sits on top of everything */
.ssck-masonry-gallery .project.small .inside a.title-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  z-index: 40;
}

/* Title overlay */
.ssck-masonry-gallery .project.small .inside a.title-link span.title {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px;
  box-sizing: border-box;
  font-size: 1em;
  line-height: 1.2;
  margin: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

/* Show title on hover */
.ssck-masonry-gallery .project.small .inside:hover a.title-link span.title {
  opacity: 1;
  pointer-events: auto;
}

/* Adjust title position when revealed image is video - position directly under play icon */
.ssck-masonry-gallery .project.small.has-revealed-video .inside a.title-link span.title {
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ssck-masonry-gallery .project.small.has-revealed-video .inside a.title-link span.title span {
  transform: translateY(calc(clamp(18px, 10%, 108px) + 15px));
}

.ssck-masonry-gallery .project.small .inside a.title-link span.title span {
  display: inline-block;
  max-width: 100%;
}

/* Title styling (from original theme) */
.ssck-masonry-gallery .project.small .title span {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 7px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

/* ===== GSAP SCROLL FADE-UP ===== */

/* Initial state for scroll-triggered animations */
.ssck-masonry-gallery .project.small .card-inner {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}

/* Animated state (GSAP applies this) */
.ssck-masonry-gallery .project.small .card-inner.is-bottom-faded-up {
  opacity: 1;
  transform: translateY(0);
}

/* ===== LOAD MORE BUTTON ===== */

#project-load-more-container,
.ssck-gallery-load-more-container {
  text-align: center;
  padding: 20px 0;
  clear: both;
}

#project-load-more-button,
.ssck-gallery-load-more-button {
  padding: 10px 20px;
  cursor: pointer;
}

#project-loading-indicator,
.ssck-gallery-loading-indicator {
  display: inline-block;
  margin-left: 10px;
  padding: 10px;
  color: #555;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablet ≤ 1024px: 2 cols, 24px gutter */
@media (max-width: 1024px) {
  .thumbs.isotope-grid-container .gutter-sizer {
    width: 30px;
  }
  .thumbs.isotope-grid-container .grid-sizer,
  .thumbs.isotope-grid-container .project.small {
    /* 2 columns => subtract 1 gutter */
    width: calc((100% - 30px) / 2);
  }
  .thumbs.isotope-grid-container .project.small {
    margin-bottom: 30px;
  }
}

/* Mobile ≤ 640px: 1 col, no gutter */
@media (max-width: 640px) {
  .thumbs.isotope-grid-container .gutter-sizer {
    width: 0;
  }
  .thumbs.isotope-grid-container .grid-sizer,
  .thumbs.isotope-grid-container .project.small {
    width: 100%;
  }
  .thumbs.isotope-grid-container .project.small {
    margin-bottom: 24px;
  }
}