/* ==========================================================================
   AstroChris — collections.css
   Loaded on /collections and /collections/:slug, after main.css
   (via buildHead({ extraCss })).

   Everything main.css already provides is reused as-is: .container, .section,
   .photo-grid, .card and its parts, .panel, .chip, .prose, .lede, .page-title,
   .eyebrow, .breadcrumbs, .empty and the utilities. This file adds only what
   does not exist there:

     1. The index header block
     2. The collection-card variant (a shelf card, not a capture card)
     3. The empty cover placeholder
     4. The intro prose block
     5. The per-photo note and the object cross-link inside a member card
     6. The page footer links

   Tokens only — no literal colours. See DESIGN.md §9.
   ========================================================================== */

/* ---------------------------------------------------- 1. Index header block */

.collection-index__head,
.collection-head {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-lg);
}

.collection-head__meta {
  margin-top: var(--space-2xs);
}

/* -------------------------------------------------- 2. Collection-card variant */
/* A shelf card summarises a whole set, so it leads with a wider crop than a
   capture card and gives the summary room to breathe. */

.card--collection .card__media {
  aspect-ratio: 16 / 9;
}

.card--collection .card__body {
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-sm) var(--space-md);
}

.card--collection .card__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
}

/* The member count reads as a label, not as capture metadata. */
.card--collection .card__meta {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--step--1);
}

/* -------------------------------------------------- 3. Empty cover placeholder */
/* A collection whose cover is unset and whose members are all drafts still has
   to occupy the same grid cell as its neighbours. */

.card__media--empty {
  display: block;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(80% 60% at 50% 20%, rgba(58, 78, 130, 0.28), transparent 70%),
    var(--bg-deep);
}

.card--capture .card__media--empty {
  aspect-ratio: 4 / 3;
}

/* ----------------------------------------------------- 4. The intro prose block */
/* .prose already caps its measure at 40rem; this adds the vertical separation
   between the header, the intro and the capture grid that a long-form intro
   needs, and keeps an embedded {{photo:}} figure from touching the grid. */

.collection-intro {
  margin-bottom: var(--space-xl);
}

.collection-intro > :first-child {
  margin-top: 0;
}

.collection-intro > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------- 5. Per-photo note + object link */
/* The curator's annotation for one capture, inside that capture's card. Plain
   text rendered server-side through esc() — never markdown. */

.collection-note {
  margin-top: var(--space-3xs);
  padding-left: var(--space-2xs);
  border-left: 2px solid var(--accent-line);
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.collection-note p {
  margin: 0;
}

.collection-note p + p {
  margin-top: var(--space-3xs);
}

/* .card__title a::after stretches the title link across the whole card, which
   would otherwise swallow this second link. Lift it above that overlay. */
.collection-card__links {
  position: relative;
  z-index: 1;
  margin: var(--space-3xs) 0 0;
  font-size: var(--step--1);
}

.collection-card__links a {
  color: var(--text-dim);
  text-decoration: none;
}

.collection-card__links a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ------------------------------------------------------- 6. Page footer links */

.collection-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.collection-foot a {
  color: var(--text-muted);
}

.collection-foot a:hover {
  color: var(--accent);
}