/* work page — loaded after styleNew.css, adds only work-specific rules */

/* Page Layout */
.work-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

.left-panel {
  width: 100%;
}

.left-panel p {
  margin: 0;
  line-height: 1.52;
}

/* Photo Gallery */
.photo-gallery {
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.gallery-columns {
  column-count: 3;
  column-gap: 12px;
}

/* Image styling */
.gallery-columns img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1; /* Sits on top of the tile shimmer background */
}

/* Skeleton Loading Placeholder on Tile */
.tile {
  position: relative;
  margin-bottom: 12px;
  break-inside: avoid;
  overflow: hidden;
  
  /* Placeholder height before image renders */
  min-height: 180px; 
  background-color: #2961f6;
  
  /* Shimmer gradient overlay */
  background-image: linear-gradient(
    90deg,
    #2961f6 0%,
    #d0ddff 50%,
    #2961f6 100%
  );
  background-size: 200% 100%;
  animation: tile-shimmer 1.6s infinite ease-in-out;
}

/* Shimmer Keyframe Animation */
@keyframes tile-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (max-width: 600px) {
  .gallery-columns {
    column-count: 1;
  }
}