/* Structural styles for the content architecture templates (Subject/Project
   index and single views). Uses only existing design tokens — no new colors,
   fonts, or effects introduced. */

.subject-index__list,
.project-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
}

@media (min-width: 768px) {
  .project-index__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-64);
  }
}

.subject-index__item a,
.project-index__item a {
  display: block;
}

.project-index__title {
  display: block;
  margin-top: var(--space-16);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
}

.subject-header,
.project__header {
  padding-top: var(--space-64);
  padding-bottom: var(--space-48);
}

.project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-top: var(--space-16);
  font-size: var(--nav-font-size);
  color: var(--color-text-muted);
}

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

.project__statement {
  max-width: var(--measure-text);
}

.project__footer {
  padding-bottom: var(--space-96);
  color: var(--color-text-muted);
  font-size: var(--nav-font-size);
}

.photograph__caption {
  margin-top: var(--space-16);
}

.photograph__back {
  margin-top: var(--space-32);
  font-size: var(--nav-font-size);
}

/* Generic content Pages (About, Contact, and any future simple editorial
   Page using the default page.php template) - same restrained structure
   as every other template's own header: explicit top padding since
   headings/body carry no default margin. The optional Featured Image
   (About only) reuses the existing image-gap-work utility (layout.css)
   rather than a new spacing rule. */
.content-page {
  padding-top: var(--space-64);
  padding-bottom: var(--space-96);
}

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

/* PROJECTS index (page-projects.php) - a quiet table of contents into the
   Subject hierarchy, not a portfolio grid. Same top/bottom padding tier as
   every other page-opening header on the site; the title itself gets no
   font override (bare h1, same restrained treatment page.php/page-subject.php/
   single-project.php already use) - only the spacing before the list. */
.subject-index {
  padding-top: var(--space-64);
  padding-bottom: var(--space-96);
}

.subject-index__title {
  margin-bottom: var(--space-48);
}

/* Sidebar (quiet text list) + image grid, side by side - uses the site's
   existing 12-column .grid (layout.css) rather than a new layout system.
   Below 768px .grid is already a single column, so the two stack in
   document order (sidebar, then grid) with no extra rule needed here. */
@media (min-width: 768px) {
  .subject-index__sidebar {
    grid-column: span 2;
  }

  .subject-index__content {
    grid-column: span 10;
    display: flex;
    justify-content: center;
  }
}

/* The shared grid's own standalone padding (gallery.css: --space-256 at
   >=1024px) was sized for the homepage's full site-container width - inside
   this narrower 10-column area it left almost nothing for the actual
   photographs (112px columns vs the homepage's own 272px). Scoped to only
   this one instance (the homepage itself, and every Project page, keep
   their own unmodified padding) - a smaller, still-existing padding tier
   (--space-64, already used at gallery.css's own tablet breakpoint) frees
   up enough width for images closer to the homepage's own size, and
   max-width + the flex centering above keeps the whole composition
   centered in the page rather than stretched edge-to-edge or pinned to the
   sidebar. */
@media (min-width: 1024px) {
  .subject-index__content .homepage-index {
    width: 100%;
    max-width: 850px;
    padding-left: var(--space-64);
    padding-right: var(--space-64);
  }
}

.subject-index__sidebar .subject-index__list + .subject-index__list {
  margin-top: var(--space-48);
}

/* Comfortable tap area for each Subject link without inflating the type -
   16px top/bottom padding on a 16px/1.5 line box clears the 44px touch-
   target minimum, matching the standard already used elsewhere on this
   site (Single Print's size buttons, lightbox controls). */
.subject-index__item a {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}