/* =============================================================
   Indice settori — /settori/
   Namespace .set- (rifatta da zero il 2026-09-19, seconda versione:
   la prima, oggetti sparsi su bianco con testi centrati, e' stata bocciata).
   Macropagina come /progetti/: apertura con solo il titolo e il numero che
   sale, poi i settori come i case study. Tutto allineato a sinistra:
   su questa pagina niente testo centrato.
   1 · apertura: titolo a due toni + "6 settori" grande che conta (main.js)
   2 · i sei settori: uno grande, due affiancati, uno grande (ribaltato),
       due affiancati; l'oggetto su un riquadro grigio, come una foto di
       prodotto; sotto, la seconda riga del titolo della pagina settore,
       due frasi prese dalla sua apertura e i loghi dei clienti del settore
   3 · il primo passo: per chi il suo settore qui non l'ha trovato
   Immagini: tools/settori-indice/gen.py (ritagli dei render delle pagine).
   ============================================================= */

.page-set {
  --set-ink: #0b1220;
  --set-copy: #56627a;
  --set-gray: #7b889c;
  --set-muted: #64748b;
  --set-accent: #2563eb;
  --set-accent-ink: #1d4ed8;
  --set-accent-deep: #1e3a8a;
  --set-mist: #f5f5f7;
  --set-pad: clamp(96px, 11vw, 168px);
  --set-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --set-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-set main {
  overflow-x: clip;
  overflow-y: visible;
  padding-top: 0;
  background: #ffffff;
}

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

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

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

.set-eyebrow {
  margin: 0;
  color: var(--set-accent-deep);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* titoli di sezione: a sinistra, grandi, seconda riga grigia */
.set-title {
  margin: 0.42em 0 0;
  color: var(--set-ink);
  font-size: clamp(2.4rem, 5.4vw, 4.7rem);
  font-weight: 790;
  letter-spacing: -0.048em;
  line-height: 1.02;
  text-wrap: balance;
}
.set-title span {
  display: block;
  color: var(--set-gray);
}

/* comparse: solo se il JS e' vivo (html.reveal-ready, rete di sicurezza nel <head>) */
.reveal-ready .set-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--set-ease), transform 0.9s var(--set-ease);
}
.reveal-ready .set-in.is-in {
  opacity: 1;
  transform: none;
}

/* =============================================================
   1 · APERTURA — il titolo e il numero, nient'altro
   ============================================================= */
.set-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(640px, calc(100svh - var(--nav-height, 58px)));
  padding-block: clamp(48px, 6vw, 80px);
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 22%, rgba(37, 99, 235, 0.09), transparent 36%),
    linear-gradient(180deg, #edf2f9 0%, #f3f6fb 40%, #fbfcfe 78%, #ffffff 100%);
}
.set-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
}
.set-hero__title {
  position: relative;
  z-index: 2;
  max-width: 9.6em;
  margin: 0;
  color: var(--set-ink);
  font-size: clamp(3rem, 6.6vw, 6.1rem);
  font-weight: 790;
  letter-spacing: -0.05em;
  line-height: 0.98;
}
.set-hero__title span {
  display: block;
  color: var(--set-gray);
}

/* il numero: grande, chiaro, dietro al titolo se serve; conta da 0 a 6 */
.set-hero__metric {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: end;
  flex: none;
  margin: 0;
  color: rgba(30, 58, 138, 0.13);
  line-height: 0.76;
  pointer-events: none;
  user-select: none;
}
.set-hero__metric strong {
  font-size: clamp(12rem, 29vw, 25rem);
  font-weight: 880;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.set-hero__metric em {
  margin: clamp(10px, 1.4vw, 20px) clamp(6px, 1vw, 14px) 0 0;
  color: rgba(71, 85, 105, 0.42);
  font-size: clamp(1.35rem, 3vw, 2.45rem);
  font-style: normal;
  font-weight: 780;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

/* all'arrivo: il titolo sale, il numero affiora (solo se il JS e' vivo) */
.reveal-ready .set-hero__title {
  animation: set-rise 1s var(--set-ease) 0.05s both;
}
.reveal-ready .set-hero__metric {
  animation: set-surface 1.4s var(--set-ease) 0.15s both;
}
@keyframes set-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes set-surface {
  from { opacity: 0; transform: translateY(4%) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* =============================================================
   2 · I SEI SETTORI
   ============================================================= */
.set-sectors {
  padding-block: clamp(40px, 5vw, 72px) var(--set-pad);
  background: #ffffff;
}
.set-head { max-width: 900px; }

.set-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(64px, 7.5vw, 112px) clamp(24px, 3vw, 44px);
  margin-top: clamp(48px, 6vw, 80px);
}

.set-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* il riquadro: grigio chiaro, l'oggetto come una foto di prodotto.
   I render hanno l'alfa (oggetto + ombra su trasparente, dal 25/9: prima
   erano su bianco con mix-blend-mode multiply, che in Safari faceva
   lampeggiare le immagini dentro i livelli animati). --w regola il peso
   di ogni oggetto. */
.set-card__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: 22px;
  background: var(--set-mist);
}
.set-card__stage img {
  display: block;
  width: var(--w, 70%);
  height: auto;
  max-height: 84%;
  object-fit: contain;
  transform: translateY(var(--y, 0));
  transition: transform 1.1s var(--set-ease);
}
.set-card--cavi { --w: 74%; }
.set-card--gomma { --w: 72%; }
.set-card--packaging { --w: 50%; }   /* dal 26/9 il tubo formatore, alto come il reattore */
.set-card--alimentare { --w: 58%; }
.set-card--chimico { --w: 50%; }
.set-card--metalmeccanico { --w: 62%; }

.set-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-top: clamp(22px, 2.4vw, 30px);
}
.set-card__meta {
  margin: 0;
  color: var(--set-accent-deep);
  font: 600 0.74rem/1.4 var(--set-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.set-card__title {
  margin: 12px 0 0;
  color: var(--set-ink);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 1.04;
  text-wrap: balance;
}
.set-card__title a {
  color: inherit;
  text-decoration: none;
}
/* tutta la scheda porta al settore; il nome del link resta il titolo */
.set-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.page-set .set-card__title a:focus-visible { outline: none; }
.set-card:has(.set-card__title a:focus-visible) .set-card__stage {
  outline: 3px solid var(--set-accent);
  outline-offset: 4px;
}
.set-card__text {
  margin: 14px 0 0;
  max-width: 46ch;
  color: var(--set-gray);
  font-size: 1.02rem;
  line-height: 1.52;
}
.set-card__text b {
  color: var(--set-ink);
  font-weight: 620;
}

/* piede: i clienti del settore a sinistra, il rimando a destra */
.set-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: auto;
  padding-top: 26px;
}
.set-card__clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.set-logo {
  display: block;
  width: auto;
  height: var(--h, 22px);
  opacity: 0.55;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  transition: opacity 0.4s ease;
}
.set-logo--prysmian { --h: 21px; }
.set-logo--pirelli { --h: 21px; }
.set-logo--vibram { --h: 30px; }
.set-logo--sealed { --h: 19px; }
.set-logo--arca { --h: 30px; }
.set-logo--barilla { --h: 27px; }
.set-card__more {
  margin-left: auto;
  color: var(--set-accent);
  font-size: var(--fs-caption);
  font-weight: 640;
  white-space: nowrap;
}
.set-card__more span {
  display: inline-block;
  transition: transform 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .set-card:hover .set-card__stage img { transform: translateY(var(--y, 0)) scale(1.045); }
  .set-card:hover .set-logo { opacity: 0.8; }
  .set-card:hover .set-card__more { color: var(--set-accent-ink); }
  .set-card:hover .set-card__more span { transform: translateX(3px); }
}

/* le due grandi: riquadro 7/12 e testo accanto; la seconda ribaltata */
.set-card--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(32px, 4.5vw, 72px);
}
.set-card--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.set-card--flip .set-card__stage { order: 2; }
.set-card--wide .set-card__stage {
  aspect-ratio: 16 / 10;
  border-radius: 26px;
}
.set-card--wide .set-card__body { padding-top: 0; }
.set-card--wide .set-card__title {
  margin-top: 16px;
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  letter-spacing: -0.048em;
  line-height: 1;
}
.set-card--wide .set-card__text {
  margin-top: 18px;
  font-size: clamp(1.04rem, 1.3vw, 1.14rem);
}
.set-card--wide .set-card__foot {
  margin-top: 0;
  padding-top: 32px;
}
.set-card--wide.set-card--cavi { --w: 78%; }
.set-card--wide.set-card--alimentare { --w: 52%; }

/* =============================================================
   3 · IL PRIMO PASSO — tutto a sinistra: titolo, una riga, le due strade
   ============================================================= */
.set-cta {
  padding-block: var(--set-pad);
  background: var(--set-mist);
}
.set-cta .set-title { max-width: 15em; }
.set-cta__side { margin-top: clamp(28px, 3.4vw, 40px); }
.set-cta__lead {
  margin: 0;
  max-width: 34ch;
  color: var(--set-copy);
  font-size: clamp(1.1rem, 1.45vw, 1.3rem);
  line-height: 1.5;
}
.set-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.set-cta .button--secondary {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.1);
}
.set-cta__note {
  margin: 20px 0 0;
  max-width: 40ch;
  color: var(--set-muted);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

/* =============================================================
   Tablet e telefono
   ============================================================= */
@media (max-width: 900px) {
  .set-card--wide,
  .set-card--flip {
    display: flex;
    gap: 0;
  }
  .set-card--flip .set-card__stage { order: 0; }
  .set-card--wide .set-card__stage { aspect-ratio: 3 / 2; border-radius: 22px; }
  .set-card--wide .set-card__body { padding-top: clamp(22px, 2.4vw, 30px); }
  .set-card--wide .set-card__title {
    margin-top: 12px;
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
    letter-spacing: -0.04em;
    line-height: 1.04;
  }
  .set-card--wide .set-card__text { margin-top: 14px; font-size: 1.02rem; }
  .set-card--wide .set-card__foot { padding-top: 26px; }
  .set-card--wide.set-card--cavi { --w: 74%; }
  .set-card--wide.set-card--alimentare { --w: 58%; }
}

@media (max-width: 700px) {
  .set-hero {
    align-items: flex-start;
    min-height: 0;
    padding-block: 44px 36px;
  }
  .set-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .set-hero__title { font-size: clamp(2.6rem, 12.4vw, 3.6rem); }
  .set-hero__metric { justify-items: start; }
  .set-hero__metric strong { font-size: clamp(8rem, 44vw, 11rem); }
  .set-hero__metric em { margin: 8px 0 0 4px; font-size: clamp(1.05rem, 5vw, 1.4rem); }
  .set-list { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .set-card__stage { border-radius: 18px; }
  .set-card--wide .set-card__stage { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .set-in { opacity: 1; transform: none; transition: none; }
  .reveal-ready .set-hero__title,
  .reveal-ready .set-hero__metric { animation: none; }
  .set-card__stage img,
  .set-card__more span { transition: none; }
}