/* ============================================================================
   News dal Futuro — magazine editoriale
   CSS specifico di pagina. Va caricato DOPO style.css.

   Registro: rivista tech, non blog aziendale. Copertine generative in CSS
   (nessuno stock), griglia asimmetrica, tipografia display generosa.
   Palette: nero + verde d'azione. Il viola resta riservato all'universo AI.
   ============================================================================ */

.nw-page{
  --nw-gap:26px;
  --nw-radius:var(--r-lg);
  --nw-cover-r:calc(var(--r-lg) - 1px);
}

/* ─────────────────────────────────────────────
   1. MASTHEAD — la testata della rivista
   ───────────────────────────────────────────── */
.nw-page .page-hero{padding:186px 0 64px}
.nw-page .page-hero h1{margin:20px 0 16px}

.nw-mast{
  display:flex;justify-content:center;flex-wrap:wrap;
  align-items:center;gap:10px 22px;
  margin-top:30px;
}
.nw-mast span{
  font-family:var(--font-ui);
  font-size:.74rem;font-weight:550;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-faint);
  display:inline-flex;align-items:center;gap:.65em;
}
.nw-mast span::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--green);opacity:.55;
}
.nw-rule{
  max-width:var(--maxw);margin:44px auto 0;padding:0 28px;
}
.nw-rule i{
  display:block;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent);
}

/* ─────────────────────────────────────────────
   2. COPERTINE GENERATIVE
   Ogni categoria ha una sua geometria. Tutto in CSS: nessuna immagine,
   nessuno stock. Decorative → aria-hidden nel markup.
   ───────────────────────────────────────────── */
.nw-cover{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--bg-3);
  --px:74%;--py:20%;    /* fuoco del pattern */
  --ang:58deg;          /* inclinazione dei tratti */
  --gp:24px;            /* passo della trama */
  --sh:0px;             /* scarto della forma */
  --sc:1;               /* scala, cambia al hover */
}
.nw-cover::before,
.nw-cover::after{
  content:"";position:absolute;inset:-2px;
  transform:scale(var(--sc));
  transition:transform 1s var(--ease),opacity .8s var(--ease);
  transform-origin:var(--px) var(--py);
}
/* vignetta + orizzonte: resta ferma mentre il pattern scala */
.nw-cover>.nw-veil{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,7,0) 40%,rgba(5,5,7,.66) 100%);
  box-shadow:inset 0 0 90px -30px rgba(0,0,0,.95);
}

/* — AI: anelli concentrici, l'unico posto dove il viola è ammesso — */
.cv-ai{background:linear-gradient(152deg,#0c0a17,#050507 62%)}
.cv-ai::before{
  background:
    repeating-radial-gradient(circle at var(--px) var(--py),
      transparent 0 15px, rgba(142,123,255,.20) 15px 16px),
    radial-gradient(110% 95% at var(--px) var(--py),
      rgba(142,123,255,.30), transparent 64%);
}
.cv-ai::after{
  background:radial-gradient(46% 46% at var(--px) var(--py),
    rgba(142,123,255,.55), transparent 70%);
  filter:blur(26px);opacity:.75;
}

/* — SEO & GEO: barre verticali che salgono, orizzonte luminoso — */
.cv-seo{background:linear-gradient(160deg,#06110c,#050507 66%)}
.cv-seo::before{
  background:
    repeating-linear-gradient(90deg,
      rgba(92,243,164,.22) 0 2px, transparent 2px var(--gp)),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.05) 0 1px, transparent 1px var(--gp));
  mask-image:linear-gradient(calc(var(--ang) + 140deg),rgba(0,0,0,.15),#000 78%);
  -webkit-mask-image:linear-gradient(calc(var(--ang) + 140deg),rgba(0,0,0,.15),#000 78%);
}
.cv-seo::after{
  background:linear-gradient(180deg,transparent 52%,rgba(92,243,164,.30) 100%);
  clip-path:polygon(0 100%,100% calc(34% + var(--sh)),100% 100%);
}

/* — Local: curve di livello, cartografia — */
.cv-local{background:linear-gradient(148deg,#061009,#050507 64%);--px:32%;--py:74%}
.cv-local::before{
  background:
    repeating-radial-gradient(circle at var(--px) var(--py),
      transparent 0 18px, rgba(92,243,164,.17) 18px 19px);
}
.cv-local::after{
  background:
    radial-gradient(circle at var(--px) var(--py),
      var(--green) 0 4px, transparent 5px),
    radial-gradient(40% 40% at var(--px) var(--py),
      rgba(92,243,164,.42), transparent 72%);
}

/* — Advertising: fasci diagonali, il cuneo che spinge — */
.cv-ads{background:linear-gradient(200deg,#0a1410,#050507 68%);--px:20%;--py:14%}
.cv-ads::before{
  background:repeating-linear-gradient(var(--ang),
    rgba(92,243,164,.17) 0 3px, transparent 3px calc(var(--gp) - 3px));
  mask-image:linear-gradient(var(--ang),#000,rgba(0,0,0,.1));
  -webkit-mask-image:linear-gradient(var(--ang),#000,rgba(0,0,0,.1));
}
.cv-ads::after{
  background:linear-gradient(var(--ang),rgba(92,243,164,.46),rgba(92,243,164,0) 62%);
  clip-path:polygon(0 0,calc(46% + var(--sh)) 0,calc(12% + var(--sh)) 100%,0 100%);
}

/* — Sito & E-commerce: wireframe, il telaio di una pagina — */
.cv-web{background:linear-gradient(165deg,#08100d,#050507 70%);--px:50%;--py:44%}
.cv-web::before{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px calc(var(--gp) - 4px)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px calc(var(--gp) - 4px)),
    radial-gradient(90% 80% at var(--px) var(--py), rgba(92,243,164,.16), transparent 70%);
}
.cv-web::after{
  inset:calc(16% + var(--sh)) calc(18% + var(--sh));
  border:1px solid rgba(92,243,164,.55);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(92,243,164,.14),transparent 58%);
  box-shadow:0 0 34px -6px rgba(92,243,164,.35);
}

/* — Automazioni: nodi e collegamenti — */
.cv-auto{background:linear-gradient(140deg,#07120e,#050507 66%);--px:68%;--py:30%}
.cv-auto::before{
  background:
    radial-gradient(circle, rgba(92,243,164,.42) 0 1.6px, transparent 2px);
  background-size:calc(var(--gp) + 2px) calc(var(--gp) + 2px);
  background-position:6px 6px;
  mask-image:radial-gradient(85% 85% at var(--px) var(--py),#000,rgba(0,0,0,.08));
  -webkit-mask-image:radial-gradient(85% 85% at var(--px) var(--py),#000,rgba(0,0,0,.08));
}
.cv-auto::after{
  background:
    linear-gradient(90deg,transparent 12%,rgba(92,243,164,.42) 50%,transparent 88%),
    linear-gradient(var(--ang),transparent 46%,rgba(92,243,164,.30) 50%,transparent 54%);
  background-size:100% 1px,100% 100%;
  background-position:0 var(--py),0 0;
  background-repeat:no-repeat;
}

/* — Strategia & Business: scalinata, la crescita per gradini — */
.cv-biz{background:linear-gradient(172deg,#080f0c,#050507 68%);--px:78%;--py:78%}
.cv-biz::before{
  background:
    repeating-linear-gradient(90deg,
      rgba(92,243,164,.13) 0 calc(var(--gp) + 10px), transparent calc(var(--gp) + 10px) calc(var(--gp) + 14px));
  mask-image:linear-gradient(calc(var(--ang) - 44deg),#000 28%,rgba(0,0,0,.06) 92%);
  -webkit-mask-image:linear-gradient(calc(var(--ang) - 44deg),#000 28%,rgba(0,0,0,.06) 92%);
}
.cv-biz::after{
  background:linear-gradient(0deg,rgba(92,243,164,.38),rgba(92,243,164,.06));
  clip-path:polygon(
    0 100%, 0 calc(84% - var(--sh)), 22% calc(84% - var(--sh)),
    22% calc(66% - var(--sh)), 44% calc(66% - var(--sh)),
    44% calc(46% - var(--sh)), 66% calc(46% - var(--sh)),
    66% calc(28% - var(--sh)), 88% calc(28% - var(--sh)),
    88% calc(12% - var(--sh)), 100% calc(12% - var(--sh)), 100% 100%);
  opacity:.62;
}

/* Sette semi geometrici: due card della stessa categoria non si somigliano mai.
   Il periodo 7 non divide né 2 né 3 né 4, quindi nemmeno le vicine di riga. */
.nw-card:nth-child(7n+1) .nw-cover{--px:74%;--py:20%;--ang:58deg; --gp:24px;--sh:0px}
.nw-card:nth-child(7n+2) .nw-cover{--px:26%;--py:28%;--ang:122deg;--gp:19px;--sh:14px}
.nw-card:nth-child(7n+3) .nw-cover{--px:82%;--py:68%;--ang:34deg; --gp:29px;--sh:7px}
.nw-card:nth-child(7n+4) .nw-cover{--px:44%;--py:16%;--ang:148deg;--gp:22px;--sh:21px}
.nw-card:nth-child(7n+5) .nw-cover{--px:18%;--py:72%;--ang:76deg; --gp:32px;--sh:4px}
.nw-card:nth-child(7n+6) .nw-cover{--px:62%;--py:44%;--ang:104deg;--gp:17px;--sh:17px}
.nw-card:nth-child(7n)   .nw-cover{--px:36%;--py:58%;--ang:14deg; --gp:26px;--sh:10px}

/* ─────────────────────────────────────────────
   3. IN EVIDENZA — apertura editoriale
   ───────────────────────────────────────────── */
.nw-lead-section{overflow:hidden;padding-top:88px}
.nw-lead-section,.nw-archive{scroll-margin-top:76px}
.nw-lead{
  display:grid;
  grid-template-columns:1.34fr .88fr;
  gap:var(--nw-gap);
  align-items:stretch;
}
.nw-lead-side{
  display:grid;grid-template-rows:1fr 1fr;gap:var(--nw-gap);min-width:0;
}

.nw-feat{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.008));
  overflow:hidden;min-width:0;
  transition:border-color .5s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease);
}
.nw-feat .nw-cover{aspect-ratio:16/8.2;border-radius:0}
.nw-feat-body{
  padding:34px 40px 38px;display:flex;flex-direction:column;
  gap:16px;justify-content:center;flex:1;
}
.nw-feat .nw-go{margin-top:6px}
.nw-feat h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.75rem,2.55vw,2.6rem);
  letter-spacing:-.048em;line-height:1.03;
  text-wrap:balance;
  transition:transform .6s var(--ease),color .4s var(--ease);
}
.nw-feat .nw-go{font-size:.92rem}

.nw-feat:hover{
  border-color:var(--line-2);
  box-shadow:0 26px 70px -34px rgba(0,0,0,.9);
}
.nw-feat:hover h3{transform:translateX(7px)}
.nw-feat:hover .nw-cover{--sc:1.055}

/* Le due card di spalla: orizzontali, compatte */
.nw-mini{
  display:grid;grid-template-columns:.82fr 1.18fr;gap:0;
  border:1px solid var(--line);border-radius:var(--nw-radius);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.006));
  overflow:hidden;min-width:0;
  transition:border-color .5s var(--ease),transform .6s var(--ease);
}
.nw-mini .nw-cover{height:100%;min-height:150px}
.nw-mini-body{
  padding:24px 26px;display:flex;flex-direction:column;
  gap:11px;justify-content:center;min-width:0;
}
.nw-mini h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.05rem,1.35vw,1.34rem);
  letter-spacing:-.038em;line-height:1.16;text-wrap:balance;
  transition:transform .6s var(--ease),color .4s var(--ease);
}
.nw-mini .nw-go{margin-top:4px}
.nw-mini:hover{border-color:var(--line-2)}
.nw-mini:hover h3{transform:translateX(5px)}
.nw-mini:hover .nw-cover{--sc:1.07}

/* ─────────────────────────────────────────────
   4. FILTRI DI CATEGORIA
   ───────────────────────────────────────────── */
.nw-filters-wrap{
  position:sticky;top:58px;z-index:30;
  padding:16px 0 14px;
  margin-bottom:44px;
  background:linear-gradient(180deg,var(--bg) 62%,rgba(5,5,7,0));
}
.nw-filters{
  display:flex;flex-wrap:wrap;gap:9px;
  align-items:center;
}
.nw-chip{
  font-family:var(--font-ui);
  font-size:.79rem;font-weight:550;letter-spacing:-.005em;
  padding:9px 17px;border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text-dim);
  white-space:nowrap;
  transition:color .35s var(--ease),border-color .35s var(--ease),
             background .35s var(--ease),transform .35s var(--ease);
}
.nw-chip:hover{color:var(--text);border-color:var(--line-2);transform:translateY(-1px)}
.nw-chip[aria-pressed="true"]{
  color:#04120b;background:var(--green);border-color:var(--green);
  box-shadow:0 8px 26px -12px rgba(92,243,164,.7);
}
.nw-chip:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.nw-count{
  margin-left:auto;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);white-space:nowrap;
}

/* ─────────────────────────────────────────────
   5. GRIGLIA ASIMMETRICA
   ───────────────────────────────────────────── */
.nw-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-flow:row dense;
  gap:var(--nw-gap);
}
.nw-card{
  grid-column:span 4;
  display:flex;flex-direction:column;min-width:0;
  border:1px solid var(--line);border-radius:var(--nw-radius);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.006));
  overflow:hidden;
  transition:border-color .5s var(--ease),transform .6s var(--ease),
             box-shadow .6s var(--ease);
}
.nw-card .nw-cover{aspect-ratio:16/9.6}
.nw-card-body{
  padding:22px 24px 24px;
  display:flex;flex-direction:column;gap:12px;flex:1;min-width:0;
}
.nw-card h3{
  font-family:var(--font-display);font-weight:600;
  font-size:1.19rem;letter-spacing:-.038em;line-height:1.17;
  text-wrap:balance;
  transition:transform .6s var(--ease),color .4s var(--ease);
}

/* Card larga: ritmo spezzato ogni quattordici */
.nw-card.is-wide{grid-column:span 8;flex-direction:row}
.nw-card.is-wide .nw-cover{aspect-ratio:auto;width:46%;flex:0 0 46%;min-height:230px}
.nw-card.is-wide .nw-card-body{padding:30px 34px;justify-content:center;gap:14px}
.nw-card.is-wide h3{font-size:clamp(1.3rem,1.75vw,1.72rem);letter-spacing:-.045em}
.nw-card.is-wide .nw-go{margin-top:6px}

.nw-card:hover{
  border-color:var(--line-2);
  transform:translateY(-4px);
  box-shadow:0 24px 56px -30px rgba(0,0,0,.9);
}
.nw-card:hover h3{transform:translateX(6px)}
.nw-card:hover .nw-cover{--sc:1.075}

/* ─────────────────────────────────────────────
   6. PARTI COMUNI DELLE CARD
   ───────────────────────────────────────────── */
.nw-cat{
  font-family:var(--font-ui);
  font-size:.665rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--green);
  display:inline-flex;align-items:center;gap:.6em;
}
.nw-cat::before{content:"";width:16px;height:1px;background:var(--green);opacity:.65}
.nw-cat.v{color:var(--violet)}
.nw-cat.v::before{background:var(--violet)}

.nw-go{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-ui);
  font-size:.795rem;font-weight:550;
  color:var(--text-dim);
  transition:color .4s var(--ease);
}
.nw-go i{transition:transform .5s var(--ease)}
.nw-feat:hover .nw-go,
.nw-mini:hover .nw-go,
.nw-card:hover .nw-go{color:var(--green)}
.nw-feat:hover .nw-go i,
.nw-mini:hover .nw-go i,
.nw-card:hover .nw-go i{transform:translateX(6px)}

/* Il link copre la card: titolo cliccabile, focus corretto */
.nw-link{position:absolute;inset:0;z-index:4;border-radius:inherit}
.nw-feat,.nw-mini,.nw-card{position:relative}
.nw-link:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ─────────────────────────────────────────────
   7. INGRESSO DELLE CARD (progressive enhancement)
   Senza JS le card sono già visibili: l'animazione si attiva
   solo quando lo script aggiunge .nw-anim.
   ───────────────────────────────────────────── */
.nw-grid.nw-anim .nw-card{
  opacity:0;transform:translateY(20px);
  animation:nwIn .78s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * 38ms);
}
@keyframes nwIn{to{opacity:1;transform:none}}

/* [hidden] deve battere il display:flex/grid delle card */
.nw-card[hidden],
.nw-feat[hidden],
.nw-mini[hidden],
.nw-empty[hidden]{display:none !important}

.nw-empty{
  grid-column:1/-1;
  padding:70px 24px;text-align:center;
  color:var(--text-faint);
  border:1px dashed var(--line-2);border-radius:var(--nw-radius);
}

/* ─────────────────────────────────────────────
   8. RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width:1180px){
  .nw-page{--nw-gap:22px}
  .nw-feat-body{padding:30px 32px 34px}
}

@media (max-width:980px){
  .nw-lead{grid-template-columns:1fr}
  .nw-lead-side{grid-template-rows:auto auto}
  .nw-feat .nw-cover{aspect-ratio:16/7.6}

  .nw-grid{grid-template-columns:repeat(2,1fr)}
  .nw-card{grid-column:span 1}
  .nw-card.is-wide{grid-column:span 2}
  .nw-card.is-wide .nw-cover{min-height:200px}

  .nw-filters-wrap{margin-bottom:34px}
  .nw-count{width:100%;margin-left:0;padding-top:4px}
}

@media (max-width:640px){
  .nw-page{--nw-gap:16px}
  .nw-page .page-hero{padding:132px 0 46px}
  .nw-mast{gap:8px 16px;margin-top:22px}
  .nw-mast span{font-size:.68rem;letter-spacing:.12em}
  .nw-rule{margin-top:30px}

  .nw-grid{grid-template-columns:1fr}
  .nw-card,.nw-card.is-wide{grid-column:span 1}

  /* Card compatte: copertina più bassa, corpo stretto */
  .nw-card .nw-cover{aspect-ratio:16/7}
  .nw-card-body{padding:17px 18px 19px;gap:9px}
  .nw-card h3{font-size:1.06rem}

  .nw-card.is-wide{flex-direction:column}
  .nw-card.is-wide .nw-cover{width:100%;flex:none;min-height:0;aspect-ratio:16/7}
  .nw-card.is-wide .nw-card-body{padding:17px 18px 19px;gap:9px}
  .nw-card.is-wide h3{font-size:1.06rem;letter-spacing:-.038em}

  .nw-feat{border-radius:var(--r-lg)}
  .nw-feat .nw-cover{aspect-ratio:16/9}
  .nw-feat-body{padding:22px 20px 24px;gap:12px}
  .nw-feat h3{font-size:clamp(1.45rem,6.4vw,1.95rem);letter-spacing:-.042em}

  .nw-mini{grid-template-columns:1fr}
  .nw-mini .nw-cover{min-height:0;aspect-ratio:16/7}
  .nw-mini-body{padding:17px 18px 19px;gap:9px}
  .nw-mini h3{font-size:1.06rem}

  /* Su mobile i chip vanno a capo: sticky mangerebbe mezzo schermo */
  .nw-filters-wrap{position:static;padding:4px 0 12px;margin-bottom:24px;background:none}
  .nw-chip{font-size:.75rem;padding:8px 14px}
  .nw-lead-section{padding-top:56px}

  .nw-cover>.nw-veil{box-shadow:none}
}

/* Schermi molto stretti: i chip non devono mai sfondare */
@media (max-width:380px){
  .nw-chip{padding:7px 12px;font-size:.72rem}
}

/* ─────────────────────────────────────────────
   9. MOVIMENTO RIDOTTO
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .nw-grid.nw-anim .nw-card{opacity:1;transform:none;animation:none}
  .nw-cover::before,.nw-cover::after,
  .nw-feat,.nw-mini,.nw-card,
  .nw-card h3,.nw-feat h3,.nw-mini h3,.nw-go i{transition:none}
  .nw-card:hover{transform:none}
}

/* Su touch niente sollevamenti: il dito non fa hover */
@media (hover:none){
  .nw-card:hover{transform:none;box-shadow:none}
  .nw-card:hover h3,.nw-feat:hover h3,.nw-mini:hover h3{transform:none}
  .nw-card:hover .nw-cover,.nw-feat:hover .nw-cover,.nw-mini:hover .nw-cover{--sc:1}
}

/* ─────────────────────────────────────────────
   COVER CON IMMAGINE DEDICATA PER ARTICOLO
   La card mantiene il pattern di categoria come fallback:
   quando il markup dichiara .has-img con la variabile --ci,
   l'immagine prende il posto del pattern e ne eredita lo
   zoom al passaggio del mouse. Il velo resta per il testo.
   ───────────────────────────────────────────── */
.nw-cover.has-img::before{
  background:var(--ci) center/cover no-repeat !important;
  -webkit-mask-image:none !important;mask-image:none !important;
  opacity:1 !important;
}
.nw-cover.has-img::after{content:none !important}