/* ==========================

   GLOBAL MOBILE FIXES

============================== */

html, body {

  max-width: 100%;

  overflow-x: hidden;

}



/* stop auto-zoom testi iOS */

html { -webkit-text-size-adjust: 100%; }



/* La topbar è fixed → aggiungiamo spazio solo in MOBILE */

@media (max-width: 600px) {

  body { padding-top: 80px; }

}



/* ==========================

   HERO SLIDER MOBILE

============================== */

@media (max-width: 600px) {

  .hero-slider {

    position: relative;

    width: 100%;

    height: 60vh;

    min-height: 360px;

  }



  .hero-slide { position: absolute; inset: 0; }



  .hero-slide video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 0;

  }



  .hero-content { padding: 0 16px; }



  .hero-content h1 {

    max-width: 90%;

    margin: 0 auto;

    font-size: 19px;

    letter-spacing: 0.11em;

  }



  .hero-arrow { font-size: 24px; padding: 6px 10px; }

  .hero-prev { left: 12px; }

  .hero-next { right: 12px; }



  .scroll-down { bottom: 50px; }

}



/* ==========================

   TOPBAR MOBILE/TABLET (<= 900px)

============================== */

@media (max-width: 900px) {

  .topbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: nowrap;

    gap: 8px;

    padding: 6px 10px;

  }



  .topbar-left {

    order: 0 !important;

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    gap: 4px;

  }



  .topbar-center {

    order: 1 !important;

    flex: 1 1 auto;

    width: auto !important;

    margin-top: 0 !important;

    padding: 0 8px;

    text-align: center;

  }



  .topbar-right {

    order: 2 !important;

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    gap: 8px;

  }



  .logo-mark img {

    height: 32px;

    width: auto;

    display: block;

  }



  .tagline {

    font-size: 8px;

    letter-spacing: 0.14em;

    white-space: normal !important;

    word-break: break-word;

    line-height: 1.3;

    overflow: hidden;

    text-overflow: ellipsis;

  }



  .social-btn { width: 24px; height: 24px; border-width: 1px; }



  .social-btn img {

    width: 70%;

    height: 70%;

    object-fit: contain;

  }



  .lang-switcher { position: relative; }

  .topbar, .lang-switcher { overflow: visible !important; }



  .lang-menu {

    position: absolute;

    top: calc(100% - 2px);

    right: 0;

    left: auto;

    min-width: 70px;

    width: auto;

    transform: none;

    z-index: 3000;

  }



  .lang-menu li { padding: 6px 10px; font-size: 11px; }



  .lang-btn {

    padding: 4px 10px;

    font-size: 10px;

    letter-spacing: 0.1em;

  }

}



/* slogan NON va a capo su mobile */

@media (max-width: 600px) {

  .tagline {

    white-space: nowrap !important;

    font-size: 8px;

    letter-spacing: 0.14em;

    max-width: 100%;

    overflow: hidden;

  }

}



/* ==========================

   INFO SECTION MOBILE

============================== */

@media (max-width: 600px) {

  .info-section { padding: 40px 6% 20px; }

  .info-grid { grid-template-columns: 1fr; gap: 24px; }

  .info-card { padding: 24px 18px; }

  .info-card h3 { font-size: 16px; }

  .info-list li { font-size: 13px; }

}



/* ==========================

   VIDEO SECTION MOBILE

============================== */

@media (max-width: 600px) {

  .video-section { padding: 20px 0 40px; }

  .video-wrapper {

    width: 94%;

    margin: 0 auto;

    border-radius: 16px;

  }

  .video-wrapper video { border-radius: 16px; }

}



/* ==========================

   PORTFOLIO MOBILE: CARD + OVERLAY

============================== */

@media (max-width: 600px) {

  /* track e riga */

  .works-track { overflow-x: auto; }

  .works-slide { display: flex; gap: 12px; }



  /* card più “wide” -> meno tagli */

  .works-section .work-item{

    flex: 0 0 72vw !important;

    width: 72vw !important;

    max-width: 320px !important;

    aspect-ratio: 16 / 10 !important;

    height: auto !important;

    border-radius: 22px !important;

    overflow: hidden !important;

    position: relative;

  }



  .works-section .work-item img{

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    object-position: center !important;

    display: block !important;

    transform: none !important;

  }



  /* overlay: parte dall’alto, scrollabile */

  .work-overlay{

    display: flex !important;

    flex-direction: column !important;

    justify-content: flex-start !important;

    align-items: flex-start !important;



    opacity: 0;

    pointer-events: none;

    transform: translateY(10px);

    transition: opacity .25s ease, transform .25s ease;



    padding: 16px 26px 14px 16px !important; /* spazio a destra per scrollbar */

    overflow-y: auto !important;

    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch !important;



    position: absolute !important;

    inset: 0 !important;

  }



  .work-item.is-active .work-overlay{

    opacity: 1;

    pointer-events: auto;

    transform: translateY(0);

  }



  .work-overlay h3{

    font-size: 16px !important;

    line-height: 1.15;

    margin: 0 0 10px;

    letter-spacing: 0.10em;

    text-transform: uppercase;

    word-break: break-word;

  }



  .work-overlay p{

    font-size: 12px !important;

    line-height: 1.35;

    margin: 6px 0;

  }



  /* fake scrollbar (iOS Safari friendly) */

  .work-overlay .fake-scrollbar-track{

    position: absolute;

    top: 14px;

    right: 10px;

    bottom: 14px;

    width: 8px;

    border-radius: 999px;

    background: rgba(255,255,255,0.10);

    pointer-events: none;

    opacity: 0;

    transition: opacity .2s ease;

  }



  .work-overlay .fake-scrollbar-thumb{

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 30px;

    border-radius: 999px;

    background: rgba(0,0,0,0.92);

    border: 2px solid rgba(255,255,255,0.10);

    pointer-events: none;

  }



  .work-item.is-active .work-overlay .fake-scrollbar-track{

    opacity: 1;

  }

}



/* ==========================

   CLIENTS MOBILE

============================== */

@media (max-width: 600px) {

  .clients-section { padding: 35px 6% 40px; }

  .clients-section h2 { font-size: 22px; }

  .clients-subtitle { font-size: 13px; }

  .clients-logos { padding: 8px 40px; gap: 24px; }

}



/* ==========================

   EVENTS MOBILE

============================== */

@media (max-width: 600px) {

  .events-section { padding: 35px 6% 40px; }

  .events-section h2 { font-size: 22px; }

  .events-subtitle { font-size: 13px; }

  .events-logos { gap: 24px; }

}



/* ==========================

   CONTACT FORM MOBILE

============================== */

@media (max-width: 600px) {

  .contact-section { padding: 40px 6% 40px; }

  .contact-inner { grid-template-columns: 1fr; gap: 28px; }

  .contact-text h2 { font-size: 22px; text-align: left; }

  .contact-text p { font-size: 13px; }

  .contact-form-wrapper { padding: 20px 16px; }

}



/* ==========================

   SOCIAL MOBILE

============================== */

@media (max-width: 600px) {

  .social-section { padding: 40px 6% 40px; }

  .social-section h2 { font-size: 22px; }

  .social-subtitle { font-size: 13px; }

  .social-grid { grid-template-columns: 1fr; gap: 24px; }

  .social-column h3 { text-align: left; }

}



/* ==========================

   FOOTER MOBILE

============================== */

@media (max-width: 600px) {

  .site-footer {

    white-space: normal;

    line-height: 1.5;

    padding: 16px 6%;

    font-size: 12px;

  }

  .site-footer span { display: inline-block; padding: 0 4px; }

}



/* DISATTIVA MENU SOCIAL (se non lo usi) */

.social-toggle, .social-menu { display: none !important; }