/* Mobile-only project refinements loaded after the shared mobile stylesheet. */

@media (max-width: 700px) {
  /* Keep contained imagery vertically and horizontally centered inside the
     square gallery stage. */
  .project-stage > img,
  .project-stage > video {
    object-position: center center;
  }

  /* Reduce the mobile gallery box by 15%. Because the stage stays square,
     this also gives the fixed heading + scrollable description noticeably
     more vertical room without changing the overall project-page height. */
  .project-stage {
    width: 85%;
    justify-self: center;
  }

  /* Keep the surrounding controls compact so the recovered space belongs to
     the paragraph rather than being reintroduced as gallery spacing. */
  .project-detail {
    gap: 6px;
  }

  .project-gallery-controls {
    min-height: 14px;
    margin-top: 0;
  }

  .project-gallery-controls button {
    min-width: 24px;
    min-height: 20px;
  }

  .project-copy-pane {
    gap: 6px;
  }

  /* The custom scrollbar script sets the hidden attribute whenever the copy
     fits inside its viewport. This final override must preserve that state,
     because the shared mobile stylesheet otherwise forces the graphic to
     display on project pages. */
  .project-copy-pane > .custom-scrollbar[hidden] {
    display: none;
  }
}