/* MxTra - an isolated, new layout (templates/project-mxtra.php only).
 *
 * Deliberately NOT built on gallery.css's .homepage-index two-column
 * system - the visual reference this matches (title+year row, a nearly
 * full-width elongated Featured Image, then a dense 5-column contact-sheet
 * grid) is a different composition, not a variant of the approved one.
 * Nothing in this file touches .homepage-index, .project__header,
 * .project__back-link, or any other existing selector - it only defines
 * new .mxtra__* classes, so it cannot affect any other page. Uses the same
 * existing design tokens (tokens.css) throughout - no new colors, fonts, or
 * spacing values invented.
 */

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

.mxtra__back-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  color: var(--color-text-muted);
}

.mxtra__back-link:hover {
  opacity: 0.7;
}

/* The bottom back-link mirrors the top one (.mxtra__starting has no rule of
   its own - it's the page's first element, .mxtra__header's own top
   padding already separates it from the title). This one needs its own
   top spacing since it follows the grid directly - the same --space-48
   gap the grid's own margin-top already uses elsewhere on this page, for
   a consistent, even rhythm. */
.mxtra__ending {
  margin-top: var(--space-48);
}

/* Title (left) and year (right) on one row - the one piece of this page
   that isn't just reused from an existing rule, since no existing header
   places a second element on the opposite side of the title. Still reuses
   .project__header's own padding-top/bottom (content.css) and its h1's
   font-size/line-height (project-page.css) via the second class in the
   markup - only the flex arrangement itself is new. */
.mxtra__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
}

.mxtra__year {
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* The Featured Image - the same rule as the homepage's own hero photograph
   and every other Project's Featured Image (.project__featured-image img,
   project-page.css / .editorial-opening__image img, layout.css): full
   content width (100% of .site-container, same as the grid below it, so
   both share one outer edge-to-edge width), native aspect ratio, capped at
   85vh so a portrait photo never forces excessive scrolling. object-fit:
   contain only ever letterboxes within that cap - it cannot crop. */
.mxtra__featured {
  display: block;
  width: 100%;
}

.mxtra__featured img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: contain;
}

/* The dense contact-sheet grid: exactly 5 equal columns at this width, a
   narrow, consistent gap (the smallest existing spacing token). Plain CSS
   Grid (not a masonry/columns layout) so photographs read left-to-right,
   row by row, in the same order they open in the lightbox - a masonry
   layout would reflow top-to-bottom per column instead, breaking that
   match. */
.mxtra__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-48);
}

.mxtra__grid-item {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  appearance: none;
  -webkit-appearance: none;
}

/* Every cell the same fixed size regardless of that photograph's own native
   ratio - a real contact sheet's uniform frames, not a masonry stagger.
   object-fit:cover fills the frame without distorting the image (crops
   only what doesn't fit, never stretches); 4/3 is a plain, common print/
   contact-sheet ratio, not derived from any specific photograph here. */
.mxtra__grid-item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Mobile: five columns has no room to breathe on a narrow viewport - drop
   to two, the same reasoning gallery.css's own mobile tier uses (a
   deliberately different, simpler composition rather than a scaled-down
   version of the desktop one). */
@media (max-width: 767px) {
  .mxtra__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  .mxtra__header {
    flex-wrap: wrap;
  }
}