/* Shared photographic grid - two explicit columns, not CSS multi-column,
 * because left/right pairs need to share a row (so the shorter image
 * centers against the taller one) - multi-column auto-flow can't express
 * that relationship.
 *
 * Originally built for the homepage Subject index; every Project page's own
 * photograph sequence now reuses this exact same system (same markup shape,
 * same classes) via template-parts/photographic-grid.php, rather than a
 * second copy - see that file for how the two contexts differ (Subject-Page
 * links vs. lightbox triggers, labels vs. none). The ".homepage-index"
 * class names predate that reuse and are kept as-is rather than renamed.
 *
 * Uses an explicit 3-track grid (column / gutter / column) rather than the
 * sitewide 12-column system, so the middle gutter is one exact, controlled
 * spacing token and both columns automatically get the width that's left
 * over - a direct, precise relationship rather than skipping N of 12 tracks.
 * The grid's own start/end still line up with .site-container's padding,
 * same as the homepage hero image, so both column's outer edges always
 * align with the hero's edges regardless of viewport width.
 *
 * Column widths are fixed by the grid; each image's HEIGHT comes entirely
 * from its own natural aspect ratio (never cropped) - that's what creates
 * the masonry stagger, not an authored width sequence.
 *
 * No borders, no card backgrounds, no hover overlays. Labels (homepage only
 * - see photographic-grid.php) are visible, quiet text below each
 * photograph, never overlaid on it.
 */

.homepage-index {
  /* A full "major transition" spacing unit below the hero - a clearly
     bigger pause than the rest of the site uses elsewhere for this kind of
     transition, since the hero here leads into a whole second composition. */
  margin-top: var(--space-192);
  margin-bottom: var(--space-192);
  display: grid;
  /* Middle gutter is an explicit spacing token, not derived from skipped
     grid tracks - narrower than before, which is also what lets both
     columns (and the landscape images filling them) grow wider. */
  grid-template-columns: 1fr var(--space-192) 1fr;
  /* The large, deliberate gap between one row and the next - this, not a
     bigger row-gap on a dense grid, is what creates the composition's
     negative space. */
  row-gap: var(--space-192);
  /* Left/right items in the same row share that row's height (the taller
     of the two) - centering both within it is what makes a shorter
     landscape sit centered against its taller portrait pair, automatically,
     for any pair of image sizes. This replaces an earlier fixed 192px
     downward offset on the right column: the vertical rhythm between rows
     is now driven entirely by each row's own content, not an authored
     offset value. */
  align-items: center;
}

.homepage-index__item {
  display: block;
}

.homepage-index__item--left {
  grid-column: 1;
}

.homepage-index__item--right {
  grid-column: 3;
}

.homepage-index__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* Desktop only (see mobile override below - mobile keeps full-width images
   in its single considered column, this narrowing is specific to the
   two-column desktop composition). Portrait images are narrowed to 70% -
   at full column width a portrait's height would dwarf its landscape
   neighbors. Landscape images exceed the column - 115% of it - so they
   read with comparable visual weight/prominence to the narrower, taller
   portraits beside them, despite their much shorter aspect ratio.
   Images sit flush against their column's OUTER edge (the edge that lines
   up with the hero) - never past it, that alignment is fixed - and any
   extra width (leftover column space for portraits, the 15% overflow for
   landscapes) goes entirely to the INNER, gutter-facing side. The label's
   text-align matches the same side so it stays a matched unit with its
   image. These proportions (70%/115%/label alignment) hold at every width
   in the two-column range (>=768px) - only the surrounding padding/gutter
   change with viewport, in the two tiers below. */
@media (min-width: 768px) {
  .homepage-index__item--portrait img {
    width: 70%;
  }

  .homepage-index__item--landscape img {
    width: 115%;
    /* A sitewide `img { max-width: 100% }` reset would otherwise cap this
       back down to the column width and silently defeat the rule above. */
    max-width: 115%;
  }

  .homepage-index__item--left img {
    margin-left: 0;
    margin-right: auto;
  }

  .homepage-index__item--left .homepage-index__label {
    text-align: left;
  }

  .homepage-index__item--right img {
    margin-left: auto;
    margin-right: 0;
  }

  .homepage-index__item--right .homepage-index__label {
    text-align: right;
  }

  /* Auto margins resolve to 0 once a box overflows its container (they
     can't go negative) - for the right column's landscape images that
     would let the overflow grow toward the OUTER/hero-aligned edge
     instead of away from it. An explicit negative margin overrides the
     rule above and directs the overflow inward instead. The left column
     needs no equivalent override: its margin-left:0 already pins the
     outer edge, so the overflow naturally lands on the inner side. */
  .homepage-index__item--right.homepage-index__item--landscape img {
    margin-left: -15%;
  }
}

/* Tablet tier (768-1023px) - a narrower padding/gutter pairing than the
   desktop tier below. At this width, the desktop tier's own 256px padding
   plus 192px gutter can consume more space than is available at all,
   which - confirmed by direct testing while building the shared Project
   grid this same system now also drives - collapses both columns to zero
   width rather than merely looking cramped. This tier keeps the identical
   two-column composition (same 70%/115% proportions, same alternating
   sides, same portrait/landscape relationship) working at every width in
   this range: comfortably positive, never collapsed, never overflowing
   the viewport. 1024px and up are untouched by this tier, so the already-
   approved appearance from 1024px through desktop is unaffected. */
@media (min-width: 768px) and (max-width: 1023px) {
  .homepage-index {
    padding-left: var(--space-64);
    padding-right: var(--space-64);
    grid-template-columns: 1fr var(--space-96) 1fr;
  }
}

/* Desktop tier (1024px and up) - the original padding/gutter, unchanged.
   This is the exact rule that used to apply from 768px up; narrowing its
   own range to 1024px+ (with the tablet tier above taking 768-1023px) is
   the only change here - the values themselves, and everything from
   1024px through the approved 1440px+ desktop appearance, are identical
   to before. */
@media (min-width: 1024px) {
  .homepage-index {
    padding-left: var(--space-256);
    padding-right: var(--space-256);
  }
}

/* Homepage only: match the standard individual Project gallery's rendered
   size (e.g. /industrial/) - NOT the smaller /projects/ overview grid.
   This is a direct reuse of project-page.css's own .project__gallery-frame
   pattern (max-width:952px, margin:auto, and zeroing this element's own
   internal padding so it doesn't stack with the wrapper's sizing) rather
   than a new, invented value - same numbers, same technique, just scoped
   to body.home (WordPress's own front-page body class) instead of
   .project__gallery-frame. The homepage's .homepage-index sits directly in
   .site-container exactly like a standard Project page's gallery does (no
   sidebar layer, unlike /projects/), so this produces an identical
   computed width at every viewport with no extra arithmetic needed. Not
   scoped to a media query, matching .project__gallery-frame's own
   unconditional rule - harmless below 768px since mobile's own block
   layout is already narrower than 952px and already has no padding here.
   Every other page's .homepage-index (Projects, every Project page,
   PORTRAITS/LINES/ARTBOX which use a different template) is unaffected. */
body.home .homepage-index {
  max-width: 952px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.homepage-index__label {
  display: block;
  margin-top: var(--space-16);
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  /* Brighter than the nav's muted color - these captions sit under large
     photographs, not in a compact nav bar, so the primary text color reads
     better against that scale. */
  color: var(--color-text);
}

/* Mobile: a deliberately designed single sequence, not the desktop
   composition scaled down - the two-column pairing doesn't translate to a
   narrow viewport, so it's dropped entirely in favor of one considered,
   generously-spaced column. Natural DOM order (subject_order, alternating
   left/right in the markup) is what keeps this sequence coherent - see
   the template. */
@media (max-width: 767px) {
  .homepage-index {
    display: block;
  }

  .homepage-index__item {
    margin-bottom: var(--space-96);
  }

  .homepage-index__item:last-child {
    margin-bottom: 0;
  }
}