/* ==========================================================================
   work.css — "The Work" gallery section (section CSS, loaded on index only).
   Ported from the preview's §7 THE WORK (#work / .gallery / .tile).

   PLACEHOLDERS: the .tile gradients are intentional stand-ins, NOT final art.
   They demonstrate the warm-dark candlelit GRADE that Ariel's real healed-work
   photos will sit in. Do not ship these as final — swap in curated, healed,
   rights-cleared images (AVIF+WebP) when they land (BLINDFOLD.md §5/§9).

   NO global redefs here — .section-head/.eyebrow live in base.css, .reveal in
   reveal.css.
   ========================================================================== */

#work {
  padding-block: clamp(4.5rem, 9vw, 9rem);
  position: relative;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1rem);
}
@media (max-width: 900px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tile {
  aspect-ratio: 3 / 4;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--veil);
  /* the warm-dark candlelit grade — gold highlight upper-left over dark base.
     Stand-in for healed work; demonstrates the grade real photos will sit in. */
  background:
    radial-gradient(120% 90% at 30% 18%, rgba(232, 178, 89, 0.10), transparent 55%),
    linear-gradient(160deg, #221a12, #100d0a 75%);
}
.tile.tall {
  grid-row: span 2;
  aspect-ratio: 3 / 5;
}

/* real work fills the tile (the gradient above stays as a fallback) */
.tile picture {
  display: block;
  width: 100%;
  height: 100%;
}
.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* bottom scrim so the label stays legible over a photo */
.tile::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  pointer-events: none;
  z-index: 1;
}

.tile .lbl {
  position: absolute;
  left: 10px;
  bottom: 9px;
  z-index: 2;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.tile .grade {
  position: absolute;
  right: 9px;
  top: 9px;
  z-index: 2;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grace);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}