/*
Theme Name: Paolo Musa
Theme URI: https://paolomusa.com
Author: Paolo Musa
Author URI: https://paolomusa.com
Description: Tema custom per il portfolio di Paolo Musa, fotografo di moda.
Version: 1.1
*/

html{ -webkit-text-size-adjust:100%; height:100%; margin-top:0!important; background:#f7f5f0; overscroll-behavior:none; }
body{
  font-family: 'Jost', Arial, Helvetica, sans-serif;
  color:#000; height:100%; font-size:12px; margin:0; line-height:1.2;
  transition: opacity .3s ease, color .3s ease; font-weight:400; overflow-x:hidden;
}
main{ transition: opacity .3s ease, color .3s ease; }
* { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; box-sizing:border-box; }
h1,h2,h3,h4,h5,h6{ font-family:inherit; margin:0; font-weight:400; font-size:inherit; }
p{ margin:0; }
a{ background-color:transparent; color:inherit; text-decoration:none; }
ul,ol,li{ list-style:none; }
::-webkit-scrollbar{ display:none; width:0!important; }
*:focus{ outline:none; }
.uppercase{ text-transform:uppercase; }
.bold{ font-weight:bold; }
.italic{ font-style:italic; }
img{ max-width:100%; display:block; }

/* ---- HEADER: fisso, centrato verticalmente, sul bordo sinistro ---- */
header{
  display:grid; grid-template-columns:auto auto auto;
  position:fixed; top:50%; transform:translateY(-50%);
  padding-left:15px; column-gap:30px; z-index:10;
  color:#000;
  text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 8px #fff;
}
header a{ font-size:12px; }

@media screen and (max-width:820px){
  header{ padding-top:15px; top:0; transform:none; }
}

/* ---- HOME / SWIPER ---- */
.swiper-home{ width:100vw; height:100vh; display:flex; overflow:hidden; background-color:#fff; }
.swiper-home .swiper-wrapper{ display:flex; }
.swiper-home .swiper-slide{ min-width:100%; height:100%; background-color:#fff; position:relative; }

.project-featured-image{ width:100%; height:100%; }
.project-featured-image img, .project-featured-image video{ width:100%; height:100%; object-fit:contain; }

.swiper-home .swiper-slide .project-featured-image{ width:auto; }
.swiper-home .swiper-slide .img-container{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
}
.swiper-home .swiper-slide .project-featured-image img,
.swiper-home .swiper-slide .project-featured-image video{ width:auto; height:auto; max-width:85vw; max-height:85vh; object-fit:contain; }

.project-featured-image.full{ width:100vw!important; height:100vh!important; }
.project-featured-image.full img, .project-featured-image.full video{
  width:100%!important; height:100%!important; object-fit:cover!important;
}
.swiper-home .swiper-slide .project-featured-image.full .img-container{
  position:static; width:100vw; height:100vh; top:0; left:0; transform:none;
}

.project-names{
  position:fixed; bottom:0; padding:0 0 15px 15px; z-index:5;
}
.name-projects-name{
  color:#000; font-size:12px;
  text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 8px #fff;
}

.swiper-button-prev, .swiper-button-next{
  position:absolute; top:0; width:50%; height:100%!important; z-index:4; cursor:pointer; background:transparent;
}
.swiper-button-prev{ left:0; } .swiper-button-next{ right:0; }
.swiper-button-prev::after, .swiper-button-next::after{ content:''; }

@media screen and (max-width:820px){
  .swiper-home{ height:100dvh; }
  .swiper-home .swiper-slide .img-container{
    position:absolute; width:100vw; height:50dvh; top:50%; left:0; transform:translate(0,-50%);
  }
}

/* ---- WORK INDEX: toggle List / Thumbs ---- */
.toogle-index{
  display:inline-block; position:fixed; top:50%; transform:translateY(-50%);
  padding-right:15px; right:0; z-index:10; font-size:12px;
}
.toogle-index .list, .toogle-index .thumbs{ display:inline-block; cursor:pointer; color:#000; }
.toogle-index .grey{ color:#D9D9D9; }
@media screen and (max-width:820px){
  .toogle-index{ top:0; transform:none; padding-top:15px; }
}

/* -- list view -- */
#list-container{
  display:none; position:fixed; top:calc(50% + 15px); left:131px; z-index:1;
  color:#D9D9D9; overflow:scroll; height:calc(50vh - 15px); padding-right:30px;
}
.list-container-interior{ cursor:pointer; }
.section-header .index-name{ color:#6C6C6C; }
.section-header-commissioned{ margin-top:14px; }
#list-container.active{ display:block; }
.list-container-interior:last-child{ padding-bottom:15px; }
.title-index{ display:block; }
.title-index:hover{ color:#000; cursor:pointer; }
.index-name, .index-year{ display:inline-block; }
.list-container-text{ z-index:1; position:relative; }
.list-container-image{
  display:none; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); height:60vh; z-index:0;
}
.list-container-interior:hover .list-container-image{ display:block; }
.list-container-image img, .list-container-image video{ width:100%; height:100%; object-fit:contain; }

@media screen and (max-width:820px){
  #list-container{ top:35px; left:15px; padding-right:10px; }
  .list-container-interior:hover .list-container-image{ display:none!important; }
}

/* -- thumbs view -- */
#thumbs-container{ display:none; text-align:center; height:100vh; overflow:auto; }
#thumbs-container.active{ display:block; }
.image-index{
  position:relative; display:inline-block; line-height:0; cursor:pointer;
  padding-bottom:3vw; padding-top:3vw; width:auto; height:14vw; margin-left:3.5vw; margin-right:3.5vw;
}
.image-index img{ width:6vw; height:100%; object-fit:cover; }
.index-title-hover{
  opacity:0; transition:opacity .3s ease; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); text-align:center; line-height:1.2; width:220px; pointer-events:none; font-size:12px;
}
.image-index:hover .index-title-hover{ opacity:1; }
.image-index:hover img{ opacity:0; transition:opacity .3s ease; }

@media screen and (max-width:820px){
  .image-index{ padding-bottom:7vw; padding-top:7vw; height:32vw; margin-left:10vw; margin-right:10vw; }
  .image-index img{ width:auto; height:18vw; }
  .image-index:hover .index-title-hover{ opacity:0; }
  .image-index:hover img{ opacity:1; }
}

/* ---- INFORMATION ---- */
#about{
  position:fixed; top:calc(50% + 40px); padding-left:191px; background-color:transparent; z-index:5; max-width:38vw;
}
.info-file{
  position:fixed; width:32vw; height:auto; top:50%; right:5vw; left:auto; transform:translateY(-50%); z-index:-1;
}
.info-file.size-full{ position:fixed; width:32vw; height:auto; top:50%; right:5vw; left:auto; transform:translateY(-50%); }
.info-file img, .info-file video{ width:100%; height:auto; object-fit:cover; }

.information, .clients{
  color:#000;
  text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 8px #fff;
}
.information{ max-width:28.2vw; padding-bottom:15px; }
.information p, .clients p{ font-size:12px; line-height:1.5; }

@media screen and (max-width:820px){
  #about{ top:0; padding-top:68px; padding-left:15px; overflow:scroll; max-width:55vw; }
  .information{ max-width:calc(100vw - 30px); padding-bottom:15px; }
  .clients{ max-width:calc(100vw - 30px); }
}

/* ---- lightbox a schermo intero (Index: click su riga/miniatura) ---- */
.full-lightbox{
  display:none; position:fixed; inset:0; z-index:150; background:rgba(238,238,238,.97);
  align-items:center; justify-content:center;
}
.full-lightbox.open{ display:flex; flex-direction:column; }
.full-lightbox img{ cursor:pointer;
  max-width:75vw; max-height:80vh; width:auto; height:auto; object-fit:contain; margin:0 auto;
}
.full-lightbox-title{
  position:fixed; bottom:0; left:15px; padding-bottom:15px; font-size:12px; color:#000; cursor:default;
}
.full-lightbox-counter{
  position:fixed; top:50%; right:20px; transform:translateY(-50%); font-size:12px; color:#000; cursor:default;
}
.full-lightbox-close{
  position:absolute; top:15px; right:20px; font-size:46px; padding:8px 10px; line-height:1; cursor:pointer; color:#000; z-index:1;
}
.full-lightbox-prev, .full-lightbox-next{
  display:none;
  position:absolute; top:50%; transform:translateY(-50%); font-size:40px; line-height:1;
  cursor:pointer; color:#000; padding:10px 15px; user-select:none; z-index:1;
}
.full-lightbox-prev{ left:10px; }
.full-lightbox-next{ right:10px; }

/* ---- placeholder note (solo anteprima) ---- */
.placeholder-note{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:#fafafa; border-bottom:1px solid #eee; color:#777;
  font-size:11px; padding:6px 14px; text-align:center; font-family:'Inter',sans-serif;
}