/* feed-gallery.css — the two BETA Feed Layouts (FEED-UIX.md §7).
 *
 *   Gallery (layout-gallery) — the disciplined reskin: the image IS the tile.
 *     Full-bleed frames on a 2-col grid, never cropped (blurred-self matte
 *     absorbs any aspect ratio), ≤3 text elements, distance as a scrim chip.
 *   Gallery Walk (layout-walk) — the masterpiece: Gallery tiles hung in the
 *     gallery of your neighborhood. The spatial distance bands become ROOMS
 *     (doorframe thresholds, ambient light falling with distance); Room III
 *     pieces hang veiled — honest curiosity staging, a tap always opens the
 *     full share.
 *
 * Contract with the classic modes: Grid/List stay PIXEL-IDENTICAL. Every rule
 * here is scoped to .layout-gallery / .layout-walk (tile + list level) or
 * html[data-feed-layout=…] (page level). The tile markup additions this file
 * styles (.tile-art wrapper, .tile-dist-chip, .tile-cat-*) are inert in
 * classic modes: .tile-art{display:contents} keeps the layout tree identical
 * and the chip stays display:none.
 */

/* ---------- inert-by-default hooks (all modes) ---------- */
.tile-art { display: contents; }        /* no box → classic layouts unchanged */
.tile-dist-chip { display: none; }

/* =========================================================
   GALLERY — shared tile anatomy for both beta modes
   ========================================================= */

/* The list becomes a uniform 2-col grid (row-major = reading order preserved,
   so the distance/recency order stays honest — constancy). Inside a spatial
   band the same class arrives via _feedListClass(), so bands get it free. */
.feed.layout-gallery,
.feed.layout-walk {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 2px;
}
@media (min-width: 720px)  { .feed.layout-gallery, .feed.layout-walk { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .feed.layout-gallery, .feed.layout-walk { grid-template-columns: repeat(4, 1fr); } }

/* The tile: borderless, the image carries it. Gap-only separation. */
.layout-gallery .feed-item,
.layout-walk .feed-item {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 3px var(--shadow-soft);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

/* Press = the piece responds in hand (~100ms ack convention). */
.layout-gallery .feed-item:active,
.layout-walk .feed-item:active {
  transform: scale(0.97);
  box-shadow: 0 1px 2px var(--shadow-soft);
}
@media (prefers-reduced-motion: reduce) {
  .layout-gallery .feed-item, .layout-walk .feed-item { transition: none; }
  .layout-gallery .feed-item:active, .layout-walk .feed-item:active { transform: none; }
}

/* The art: a fixed-shape frame per category (shape language — Things square,
   Places wide, People portrait) that NEVER crops: the photo sits object-fit:
   contain over a blurred copy of itself (background:inherit trick), so any
   aspect ratio hangs matted, museum-style. */
.layout-gallery .feed-item.has-thumb .tile-art,
.layout-walk .feed-item.has-thumb .tile-art {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;                 /* Things + default */
  background-color: var(--surface-2);  /* calm placeholder while loading */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.layout-gallery .feed-item.tile-cat-place .tile-art,
.layout-walk .feed-item.tile-cat-place .tile-art { aspect-ratio: 4 / 3; }
.layout-gallery .feed-item.tile-cat-people .tile-art,
.layout-walk .feed-item.tile-cat-people .tile-art { aspect-ratio: 4 / 5; }

/* Blurred-self matte behind the contained photo. */
.layout-gallery .feed-item.has-thumb .tile-art::before,
.layout-walk .feed-item.has-thumb .tile-art::before {
  content: '';
  position: absolute;
  inset: -12px;                        /* bleed past the blur's soft edge */
  background: inherit;
  filter: blur(16px) saturate(1.1) brightness(0.85);
}
.layout-gallery .feed-item.has-thumb .feed-thumb,
.layout-walk .feed-item.has-thumb .feed-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

/* Image dissolve-in (feed-modes.js adds .img-in on load — T4). Scoped to the
   beta modes so classic tiles never depend on the JS hook. */
.layout-gallery .feed-thumb:not(.img-in),
.layout-walk .feed-thumb:not(.img-in) { opacity: 0; }
.layout-gallery .feed-thumb.img-in,
.layout-walk .feed-thumb.img-in { opacity: 1; transition: opacity 0.18s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .layout-gallery .feed-thumb, .layout-walk .feed-thumb { opacity: 1 !important; transition: none; }
}

/* The museum label: distance as a designed chip ON the art (scrim keeps it
   legible over any photo — distance stays visible on every tile, WCAG). */
.layout-gallery .feed-item.has-thumb .tile-dist-chip,
.layout-walk .feed-item.has-thumb .tile-dist-chip {
  display: inline-flex;
  align-items: center;
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(10, 10, 15, 0.62);
  color: #f2f2f7;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

/* At-rest text: ≤3 elements. Bigger title, tighter body, no desc snippet
   (depth lives on the opened share). Distance moved onto the art, so the
   meta row retires on photo tiles; text tiles keep it (distance must show). */
.layout-gallery .feed-item .feed-body,
.layout-walk .feed-item .feed-body { padding: 8px 10px 10px; }
.layout-gallery .feed-item .feed-title,
.layout-walk .feed-item .feed-title {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.layout-gallery .feed-item .feed-desc,
.layout-walk .feed-item .feed-desc { display: none; }
.layout-gallery .feed-item.has-thumb .feed-item-meta,
.layout-walk .feed-item.has-thumb .feed-item-meta { display: none; }

/* Badge row slims down: safety glyphs (lock/star) keep speaking, quietly. */
.layout-gallery .feed-item .feed-listing-row,
.layout-walk .feed-item .feed-listing-row {
  position: static;
  padding: 0;
  margin: 0 0 2px;
  background: none;
}
.layout-gallery .feed-item .feed-cat-badge,
.layout-walk .feed-item .feed-cat-badge { opacity: 0.75; }

/* Text-only shares hang as wall PLAQUES — a different kind of object, not a
   broken image card. Category tint rides the top rule. */
.layout-gallery .feed-item.no-thumb,
.layout-walk .feed-item.no-thumb {
  justify-content: center;
  min-height: 130px;
  text-align: center;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.layout-gallery .feed-item.no-thumb .feed-body::before,
.layout-walk .feed-item.no-thumb .feed-body::before {
  content: '';
  display: block;
  width: 34px;
  height: 2px;
  margin: 2px auto 8px;
  border-radius: 2px;
  background: var(--text-dim);
}
.layout-gallery .feed-item.no-thumb.tile-cat-people .feed-body::before,
.layout-walk .feed-item.no-thumb.tile-cat-people .feed-body::before { background: var(--info); }
.layout-gallery .feed-item.no-thumb.tile-cat-place .feed-body::before,
.layout-walk .feed-item.no-thumb.tile-cat-place .feed-body::before { background: var(--success); }
.layout-gallery .feed-item.no-thumb.tile-cat-thing .feed-body::before,
.layout-walk .feed-item.no-thumb.tile-cat-thing .feed-body::before { background: var(--accent); }
.layout-gallery .feed-item.no-thumb .feed-title,
.layout-walk .feed-item.no-thumb .feed-title { font-style: italic; }
.layout-gallery .feed-item.no-thumb .feed-item-meta,
.layout-walk .feed-item.no-thumb .feed-item-meta { justify-content: center; }

/* NEW pill: same honest rule (24h + unopened), restyled as a small placard. */
.layout-gallery .feed-item .tile-new-pill,
.layout-walk .feed-item .tile-new-pill { z-index: 3; }

/* =========================================================
   GALLERY WALK — the rooms (spatial bands re-skinned)
   =========================================================
   Bands come from SpatialUIX (.sp-band-here|nearby|reach); Walk only
   re-dresses them. With Spatial off, Walk degrades to Gallery — documented. */

/* Threshold: the band header becomes a doorframe you step through. */
html[data-feed-layout="walk"] .sp-band-head {
  justify-content: center;
  text-align: center;
  padding: 14px 10px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 0 var(--bg), 0 3px 0 var(--border),
              0 -2px 0 var(--bg), 0 -3px 0 var(--border);   /* double door lintel */
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html[data-feed-layout="walk"] .sp-band-here   .sp-band-name::before { content: 'Room I · '; color: var(--text-dim); }
html[data-feed-layout="walk"] .sp-band-nearby .sp-band-name::before { content: 'Room II · '; color: var(--text-dim); }
html[data-feed-layout="walk"] .sp-band-reach  .sp-band-name::before { content: 'Room III · '; color: var(--text-dim); }

/* Ambient light falls with distance: warm → neutral → dusk. Environment-level
   felt distance (the tiles' own band zoom/dim from spatial.css still applies).
   The faint dot weave is the gallery wall's grain. */
html[data-feed-layout="walk"] .sp-band-body {
  background-image: radial-gradient(rgba(128, 128, 148, 0.05) 1px, transparent 1px);
  background-size: 14px 14px;
  border-radius: 0 0 10px 10px;
  padding: 10px 4px;
}
html[data-feed-layout="walk"] .sp-band-here .sp-band-body {
  background-color: rgba(255, 176, 96, 0.05);     /* warm, bright — you are here */
}
html[data-feed-layout="walk"] .sp-band-nearby .sp-band-body {
  background-color: rgba(150, 170, 220, 0.04);    /* cooler, a room deeper */
}
html[data-feed-layout="walk"] .sp-band-reach .sp-band-body {
  background-color: rgba(90, 96, 150, 0.07);      /* dusk at the edge of your world */
}

/* Deeper rooms: the pieces hang with more shadow (light is farther away). */
html[data-feed-layout="walk"] .sp-band-nearby .feed-item { box-shadow: 0 2px 5px var(--shadow-soft); }
html[data-feed-layout="walk"] .sp-band-reach  .feed-item { box-shadow: 0 3px 8px var(--shadow-heavy); }

/* Room III hangs VEILED — soft frost, title withheld, distance + category
   still legible, caption says exactly what's happening. Honest curiosity:
   a tap ALWAYS opens the full share (this is staging, never ransom).
   Text plaques are never veiled — blurred words are just noise. */
html[data-feed-layout="walk"] .sp-band-reach .feed-item.has-thumb .feed-thumb {
  filter: blur(5px) saturate(0.75) brightness(0.92);
}
html[data-feed-layout="walk"] .sp-band-reach .feed-item.has-thumb .feed-title { display: none; }
html[data-feed-layout="walk"] .sp-band-reach .feed-item.has-thumb .feed-body::after {
  content: 'veiled — step closer, or tap to view';
  display: block;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-dim);
}
/* =========================================================
   Spatial-mode reconciliation (beta modes inside the bands)
   =========================================================
   spatial.css overlays .feed-listing-row ON the photo's bottom edge with an
   html[data-feed="spatial"] selector that out-specifies the gallery rules —
   the category pill landed exactly on the distance chip (owner, first look).
   In the beta modes the row lives STATIC in the body (the chip owns the
   art's bottom-left), and the category badge gets its calm hue-tint back —
   the dark chip skin exists for riding photos, which it no longer does. */
html[data-feed="spatial"] .feed.layout-gallery .feed-item.has-thumb .feed-listing-row,
html[data-feed="spatial"] .feed.layout-walk .feed-item.has-thumb .feed-listing-row {
  position: static;
  left: auto; right: auto; bottom: auto;
  margin: 0 0 2px;
  z-index: auto;
  flex-wrap: wrap;
}
html[data-feed="spatial"] .feed.layout-gallery .feed-item.has-thumb .feed-cat-badge,
html[data-feed="spatial"] .feed.layout-walk .feed-item.has-thumb .feed-cat-badge,
html[data-feed="spatial"] .feed.layout-gallery .feed-item.has-thumb .wallet-score,
html[data-feed="spatial"] .feed.layout-walk .feed-item.has-thumb .wallet-score,
html[data-feed="spatial"] .feed.layout-gallery .feed-item.has-thumb .feed-private-badge,
html[data-feed="spatial"] .feed.layout-walk .feed-item.has-thumb .feed-private-badge {
  box-shadow: none;
}
html[data-feed="spatial"] .feed.layout-gallery .feed-item.has-thumb .feed-cat-badge.cat-people,
html[data-feed="spatial"] .feed.layout-walk .feed-item.has-thumb .feed-cat-badge.cat-people {
  background: color-mix(in oklab, var(--info) 16%, transparent);
  color: var(--info);
  border-color: color-mix(in oklab, var(--info) 40%, var(--border));
}
html[data-feed="spatial"] .feed.layout-gallery .feed-item.has-thumb .feed-cat-badge.cat-place,
html[data-feed="spatial"] .feed.layout-walk .feed-item.has-thumb .feed-cat-badge.cat-place {
  background: color-mix(in oklab, var(--success) 16%, transparent);
  color: var(--success);
  border-color: color-mix(in oklab, var(--success) 40%, var(--border));
}
html[data-feed="spatial"] .feed.layout-gallery .feed-item.has-thumb .feed-cat-badge.cat-thing,
html[data-feed="spatial"] .feed.layout-walk .feed-item.has-thumb .feed-cat-badge.cat-thing {
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
}

/* The veil lifts on pieces you've already opened (.tile-seen from
   _renderItemHtml): your own trail through the gallery stays sharp — the
   mental map rewards the walk. */
html[data-feed-layout="walk"] .sp-band-reach .feed-item.has-thumb.tile-seen .feed-thumb { filter: none; }
html[data-feed-layout="walk"] .sp-band-reach .feed-item.has-thumb.tile-seen .feed-title { display: -webkit-box; }
html[data-feed-layout="walk"] .sp-band-reach .feed-item.has-thumb.tile-seen .feed-body::after { display: none; }