/* ==========================================================================
   Spotlight Wall — "gallery at night"
   A dark, grayscale wall of artworks; a round spotlight (cursor / drift)
   reveals full colour & brightness within its beam.

   Two identical stacked grids:
   - .spotlight-wall__base  : dark + grayscale, defines the height (in flow)
   - .spotlight-wall__light : full colour, masked by a radial gradient at the beam

   Default (no .sw-ready): the light layer shows in full colour with no mask,
   i.e. a clean, accessible colour wall (no-JS / reduced-motion fallback).
   ========================================================================== */

.spotlight-wall {
    --sw-cols: 4;
    --sw-gap: 14px;
    --sw-radius: 190px;
    --sw-soft: 50%;
    --sw-dim: 0.42;
    --sw-gray: 1;
    --sw-pad-y: 6vh;
    --sw-pad-x: clamp(16px, 4vw, 60px);
    width: 100%;
}

.spotlight-wall__stage {
    position: relative;
    overflow: hidden;
    padding: var(--sw-pad-y) var(--sw-pad-x);
    background-color: #141414;
}

/* Subtle vignette for the "after hours" mood (sits above the dark base,
   below the light beam, so the beam itself stays clean) */
.spotlight-wall__stage::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(130% 130% at 50% 38%, transparent 52%, rgba(0, 0, 0, 0.45) 100%);
}

.spotlight-wall__grid {
    display: grid;
    grid-template-columns: repeat(var(--sw-cols), 1fr);
    gap: var(--sw-gap);
}

.spotlight-wall__base {
    position: relative;
    z-index: 1;
}

.spotlight-wall__light {
    position: absolute;
    top: var(--sw-pad-y);
    bottom: var(--sw-pad-y);
    left: var(--sw-pad-x);
    right: var(--sw-pad-x);
    z-index: 3;
}

/* Items */
.sw-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    text-decoration: none;
    color: inherit;
}

.sw-item__img {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* The base layer is decorative only */
.spotlight-wall__base .sw-item { pointer-events: none; }
.spotlight-wall__base .sw-item__cap { display: none; }

/* Caption (lives in the light layer) */
.sw-item__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.sw-cap-title {
    font-family: 'Frank Ruhl Libre', 'David Libre', Georgia, 'Times New Roman', serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}

.sw-cap-sub,
.sw-cap-dim {
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #b9b4ad;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}

.spotlight-wall__light .sw-item:hover .sw-item__cap,
.spotlight-wall__light .sw-item.sw-lit .sw-item__cap {
    opacity: 1;
}

.sw-empty {
    padding: 20px;
    color: #b9b4ad;
    text-align: center;
    background: #141414;
}

/* --------------------------------------------------- Active (JS + motion OK) */
.spotlight-wall.sw-ready .spotlight-wall__base .sw-item__img {
    filter: grayscale(var(--sw-gray)) brightness(var(--sw-dim));
}

/* The beam mask itself is set from JS (the full mask-image string is written
   each frame — updating a custom property inside mask-image does not reliably
   repaint the mask in Chromium). --sw-radius / --sw-soft are read by the script. */

/* ------------------------------------------------------------------ Responsive */
@media (max-width: 768px) {
    .spotlight-wall .spotlight-wall__grid { grid-template-columns: repeat(3, 1fr); }
    .spotlight-wall { --sw-pad-y: 4vh; }
}

@media (max-width: 480px) {
    .spotlight-wall .spotlight-wall__grid { grid-template-columns: repeat(2, 1fr); }
}