/* =============================================================
   FIX PARTIAL — Collection detail page (collection.html)
   Owned by the "collection-detail" agent. Loaded AFTER app.css so
   rules here override. Keep ONLY collection-viewer layout here.
   (May be folded back into app.css during integration.)

   GOAL: match the old Squarespace gallery — the painting is the
   hero, sitting HIGH on the screen right under the nav, large and
   centred, with lots of clean negative space. No tall title block
   eating the top ~40% of the viewport.
   ============================================================= */

/* ---- Compact collection label ----------------------------------
   Was a big standalone title block (eyebrow + giant H1 + back link)
   that pushed the first painting far down. Now a single low-profile
   line tucked just under the nav. It takes almost no vertical space,
   so the first work rises to the top of the viewport. */
.collection__header {
  /* tight: sit immediately under the fixed nav, minimal footprint */
  padding: calc(var(--nav-h) + clamp(10px, 2vh, 20px)) var(--gut) 0;
  max-width: var(--maxw);
  margin: 0 auto;
}

.collection__title {
  margin: 0;
  /* small, quiet, tracked-out label — NOT a display headline */
  font-size: 12.5px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-2);
  display: flex;
  align-items: baseline;
  gap: 0.7em;
}
.collection__eyebrow {
  display: inline;            /* override app.css display:block so it sits inline in the flex H1 */
  color: var(--gold);
  letter-spacing: 0.22em;
}

/* ---- One work per screen: painting sits HIGH, not floating mid-screen ----
   The header is now tiny, so the first work begins right under it. We pin
   the work content to the TOP of its block (instead of vertical-centring)
   so the painting's top edge sits near the nav, like Squarespace. */
.collection__work {
  /* Fit each painting + caption with a CONSISTENT comfortable gap, instead of
     reserving a full empty screen per work — that left a big VOID under wide/short
     paintings (e.g. the Constellations panorama only fills a third of a screen).
     The gap between works is now just the top+bottom padding, even for every aspect. */
  min-height: 0;
  align-content: center;
  align-items: center;
  padding: clamp(46px, 8.5vh, 104px) var(--gut);
}
/* first work sits high-ish under the compact label (not jammed at the very top) */
.collection__header + .collection__work {
  padding-top: clamp(18px, 3.5vh, 46px);
}

/* Bigger hero image now that the top chrome is gone — fill the freed space. */
.collection__frame,
.collection__frame img {
  max-width: min(90vw, 1040px);
}
.collection__frame img {
  max-height: 82vh;
}

/* ---- Tiny, unobtrusive index counter (kept; just made quieter) ---- */
.collection__index {
  top: calc(var(--nav-h) + clamp(10px, 2vh, 20px));
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--bone-dim);
  opacity: 0.75;
}
/* avoid the counter colliding with the compact label on the first work */
.collection__header + .collection__work .collection__index {
  top: clamp(6px, 1.2vh, 14px);
}

/* ---- Empty state (mudi / sjalf): center it under the compact label ---- */
.collection__empty {
  min-height: calc(82svh - var(--nav-h));
}

@media (max-width: 760px) {
  .collection__frame,
  .collection__frame img { max-width: 92vw; }
  .collection__frame img { max-height: 70vh; }
  .collection__header + .collection__work {
    min-height: calc(100svh - var(--nav-h) - 36px);
  }
}

/* ---- Caption rhythm: give the price / "Sold" line room to breathe under
   the painting title instead of sitting tight against it (was 0.5rem). ---- */
.collection__price { margin-top: 1.1rem; }

/* ---- "Prints available" tag ------------------------------------
   Small, quiet, tracked-out line with a subtle gold accent. Only
   rendered when the work has prints for sale (gated on w.prints in
   collection.js), so works without prints show nothing. Sits just
   under the title, above the price / "Sold" line. Explicit warm gold
   (kept in sync with --gold) so it never inverts under the white theme. */
.collection__prints {
  margin-top: 0.7rem;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  /* v29 sc2: force the tag onto its OWN line under the title (centred), so it sits
     under the name for every work — including archive works like Álfheimur that have
     no price/Sold line after it (previously it ran inline with "View this work"). */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}
/* tiny gold dot to set the tag off, elegant and unobtrusive */
.collection__prints::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
/* when a prints tag precedes the price/Sold line, tighten that gap a touch
   so the two stack as a tidy pair rather than drifting apart */
.collection__prints + .collection__price { margin-top: 0.55rem; }