/* Individual Project page - editorial, photography-led presentation, plus the
 * minimal lightbox overlay for its own photograph sequence.
 *
 * Exclusively for single Project views (single-project.php, enqueued only when
 * is_singular('project')). The Featured Image is sized exactly like the
 * homepage's own hero photograph (.editorial-opening__image img in
 * layout.css - full content width, native ratio, capped at 85vh); the
 * ordered body images below it render through the shared photographic grid
 * also used by the homepage - see template-parts/photographic-grid.php and
 * gallery.css (that file owns all of the grid's own sizing/positioning/
 * spacing; nothing here duplicates it - the grid itself is unchanged). This
 * file only adds what's specific to a Project view: the Featured Image's
 * own size, the lightbox-trigger button reset (applied to the Featured
 * Image and each grid photograph alike), and the lightbox overlay itself.
 *
 * .project, .project__header, .project__meta, .project__intro,
 * .project__statement and .project__footer already have working rules in
 * content.css (shared with the legacy taxonomy archive) - untouched here,
 * reused as-is.
 */

/* Explicit, restrained Project title - the browser default (~32px/2em)
   read as heavy/dominant against the photography once tested with real
   content. Still clearly larger than body/meta text (hierarchy intact),
   but nowhere near a display-heading scale - the photograph stays the
   dominant element. Scoped to .project__header h1 only: base.css's
   global h1 rule (font-family/weight, no size) and Subject Page titles
   are untouched. No existing token covers heading sizes (tokens.css only
   defines --nav-font-size for caption-scale text), so this is a plain,
   deliberate value rather than a repurposed token. */
.project__header h1 {
  font-size: 24px;
  line-height: 1.2;
}

/* Every grid photograph (see template-parts/photographic-grid.php) is
   wrapped in a <button> so it's keyboard-focusable and independently
   activatable without an href - reset to look like a plain image, not a UI
   control. The grid's own gallery.css rules size the <img> inside; this
   only resets the button itself. */
.project-lightbox-trigger {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: zoom-in;
  appearance: none;
  -webkit-appearance: none;
}

.project-lightbox-trigger:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: var(--space-4);
}

/* Shared enlarged width for the Featured Image and body gallery on
   standard Project pages - both wrap their content in this exact pair of
   classes (single-project.php / template-parts/project-content.php), so
   they always move together from one definition instead of two synced
   widths. .project__media breaks OUT of .site-container's own responsive
   page-margin (24/64/96px, layout.css/tokens.css - unchanged, still
   governs every other page) using the standard calc(50% - 50vw) technique:
   a block element with width:auto and this exact margin pair always
   spans the true viewport width, regardless of what padding its ancestors
   apply. .project__media-inner then re-applies a flat, project-specific
   margin (24px mobile, 64px tablet/desktop - NOT the sitewide token's own
   96px desktop tier, a deliberately different value for this one
   component) and caps the total at 1600px so very wide displays stay
   controlled. At 1440px this yields exactly 1440 - 2*64 = 1312px of usable
   width, matching the approved spec. Below 768px neither rule does
   anything (no media query matches), so mobile is completely unchanged:
   both elements simply fill 100% of .site-container's own already-24px-
   inset box, exactly as before.

   The homepage's own hero image (.editorial-opening__image, layout.css)
   and its Subject grid (.homepage-index's own base rules, gallery.css)
   are entirely untouched - neither carries this class, and this file
   never touches gallery.css. MxTra/TRAVEL (templates/project-mxtra.php)
   apply this same pair of classes to their own Featured Image and grid
   wrapper, so their outer alignment now matches too - their own 5-column,
   4:3 contact-sheet cell proportions and cropping (mxtra.css) are
   completely unaffected, only the OUTER container width changed. */
@media (min-width: 768px) {
  .project__media {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .project__media-inner {
    box-sizing: border-box;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-64);
    padding-right: var(--space-64);
  }
}

/* Standard Project presentations only (single-project.php / template-parts/
   project-content.php - NOT MxTra/TRAVEL, which keep the shared
   .project__media/.project__media-inner pair above completely unchanged).
   Correction after visual review: the Featured Image and body gallery no
   longer need identical widths - each gets its own plain, simple frame,
   sized directly with max-width + margin:auto (no viewport breakout
   needed - both targets are already narrower than .site-container's own
   available width, so there is nothing to break out of).

   Featured: 1312px x 0.90 = 1180.8px -> 1180px at 1440px.

   Gallery: this is where a real bug was found and fixed, not just a
   resize. .homepage-index (gallery.css, shared with the locked homepage)
   still carried its own internal padding-left/right (256px at >=1024px,
   64px at 768-1023px) from BEFORE this wrapper existed - nested inside
   .project__gallery-frame's own sizing, that padding was silently
   stacking on top of it, over-shrinking every column far more than
   intended (304px instead of the ~380px this correction targets) - the
   direct cause of the reported "too small, too much black space" result.
   .project__gallery-frame .homepage-index below zeroes that out, scoped
   to this one context only - the homepage's own grid never has this
   ancestor, so it is completely unaffected.

   With that padding correctly at 0, .project__gallery-frame's own
   max-width:952px yields a column width of (952-192)/2 = 380px - exactly
   304px (the actual previous rendered column, bug included) x 1.25. Every
   individual image is a plain CSS percentage of that column (70%/115%,
   gallery.css, unchanged), so both the portrait and landscape case scale
   by the same 1.25x automatically: 213px -> 266px (portrait), 350px ->
   437px (landscape) - measured, not assumed. Row-gap/column-gutter stay
   at their existing fixed tokens (--space-192/--space-192) - unchanged,
   still a sensible, consistent rhythm; only the images themselves grew. */
.project__featured-frame {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.project__gallery-frame {
  max-width: 952px;
  margin-left: auto;
  margin-right: auto;
}

.project__gallery-frame .homepage-index {
  padding-left: 0;
  padding-right: 0;
}

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

/* Quiet starting link back to the Project's Subject Page - the same link as
   .project__ending below, repeated at the top of the page. Sits above
   .project__header, which keeps its own existing padding-top (content.css) -
   that space now separates this link from the title below it, so the same
   --space-64 token used here for the page's own top edge reads as one
   deliberate, even rhythm (edge -> link -> title) rather than two
   unrelated gaps. */
.project__starting {
  padding-top: var(--space-64);
}

/* Quiet ending link back to the Project's Subject Page. Reuses the same
   small-sans/uppercase/nav-letter-spacing/muted-color language as
   .primary-nav a and .project__meta rather than a new typography scale -
   text-transform:uppercase (not stored casing) is what makes "Back to
   Industrial" read as "BACK TO INDUSTRIAL", so it renders correctly
   regardless of how a given Subject term's name happens to be cased. The
   shared grid (.homepage-index) already carries its own generous
   margin-bottom before this link - no additional spacing utility needed
   here. */
.project__ending {
  padding-bottom: var(--space-96);
}

.project__back-link {
  display: inline-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-muted);
}

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

@media (max-width: 767px) {
  /* Same 44px-touch-target technique already used for .nav-toggle-label and
     the lightbox controls: padding/min-height grow the tappable box, the
     visible text stays the same small size - no enlarged-button look. */
  .project__back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
}

/* Lightbox overlay - one instance per Project page, hidden by default. */
.project-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-background);
}

.project-lightbox[hidden] {
  display: none;
}

.project-lightbox__figure {
  margin: 0;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* object-fit: contain here only ever letterboxes within the bounding box -
   it cannot crop. The image's own natural proportions always render in
   full. This is the portrait size (and the default for any image without
   an orientation) - unchanged from before. */
.project-lightbox__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
}

/* Landscape only - project-lightbox.js toggles this class per image (see
   its own doc comment) based on the 'orientation' single-project.php
   supplies. Exactly 90% of the box above on both axes (90vw * 0.9 = 81vw,
   85vh * 0.9 = 76.5vh), a 10% reduction from the previous landscape size.
   Portrait images never get this class, so their own size above is
   completely unaffected. */
.project-lightbox__image--landscape {
  max-width: 81vw;
  max-height: 76.5vh;
}

.project-lightbox__caption {
  margin-top: var(--space-16);
  max-width: 90vw;
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  color: var(--color-text-muted);
  text-align: center;
}

.project-lightbox__caption[hidden] {
  display: none;
}

.project-lightbox__close,
.project-lightbox__prev,
.project-lightbox__next {
  position: absolute;
  padding: var(--space-16);
  margin: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.project-lightbox__prev,
.project-lightbox__next {
  /* No existing token covers UI-glyph sizing (tokens.css only defines
     --nav-font-size for small caption-scale text) - 24px is a plain,
     minimal, legible size for a single arrow character, not a second
     spacing system. */
  font-size: 24px;
}

/* Contextual "BACK TO {label}" text, replacing the previous × glyph -
   same restrained small-sans/uppercase/nav-letter-spacing language as
   .primary-nav a and .project__back-link, not a new type scale. Still the
   exact same <button data-lightbox-close> project-lightbox.js already
   binds its close() handler to - only the visible label changed, every
   existing closing behavior (Escape, backdrop click, focus return) is
   untouched. */
.project-lightbox__close {
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
}

.project-lightbox__close:disabled,
.project-lightbox__prev:disabled,
.project-lightbox__next:disabled {
  opacity: 0.3;
  cursor: default;
}

.project-lightbox__close:focus-visible,
.project-lightbox__prev:focus-visible,
.project-lightbox__next:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: var(--space-4);
}

.project-lightbox__close {
  top: var(--space-16);
  right: var(--space-16);
}

.project-lightbox__prev {
  left: var(--space-16);
  top: 50%;
  transform: translateY(-50%);
}

.project-lightbox__next {
  right: var(--space-16);
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  /* Expand the tappable area to the ~44px touch-target guideline without
     enlarging the visible glyph: padding shrinks, min-width/height grows
     to 44px, and flex-centering keeps the same small, restrained
     character centered in the now-larger (but still invisible,
     borderless) hit area. Desktop is untouched - this is nested inside
     the existing mobile media query only. */
  .project-lightbox__close,
  .project-lightbox__prev,
  .project-lightbox__next {
    padding: var(--space-8);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}