/* showcase-wall.css — v20260911-1
   Wall view: uncropped artworks in a masonry flow, no card chrome.
   Scoped to .vr-main-showcase[data-view-mode="wall"] so the three existing
   views are untouched. Pure CSS multi-column masonry — no JS layout. */

.vr-main-showcase[data-view-mode="wall"] #vrShowcaseGrid {
  display: block;
  columns: 3;
  column-gap: 40px;
}
@media (max-width: 1100px) { .vr-main-showcase[data-view-mode="wall"] #vrShowcaseGrid { column-gap: 28px; } }
@media (max-width: 860px)  { .vr-main-showcase[data-view-mode="wall"] #vrShowcaseGrid { columns: 2; column-gap: 22px; } }
@media (max-width: 520px)  { .vr-main-showcase[data-view-mode="wall"] #vrShowcaseGrid { columns: 1; } }

/* Give the wall more air than the card views. */
.vr-main-showcase[data-view-mode="wall"] .vr-showcase-section { margin-top: 1.75rem; }

.vr-wall-tile {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  margin: 0 0 44px;
  padding: 0;
}
@media (max-width: 860px) { .vr-wall-tile { margin-bottom: 34px; } }

/* ── image ── */
.vr-wall-media {
  position: relative;
  display: block;
  width: 100%;
  background: var(--vr-surface-alt, rgba(128,128,128,.08));
  overflow: hidden;
  border-radius: 2px;
}
.vr-wall-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity .35s ease;
}
.vr-wall-media[style*="aspect-ratio"] .vr-wall-img { height: 100%; object-fit: contain; }
.vr-wall-tile.is-loaded .vr-wall-img { opacity: 1; }
.vr-wall-tile.is-loaded .vr-wall-media { background: transparent; }
@media (prefers-reduced-motion: reduce) { .vr-wall-img { transition: none; } }

/* A whisper of lift on hover — no borders, no glow. */
.vr-wall-media::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px -12px rgba(0,0,0,.35);
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .vr-wall-tile:hover .vr-wall-media::after { opacity: 1; }
}

/* Love control (engage.js) — top-right, only on hover on pointer devices,
   always visible on touch since hover does not exist there. */
.vr-wall-love {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  opacity: 0; transition: opacity .2s ease;
}
.vr-wall-tile:hover .vr-wall-love,
.vr-wall-love:focus-within,
.vr-wall-love[data-loved="true"] { opacity: 1; }
@media (hover: none) { .vr-wall-love { opacity: 1; } }

/* ── caption ── */
.vr-wall-cap {
  margin: 12px 2px 0;
  padding: 0;
}
.vr-wall-title {
  display: block;
  font-family: var(--vr-font-heading, 'Playfair Display', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--vr-text);
  text-decoration: none;
}
.vr-wall-title:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.vr-wall-artist {
  margin-top: 3px;
  font-family: var(--vr-font-body, 'DM Sans', system-ui, sans-serif);
  font-size: .86rem;
  color: var(--vr-text-muted);
}
.vr-wall-artist a,
.vr-wall-artist .vr-wall-artist-link {
  color: inherit;
  text-decoration: none;
}
.vr-wall-artist a:hover { color: var(--vr-text); text-decoration: underline; text-underline-offset: 3px; }

.vr-wall-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 8px;
  font-size: .76rem;
  color: var(--vr-text-faint);
}

/* Status token: colours follow the status guide (green / amber / red via the
   brand trust tokens), the same meaning as the card stripe, just quieter. */
.vr-wall-status {
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: .01em;
  white-space: nowrap;
}
.vr-wall-status i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .55;
}
.vr-wall-status--green { color: var(--vr-trust-verified, #1E8E3E); }
.vr-wall-status--amber { color: var(--vr-trust-self, #C07A12); }
.vr-wall-status--red   { color: var(--vr-trust-alert, #C0392B); }
.vr-wall-status--green i, .vr-wall-status--amber i, .vr-wall-status--red i { opacity: 1; }

/* Showcase: quiet "For sale" link to the Marketplace (no price on the Showcase) */
.vr-wall-forsale {
  color: var(--vr-primary, #2E9E4F);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.vr-wall-forsale::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.vr-wall-forsale:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Marketplace: the price row (only the buying surface shows prices) */
.vr-wall-price-row { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.vr-wall-price {
  color: var(--vr-text);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
}
.vr-wall-price:hover { text-decoration: underline; text-underline-offset: 3px; }
.vr-wall-size { font-size: .76rem; color: var(--vr-text-faint); }

/* Marketplace grid in wall mode + the shared view toggle */
#vrMarketGrid[data-view-mode="wall"] { display: block; columns: 3; column-gap: 40px; }
@media (max-width: 1100px) { #vrMarketGrid[data-view-mode="wall"] { column-gap: 28px; } }
@media (max-width: 860px)  { #vrMarketGrid[data-view-mode="wall"] { columns: 2; column-gap: 22px; } }
@media (max-width: 520px)  { #vrMarketGrid[data-view-mode="wall"] { columns: 1; } }
#vrMarketGrid[data-view-mode="wall"] .vr-market-world-divider { column-span: all; }
.vr-mp-topbar-actions .vr-view-toggle-group { display: flex; gap: 3px; align-items: center; }
.vr-mp-topbar-actions .vr-view-toggle-group[hidden] { display: none; }
.vr-mp-topbar-actions .vr-view-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--vr-border, rgba(128,128,128,.25)); background: var(--vr-card, rgba(128,128,128,.06)); color: var(--vr-text, inherit); cursor: pointer; opacity: .55; }
.vr-mp-topbar-actions .vr-view-toggle:hover { opacity: 1; }
.vr-mp-topbar-actions .vr-view-toggle[data-active] { opacity: 1; border-color: var(--vr-primary, #2E9E4F); color: var(--vr-primary, #2E9E4F); }

.vr-wall-room-btn {
  margin-left: auto;
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0;
  font: inherit; font-size: .76rem;
  color: var(--vr-text-muted);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
.vr-wall-room-btn:hover, .vr-wall-room-btn:focus-visible {
  color: var(--vr-text);
  text-decoration-color: currentColor;
  outline: none;
}

/* Story pill in the meta line */
.vr-wall-story-btn {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; font-size: .72rem;
  padding: 3px 10px; border-radius: 999px; line-height: 1.4;
  border: 1px solid var(--vr-border, rgba(128,128,128,.3)); background: transparent; color: var(--vr-text-muted);
  transition: border-color .15s, color .15s;
}
.vr-wall-story-btn:hover, .vr-wall-story-btn:focus-visible { border-color: var(--vr-text); color: var(--vr-text); outline: none; }

/* Story modal: the image with the artist's words beside it */
html.vr-story-open { overflow: hidden; }
.vr-story { position: fixed; inset: 0; z-index: 1200; }
.vr-story[hidden] { display: none; }
.vr-story-backdrop { position: absolute; inset: 0; background: rgba(8,12,10,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vr-story-dialog {
  position: absolute; inset: 24px; margin: auto; max-width: 1240px; max-height: 820px;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  background: var(--vr-bg-elevated, #fff); color: var(--vr-text, #111);
  border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.vr-story-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--vr-border, rgba(128,128,128,.3)); background: var(--vr-card, #fff); color: var(--vr-text, #111); font-size: .9rem; cursor: pointer; font-family: inherit; }
.vr-story-media { background: #14181a; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 28px; }
.vr-story-media img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); }
.vr-story-side { padding: 30px 28px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; font-family: var(--vr-font-body, 'DM Sans', system-ui, sans-serif); }
.vr-story-kicker { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vr-text-faint); }
.vr-story-title { margin: 2px 0 0; font-family: var(--vr-font-heading, 'Playfair Display', Georgia, serif); font-style: italic; font-weight: 400; font-size: 1.5rem; line-height: 1.2; }
.vr-story-artist { margin: 0 0 8px; font-size: .9rem; color: var(--vr-text-muted); }
.vr-story-text { font-size: .95rem; line-height: 1.6; }
.vr-story-text p { margin: 0 0 12px; }
.vr-story-open { margin-top: auto; text-align: center; text-decoration: none; }
@media (max-width: 860px) {
  .vr-story-dialog { inset: 0; max-width: none; max-height: none; border-radius: 0; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .vr-story-media { padding: 12px; min-height: 40vh; }
  .vr-story-side { max-height: 55vh; padding: 18px; }
}

/* Hide the "N" loading / pager chrome shifts inside the column flow. */
.vr-main-showcase[data-view-mode="wall"] .vr-showcase-skeleton { display: none; }