1  // ─── Square photo thumbnail ───────────────────────────────────────────────────
  2  
  3  .photo-thumb {
  4    aspect-ratio: 1 / 1;
  5    overflow: hidden;
  6    background-color: var(--c-secondary-background);
  7    background-image: var(--thumbhash-url, none); // CSS custom property set by JS
  8    background-size: cover;
  9    background-position: center;
 10    border-radius: 4px;
 11    display: block;
 12    margin-bottom: 1em;
 13  
 14    .responsive-image {
 15      width: 100%;
 16      height: 100%;
 17      object-fit: cover;
 18      object-position: center;
 19      display: block;
 20      cursor: zoom-in;
 21      opacity: 0;
 22      transition: opacity 0.35s ease, transform 0.3s ease;
 23      // undo conflicting styles set elsewhere
 24      max-width: unset;
 25  
 26      &.lb-loaded {
 27        opacity: 1;
 28      }
 29  
 30      &:hover {
 31        transform: scale(1.04);
 32      }
 33    }
 34  }
 35  
 36  // ─── Photos page grid ─────────────────────────────────────────────────────────
 37  
 38  .photos-grid {
 39    display: grid;
 40    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
 41    gap: 0.75rem;
 42  
 43    article.post {
 44      padding: 0;
 45      margin: 0;
 46    }
 47  
 48    .post-content {
 49      margin: 0;
 50  
 51      // The posts are wrapped in <a> on the photos page; make it block
 52      > a {
 53        display: block;
 54        line-height: 0; // prevents extra space under the image
 55      }
 56    }
 57  
 58    .photo-thumb {
 59      width: 100%;
 60      border-radius: 6px;
 61      margin-bottom: 0;
 62    }
 63  
 64    // Multi-image posts: only show the first image as the grid thumbnail
 65    .photo-thumb + .photo-thumb {
 66      display: none;
 67    }
 68  }
 69  
 70  // ─── Lightbox overlay ─────────────────────────────────────────────────────────
 71  
 72  .lb-overlay {
 73    position: fixed;
 74    inset: 0;
 75    background: rgba(0, 0, 0, 0.88);
 76    display: flex;
 77    align-items: center;
 78    justify-content: center;
 79    z-index: 9999;
 80    opacity: 0;
 81    pointer-events: none;
 82    transition: opacity 0.2s ease;
 83  }
 84  
 85  .lb-overlay.lb-open {
 86    opacity: 1;
 87    pointer-events: auto;
 88  }
 89  
 90  // Makes <picture> invisible to the flex layout so <img> centres directly
 91  .lb-picture {
 92    display: contents;
 93  }
 94  
 95  .lb-img {
 96    max-width: min(92vw, 1000px);
 97    max-height: 90vh;
 98    object-fit: contain;
 99    border-radius: 4px;
100    display: block;
101    opacity: 1;
102    transition: opacity 0.15s ease;
103  }
104  
105  .lb-img.lb-switching {
106    opacity: 0;
107  }
108  
109  .lb-close {
110    position: absolute;
111    top: 0.75rem;
112    right: 1rem;
113    background: none;
114    border: none;
115    color: rgba(255, 255, 255, 0.75);
116    font-size: 2.25rem;
117    line-height: 1;
118    cursor: pointer;
119    padding: 0.25rem 0.5rem;
120    border-radius: 4px;
121    transition: color 0.15s ease;
122  
123    &:hover {
124      color: #fff;
125    }
126  }
127  
128  .lb-nav {
129    position: absolute;
130    top: 50%;
131    transform: translateY(-50%);
132    background: rgba(255, 255, 255, 0.12);
133    border: none;
134    color: rgba(255, 255, 255, 0.8);
135    font-size: 1.75rem;
136    width: 3rem;
137    height: 3rem;
138    display: flex;
139    align-items: center;
140    justify-content: center;
141    cursor: pointer;
142    border-radius: 50%;
143    transition: background 0.15s ease, color 0.15s ease;
144    padding: 0;
145  
146    &:hover {
147      background: rgba(255, 255, 255, 0.25);
148      color: #fff;
149    }
150  }
151  
152  .lb-prev {
153    left: 1rem;
154  }
155  
156  .lb-next {
157    right: 1rem;
158  }