/* ==========================================================================
   Collection pages — /work/<id>/
   ========================================================================== */

.collection-head {
  padding-top: calc(var(--header-h) + clamp(28px, 5vw, 60px));
  padding-bottom: clamp(28px, 4vw, 52px);
  display: grid; grid-template-columns: 1fr minmax(0, 480px);
  gap: clamp(20px, 4vw, 60px); align-items: end;
  border-bottom: 1px solid var(--line);
}
.collection-head h1 {
  font: 700 var(--step-h2)/0.9 var(--font-display);
  text-transform: uppercase; letter-spacing: -0.01em; margin-top: 12px;
}
.collection-head .intro { color: var(--muted); }
.collection-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; }

.back-link {
  display: inline-grid; grid-auto-flow: column; align-items: center; gap: 9px;
  min-height: 44px; color: var(--gold);
  font: 500 var(--step-label)/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
}
.back-link:hover { color: var(--bright-gold); }

/* ---- gallery ---- */
.gallery {
  display: grid; gap: clamp(10px, 1.2vw, 18px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  padding-block: clamp(30px, 4vw, 56px);
}
.gallery-card {
  position: relative; display: block; width: 100%;
  border: 1px solid var(--line); background: var(--charcoal);
  cursor: pointer; text-align: left; overflow: hidden;
  transition: border-color var(--dur) var(--ease-out);
}
.gallery-card:hover, .gallery-card:focus-visible { border-color: var(--gold); }
.gallery-figure { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.gallery-figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
/* Collections marked "fit": "contain" in the content file — book covers,
   logos, banners — show the whole piece on a tinted ground instead of
   being cropped to fill the tile. */
.gallery.is-contain .gallery-figure { aspect-ratio: 1 / 1; background: #100f0d; }
.gallery.is-contain .gallery-figure img { object-fit: contain; padding: 9px; }
.gallery.is-contain .gallery-card:hover .gallery-figure img { transform: scale(1.02); }
.gallery-card:hover .gallery-figure img { transform: scale(1.04); }
.gallery-body { padding: 13px 14px 15px; display: grid; gap: 4px; }
.gallery-body strong {
  font: 600 clamp(15px, 1.1vw, 18px)/1.25 var(--font-body); color: var(--white);
}
.gallery-body span { color: var(--muted); font: 400 var(--step-label)/1.4 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase; }
.gallery-action {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 7px 10px; background: #070606cc; color: var(--gold);
  font: 500 var(--step-label)/1 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.gallery-card:hover .gallery-action,
.gallery-card:focus-visible .gallery-action { opacity: 1; transform: translateY(0); }
/* Touch devices never hover. Show a small corner glyph instead of the full
   label, so 37 tiles don't shout the same sentence 37 times. */
@media (hover: none) {
  .gallery-action { opacity: 1; transform: none; font-size: 0; padding: 8px; }
  .gallery-action::after { content: "⤢"; font-size: 13px; }
}

/* ---- restoration comparisons ---- */
.restoration-grid {
  display: grid; gap: clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  padding-block: clamp(30px, 4vw, 56px);
}
.restoration-card { display: grid; gap: 12px; }
/* aspect-ratio is set inline per photograph by the build */
.restoration-card h2 { font: 600 var(--step-h3)/1.1 var(--font-display); text-transform: uppercase; }
.restoration-card p { color: var(--muted); }

/* ---- next/previous collection ---- */
.collection-foot {
  border-top: 1px solid var(--line); padding-block: clamp(30px, 4vw, 54px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 20px);
}

/* Each side is its own card: an obvious direction arrow, a small "Previous
   collection" / "Next collection" label, and the destination's name. The
   arrow leads on the previous card and trails on the next card, so the
   layout itself points the way you're about to travel. */
.foot-link {
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 22px);
  min-height: 44px; padding: clamp(16px, 2.2vw, 24px);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.foot-link:hover, .foot-link:focus-visible { border-color: var(--gold); background: var(--charcoal); }
.foot-link.is-next { justify-content: flex-end; text-align: right; }

.foot-arrow {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: clamp(40px, 4vw, 52px); height: clamp(40px, 4vw, 52px);
  border: 1px solid var(--line-strong); border-radius: 50%;
  font-size: clamp(18px, 1.8vw, 22px); color: var(--gold);
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.foot-link:hover .foot-arrow, .foot-link:focus-visible .foot-arrow {
  background: var(--gold); color: var(--ink); border-color: var(--gold);
}
.is-prev:hover .foot-arrow, .is-prev:focus-visible .foot-arrow { transform: translateX(-4px); }
.is-next:hover .foot-arrow, .is-next:focus-visible .foot-arrow { transform: translateX(4px); }

.foot-text { display: grid; gap: 5px; min-width: 0; }
.foot-text strong {
  font: 600 var(--step-h3)/1.1 var(--font-display);
  text-transform: uppercase; color: var(--cream);
  transition: color var(--dur) var(--ease-out);
}
.foot-link:hover .foot-text strong, .foot-link:focus-visible .foot-text strong { color: var(--gold); }

@media (max-width: 640px) {
  .collection-foot { grid-template-columns: 1fr; }
  .foot-link.is-next { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
}

@media (max-width: 800px) {
  .collection-head { grid-template-columns: 1fr; align-items: start; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
}