/* ================================================================
   VLASTIR — MOBILE OPTIMIZATIONS v2.1
   Breakpoints: 1024 (tablet) · 900 · 768 (small tablet) · 600 · 480 · 380 (phone)
   Touch targets >= 44px, full-width CTAs, stacked grids, no horizontal scroll
   ================================================================ */

/* === Global: tap targets, no horizontal scroll === */
@media (max-width: 768px){
  html, body { overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }
  a, button, [role="button"], input[type="submit"]{ min-height: 44px; }
  .vlx-container{ padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  body.vlx-front-page{ padding-bottom: 72px; background: var(--c-dark, #0a0a0a); } /* spazio per la sticky CTA bar */
}

/* === HEADER mobile === */
@media (max-width: 900px){
  /* Mostra hamburger, nascondi nav desktop */
  .vlx-hamburger{ display: flex !important; }
  .vlx-nav{ display: none !important; }

  .vlx-header__inner{ padding-top: .5rem; padding-bottom: .5rem; }
  .vlx-header .vlx-btn--primary{ padding: .55rem 1rem !important; font-size: .82rem !important; }
}
@media (max-width: 600px){
  .vlx-logo__tagline{ display: none; }
  .vlx-logo__wordmark{ font-size: 1.35rem; }
  .vlx-header .vlx-btn--primary{ display: none; }
}

/* === HERO mobile === */
@media (max-width: 768px){
  .vlx-hero{ min-height: auto; padding: 5rem 0 3rem; }
  .vlx-hero__inner{ text-align: left; }
  .vlx-hero__title{ font-size: clamp(2rem, 9vw, 2.75rem) !important; line-height: 1.05; }
  .vlx-hero__sub{ font-size: 1rem !important; line-height: 1.5; margin-bottom: 1.75rem; }
  .vlx-hero__rule{ margin: 1.25rem 0; }
  .vlx-hero__eyebrow .vlx-overline{ font-size: .68rem; letter-spacing: .12em; }
  .vlx-hero__cta{ flex-direction: column; align-items: stretch; gap: .6rem; }
  .vlx-hero__cta .vlx-btn{ width: 100%; justify-content: center; padding: 1rem 1.25rem !important; font-size: .92rem; }
  .vlx-hero__scroll{ display: none; }
}
@media (max-width: 480px){
  .vlx-hero__title{ font-size: clamp(1.85rem, 10vw, 2.35rem) !important; }
}

/* HERO mini lead === */
@media (max-width: 768px){
  .vlx-hero__minilead{ margin-top: 1.5rem; gap: .5rem; }
  .vlx-hero__minilead .vlx-form__input{ min-height: 50px; font-size: 1rem; padding: .85rem 1rem; }
  .vlx-hero__minilead .vlx-btn{ min-height: 52px; padding: 1rem 1.25rem !important; }
}

/* === TRUST STRIP mobile === */
@media (max-width: 768px){
  .vlx-trust-strip{ padding: .85rem 0; }
  .vlx-trust-strip__list{ gap: .55rem 1rem; font-size: .75rem; }
}
@media (max-width: 480px){
  .vlx-trust-strip__list{ gap: .5rem .85rem; font-size: .72rem; }
}

/* === STATS mobile === */
@media (max-width: 768px){
  .vlx-stats{ padding: 2.5rem 0; }
  .vlx-stats__grid{ grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .vlx-stat__number{ font-size: 2.25rem !important; }
  .vlx-stat__suffix{ font-size: 1.5rem !important; }
  .vlx-stat__label{ font-size: .72rem; letter-spacing: .08em; }
}
@media (max-width: 380px){
  .vlx-stats__grid{ grid-template-columns: 1fr 1fr; gap: 1.25rem .75rem; }
  .vlx-stat__number{ font-size: 2rem !important; }
}

/* === SERVIZI cards mobile === */
@media (max-width: 768px){
  .vlx-section{ padding: 3rem 0 !important; }
  .vlx-grid--4{ grid-template-columns: 1fr !important; gap: 1.5rem; }
  .vlx-service-card{ max-width: 100%; }
  .vlx-service-card__title{ font-size: 1.35rem !important; }
  .vlx-service-card__text{ font-size: .92rem; }
  .vlx-service-card__meta{ font-size: .8rem; flex-wrap: wrap; }
  .vlx-service-card__link{ min-height: 44px; padding: .5rem 0; }
}

/* === PARTNERS logos mobile === */
@media (max-width: 768px){
  .vlx-partners{ padding: 2.5rem 0; }
  .vlx-partners__logos{ gap: 1rem 1.25rem; }
  .vlx-partners__logo{ font-size: .9rem; padding: .55rem 1rem; min-width: 110px; }
}
@media (max-width: 480px){
  .vlx-partners__logo{ font-size: .82rem; min-width: 100px; padding: .5rem .85rem; }
}

/* === COME FUNZIONA / PROCESS mobile === */
@media (max-width: 768px){
  .vlx-process__grid{ grid-template-columns: 1fr !important; gap: 2rem; }
  .vlx-process__step{ text-align: center; padding: 0 .25rem; }
  .vlx-process__step:not(:last-child)::after,
  .vlx-process__step:not(:first-child)::before{ display: none !important; }
  .vlx-process__num{ font-size: 2.25rem !important; }
  .vlx-process__title{ font-size: 1.2rem !important; }
  .vlx-process__text{ font-size: .92rem; line-height: 1.55; }
}

/* === TESTIMONIANZE mobile === */
@media (max-width: 900px){
  .vlx-testimonials__grid{ grid-template-columns: 1fr !important; gap: 1.25rem; }
  .vlx-testimonial{ padding: 1.5rem 1.25rem; }
  .vlx-testimonial__text{ font-size: 1rem; line-height: 1.55; }
  .vlx-testimonial__mark{ font-size: 2.25rem; }
}

/* === GUARANTEE mobile === */
@media (max-width: 900px){
  .vlx-guarantee{ padding: 3.5rem 0; }
  .vlx-guarantee__inner .vlx-h2{ font-size: 1.75rem !important; }
  .vlx-guarantee__grid{ grid-template-columns: 1fr; gap: .85rem; margin-top: 1.75rem; }
  .vlx-guarantee__item{ padding: 1.25rem 1.1rem; }
  .vlx-guarantee__title{ font-size: 1.1rem; }
  .vlx-guarantee__text{ font-size: .88rem; }
}

/* === MATERIALI mobile === */
@media (max-width: 900px){
  .vlx-materials{ display: flex !important; flex-direction: column !important; }
  .vlx-materials__list-side{ padding: 2.5rem 1.25rem !important; }
  .vlx-materials__image-side{ height: 240px; position: relative !important; }
  .vlx-materials__image-side .vlx-placeholder{ position: absolute; inset: 0; }
  .vlx-materials__item{ flex-wrap: wrap; padding: .85rem 0; }
  .vlx-materials__name{ font-size: 1.1rem; }
  .vlx-materials__desc{ font-size: .8rem; }
  .vlx-materials__note{ font-size: .75rem; }
}

/* === BOOKING FORM mobile === */
@media (max-width: 768px){
  .vlx-booking{ padding: 3rem 0 !important; }
  .vlx-booking .vlx-h2{ font-size: 1.75rem !important; }
  .vlx-form{ grid-template-columns: 1fr !important; gap: 1rem !important; }
  .vlx-form__group{ width: 100%; }
  .vlx-form__group--full{ grid-column: 1 / -1; }
  .vlx-form__label{ font-size: .82rem; }
  .vlx-form__input,
  .vlx-form__select,
  .vlx-form__textarea{ font-size: 16px !important; min-height: 50px; padding: .85rem 1rem; } /* 16px evita lo zoom iOS */
  .vlx-form__textarea{ min-height: 110px; }
  .vlx-form__check{ font-size: .85rem; gap: .5rem; }
  .vlx-form__microtrust{ font-size: .72rem; line-height: 1.5; }
  .vlx-form__submit .vlx-btn{ font-size: 1rem !important; padding: 1.05rem 1.25rem !important; min-height: 54px; }
}

/* === FOOTER mobile === */
@media (max-width: 900px){
  .vlx-footer__top{ grid-template-columns: 1fr 1fr !important; gap: 2rem 1.25rem; }
}
@media (max-width: 600px){
  .vlx-footer{ padding: 2.5rem 0 1.5rem !important; }
  .vlx-footer__top{ grid-template-columns: 1fr !important; gap: 1.75rem; text-align: left; }
  .vlx-footer__col-title{ font-size: .9rem; margin-bottom: .75rem; }
  .vlx-footer__link{ font-size: .9rem; padding: .35rem 0; display: inline-block; min-height: 36px; }
  .vlx-footer__bottom{ flex-direction: column; gap: .75rem; align-items: flex-start; }
  .vlx-footer__copy{ font-size: .78rem; }
}

/* === WHATSAPP FLOAT — nascondere su mobile (sostituito dalla sticky bar) === */
@media (max-width: 768px){
  .vlx-wa-float{ display: none !important; }
}

/* === STICKY MOBILE CTA BAR === */
.vlx-mobile-cta{ display: none; }
@media (max-width: 768px){
  .vlx-mobile-cta{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--c-charcoal, #1a1a1a);
    border-top: 1px solid rgba(199,168,107,.3);
    box-shadow: 0 -4px 20px rgba(0,0,0,.25);
    z-index: 9998;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .vlx-mobile-cta__btn{
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    padding: .65rem .25rem;
    min-height: 60px;
    font-family: Inter, sans-serif;
    font-size: .72rem;
    letter-spacing: .04em;
    color: #f5efe6;
    text-decoration: none;
    background: transparent;
    border: none;
    transition: background .2s;
  }
  .vlx-mobile-cta__btn:active{ background: rgba(255,255,255,.06); }
  .vlx-mobile-cta__btn + .vlx-mobile-cta__btn{ border-left: 1px solid rgba(199,168,107,.18); }
  .vlx-mobile-cta__icon{ font-size: 1.15rem; line-height: 1; }
  .vlx-mobile-cta__label{ font-weight: 500; }
  .vlx-mobile-cta__btn--wa{ color: #f5efe6; }
  .vlx-mobile-cta__btn--book{ color: var(--c-gold, #c7a86b); font-weight: 600; }
  .vlx-mobile-cta__btn--book .vlx-mobile-cta__icon{ font-size: 1rem; }
  body.vlx-mobile-nav-open .vlx-mobile-cta{ display: none; }
}

/* === MOBILE NAV — touch targets === */
@media (max-width: 900px){
  .vlx-mobile-nav__link{ min-height: 56px; display: flex; align-items: center; padding: 1rem 0; }
  .vlx-mobile-nav__sub-link{ min-height: 44px; display: flex; align-items: center; }
}

/* === REDUCE MOTION === */
@media (prefers-reduced-motion: reduce){
  .vlx-reveal, .vlx-reveal--delay-1, .vlx-reveal--delay-2, .vlx-reveal--delay-3{
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .vlx-hero__rule{ width: var(--sp-24) !important; transition: none !important; }
}

/* === FOCUS visibile (accessibilità) === */
.vlx-btn:focus-visible,
.vlx-form__input:focus-visible,
.vlx-form__select:focus-visible,
.vlx-form__textarea:focus-visible,
.vlx-mobile-cta__btn:focus-visible{
  outline: 2px solid var(--c-gold, #c7a86b);
  outline-offset: 2px;
}

/* === iOS Safari — supporto safe-area su sticky bar e footer === */
@supports (padding: max(0px)){
  @media (max-width: 768px){
    body.vlx-front-page{ padding-bottom: max(72px, calc(60px + env(safe-area-inset-bottom))); }
  }
}

/* === HONEYPOT anti-spam (invisibile a umani, visibile a bot) === */
.vlx-hp{ position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

/* === Hover post nav (sostituisce inline onmouseover) === */
.vlx-postnav-link{ display:block; font-family:var(--f-serif); font-size:var(--fs-lg); margin-top:var(--sp-2); color:var(--c-charcoal); transition: color .25s ease; }
.vlx-postnav-link:hover{ color: var(--c-gold); }

/* === HERO font size override (più contenuto) === */
:root{
  --fs-hero: clamp(2.25rem, 5vw, 4.25rem);
}
.vlx-hero__title{ line-height: 1.05; }

/* === WhatsApp float — spostato per non collidere con badge Iubenda === */
.vlx-wa-float{ bottom: 96px !important; right: 20px !important; }
@media (max-width: 768px){
  /* Su mobile la sticky bar gestisce WA, il float resta nascosto */
  .vlx-wa-float{ display: none !important; }
}

/* ================================================================
   MOBILE-ONLY (≤768px) — desktop invariato
   1) Home: mostra solo i 4 servizi principali + bottone "Tutti i Servizi"
   2) Sezione Igiene: card a slideshow (carosello swipe) solo su cellulare
   Selettori con #id → alta specificità, vincono sulla cascata.
   ================================================================ */
@media (max-width: 768px){
  /* 1) Solo i 4 servizi marcati come principali (scope #servizi = home) */
  #servizi .vlx-b2b-card:not(.vlx-b2b-card--main){ display: none; }

  /* 2) Igiene e Qualità → carosello orizzontale (solo #igiene).
     touch-action: pan-y → la pagina scorre SEMPRE in verticale a livello nativo;
     lo scorrimento orizzontale del carosello è gestito via JS (axis-lock) in main.js. */
  #igiene .vlx-values__grid{
    display: flex;
    grid-template-columns: none;
    gap: var(--sp-4);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: none;            /* Firefox */
    padding-bottom: var(--sp-3);
    margin-inline: calc(-1 * var(--sp-2));
    padding-inline: var(--sp-2);
  }
  #igiene .vlx-values__grid::-webkit-scrollbar{ display: none; } /* Chrome/Safari */
  #igiene .vlx-value--media{
    flex: 0 0 85%;
  }
  /* Pallini indicatori del carosello igiene */
  #igiene .vlx-carousel-dots{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
  }
}