/*
 * GANTSEV PROJECT MOBILE IMAGE FIT V162
 *
 * The block keeps a viewport-safe height.
 * The photo is scaled inside the block with no vertical cropping.
 * The block never grows to the natural height of the source image.
 */

/* Main project cover: stable block, image fitted inside. */
@media (max-width: 760px) {
  .project-page .project-page__cover {
    display: grid !important;
    place-items: center !important;

    width: 100% !important;
    height: clamp(300px, 56svh, 520px) !important;
    min-height: 0 !important;
    max-height: calc(100svh - 150px) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;

    background:
      linear-gradient(
        180deg,
        rgba(250, 243, 233, .96),
        rgba(238, 224, 203, .96)
      ) !important;
  }

  .project-page .project-page__cover > img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: none !important;
    filter: none !important;
  }

  .project-page .project-page__cover:hover > img,
  .project-page .project-page__cover:focus-visible > img {
    transform: none !important;
  }

  /*
   * Do not let pseudo overlays visually darken the unused contain area.
   */
  .project-page .project-page__cover::after {
    opacity: .16 !important;
    pointer-events: none !important;
  }
}

/*
 * Full-screen project viewer.
 * Header, image and thumbnail footer always remain inside the viewport.
 */
@media (max-width: 760px) {
  .project-lightbox {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;

    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  .project-lightbox__panel {
    width: 100vw !important;
    height: 100svh !important;
    min-height: 0 !important;
    max-height: 100svh !important;

    grid-template-rows:
      minmax(58px, auto)
      minmax(0, 1fr)
      minmax(82px, auto) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .project-lightbox__panel > figure {
    display: grid !important;
    place-items: center !important;

    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .project-lightbox__panel > figure img {
    display: block !important;

    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: auto !important;
    transform: none !important;
  }

  .project-lightbox__panel > footer {
    min-height: 82px !important;
    max-height: 96px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .project-lightbox__thumbs {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
  }

  body.is-locked {
    position: fixed !important;
    width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
}

/*
 * Extra protection for short mobile screens in landscape.
 */
@media (max-width: 900px) and (max-height: 560px) {
  .project-page .project-page__cover {
    height: calc(100svh - 96px) !important;
    max-height: calc(100svh - 96px) !important;
  }

  .project-lightbox__panel {
    grid-template-rows:
      54px
      minmax(0, 1fr)
      70px !important;
  }

  .project-lightbox__panel > footer {
    min-height: 70px !important;
    max-height: 70px !important;
  }

  .project-lightbox__thumbs button {
    width: 58px !important;
    height: 43px !important;
  }
}