/* v408 — More spacious film views for Groove Way and Devotus Anima.
   The Projects Personal view and all other disciplines remain unchanged.
   Layout grows horizontally on desktop; compact and narrow windows keep
   natural overflow rather than clipping text, video controls or awards. */

/* Both original native SVGs remain unfiltered and preserve all paths. */
html body #views #work[data-cat="projects"]
  .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
  h3.od-project-logo-title > svg.od-project-inline-mark{
  filter:none!important;
  image-rendering:auto!important;
}

@media(min-width:1051px){
  /* The original 1340px cap left unused space at wide resolutions.
     Preserve the left-rail-safe 94% canvas and existing centering shift. */
  html body #views #work[data-cat="projects"] > .work-section > .od-projects-showcase{
    width:94%!important;
    max-width:1620px!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-split{
    grid-template-columns:minmax(0,1.27fr) minmax(0,1fr)!important;
    gap:clamp(20px,2.2vw,38px)!important;
    min-height:max(0px,calc(100dvh - 282px))!important;
    align-items:start!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-split > .od-project-player-section{
    width:100%!important;
    min-width:0!important;
    justify-content:flex-start!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-player{
    width:100%!important;
    aspect-ratio:16/9!important;
  }
  /* Give the black editorial panel the same visual weight as the film. */
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-details{
    width:100%!important;
    min-width:0!important;
    padding:clamp(17px,1.5vw,27px)!important;
    gap:clamp(11px,1.35vh,19px)!important;
    grid-template-rows:auto auto auto!important;
    align-content:start!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-feature > .od-project-overview > h3.od-project-logo-title{
    margin:0 0 clamp(8px,1.15vh,14px)!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-feature > .od-project-overview > h3.od-project-logo-title > svg.od-project-inline-mark{
    display:block!important;
    width:100%!important;
    height:clamp(160px,19.5vh,212px)!important;
    max-height:clamp(160px,19.5vh,212px)!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-feature > .od-project-overview > .od-project-synopsis{
    font-size:clamp(13px,1.42vh,15.5px)!important;
    line-height:1.49!important;
    max-width:none!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-credits-intro h4{
    font-size:clamp(17px,1.7vh,21px)!important;
    line-height:1.24!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-credits-intro p{
    font-size:clamp(12px,1.3vh,14px)!important;
    line-height:1.48!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-stage p{
    font-size:clamp(11px,1.23vh,13px)!important;
    line-height:1.48!important;
  }
}

/* The existing side-by-side view is still useful on shorter desktop
   windows. Reduce decorative spacing there, not the media or copy scale. */
@media(min-width:1051px) and (max-height:850px){
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-details{
    padding:clamp(12px,1.25vw,20px)!important;
    gap:clamp(8px,1.2vh,12px)!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-feature > .od-project-overview > h3.od-project-logo-title > svg.od-project-inline-mark{
    height:clamp(145px,19.5vh,168px)!important;
    max-height:clamp(145px,19.5vh,168px)!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-credits-intro{
    margin-bottom:clamp(4px,.65vh,7px)!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-split{
    min-height:0!important;
  }
}

/* Intermediate/mobile screens retain the original readable flow.
   The titles still grow relative to the previous ~140px desktop cap. */
@media(min-width:761px) and (max-width:1050px){
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-feature > .od-project-overview > h3.od-project-logo-title > svg.od-project-inline-mark{
    width:100%!important;
    height:clamp(150px,18vh,195px)!important;
    max-height:clamp(150px,18vh,195px)!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
}