/* ARCHIMETRICA 769 — restore tablet project composition + deterministic mobile project defaults. */

/* Phone: if the compact view is primed, it is always two projects per row. */
@media (max-width:768px){
  body[data-page="home"][data-project-grid-view="compact"] .projects > .creative-grid,
  body[data-page="home"] .projects > .creative-grid.is-compact{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:8px!important;
    row-gap:8px!important;
    gap:8px!important;
  }
  body[data-page="home"][data-project-grid-view="compact"] .projects > .creative-grid .project-meta,
  body[data-page="home"] .projects > .creative-grid.is-compact .project-meta{
    display:none!important;
  }
  body[data-page="home"][data-project-grid-view="compact"] .projects > .creative-grid .project-image,
  body[data-page="home"] .projects > .creative-grid.is-compact .project-image{
    aspect-ratio:1/1!important;
  }
  body[data-page="home"][data-project-scope="all"] .project-scope-button[data-project-scope="all"]{
    color:#fff!important;
    font-weight:700!important;
  }
  body[data-page="home"][data-project-scope="all"] .project-scope-button[data-project-scope="all"]::after{
    transform:scaleX(1)!important;
  }
  body[data-page="home"][data-project-grid-view="compact"] [data-project-view-toggle]{
    opacity:1!important;
  }
}

/* Tablet project gallery: use real 12-column spans so the wide side actually alternates. */
@media (min-width:769px) and (max-width:1180px),
       (min-width:769px) and (max-width:1366px) and (hover:none) and (pointer:coarse){
  body.project-page .gallery-section[data-scroll-gallery]{
    height:auto!important;
    min-height:0!important;
    padding:28px 0 44px!important;
    overflow:visible!important;
  }
  body.project-page .gallery-section[data-scroll-gallery] > .gallery-heading{
    position:relative!important;
    inset:auto!important;
    margin:0 0 24px!important;
    padding:0 24px!important;
  }
  body.project-page .gallery-section[data-scroll-gallery] > .gallery-heading p{
    display:none!important;
  }
  body.project-page .gallery-section[data-scroll-gallery] .gallery-sticky-stage,
  body.project-page .gallery-section[data-scroll-gallery] .gallery-viewport{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  body.project-page .gallery-section[data-scroll-gallery] .gallery-mosaic,
  body.project-page .gallery-section[data-scroll-gallery] .gallery-mosaic.is-scroll-gallery,
  body.project-page .gallery-section[data-scroll-gallery] .gallery-mosaic.is-gallery-scene,
  body.project-page .gallery-section[data-scroll-gallery] .gallery-mosaic.is-flying-gallery{
    position:relative!important;
    display:grid!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0 24px 38px!important;
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    column-gap:0!important;
    row-gap:46px!important;
    align-items:start!important;
    transform:none!important;
    overflow:visible!important;
    will-change:auto!important;
  }
  body.project-page .gallery-section[data-scroll-gallery] .gallery-shot:nth-child(n),
  body.project-page .gallery-section[data-scroll-gallery] .gallery-mosaic.is-flying-gallery .gallery-shot:nth-child(n){
    display:block!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    transform:none!important;
    opacity:1!important;
    filter:none!important;
    overflow:visible!important;
    pointer-events:none!important;
    cursor:default!important;
    border:0!important;
    background:transparent!important;
    box-sizing:border-box!important;
  }

  /* Row 1: LARGE left / small right. Row 2: small left / LARGE right. */
  body.project-page .gallery-section[data-scroll-gallery] .gallery-shot:nth-child(4n+1){
    grid-column:1 / span 7!important;
    padding:0 10px 0 0!important;
  }
  body.project-page .gallery-section[data-scroll-gallery] .gallery-shot:nth-child(4n+2){
    grid-column:8 / span 5!important;
    padding:0 0 0 10px!important;
    margin-top:42px!important;
  }
  body.project-page .gallery-section[data-scroll-gallery] .gallery-shot:nth-child(4n+3){
    grid-column:1 / span 5!important;
    padding:0 10px 0 0!important;
    margin-top:42px!important;
  }
  body.project-page .gallery-section[data-scroll-gallery] .gallery-shot:nth-child(4n+4){
    grid-column:6 / span 7!important;
    padding:0 0 0 10px!important;
  }

  body.project-page .gallery-section[data-scroll-gallery] .gallery-shot:nth-child(4n+1)>img,
  body.project-page .gallery-section[data-scroll-gallery] .gallery-shot:nth-child(4n+1)>video,
  body.project-page .gallery-section[data-scroll-gallery] .gallery-shot:nth-child(4n+4)>img,
  body.project-page .gallery-section[data-scroll-gallery] .gallery-shot:nth-child(4n+4)>video{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:16/10!important;
    object-fit:cover!important;
    object-position:center!important;
    transform:none!important;
  }
  body.project-page .gallery-section[data-scroll-gallery] .gallery-shot:nth-child(4n+2)>img,
  body.project-page .gallery-section[data-scroll-gallery] .gallery-shot:nth-child(4n+2)>video,
  body.project-page .gallery-section[data-scroll-gallery] .gallery-shot:nth-child(4n+3)>img,
  body.project-page .gallery-section[data-scroll-gallery] .gallery-shot:nth-child(4n+3)>video{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:4/3!important;
    object-fit:cover!important;
    object-position:center!important;
    transform:none!important;
  }

  /* Tablet finale: keep the existing scroll fade, but use the full viewport width and no side crop. */
  body.project-page .project-finale{
    --finale-side-gap:0px!important;
    height:122vh!important;
    min-height:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  body.project-page .project-finale-sticky{
    position:sticky!important;
    top:0!important;
    display:grid!important;
    place-items:center!important;
    width:100vw!important;
    height:100svh!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body.project-page .project-finale-rail{
    position:relative!important;
    display:block!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100svh!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }
  body.project-page .project-finale-card,
  body.project-page .project-finale-card:nth-child(n){
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    opacity:var(--card-opacity,0)!important;
    pointer-events:none!important;
    transform:none!important;
    --card-opacity:0;
    --card-scale:1;
  }
  body.project-page .project-finale-media{
    width:100vw!important;
    height:100svh!important;
    overflow:hidden!important;
    background:#050505!important;
  }
  body.project-page .project-finale-card img{
    display:block!important;
    width:100vw!important;
    height:100svh!important;
    max-width:100vw!important;
    max-height:100svh!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
    filter:none!important;
  }
  body.project-page .project-finale-card figcaption{
    display:none!important;
  }
  body.project-page .project-finale-progress{
    left:0!important;
    right:0!important;
  }
}