/* =============================================================
   Settore packaging e imballaggio — /settori/packaging-imballaggio/   (v5, 29/9/2026)
   Namespace .pak-, variabili su .page-pak. Il vecchio settore-packaging.css
   resta alla pagina inglese: questo foglio basta a se stesso.
   Stessa famiglia delle pagine cavi e gomma (carta bianca, inchiostro blu
   notte, un accento blu, titoli al centro con la seconda frase grigia), ma
   con la sua composizione:
   1 · apertura: solo testo
   2 · il settore: il tubo formatore a SINISTRA in colonna stretta (38%),
       il testo nel resto
   3 · le macchine: sei tessere grigie in due colonne sfalsate (muratura):
       sinistra alta / bassa / alta, destra bassa / alta / bassa; nel vuoto
       in fondo a destra la domanda, in grande
   4 · i clienti: tre loghi
   5 · da dove parti: fascia grigia, tre tessere bianche affiancate
   6 · domande (faq.css, componente unico)
   7 · per scriverci: una scheda bianca con tre righe, poi i pulsanti
   La pagina la scrive tools/settori-v5/packaging/pagina.py.
   ============================================================= */

.page-pak {
  --pak-ink: #0b1220;
  --pak-copy: #56627a;
  --pak-gray: #7b889c;
  --pak-accent: #2563eb;
  --pak-accent-ink: #1d4ed8;
  --pak-accent-deep: #1e3a8a;
  --pak-mist: #f5f5f7;
  --pak-rule: rgba(15, 23, 42, 0.14);
  --pak-pad: clamp(96px, 11vw, 168px);
  --pak-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* .page-home-corporate impone main{overflow:hidden}: qui basta non far scorrere di lato */
body.page-pak main {
  overflow-x: clip;
  overflow-y: visible;
  padding-top: 0;
  background: #ffffff;
}

.pak-wrap {
  width: min(100% - 40px, var(--max-width, 1200px));
  margin-inline: auto;
}

.page-pak section[id] { scroll-margin-top: 72px; }

.page-pak main :is(a, button, summary):focus-visible {
  outline: 3px solid var(--pak-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* l'occhiello e' LA voce delle etichette piccole: tessere, strade e voci
   della scheda parlano con lo stesso carattere, peso e spaziatura */
.pak-eyebrow,
.pak-tile__n,
.pak-way__n,
.pak-sheet__n {
  margin: 0;
  color: var(--pak-accent-deep);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* intestazione di sezione: al centro, seconda frase grigia, corpo dei cavi */
.pak-head {
  margin-inline: auto;
  text-align: center;
}
.pak-title {
  margin: 0.42em 0 0;
  color: var(--pak-ink);
  font-size: clamp(2.4rem, 5.4vw, 4.7rem);
  font-weight: 790;
  letter-spacing: -0.048em;
  line-height: 1.02;
  text-wrap: balance;
}
.pak-title span {
  display: block;
  color: var(--pak-gray);
}

.pak-link {
  color: var(--pak-accent);
  font-size: var(--fs-caption);
  font-weight: 640;
  text-decoration: none;
  white-space: nowrap;
}
.pak-link span { display: inline-block; transition: transform 0.25s ease; }
/* bersaglio alto almeno 44 px a ogni larghezza (anche il tablet si tocca):
   il riempimento lo allarga, il margine negativo lascia la riga dov'e' */
.pak-link:hover { color: var(--pak-accent-ink); }
.pak-link:hover span { transform: translateX(3px); }

/* i paragrafi non finiscono con una parola sola nell'ultima riga
   (dove il browser non lo sa fare restano come sono) */

/* comparse: solo se il JS e' vivo (html.reveal-ready, rete di sicurezza nel <head>) */
.reveal-ready .pak-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--pak-ease), transform 0.8s var(--pak-ease);
}
.reveal-ready .pak-in.is-in {
  opacity: 1;
  transform: none;
}
.reveal-ready .pak-in--d1 { transition-delay: 0.08s; }
.reveal-ready .pak-in--d2 { transition-delay: 0.16s; }

/* =============================================================
   1 · APERTURA
   ============================================================= */
.pak-hero {
  padding-block: clamp(72px, 10vw, 144px) clamp(24px, 3vw, 40px);
  text-align: center;
}
.pak-hero__copy { max-width: 1040px; }
.pak-hero h1 {
  margin: 0.34em auto 0;
  color: var(--pak-ink);
  font-size: clamp(2.7rem, 5.9vw, 5.4rem);
  font-weight: 790;
  letter-spacing: -0.05em;
  line-height: 1;
  text-wrap: balance;
}
.pak-hero h1 span {
  display: block;
  color: var(--pak-gray);
}
.pak-hero__lead {
  margin: 28px auto 0;
  max-width: 50ch;
  color: var(--pak-copy);
  font-size: clamp(1.1rem, 1.45vw, 1.3rem);
  line-height: 1.55;
  text-wrap: balance;
}
.pak-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

/* =============================================================
   2 · IL SETTORE — il tubo formatore a sinistra, il testo nel resto
   L'oggetto e' verticale (811 x 1248): sta in una colonna stretta,
   il 38% del contenitore, e il testo gli sta accanto a meta' altezza.
   ============================================================= */
.pak-intro {
  padding-block: clamp(40px, 5vw, 72px) clamp(88px, 10vw, 152px);
}
.pak-intro__grid {
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  gap: clamp(36px, 6.4vw, 96px);
  align-items: center;
}
.pak-intro__obj { margin: 0; }
.pak-intro__obj img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 811 / 1248;
  object-fit: contain;
}
/* ciò che e' grande sta fermo: il render si accende, sale di pochissimo */
.reveal-ready .pak-intro__obj img {
  animation: pak-arrive 1.6s var(--pak-ease) 0.1s both;
}
@keyframes pak-arrive {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}
.pak-intro__title {
  margin: 0.5em 0 0;
  color: var(--pak-ink);
  font-size: clamp(2rem, 3.25vw, 2.95rem);
  font-weight: 790;
  letter-spacing: -0.045em;
  line-height: 1.04;
  text-wrap: balance;
}
.pak-intro__title span {
  display: block;
  color: var(--pak-gray);
}
.pak-intro__copy > p:not(.pak-eyebrow) {
  margin: 28px 0 0;
  max-width: 50ch; /* righe entro i 75 caratteri (con 54ch arrivavano a 80) */
  color: var(--pak-copy);
  font-size: clamp(1.04rem, 1.25vw, 1.16rem);
  line-height: 1.62;
}
.pak-intro__copy > p:not(.pak-eyebrow) + p { margin-top: 16px; }

/* =============================================================
   3 · LE MACCHINE — sei tessere, due colonne sfalsate
   La tessera ha il grigio su cui e' composto il render (nessuna
   giuntura, nessun bordo). Testo sopra, primo piano sotto, a filo dei
   bordi sinistro, destro e basso. Niente effetti al passaggio del
   mouse: la tessera non e' un bottone.
   ============================================================= */
.pak-lines {
  --pak-tile-pad: clamp(26px, 3.05vw, 44px);
  --pak-gap: clamp(14px, 1.6vw, 20px);
  padding-block: clamp(24px, 3vw, 48px) clamp(80px, 9vw, 136px);
}
.pak-lines__wall { margin-top: clamp(56px, 7vw, 88px); }

/* di base (e fino a 1100 px): due colonne uguali, sei tessere uguali */
.pak-lines__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pak-gap);
}
/* la fila compare tutta insieme solo su telefono (la fila che scorre):
   qui compaiono le tessere, una per una */
.reveal-ready .pak-lines__row.pak-in {
  opacity: 1;
  transform: none;
  transition: none;
}

.pak-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 28px;
  background: var(--pak-mist);
  container-type: inline-size;
}
.pak-tile__body {
  padding: var(--pak-tile-pad) var(--pak-tile-pad) 0;
}
/* l'etichetta: le due parti non si spezzano. Su una riga serve una tessera
   di almeno 380 px; sotto, due righe senza il punto medio */
.pak-tile__n span { white-space: nowrap; }
@container (max-width: 379px) {
  .pak-tile__n { line-height: 1.5; }
  .pak-tile__n span { display: block; }
  .pak-tile__n .pak-tile__sep { display: none; }
}
/* i sei titoli stanno tutti su due righe: nelle tessere affiancate il testo
   parte alla stessa altezza */
.pak-tile h3 {
  max-width: 12.5em;
  margin: 14px 0 0;
  color: var(--pak-ink);
  font-size: clamp(1.5rem, 2.45vw, 2.2rem);
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 1.08;
  text-wrap: balance;
}
.pak-tile__text {
  margin: 18px 0 0;
  max-width: 45ch; /* righe entro i 75 caratteri */
  color: var(--pak-copy);
  font-size: clamp(1rem, 1.18vw, 1.1rem);
  line-height: 1.6;
}
.pak-tile__link {
  display: inline-block;
  margin-top: 18px;
}
/* il primo piano: alto almeno quanto il suo formato (8:5 il largo, 4:5
   l'alto) e in piu' quello che resta della tessera: mai un vuoto sotto
   il testo. Il ritaglio tiene fermo il bordo alto, dove il render e' vuoto */
.pak-tile__img {
  position: relative;
  flex: 1 0 auto;
  margin: clamp(10px, 1.4vw, 20px) 0 0;
}
.pak-tile__img::before {
  content: "";
  display: block;
  padding-top: 62.5%;
}
.pak-tile__img img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* il render arriva di poco: nasce un filo piu' grande, fermo sul bordo basso */
.reveal-ready .pak-tile.pak-in .pak-tile__img img {
  opacity: 0;
  transform: scale(1.04);
  transform-origin: 50% 100%;
  transition: opacity 1.1s var(--pak-ease) 0.16s, transform 1.5s var(--pak-ease) 0.16s;
}
.reveal-ready .pak-tile.pak-in.is-in .pak-tile__img img {
  opacity: 1;
  transform: none;
}

/* la domanda in fondo: sotto 1100 px una riga normale sotto la griglia */
.pak-ask {
  max-width: 46ch; /* due righe pari: a 900 px era una riga sola di 114 caratteri */
  margin: clamp(40px, 5vw, 64px) auto 0;
  color: var(--pak-copy);
  font-size: clamp(1.04rem, 1.2vw, 1.14rem);
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}
.pak-ask a {
  color: var(--pak-accent);
  font-weight: 640;
  text-decoration: none;
}
.pak-ask a:hover { color: var(--pak-accent-ink); }

/* LA MURATURA (da 1101 px). Una griglia sola, l'ordine del DOM resta 1…6 e
   poi la domanda. Le righe 1, 3 e 4 sono alte quanto una tessera bassa; le
   righe 2 e 5 valgono «alta − bassa − spazio», cioe' 5/8 della colonna meno
   20 px: sono scritte in unita' del contenitore (cqw), cosi' il confine dopo
   la riga 3 cade uguale nelle due colonne qualunque sia la lunghezza dei testi.
   Dove le unita' cqw non ci sono la regola cade e le righe tornano «auto»:
   la griglia regge lo stesso, con le tessere un poco piu' alte. */
@media (min-width: 1101px) {
  .pak-lines > .pak-wrap { container-type: inline-size; }
  .pak-lines__wall {
    --pak-step: calc((100cqw - 20px) * 0.3125 - 20px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto auto;
    grid-template-rows: auto var(--pak-step) auto auto var(--pak-step);
    grid-template-areas:
      "t1 t2"
      "t1 t4"
      "t3 t4"
      "t5 t6"
      "t5 dom";
    gap: 20px;
  }
  .pak-lines__row { display: contents; }
  .pak-tile--1 { grid-area: t1; }
  .pak-tile--2 { grid-area: t2; }
  .pak-tile--3 { grid-area: t3; }
  .pak-tile--4 { grid-area: t4; }
  .pak-tile--5 { grid-area: t5; }
  .pak-tile--6 { grid-area: t6; }
  .pak-tile--tall .pak-tile__img::before { padding-top: 125%; }

  /* la settima cella, senza fondo: i nomi delle macchine in inchiostro,
     il resto in grigio, il link nel blu d'accento */
  .pak-ask {
    grid-area: dom;
    align-self: center;
    max-width: none;
    margin: 0;
    padding: 0 var(--pak-tile-pad);
    color: var(--pak-gray);
    font-size: clamp(1.6rem, 2.35vw, 2.1rem);
    font-weight: 760;
    letter-spacing: -0.038em;
    line-height: 1.12;
    text-align: left;
  }
  .pak-ask__a { color: var(--pak-ink); }
}

/* =============================================================
   4 · I CLIENTI — solo i loghi
   Stessa area a vista: Sealed Air lungo e basso, Arca quasi
   quadrato, Barilla ovale
   ============================================================= */
.pak-client {
  padding-block: 0 var(--pak-pad);
  background: #ffffff;
  text-align: center;
}
.pak-client .pak-eyebrow { text-wrap: balance; }
.pak-client__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px clamp(40px, 6.4vw, 96px);
  margin-top: clamp(32px, 4vw, 52px);
}
.pak-client__logo {
  display: block;
  height: auto;
}
.pak-client__logo--sealed { width: clamp(180px, 19vw, 250px); }
.pak-client__logo--arca { width: clamp(78px, 8vw, 106px); }
.pak-client__logo--barilla { width: clamp(132px, 13.5vw, 180px); }

/* =============================================================
   5 · DA DOVE PARTI — tre tessere bianche sulla fascia grigia
   Nessun bordo, nessuna ombra. Etichetta, titolo grande, l'esempio,
   e in fondo i servizi: le quattro parti stanno sulle stesse righe
   nelle tre tessere (subgrid), cosi' testi e link partono allineati.
   ============================================================= */
.pak-way {
  padding-block: var(--pak-pad);
  background: var(--pak-mist);
}
.pak-way__grid {
  --pak-way-pad: clamp(26px, 2.9vw, 42px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr auto;
  gap: 0 clamp(14px, 1.6vw, 20px);
  margin: clamp(56px, 7vw, 88px) 0 0;
  padding: 0;
  list-style: none;
}
.pak-way__card {
  display: flex;
  flex-direction: column;
  grid-row: span 4;
  min-width: 0;
  padding: var(--pak-way-pad) var(--pak-way-pad) calc(var(--pak-way-pad) - 14px);
  border-radius: 28px;
  background: #ffffff;
}
@supports (grid-template-rows: subgrid) {
  .pak-way__card {
    display: grid;
    grid-template-rows: subgrid;
    align-content: start;
  }
}
.pak-way__card h3 {
  margin: 16px 0 0;
  color: var(--pak-ink);
  font-size: clamp(1.7rem, 2.7vw, 2.4rem);
  font-weight: 780;
  letter-spacing: -0.042em;
  line-height: 1.06;
  text-wrap: balance;
}
.pak-way__text {
  margin: 20px 0 0;
  color: var(--pak-copy);
  font-size: clamp(1rem, 1.12vw, 1.06rem);
  line-height: 1.6;
}
.pak-way__links {
  margin: auto 0 0;
  padding: 28px 0 0;
  list-style: none;
  align-self: start;
  width: 100%;
}
.pak-way__links li { border-top: 1px solid var(--pak-rule); }
.pak-way__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  color: var(--pak-accent);
  font-size: 1rem;
  font-weight: 640;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.pak-way__links a:hover { color: var(--pak-accent-ink); }
.pak-way__arrow { transition: transform 0.25s ease; }
.pak-way__links a:hover .pak-way__arrow { transform: translateX(3px); }

/* =============================================================
   6 · DOMANDE — il componente e' quello del sito (faq.css)
   ============================================================= */
/* righe entro i 75 caratteri (il componente ne lascia fino a 97) e nessuna
   parola sola nell'ultima riga di domande e sommario */
/* dove le domande stanno a tutta larghezza (tablet) la riga si ferma a 32em;
   il segno + resta sul bordo destro */

/* =============================================================
   7 · PER SCRIVERCI — una scheda bianca con tre righe
   A sinistra la voce (con la voce dell'occhiello), a destra cosa
   mandare. Filetti sottili fra le righe, nessun bordo attorno.
   ============================================================= */
.pak-cta {
  padding-block: var(--pak-pad);
  background: var(--pak-mist);
  text-align: center;
}
.pak-sheet {
  max-width: 960px;
  margin: clamp(48px, 6vw, 72px) auto 0;
  padding: clamp(6px, 1vw, 14px) clamp(24px, 3.6vw, 52px);
  list-style: none;
  border-radius: 28px;
  background: #ffffff;
  text-align: left;
}
.pak-sheet li {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(20px, 3vw, 40px);
  align-items: baseline;
  padding-block: clamp(24px, 2.6vw, 34px);
  border-top: 1px solid var(--pak-rule);
}
.pak-sheet li:first-child { border-top: 0; }
.pak-sheet__n { line-height: 1.4; }
.pak-sheet__t {
  margin: 0;
  color: var(--pak-ink);
  font-size: clamp(1.1rem, 1.45vw, 1.3rem);
  font-weight: 640;
  letter-spacing: -0.018em;
  line-height: 1.32;
}
.pak-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(40px, 5vw, 56px);
}
.pak-cta__note {
  margin: 24px auto 0;
  max-width: 46ch;
  color: var(--pak-copy);
  line-height: 1.55;
  text-wrap: balance;
}

/* =============================================================
   Tablet e telefono
   ============================================================= */
@media (max-width: 900px) {
  /* il render sale sopra il testo e resta stretto: e' verticale */
  .pak-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pak-intro__obj { width: min(62vw, 300px); margin-inline: auto; }
  .pak-intro__copy { max-width: 600px; margin-inline: auto; }

  /* le tre strade una sotto l'altra: a sinistra etichetta e titolo,
     a destra l'esempio e i servizi */
  .pak-way__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 14px;
  }
  .pak-way__card {
    display: grid;
    grid-row: auto;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 32px;
  }
  .pak-way__n { grid-column: 1; grid-row: 1; }
  .pak-way__card h3 { grid-column: 1; grid-row: 2 / span 2; font-size: 2rem; }
  .pak-way__text { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .pak-way__links { grid-column: 2; grid-row: 3; padding-top: 22px; }
}

@media (max-width: 700px) {
  .pak-hero { padding-top: 48px; }
  /* una frase per riga anche qui */
  .pak-hero h1 { font-size: clamp(2rem, 10.4vw, 2.9rem); }
  .pak-title { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  /* ogni frase su due righe pari, non tre parole e una */
  .pak-intro__title { font-size: clamp(1.7rem, 7.8vw, 2rem); }

  /* le sei tessere in una fila che scorre: la tessera dopo spunta dal bordo */
  .pak-lines { --pak-tile-pad: 24px; }
  .pak-lines__wall { margin-top: 40px; }
  .pak-lines__row {
    display: flex;
    gap: 12px;
    margin: 0 -20px;
    padding: 0 0 0 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pak-lines__row::-webkit-scrollbar { display: none; }
  /* il margine dopo l'ultima (Safari ignora il padding finale di un flex che scorre) */
  .pak-lines__row::after {
    content: "";
    flex: 0 0 8px;
  }
  .pak-tile {
    flex: 0 0 min(82vw, 340px);
    scroll-snap-align: start;
    border-radius: 22px;
  }
  .pak-tile h3 { font-size: 1.5rem; }
  /* compare la fila intera: le tessere fuori schermo non devono restare vuote */
  .reveal-ready .pak-lines__row.pak-in {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s var(--pak-ease), transform 0.8s var(--pak-ease);
  }
  .reveal-ready .pak-lines__row.pak-in.is-in {
    opacity: 1;
    transform: none;
  }
  .reveal-ready .pak-tile.pak-in,
  .reveal-ready .pak-tile.pak-in .pak-tile__img img {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* i tre loghi su una riga anche a 360 px */
  .pak-client__logos { gap: 22px; flex-wrap: nowrap; }
  .pak-client__logo--sealed { width: 120px; }
  .pak-client__logo--arca { width: 54px; }
  .pak-client__logo--barilla { width: 92px; }

  /* le tre strade: tutto in colonna */
  .pak-way__grid { --pak-way-pad: 26px; margin-top: 40px; }
  .pak-way__card {
    display: flex;
    border-radius: 22px;
  }
  .pak-way__card h3 { font-size: 1.8rem; }
  .pak-way__text { margin-top: 16px; }

  /* la scheda: la voce sopra, la frase sotto */
  .pak-sheet { border-radius: 22px; padding-inline: 24px; }
  .pak-sheet li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
    padding-block: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .pak-in { opacity: 1; transform: none; transition: none; }
  .reveal-ready .pak-intro__obj img { animation: none; }
  .pak-link span,
  .pak-way__arrow { transition: none; }
  .reveal-ready .pak-lines__row.pak-in,
  .reveal-ready .pak-tile.pak-in .pak-tile__img img { opacity: 1; transform: none; transition: none; }
}