/* LiteCMS v2.60 — full-bleed dark-slate hero with a centered 980px gallery.
   Applied only to standalone project pages. Loaded after v2.59 so earlier
   width caps can't constrain the hero background or misalign the title. */

/* The backdrop is full browser width, while its bottom dissolves into the
   existing warm page background just behind the title. */
.screen-gallery-project .screen-gallery-hero {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  background: linear-gradient(
    180deg,
    #212a32 0%,
    #2b353d 40%,
    #414a51 62%,
    #9ca2a3 81%,
    var(--v255-page, #f6f6f3) 100%
  ) !important;
}

/* Center only the media, NOT the hero, allowing its slate edges to span
   widescreen monitors. Preserve the existing scroll-parallax CSS variable. */
.screen-gallery-project .screen-gallery-visual {
  box-sizing: border-box;
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  height: 100% !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  right: auto !important;
  margin: 0 !important;
  transform: translate3d(-50%, var(--v256-scroll-shift, 0px), 0) !important;
}

/* The gallery's quiet surround matches the slate rather than introducing
   bright bars when an image/video doesn't occupy the full stage. */
.screen-gallery-project .media-frame,
.screen-gallery-project .media-frame.media-frame-compare {
  background: #212a32 !important;
}

/* Show the full artwork rather than stretching/cropping low-resolution
   portfolio screenshots to the dimensions of the 980px hero stage. */
.screen-gallery-project .media-frame-image img {
  object-fit: contain !important;
  object-position: center center !important;
}

/* v2.59 positioned the title and thumbnail rail relative to the narrower
   hero. Now the title follows the wider content column below the hero. */
.screen-gallery-project .screen-gallery-identity {
  left: max(clamp(20px, 5vw, 76px), calc((100% - 1240px) / 2)) !important;
  right: max(clamp(20px, 5vw, 76px), calc((100% - 1240px) / 2)) !important;
  max-width: none !important;
}
.screen-gallery-project .media-thumbs {
  left: clamp(14px, 2.5vw, 28px) !important;
  right: clamp(14px, 2.5vw, 28px) !important;
  max-width: calc(100% - 28px) !important;
}

/* The fade and title belong to the full-width hero, not the 980px media.
   The light lower half keeps project-name contrast consistent. */
.screen-gallery-project .screen-gallery-fade {
  left: 0 !important;
  right: 0 !important;
}

@media (max-width: 760px) {
  /* Mobile retains its edge-to-edge gallery and existing comparison controls. */
  .screen-gallery-project .screen-gallery-visual {
    width: 100% !important;
    max-width: none !important;
  }
  .screen-gallery-project .media-frame-image img {
    object-position: center top !important;
  }
  .screen-gallery-project .media-thumbs {
    left: 14px !important;
    right: 14px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .screen-gallery-project .screen-gallery-visual {
    transform: translate3d(-50%, 0, 0) !important;
    will-change: auto !important;
  }
}