/* ===========================
   BASE
   =========================== */
body{
  overflow:hidden; /* rimuovi se vuoi lo scroll su body */
}

/* Container a scorrimento verticale con snap */
.container{
  width:100%;
  height:100vh;              /* fallback */
  height:100dvh;             /* no gap con barre mobili iOS */
  margin:0;
  overflow-y:scroll;
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
  overscroll-behavior-y:contain;
}

/* Scrollbar */
.container::-webkit-scrollbar{width:6px}
.container::-webkit-scrollbar-track{background:#d9d9d9}
.container::-webkit-scrollbar-thumb{background:var(--secondary-color);border-radius:3px}
.container::-webkit-scrollbar-thumb:hover{background:var(--accent-color)}
/* Firefox */
.container{scrollbar-width:thin; scrollbar-color:var(--secondary-color) #d9d9d9}

/* Slide a pieno schermo con snap */
.slide{
  position:relative;
  height:100vh;              /* fallback */
  height:100dvh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  scroll-snap-align:start;
}

/* Messaggio rotate nascosto di default */
#rotate-message{display:none}

/* ===========================
   PROMO / SLIDER
   =========================== */
.promo-section, .promo-slider{
  position:relative;
  height:100%;
}

/* le immagini riempiono tutta la slide */
.promo-slider > img{
  position:absolute !important;
  inset:0;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  object-position:center;
  display:none;
  z-index:1; /* sotto la caption */
}
.promo-slider > img:first-child{ display:block } /* la prima visibile */

/* mantieni la caption sopra */
.promo-slider .caption{
  position:absolute;
  left:0; right:0; bottom:12%;
  z-index:2;
}

/* ===========================
   MEDIA QUERIES
   =========================== */

/* Blocca sito su landscape <= 901px (footer rimosso dalla lista) */
@media screen and (orientation:landscape) and (max-width:901px){
  header,.container,.policy-btn{display:none !important}
  #rotate-message{
    display:flex; position:fixed; inset:0; z-index:999999;
    background:#f5f5f5; color:#333;
    flex-direction:column; justify-content:center; align-items:center;
    text-align:center; padding:20px;
  }
  #rotate-message h2{font-size:1.5em; margin-bottom:10px}
  #rotate-message p{font-size:1em; line-height:1.4; max-width:400px}
}

/* Mobile stretto (solo regole non-footer) */
@media screen and (max-width:400px){
  .promo-slider img{width:100%; height:100%; object-position:70% 50%}
  .promo-slider .caption{bottom:45%}
  .promo-slider .caption button{position:absolute; left:25%}
  .promo-slider .caption h2{font-size:2em; text-align:center}
  .promo-indicators{top:60%; left:50%; height:20px; transform:translateX(-50%)}

  .menu-toggle{display:block}

  .modal-content{
    flex-direction:column; width:100%; height:100%;
    max-width:none; max-height:none; border-radius:0; margin:0; overflow-y:auto;
  }
  .modal-description-box{
    width:100%; height:450px; overflow-y:auto;
    border-right:none; border-bottom:1px solid #ccc;
    box-sizing:border-box; padding:6px;
    box-shadow:0 6px 8px rgba(0,0,0,1);
  }
  .modal-description{width:100%; height:auto; max-height:300px; margin-bottom:10px}
  .modal-gallery{
    width:100%;
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    overflow-y:auto; max-height:400px;
  }
}

/* 403px–434px */
@media screen and (min-width:403px) and (max-width:434px){
  .promo-slider .caption{bottom:40%}
  .promo-indicators{top:65%; left:50%; height:20px; transform:translateX(-50%)}
}

/* 435px–747px iphone pro max*/
@media screen and (min-width:435px) and (max-width:747px){
  .promo-slider .caption{bottom:35%; text-align:center; width:100%}
  .promo-slider .caption h2{font-size:2.0em}
  .promo-slider .caption button{
    left:15%; position:absolute; font-size:1.2em; width:70%; top:100%;
  }
  .promo-indicators{
    top:70%; left:50%; height:30px; transform:translateX(-50%); font-size:2.4em;
  }
  .services-grid{margin-bottom:200px}
  .service-item img{width:120px; height:120px}
  .service-title{font-size:1.4em}
}

/* 748px–900px */
@media screen and (min-width:748px) and (max-width:900px){
  .promo-slider .caption{bottom:35%; text-align:center; width:100%}
  .promo-slider .caption h2{font-size:2.8em}
  .promo-indicators{top:74%; left:53.5%; font-size:2.8em}
}

/* landscape fino a 1133px */
@media screen and (orientation:landscape) and (max-width:1133px){
  .promo-slider .caption{bottom:40%}
  .promo-slider .caption h2{font-size:2.4em}
  .promo-slider .caption button{position:absolute; font-size:1.6em; width:20%}
  .promo-indicators{top:60%; left:75.5%; height:30px; transform:translateX(-50%); font-size:2.4em}
}

/* landscape 1134px–1180px */
@media screen and (orientation:landscape) and (min-width:1134px) and (max-width:1180px){
  .promo-slider .caption{bottom:40%}
  .promo-slider .caption h2{font-size:2.4em}
  .promo-indicators{top:60%; left:75.5%; font-size:2.4em}
}

/* 901px–1375px ipad 11 inch*/
@media screen and (min-width:901px) and (max-width:1375px){
  .promo-slider .caption{bottom:35%}
  .promo-slider .caption h2{font-size:4.8em; margin-left:15%; width:100%;}
  .promo-indicators{top:74%; left:35%; font-size:4.8em}
  .promo-slider .caption button{
    left:20%; position:absolute; font-size:3em; width:60%; top:120%;
  }
}

/* 1375px–1376px (edge case) */
@media screen and (orientation:landscape) and (min-width:1375px) and (max-width:1376px){
  .promo-slider .caption{bottom:30%}
  .promo-indicators{top:70%; left:76.5%; font-size:2.4em}
}

/* ===========================
   iPhone 16 family – portrait
   =========================== */
@supports (-webkit-touch-callout:none){
  @media (orientation:portrait) and (min-width:390px) and (max-width:430px){
    .promo-slider .caption{ bottom:36% !important }
    .promo-slider .caption button{
      font-size:clamp(.9rem, 3.4vw, 1rem) !important;
      left:50%; transform:translateX(-50%); top:140%;
    }
    .promo-slider .caption h2{
      font-size:clamp(1.45rem, 5.2vw, 2rem) !important;
      line-height:1.15; text-align:center;
    }
    .promo-indicators{ top:70% !important }
  }
}
/* ===========================
   iPhone 16 – portrait (390–430)
   Riduzione dimensioni SOLO slide servizi (#slide2)
   =========================== */
@supports (-webkit-touch-callout:none){
  @media screen and (orientation:portrait) and (min-width:390px) and (max-width:430px){
    #slide2 .services-title{
      font-size: clamp(1.1rem, 4.2vw, 1.5rem);
      margin-bottom: 12px;
    }
    #slide2 .services-grid{
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      width: 94%;
      max-width: 1200px; /* mantiene il tuo cap */
      margin: 0 auto 32px;
    }
    #slide2 .service-item img{ width: 84px; height: 84px; }
    #slide2 .service-title{ font-size: clamp(.8rem, 3.2vw, .95rem); }
    #slide2 .hover-box{ font-size: .9rem; line-height: 1.25; }
    #slide2 .services-title{
      transform: translateY(-2.5vh); /* alza leggermente */
      margin-bottom: 10px;           /* mantiene spazio con la griglia */
      will-change: transform;
    }
    #slide2 .services-grid{
      transform: translateY(-2.5vh); /* alza la griglia */
      will-change: transform;
    }
  }
}

/* ===========================
   iPhone 16 Pro Max – portrait (435–747)
   Riduzione dimensioni SOLO slide servizi (#slide2)
   =========================== */
@supports (-webkit-touch-callout:none){
  @media screen and (orientation:portrait) and (min-width:435px) and (max-width:747px){
    #slide2 .services-title{
      font-size: 1.45rem;
      margin-bottom: 10px;
    }
    #slide2 .services-grid{
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      width: 90%;
      margin: 0 auto 28px;
    }
    #slide2 .service-item img{ width: 90px; height: 90px; }
    #slide2 .service-title{ font-size: 1rem; }
    #slide2 .hover-box{ font-size: .9rem; line-height: 1.2; }
  }
}
/* =========================================
   iPhone 16 – portrait (390–430)
   #slide3: 1 card centrata (60%), frecce visibili
   ========================================= */
@supports (-webkit-touch-callout:none){
  @media screen and (orientation:portrait) and (min-width:390px) and (max-width:430px){
    #slide3 .projects-carousel{ --pc-gap: 16px; }

    /* 1 card alla volta, centrata: 60% card + 20% padding per lato */
    #slide3 .pc-viewport{ overflow: hidden; }
    #slide3 .pc-track{
      grid-auto-columns: 60%;
      gap: var(--pc-gap);
      padding-inline: 20%;
      justify-content: start;
      align-items: center;
    }

    /* card grande ma senza cap forzato */
    #slide3 .project-box{ max-height: none; }

    /* frecce ben visibili dentro il viewport */
    #slide3 .pc-arrow{
      width: 48px; height: 48px;
      left: auto; right: auto;
      background: rgba(0,0,0,.65);
      backdrop-filter: blur(3px);
      box-shadow: 0 4px 12px rgba(0,0,0,.35);
      z-index: 15;
    }
    #slide3 .pc-prev{ left: 8px; }
    #slide3 .pc-next{ right: 8px; }
  }
}

/* =========================================
   iPhone 16 Pro Max – portrait (435–747)
   #slide3: 1 card centrata (60%), frecce visibili
   ========================================= */
@supports (-webkit-touch-callout:none){
  @media screen and (orientation:portrait) and (min-width:435px) and (max-width:747px){
    #slide3 .projects-carousel{ --pc-gap: 18px; }

    #slide3 .pc-viewport{ overflow: hidden; }
    #slide3 .pc-track{
      grid-auto-columns: 60%;
      gap: var(--pc-gap);
      padding-inline: 20%;
      justify-content: start;
      align-items: center;
    }

    #slide3 .project-box{ max-height: none; }

    #slide3 .pc-arrow{
      width: 52px; height: 52px;
      background: rgba(0,0,0,.65);
      backdrop-filter: blur(3px);
      box-shadow: 0 4px 12px rgba(0,0,0,.35);
      z-index: 15;
    }
    #slide3 .pc-prev{ left: 10px; }
    #slide3 .pc-next{ right: 10px; }
  }
}

/* =========================================
   iPad (es. 11") – 901–1375px
   #slide3: 1 card centrata (60%), frecce visibili
   ========================================= */
@media screen and (min-width:901px) and (max-width:1375px){
  #slide3 .projects-carousel{ --pc-gap: 24px; }

  #slide3 .pc-viewport{ overflow: hidden; }
  #slide3 .pc-track{
    grid-auto-columns: 60%;
    gap: var(--pc-gap);
    padding-inline: 20%;
    justify-content: start;
    align-items: center;
  }

  #slide3 .project-box{ max-height: none; }

  #slide3 .pc-arrow{
    width: 56px; height: 56px;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(3px);
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
    z-index: 15;
  }
  #slide3 .pc-prev{ left: 12px; }
  #slide3 .pc-next{ right: 12px; }
}
/* ===========================
   iPhone 16 – portrait (390–430): 1 progetto, grande e centrato
   =========================== */
@supports (-webkit-touch-callout:none){
  @media screen and (orientation:portrait) and (min-width:390px) and (max-width:430px){
    #slide3 .pc-viewport{ overflow:hidden; }            /* nasconde gli altri */
    #slide3 .pc-track{
      grid-auto-columns: 100%;                          /* 1 colonna per viewport */
      gap: 0;                                           /* niente “peek” tra card */
      padding-inline: 0;
      justify-content:start; align-items:center;
    }
    /* card più grande ma centrata dentro la colonna */
    #slide3 .project-box{
      width: 86vw;                                      /* più grande del 60% */
      max-width: none; max-height: none;
      margin-inline: auto;
    }
    /* bottoni sopra ai box */
    #slide3 .project-meta{ z-index: 5; }
    #slide3 .project-button{ position:relative; z-index: 6; }

    /* frecce ben visibili e sopra a tutto */
    #slide3 .pc-arrow{
      width: 56px; height: 56px;
      background: rgba(0,0,0,.7);
      backdrop-filter: blur(4px);
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
      z-index: 50;
    }
    #slide3 .pc-prev{ left: 8px; }
    #slide3 .pc-next{ right: 8px; }
  }
}

/* ===========================
   iPhone 16 Pro Max – portrait (435–747): ancora più grande
   =========================== */
@supports (-webkit-touch-callout:none){
  @media screen and (orientation:portrait) and (min-width:435px) and (max-width:747px){
    #slide3 .pc-viewport{ overflow:hidden; }
    #slide3 .pc-track{
      grid-auto-columns: 100%;
      gap: 0;
      padding-inline: 0;
      justify-content:start; align-items:center;
    }
    #slide3 .project-box{
      width: 88vw;                                      /* più grande del 16 base */
      max-width: none; max-height: none;
      margin-inline: auto;
    }
    #slide3 .project-meta{ z-index: 5; }
    #slide3 .project-button{ position:relative; z-index: 6; }

    #slide3 .pc-arrow{
      width: 60px; height: 60px;
      background: rgba(0,0,0,.7);
      backdrop-filter: blur(4px);
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
      z-index: 50;
    }
    #slide3 .pc-prev{ left: 10px; }
    #slide3 .pc-next{ right: 10px; }
  }
}

/* ===========================
   iPad (es. 11") – 901–1375: 1 progetto, grande e centrato
   =========================== */
@media screen and (min-width:901px) and (max-width:1375px){
  #slide3 .pc-viewport{ overflow:hidden; }
  #slide3 .pc-track{
    grid-auto-columns: 100%;                            /* 1 per volta */
    gap: 0;
    padding-inline: 0;
    justify-content:start; align-items:center;
  }
  #slide3 .project-box{
    width: 72vw;                                        /* bello grande su iPad */
    max-width: none; max-height: none;
    margin-inline: auto;
  }
  #slide3 .project-meta{ z-index: 5; }
  #slide3 .project-button{ position:relative; z-index: 6; }

  #slide3 .pc-arrow{
    width: 64px; height: 64px;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(4px);
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
    z-index: 50;
  }
  #slide3 .pc-prev{ left: 12px; }
  #slide3 .pc-next{ right: 12px; }
}
/* ===== iPhone 16 (390–430) – una card per volta, swipe + frecce ===== */
@supports (-webkit-touch-callout:none){
  @media screen and (orientation:portrait) and (min-width:390px) and (max-width:430px){
    #slide3 .pc-viewport{
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      scroll-behavior: smooth;
      touch-action: pan-x pinch-zoom;
    }
    #slide3 .pc-track{
      display: flex !important;          /* passa a flex su iOS */
      gap: 0 !important;                 /* niente spazi tra card */
      transform: none !important;        /* disattiva translateX del JS desktop */
      transition: none !important;
      padding-inline: 0 !important;
    }
    #slide3 .project-box{
      flex: 0 0 100%;                    /* 1 card = 100% viewport */
      scroll-snap-align: center;
      scroll-snap-stop: always;
      max-height: none;
      margin: 0;
    }
    /* bottoni davanti al contenuto */
    #slide3 .project-meta{ z-index: 5; }
    #slide3 .project-button{ position: relative; z-index: 6; }

    /* frecce ben visibili, sopra tutto */
    #slide3 .pc-arrow{
      width: 56px; height: 56px;
      background: rgba(0,0,0,.7);
      backdrop-filter: blur(4px);
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
      z-index: 50;
    }
    #slide3 .pc-prev{ left: 8px; }
    #slide3 .pc-next{ right: 8px; }
  }
}

/* ===== iPhone 16 Pro Max (435–747) – una card per volta, più grande ===== */
@supports (-webkit-touch-callout:none){
  @media screen and (orientation:portrait) and (min-width:435px) and (max-width:747px){
    #slide3 .pc-viewport{
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      scroll-behavior: smooth;
      touch-action: pan-x pinch-zoom;
    }
    #slide3 .pc-track{
      display: flex !important;
      gap: 0 !important;
      transform: none !important;
      transition: none !important;
      padding-inline: 0 !important;
    }
    #slide3 .project-box{
      flex: 0 0 100%;
      scroll-snap-align: center;
      scroll-snap-stop: always;
      max-height: none;
      margin: 0;
    }
    #slide3 .project-meta{ z-index: 5; }
    #slide3 .project-button{ position: relative; z-index: 6; }

    #slide3 .pc-arrow{
      width: 60px; height: 60px;
      background: rgba(0,0,0,.7);
      backdrop-filter: blur(4px);
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
      z-index: 50;
    }
    #slide3 .pc-prev{ left: 10px; }
    #slide3 .pc-next{ right: 10px; }
  }
}

/* ===== iPad (es. 11", 901–1375) – una card per volta, swipe fluido ===== */
@media screen and (min-width:901px) and (max-width:1375px){
  #slide3 .pc-viewport{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    touch-action: pan-x pinch-zoom;
  }
  #slide3 .pc-track{
    display: flex !important;
    gap: 0 !important;
    transform: none !important;
    transition: none !important;
    padding-inline: 0 !important;
  }
  #slide3 .project-box{
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    max-height: none;
    margin: 0;
  }
  #slide3 .project-meta{ z-index: 5; }
  #slide3 .project-button{ position: relative; z-index: 6; }

  #slide3 .pc-arrow{
    width: 64px; height: 64px;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(4px);
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
    z-index: 50;
  }
  #slide3 .pc-prev{ left: 12px; }
  #slide3 .pc-next{ right: 12px; }
}
/* iPhone 16 (390–430) — card un filo più stretta */
@supports (-webkit-touch-callout:none){
  @media screen and (orientation:portrait) and (min-width:390px) and (max-width:430px){
    #slide3 .project-box{ width: 80vw; } /* prima ~86vw */
  }
}

/* iPad 11"/12.9" (901–1375) — card un filo più stretta */
@media screen and (min-width:901px) and (max-width:1375px){
  #slide3 .project-box{ width: 66vw; } /* prima ~72vw */
}