/* avaservice.it — correzioni di impaginazione (25/10/2026). Solo layout: testi, colori e font restano quelli della pagina. */

/* 1. HERO ------------------------------------------------------------------------------------------------------- */

/* Titolo proporzionato alla colonna: la parola più lunga («Tecnologiche») resta sempre dentro la propria slide. */
@media (min-width: 969px) {
  .hero .slide h1,
  .hero .slide h2 {
    font-size: clamp(2.25rem, 0.9rem + 2.4vw, 3.5rem) !important;
    line-height: 1.12;
  }
}
/* Ogni slide ritaglia il proprio contenuto (niente lettere della slide accanto durante o dopo il passaggio) e ha
   un piccolo margine interno, così il bottone che si ingrandisce al passaggio del mouse non viene tagliato. */
.hero .slider-container {
  margin-inline: -12px;
  width: calc(100% + 24px);
}
.hero .slider .slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 6px 12px;
  overflow: hidden;
}
.hero .slider-container > .mt-12 {
  padding-inline: 12px;
  max-width: calc(20rem + 24px);
}

/* Altezza: mai più bassa del contenuto sugli schermi bassi (13"), il bottone resta sopra la piega. */
@media (min-width: 1024px) {
  .hero { min-height: 480px; }
}

/* Video/immagine a destra: il primo fotogramma (e l'anteprima) ha un primo piano scuro a sinistra; inquadrato
   dal lato del soggetto, il pannello scuro sparisce. Bordo sfumato tra pannello e video invece dello stacco netto. */
.hero .hero-video { object-position: 72% 50%; }
@media (min-width: 1024px) {
  .hero .hero-video {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
    mask-image: linear-gradient(to right, transparent 0, #000 22%);
  }
  .hero .hero-overlay {
    background: linear-gradient(to right, rgb(3 36 51) 0%, rgb(69 105 121) 35%, rgba(69, 105, 121, 0.92) 39%,
      rgba(51, 77, 92, 0.6) 47%, rgba(0, 0, 0, 0.25) 78%, transparent 100%);
  }
}

/* 2. «HANNO GIÀ SCELTO AVASERVICE»: nastro continuo, centrato, sfumato uguale ai due lati ------------------------- */
#clienti .logo-gradient-mask {
  --lf-gap: 1.5rem;
  left: 0 !important;
  width: min(72rem, 100% - 2rem) !important;
  margin-inline: auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}
@media (min-width: 768px) {
  #clienti .logo-gradient-mask { --lf-gap: 2.5rem; }
}
/* Da computer la linguetta «Assistenza» (60px, fissa a destra) non deve mai coprire i loghi. */
@media (min-width: 1024px) {
  #clienti .logo-gradient-mask { width: min(72rem, 100% - 11rem) !important; }
}
#clienti .animate-infinite-scroll {
  --lf-shift: -20%;
  animation: lf-marquee 32s linear infinite;
  will-change: transform;
}
/* Il nastro scorre esattamente di un gruppo di loghi per giro: nessuno scatto, nessun vuoto. */
#clienti .animate-infinite-scroll:has(> :nth-child(2):last-child) { --lf-shift: -50%; }
#clienti .animate-infinite-scroll:has(> :nth-child(3):last-child) { --lf-shift: -33.3333%; }
#clienti .animate-infinite-scroll:has(> :nth-child(4):last-child) { --lf-shift: -25%; }
#clienti .animate-infinite-scroll:has(> :nth-child(5):last-child) { --lf-shift: -20%; }
#clienti .animate-infinite-scroll:has(> :nth-child(6):last-child) { --lf-shift: -16.6667%; }
#clienti .animate-infinite-scroll:not(:has(> :nth-child(2))) { animation: none; }
#clienti .animate-infinite-scroll > div {
  gap: var(--lf-gap) !important;
  padding-inline: calc(var(--lf-gap) / 2) !important;
}
#clienti .logo-gradient-mask:hover .animate-infinite-scroll { animation-play-state: paused; }
@keyframes lf-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(var(--lf-shift)); }
}
@media (max-width: 767px) {
  #clienti .animate-infinite-scroll { animation-duration: 22s; }
}
@media (prefers-reduced-motion: reduce) {
  #clienti .animate-infinite-scroll { animation: none !important; width: 100%; justify-content: center; }
  #clienti .animate-infinite-scroll > [aria-hidden="true"] { display: none; }
  #clienti .animate-infinite-scroll > div { flex-wrap: wrap; justify-content: center; row-gap: 1.5rem !important; min-width: 0 !important; }
  #clienti .logo-gradient-mask { -webkit-mask-image: none; mask-image: none; }
}

/* 3. LINGUETTA «ASSISTENZA» ------------------------------------------------------------------------------------- */
/* Dove il margine laterale è più stretto della linguetta (60px), i contenuti rientrano quanto basta: la linguetta
   non copre più bordi di schede, testi e bottoni. Stesso rientro per menu e contenuti, così restano allineati. */
@media (min-width: 1024px) and (max-width: 1151.98px) {
  .container { padding-left: max(1rem, calc(76px - (100vw - 1024px) / 2)) !important;
               padding-right: max(1rem, calc(76px - (100vw - 1024px) / 2)) !important; }
}
@media (min-width: 1280px) and (max-width: 1407.98px) {
  .container { padding-left: max(1rem, calc(76px - (100vw - 1280px) / 2)) !important;
               padding-right: max(1rem, calc(76px - (100vw - 1280px) / 2)) !important; }
}
@media (min-width: 1536px) and (max-width: 1663.98px) {
  .container { padding-left: max(1rem, calc(76px - (100vw - 1536px) / 2)) !important;
               padding-right: max(1rem, calc(76px - (100vw - 1536px) / 2)) !important; }
}

/* 4. SERVIZI: il link «Scopri…» su due righe resta allineato a sinistra come il testo della scheda. */
#servizi .service-card .expand-btn { text-align: left; }

/* 5. RECENSIONI: le frecce stanno fuori dalle schede, non sopra il testo. */
@media (min-width: 768px) {
  #recensioni .relative.group { padding-inline: 3.5rem; }
  #recensioni #reviewsContainer { scroll-padding-inline: 0; }
}

/* 6. «Prenota una consulenza»: il calendario non mostra barre di scorrimento fisse (Windows). */
#my-cal-inline-presentazione-avaservice { overflow: auto !important; }

/* 7. TELEFONO --------------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Titolo della sezione divisioni: niente parola isolata su una riga per l'a capo pensato per il computer. */
  #azienda h2 br { display: none; }
  /* Bersagli comodi per il dito. */
  #mobileMenuButton { padding: 4px 12px; margin-right: -12px; }
  footer a { display: inline-block; padding-block: 0.3rem; }
  #assistenza-mobile button { padding-block: 0.5rem; }
  #servizi .service-card .expand-btn { padding-block: 0.4rem; }
}

/* 8. Le animazioni d'ingresso (AOS) partono spostate di 100px: non devono allargare la pagina oltre lo schermo. */
body > section, body > header { overflow-x: clip; }

/* 9. Titoli: righe bilanciate, mai una parola sola sull'ultima riga (stesso testo, solo dove va a capo). */
h1, h2, h3 { text-wrap: balance; }
@media (max-width: 1279.98px) {
  #azienda h2 br { display: none; }
}

/* 10. Piè di pagina sui portatili piccoli (1024–1279px): quattro colonne strette spezzavano icone e indirizzi
   e-mail; due colonne per riga, allineate. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  footer .lg\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}