/* ============================================================================
   exhibitions-mosaic.css — the "Exhibition views" contact-sheet mosaic.

   SHARED, single source of truth for the mosaic's look, loaded by BOTH:
     - portfolio/index.html (the live site, via the pictures/ symlink), and
     - admin/index.html (the CMS live preview, via ../pictures/),
   so the admin preview can never drift from what the site renders.

   A compact mosaic of in-situ photos; a few `.is-featured` tiles span 2×2 so the
   eye lands on them, the rest stay small. Scales to ~20+ without growing tall.
   Captions surface on hover/focus (and, on the site, in the lightbox), so the
   grid itself stays quiet.

   Tokens (with fallbacks) are provided by whoever loads this: the site's :root,
   or the admin's `.exc-preview` wrapper. The lightbox (.ex-lb*) is site-only and
   stays inline in portfolio/index.html — it is not part of the shared mosaic.
   ============================================================================ */

.cv-views{margin-top:clamp(42px,6vh,66px);padding-top:clamp(30px,4.5vh,46px);border-top:1px solid var(--line,#C2C2BB);}
.cv-views .lab{font-family:var(--sans,system-ui,sans-serif);font-weight:600;font-size:13px;letter-spacing:0.01em;color:var(--pull,#2B4576);margin-bottom:18px;}
.cv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:clamp(132px,15.5vw,184px);grid-auto-flow:dense;gap:clamp(10px,1.1vw,15px);}
.cv-view{position:relative;display:block;width:100%;overflow:hidden;background:var(--mat,#F4F4F2);cursor:zoom-in;appearance:none;-webkit-appearance:none;border:0;margin:0;padding:0;font:inherit;color:inherit;text-align:left;}
.cv-view.is-featured{grid-column:span 2;grid-row:span 2;}
.cv-view img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.16,1,.3,1);}
.cv-view:hover img{transform:scale(1.045);}
.cv-view .cap{position:absolute;inset:auto 0 0 0;padding:22px 12px 9px;font-family:var(--sans,system-ui,sans-serif);font-size:11.5px;font-weight:600;line-height:1.32;letter-spacing:0.02em;color:#F4F1E8;
  background:linear-gradient(to top,rgba(12,11,8,0.74),rgba(12,11,8,0));opacity:0;transition:opacity .3s ease;pointer-events:none;}
.cv-view:hover .cap,.cv-view:focus-visible .cap{opacity:1;}
.cv-view:focus-visible{outline:3px solid var(--pull,#2B4576);outline-offset:3px;}

/* Missing-image fallback (mirrors the site's other holders). */
.cv-view.is-missing::after{content:attr(data-missing-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:22px;text-align:center;font-family:var(--sans,system-ui,sans-serif);font-size:12px;line-height:1.45;letter-spacing:0.02em;color:var(--ink2,#544E42);background:var(--mat,#F4F4F2);}

@media (max-width:560px){
  .cv-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-auto-rows:clamp(118px,30vw,156px);}
}

@media (prefers-reduced-motion: reduce){
  .cv-view img{transition:none;}
}