/* Full-page prototype mosaic. Longer project pages anchor the composition;
   row auto-placement keeps the visual, keyboard and dialog reading order alike. */
.tc-prototype-gallery { padding: .75rem; background: var(--tc-scene-bg); }
.tc-prototype-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-rows: clamp(13rem, 60vw, 18rem); gap: 1.25rem .75rem; padding: 0; list-style: none; }
.tc-prototype-grid > li { min-width: 0; min-height: 0; }
.tc-prototype-tile--feature, .tc-prototype-tile--tall { grid-row: span 2; }
.tc-prototype-tile:last-child { grid-column: span 2; }
.tc-prototype-card { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
.tc-prototype-preview { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: .5rem; border: 1px solid var(--tc-rule); background: var(--tc-paper); }
.tc-prototype-card .tc-prototype-preview img { width: 100%; height: 100%; object-fit: contain; }
.tc-prototype-caption { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .375rem; padding-top: .75rem; font: .6875rem/1.4 var(--font-mono), monospace; overflow-wrap: anywhere; }
.tc-prototype-index { color: var(--tc-quiet); font-variant-numeric: tabular-nums; }
.tc-prototype-card:focus-visible .tc-prototype-preview { border-color: var(--tc-ink); }
.tc-lightbox-bar { flex: none; }
.tc-lightbox-media { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
.tc-lightbox--prototype .tc-lightbox-media img { width: 100%; max-width: 1440px; height: auto; }
@media (hover: hover) {
  .tc-prototype-card:hover .tc-prototype-preview { border-color: var(--tc-ink); }
  .tc-prototype-card:hover .tc-prototype-caption > span:nth-child(2) { text-decoration: underline; text-underline-offset: .2rem; }
}
@media (min-width: 48rem) {
  .tc-prototype-gallery { padding: 1.5rem; }
  .tc-prototype-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(14rem, 23vw, 17rem); gap: 1.5rem 1rem; }
  .tc-prototype-preview { padding: .75rem; }
  .tc-prototype-caption { gap: .5rem; font-size: .75rem; }
}
@media (min-width: 75rem) {
  /* At most 600px per two-row tile, keeping the 1200px previews Retina-sharp. */
  .tc-prototype-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 18rem; }
  .tc-prototype-tile--feature { grid-column: span 2; }
  .tc-prototype-tile:last-child { grid-column: auto; }
}