/* photo_grid.css — shared photo-grid styles for tech pages that
 * present a date-grouped photo gallery.
 *
 * Round 2.7 Item 2.5: extracted from project_gallery.css so gallery.html
 * (cross-project archive view) can adopt the same date-grouped layout
 * that project_gallery.html has used since Step 6e. Mirrors the
 * folder_nav.css extraction pattern from Round 2.7 Step 2E (3e-2):
 * shared chrome lives in a dedicated file, per-page CSS overrides
 * win on conflict.
 *
 * Markup contract (rendered by gallery.js's photos-mode renderPhotos
 * AND project_gallery.js's render):
 *
 *   <div id="…" class="photo-grid">           <-- selection-mode-aware
 *     <div class="photo-date-header">Wed, May 13, 2026</div>
 *     <div class="photo-thumb" data-flat-index="0" role="button">
 *       <img src="..." alt="…" loading="lazy" />
 *       <span class="photo-badge photo-badge-ex">EX</span>
 *     </div>
 *     <!-- more thumbs in this group -->
 *     <div class="photo-date-header">Tue, May 12, 2026</div>
 *     <!-- more groups -->
 *   </div>
 *
 *   <div id="photoEmptyState" class="photo-empty-state">…</div>
 *
 * Project-gallery-only rules (selection mode checkboxes, action bar,
 * thumb-checkbox styling) stay in project_gallery.css — gallery.html
 * doesn't have selection mode today.
 *
 * Consumers (load this file FIRST so per-page CSS overrides win):
 *   tech/gallery.html
 *   tech/project_gallery.html
 */

/* ── Photo grid: responsive columns ────────────────────────────────────── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

@media (min-width: 520px) {
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
  .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Date headers: full-width row inside the grid ──────────────────────── */
.photo-date-header {
  grid-column: 1 / -1;
  font-weight: 700;
  color: #1f2937;
  font-size: 14px;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid #e6e9ee;
  letter-spacing: 0.01em;
}

/* The very first date header in the grid sits at the top — no top border. */
.photo-grid > .photo-date-header:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* ── Thumbnail ─────────────────────────────────────────────────────────── */
.photo-thumb {
  position: relative;
  border: 1px solid #e6e9ee;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
}

.photo-thumb:active {
  transform: translateY(1px);
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Badges (top-right) ────────────────────────────────────────────────── */
.photo-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  letter-spacing: 0.05em;
  pointer-events: none;
  z-index: 1;
}

.photo-badge-ex      { background: rgba(37, 99, 235, 0.92);  }

/* ── Per-tile caption (Round 2.7 Item 2b) ──────────────────────────────── */
/* Renders the photo's planter value as a single-line overlay on the lower
 * portion of the tile. Hidden when the JS doesn't append it (planter empty).
 * .photo-thumb already has position: relative (defined above) so absolute
 * positioning here scopes to each tile.
 */
.photo-thumb-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}

/* Round 2.7 Item 2.5a: the brown unknown-date badge variant and the
 * sibling-stacking rule were removed. Only the EX badge variant is
 * part of the product spec; unknown-date markers surfaced as
 * visible noise on gallery.html legacy archive tiles after Item 2.5
 * mirrored project_gallery's render. With a single badge there's
 * nothing to stack. */

/* ── Empty state ───────────────────────────────────────────────────────── */
.photo-empty-state {
  text-align: center;
  color: #5f6b7a;
  padding: 40px 20px;
  font-size: 14px;
}