/* Subject Pages - a quiet editorial index of a Subject's Projects.
 *
 * Exclusively for the 8 Subject Pages (page-subject.php). The legacy
 * taxonomy archive (taxonomy-subject.php) keeps its own existing
 * .project-index__* classes in content.css, untouched, on purpose - this
 * file never touches those. The homepage's masonry (gallery.css) is
 * locked and shares nothing with this file either.
 *
 * Same visual vocabulary as the rest of the site - restraint, generous
 * whitespace, no cards/borders/shadows/hover chrome - achieved through
 * the SAME existing design tokens (tokens.css), not a second spacing
 * system and not new tokens.
 *
 * One Project per "beat": its Featured Image, title, then date/location -
 * all in a single column, generously separated. The Featured Image is
 * sized exactly like the Project lightbox's own image (.project-lightbox
 * __image / --landscape, project-page.css) and centered - large and
 * prominent, matching how the same photograph reads once you actually
 * open the lightbox, rather than a small preview of it.
 */

.subject-page__header {
  padding-top: var(--space-64);
  padding-bottom: var(--space-96);
}

.subject-page__intro {
  margin-top: var(--space-24);
  max-width: var(--measure-text);
}

.subject-page__projects {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-bottom: var(--space-192);
}

/* The generous vertical separation between Projects - the same large
   spacing tier the homepage index uses between its own rows, so the
   Subject Page reads as a continuation of that rhythm, not a break from
   it. Applied between items (not as a bottom margin on every item) so it
   never adds trailing space after the last Project. */
.subject-page__project + .subject-page__project {
  margin-top: var(--space-192);
}

.subject-page__project-link {
  display: block;
}

/* The cover: centered (text-align, since the image below is inline-block -
   an image narrower than its column has no other axis to center on), no
   leading gap of its own (.subject-page__project + .subject-page__project
   already supplies the space before it). */
.subject-page__project-cover {
  display: block;
  text-align: center;
}

/* Same size as the Project lightbox's own portrait image (project-page.css)
   - this is the default/fallback; --landscape below matches the lightbox's
   own landscape variant instead, same as project-lightbox.js picks between
   the two there. object-fit:contain preserves native ratio - never
   cropped or stretched. */
.subject-page__project-cover-image {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
}

.subject-page__project-cover-image--landscape {
  max-width: 81vw;
  max-height: 76.5vh;
}

.subject-page__project-caption {
  display: block;
  margin-top: var(--space-16);
}

/* Same quiet caption idiom already used for the homepage's own Subject
   labels and the site's nav links - reused, not reinvented. */
.subject-page__project-title {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text);
}

/* Date/location - no labels (none exist in the design system for this),
   just the values themselves, visually subordinate to the title above. */
.subject-page__project-details {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  color: var(--color-text-muted);
}

.subject-page__empty {
  padding-bottom: var(--space-192);
}