/* ToJestDom RC286 — project mobile containment + compact hero media
   Fixes horizontal page drift and over-large first project image on phones. */

/* The project gallery can contain large intrinsic images before/without JS.
   Never allow those intrinsic dimensions to widen the document. */
html,
body[data-project-slug]{
  max-width:100%;
  overflow-x:clip;
}
body[data-project-slug] main,
body[data-project-slug] .projectHero,
body[data-project-slug] .projectHero>.wrap,
body[data-project-slug] .detailGrid,
body[data-project-slug] .detailGrid>* ,
body[data-project-slug] .detailGrid>div,
body[data-project-slug] .detailMedia,
body[data-project-slug] .gallery,
body[data-project-slug] .detailSide{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
body[data-project-slug] .gallery{
  width:100%!important;
  overscroll-behavior-inline:contain;
}
body[data-project-slug] .gallery>img{
  display:block;
  flex:0 0 168px;
  width:168px;
  max-width:168px;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:14px;
}

@media(max-width:760px){
  body[data-project-slug]{
    width:100%!important;
    overflow-x:clip!important;
  }
  body[data-project-slug] .projectHero{
    width:100%!important;
    overflow:hidden!important;
    padding:10px 0 8px!important;
  }
  body[data-project-slug] .projectHero>.wrap{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0 12px!important;
  }
  body[data-project-slug] .crumbs{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 8px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body[data-project-slug] .detailGrid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
    gap:11px!important;
    overflow:hidden!important;
  }
  body[data-project-slug] .detailGrid>div{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  /* Main project photo: deliberately compact on mobile. */
  body[data-project-slug] .detailMedia{
    width:100%!important;
    height:168px!important;
    min-height:0!important;
    max-height:168px!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
    border-radius:14px!important;
    box-shadow:0 6px 18px rgba(6,24,43,.08)!important;
  }
  body[data-project-slug] .detailMedia>img{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:center center!important;
  }

  /* Thumbnail rail stays inside the viewport; it scrolls internally. */
  body[data-project-slug] .gallery{
    display:flex!important;
    flex-wrap:nowrap!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    gap:6px!important;
    margin:0!important;
    padding:6px 1px 8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body[data-project-slug] .gallery::-webkit-scrollbar{display:none}
  body[data-project-slug] .gallery button,
  body[data-project-slug] .gallery>img{
    box-sizing:border-box!important;
    flex:0 0 88px!important;
    width:88px!important;
    min-width:88px!important;
    max-width:88px!important;
    height:56px!important;
    min-height:56px!important;
    max-height:56px!important;
    aspect-ratio:auto!important;
    border-radius:10px!important;
    scroll-snap-align:start!important;
    overflow:hidden!important;
  }
  body[data-project-slug] .gallery button img,
  body[data-project-slug] .gallery>img{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    border-radius:9px!important;
  }

  body[data-project-slug] .detailSide{
    position:static!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:16px!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  body[data-project-slug] .detailSide h1{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    font-size:clamp(28px,8vw,36px)!important;
    line-height:1.03!important;
    margin:8px 0 9px!important;
  }
  body[data-project-slug] .detailSide p,
  body[data-project-slug] .detailPrice,
  body[data-project-slug] .miniFacts,
  body[data-project-slug] .detailActions{
    max-width:100%!important;
  }
  body[data-project-slug] .detailPrice{font-size:28px!important}
  body[data-project-slug] .projectStrip{
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }
}

@media(max-width:390px){
  body[data-project-slug] .projectHero>.wrap{padding:0 10px!important}
  body[data-project-slug] .detailMedia{
    height:154px!important;
    max-height:154px!important;
  }
  body[data-project-slug] .gallery button,
  body[data-project-slug] .gallery>img{
    flex-basis:82px!important;
    width:82px!important;
    min-width:82px!important;
    max-width:82px!important;
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
  }
  body[data-project-slug] .detailSide{padding:14px!important}
}