/* ===================================================================
   Digital Futurist — Interesting Images hub (page 328).
   A row-based index like Archival Collections, but with a thumbnail per
   row since these ARE photos - the one place a small visual preview
   earns its keep instead of adding noise. Built on the --df-* tokens
   from homepage-redesign.css.
   =================================================================== */

.df-photo-rows { margin-top:8px; border-top:1px solid var(--df-border); }

.df-photo-row {
  display:flex; align-items:center; gap:20px;
  padding:20px 2px; border-bottom:1px solid var(--df-border);
  text-decoration:none; color:var(--df-text);
}
.df-shell .df-photo-row { color:var(--df-text); }
.df-photo-row:hover .df-photo-row-title { color:var(--df-accent); }

.df-photo-row-thumb {
  width:96px; height:96px; flex-shrink:0; border-radius:4px; overflow:hidden;
  background:var(--df-panel); border:1px solid var(--df-border);
}
.df-photo-row-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

.df-photo-row-body { min-width:0; }
.df-photo-row-title { font-size:1.05rem; font-weight:600; margin:0 0 4px; }
.df-photo-row-meta {
  font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.04em;
  color:var(--df-muted); margin:0 0 6px;
}
.df-photo-row-teaser {
  font-size:.85rem; line-height:1.5; color:var(--df-muted2);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.df-photo-row-arrow { color:var(--df-accent); font-size:.85rem; margin-left:auto; flex-shrink:0; padding-left:12px; }

@media (max-width:600px) {
  .df-photo-row { gap:14px; }
  .df-photo-row-thumb { width:68px; height:68px; }
  .df-photo-row-teaser { display:none; }
}