/* Shared shell styles live in ingle-app-shell.css. */

html, body { width:100%; height:100%; margin:0; overflow:hidden; }
body { min-height:100vh; min-height:100dvh; }

.gallery-app .gallery-workspace { width:100%; min-height:100%; margin:0; padding:0; box-sizing:border-box; }
.gallery-app .page-intro { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin:0 0 14px; padding:18px 20px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.gallery-app .page-intro h1 { max-width:none; margin:3px 0 7px; font-size:clamp(1.75rem,4vw,2.8rem); line-height:1.05; }
.gallery-app .page-intro p { max-width:760px; margin:0; color:var(--muted); line-height:1.5; }
.gallery-app .studio-page { max-width:none; }
.gallery-app .studio-gallery { margin:0; }
.gallery-app .studio-gallery-card { max-width:1100px; margin-inline:auto; }
.gallery-app .studio-gallery-video-wrap { background:#0c1118; }
.gallery-app .studio-gallery-video { max-height:min(62vh,720px); object-fit:contain; }
.gallery-app .studio-gallery-copy { padding:clamp(16px,3vw,28px); }
@media (min-width:900px) {
  .gallery-app .studio-gallery-card {
    display:grid;
    grid-template-columns:minmax(220px,280px) minmax(0,1fr);
    align-items:center;
    gap:clamp(28px,4vw,56px);
    max-width:960px;
  }

  .gallery-app .studio-gallery-video-wrap {
    width:100%;
    min-width:0;
  }

  .gallery-app .studio-gallery-video {
    display:block;
    width:100%;
    height:auto;
  }

  .gallery-app .studio-gallery-copy {
    min-width:0;
    padding:clamp(12px,2vw,24px) 0;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .gallery-app .studio-gallery-host-row {
    gap:18px;
  }
}
@media (max-width:700px) { .gallery-app .page-intro { align-items:flex-start; flex-direction:column; padding:16px; } }

/* =========================================================
   Visualize host navigation
   Portrait stays clean; navigation sits below the image.
   ========================================================= */

.gallery-app .studio-gallery-video-wrap {
  position: relative;
  overflow: visible;
}

/* Keep the image slightly shorter so the controls fit comfortably. */
.gallery-app .studio-gallery-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(55vh, 620px);
  object-fit: cover;
  border-radius: 20px;
}

/* Standard pill-style navigation buttons below the portrait. */
.gallery-app .studio-gallery-nav {
  top: auto;
  bottom: -54px;
  width: 46px;
  height: 38px;
  min-width: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none;
  z-index: 6;
  font-size: 1.5rem;
  line-height: 1;
}

.gallery-app .studio-gallery-nav-prev {
  left: calc(50% - 52px);
  right: auto;
}

.gallery-app .studio-gallery-nav-next {
  left: calc(50% + 6px);
  right: auto;
}

.gallery-app .studio-gallery-nav:hover {
  transform: translateY(-1px);
}

/* Reserve room for the navigation row. */
.gallery-app .studio-gallery-video-wrap {
  margin-bottom: 62px;
}

@media (min-width: 900px) {
  .gallery-app .studio-gallery-card {
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
    align-items: center;
  }

  .gallery-app .studio-gallery-video {
    max-height: min(54vh, 580px);
  }
}

@media (max-width: 899px) {
  .gallery-app .studio-gallery-video {
    max-height: min(58vh, 600px);
    object-fit: contain;
  }
}


/* =========================================================
   Visualize mobile portrait correction
   Mobile should mirror the desktop portrait treatment:
   compact portrait, transparent surroundings, nav below.
   ========================================================= */

@media (max-width: 700px) {
  /*
    Do not let the portrait video stretch to the full gallery-card width.
    The previous max-height + width:100% combination created a large
    constrained video box with black unused space.
  */
  .gallery-app .studio-gallery-video-wrap {
    width: min(100%, 240px);
    min-width: 0;
    margin: 0 auto 62px;
    background: transparent;
    overflow: visible;
  }

  .gallery-app .studio-gallery-video {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: cover;
    border-radius: 20px;
  }

  /* Keep the navigation as a distinct row beneath the portrait. */
  .gallery-app .studio-gallery-nav {
    top: auto;
    bottom: -52px;
    width: 46px;
    height: 38px;
    min-width: 46px;
    border-radius: 12px;
    transform: none;
  }

  .gallery-app .studio-gallery-nav-prev {
    left: calc(50% - 52px);
    right: auto;
  }

  .gallery-app .studio-gallery-nav-next {
    left: calc(50% + 6px);
    right: auto;
  }

  /*
    Shared gallery layouts may carry desktop sizing into the card.
    On mobile, let the content stack naturally and centre the portrait.
  */
  .gallery-app .studio-gallery-card {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .gallery-app .studio-gallery-copy {
    width: 100%;
    min-width: 0;
    padding: 0;
  }
}