/* ==========================================================================
   Adattamenti per telefono e tablet.
   Ogni regola sta dentro una media query: oltre i 992 px il sito e' identico a prima.
   Va caricato per ultimo, dopo tutti gli altri fogli di stile.
   ========================================================================== */

/* Elementi presenti nella pagina solo per il menu mobile: su desktop non si vedono */
.nav .nav-close,
.dropdown a.dd-parent { display: none; }

/* --------------------------------------------------------------------------
   Tablet e telefono (fino a 992 px)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {

  /* Menu laterale: chiusura con X, sfondo scuro dietro, pagina "madre" nelle tendine */
  .nav { z-index: 1100; }
  .nav.is-open { box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55), -10px 0 30px rgba(0, 0, 0, 0.15); }
  .nav .nav-close {
    display: block;
    position: absolute; top: 14px; right: 14px;
    width: 44px; height: 44px; padding: 0;
    border: 0; background: none; cursor: pointer;
    font-size: 34px; line-height: 44px; text-align: center;
    color: var(--color-dark);
  }
  .nav-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .nav .nav-item > .nav-link { display: block; padding-top: 11px; padding-bottom: 11px; }
  .dropdown a.dd-parent { display: block; font-weight: 700; }

  /* Carosello della home: pallini piu' facili da toccare (l'aspetto non cambia) */
  .hero-dots { gap: 18px; }
  .hero-dot { position: relative; }
  .hero-dot::after { content: ""; position: absolute; inset: -10px; }

  /* Cifre in home: con un numero dispari l'ultimo occupa tutta la riga, centrato */
  .stats .stat-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Link del footer: bersagli di tocco piu' alti */
  .footer-grid ul li { margin-bottom: 0; }
  .footer-grid ul li a { display: block; padding: 10px 0; }

  /* Sfondo a puntini: altezza stabile anche quando la barra del browser si nasconde,
     e immagine intera nella larghezza dello schermo (come su desktop, ma in scala) */
  body::before {
    inset: auto;
    top: 0; left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    background-size: 100% auto;
    background-position: left bottom;
  }
}

/* --------------------------------------------------------------------------
   Telefono (fino a 700 px)
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {

  /* Trattini delle liste: allineati alla prima riga anche quando la voce va a capo */
  .cs-goals li::before,
  .cs-list li::before { top: calc(10px + 0.8em); }
  .div-panel-body li::before { top: calc(6px + 0.8em); }
  .etica-list li::before { top: calc(8px + 0.8em); }

  /* Privacy: testo non giustificato (niente buchi tra le parole) */
  .privacy-text p,
  .privacy-text li { text-align: left; }
  .privacy-doc small { font-size: 0.86rem; }

  /* Etichette troppo piccole */
  .eyebrow,
  .collab-card-body .tag,
  .fantatb-hero-side dt,
  .tl-label { font-size: max(0.8rem, 12.5px); }

  /* Titoli delle card su due righe: interlinea come nel resto del testo */
  .workpro-module h3,
  .sysadmin-pillar h3, .sysadmin-category h3, .sysadmin-step h3,
  .rentechnology-pillar h3, .rentechnology-category h3, .rentechnology-step h3 { line-height: 1.3; }

  /* Pulsante "Cookie Settings" (cerchio bianco in basso a sinistra): piu' piccolo e con un'ombra,
     cosi' non copre i contenuti e si vede anche su fondo chiaro */
  .cky-btn-revisit-wrapper.cky-revisit-bottom-left {
    width: 38px; height: 38px;
    left: 10px; bottom: 10px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.25);
  }
  .cky-btn-revisit-wrapper .cky-btn-revisit img { height: 24px; width: 24px; }

  /* Divisioni: meno vuoto tra l'introduzione e il primo riquadro */
  #divisioni { padding-bottom: 24px; }
  #divisioni-elenco { padding-top: 0; }

  /* SMARCA: la gru al centro, dietro al testo */
  .smarca-hero-crane {
    right: auto; left: 50%;
    transform: translateX(-50%);
    max-width: none;
    height: 66%;
    object-position: center bottom;
    opacity: 0.2 !important;
  }
}

/* --------------------------------------------------------------------------
   Telefono stretto (fino a 560 px)
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {

  /* Barra in alto: indirizzo su una riga, telefono e icone sulla seconda, senza spezzare il numero */
  .topbar .container { flex-wrap: wrap; row-gap: 2px; }
  .topbar-left { flex: 1 1 100%; }
  .topbar-right { flex: 1 1 100%; gap: 12px; }
  .topbar-right a[href^="tel"] { white-space: nowrap; margin-right: auto; }

  /* Schede certificazioni: bollino sopra, testo a tutta larghezza */
  .cert-card { flex-direction: column; align-items: flex-start; padding: 26px 22px; gap: 16px; }
}

/* Il fumetto a schermo intero deve stare sopra il banner dei cookie (altrimenti nasconde il tasto Chiudi) */
.flip-modal { z-index: 100000000; }

/* --------------------------------------------------------------------------
   Fumetto su telefono (vedi js/fumetto.js): pagine scorrevoli con il dito, nitide
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .split-media--flip { padding: 32px 14px; }
  .flip-row { gap: 6px; }
  .flip-arrow { width: 36px; height: 36px; }
  .flip-stage.flip-scroll {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #fff;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
  }
  .flip-stage.flip-scroll::-webkit-scrollbar { display: none; }
  .flip-stage.flip-scroll img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
  }

  /* schermo intero: una pagina grande, frecce accanto al contatore */
  .flip-modal { padding: 10px; gap: 10px; justify-content: flex-start; }
  .flip-modal .flip-row { width: 100%; flex: 1 1 auto; min-height: 0; }
  .flip-modal .flip-stage-wrap { width: 100%; height: 100%; aspect-ratio: auto; }
  .flip-modal .flip-stage { width: 100%; height: 100%; }
  .flip-modal .flip-bar { gap: 8px; padding-bottom: 6px; }
  .flip-modal .flip-arrow { width: 40px; height: 40px; }
  .flip-zoom {
    width: 100%; height: 100%;
    overflow: auto;
    display: flex; align-items: center; justify-content: center;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  .flip-zoom img { display: block; max-width: 100%; max-height: 100%; user-select: none; background: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35); }
  .flip-zoom.is-zoomed { display: block; }
  .flip-zoom.is-zoomed img { max-width: none; max-height: none; width: 260%; }
}