/* ============================================================
   NOTAG BASE — COMPONENTI
   Libreria del sistema. Ogni componente usa solo i token e
   funziona su fondo chiaro e su fondo scuro senza varianti,
   perché legge --nt-fondo / --nt-inchiostro / --nt-bordo.
   Prefisso unico: nt-
   ============================================================ */

/* ============================================================
   1. IMPIANTO: sezioni e contenitori
   ============================================================ */
.nt-sezione{
  background:var(--nt-fondo);
  color:var(--nt-inchiostro);
  padding-block:var(--nt-sezione-y);
}
.nt-sezione--stretta{ padding-block:calc(var(--nt-sezione-y) / 2); }

/* ---------- Capitoli della scheda ----------
   Un capitolo è un filone di lavoro. Più capitoli di fila devono
   leggersi come un racconto continuo, non come pagine separate:
   il primo tiene il respiro pieno sopra, gli altri no. */
.nt-capitolo{ padding-block:calc(var(--nt-sezione-y) * 0.6); }
.nt-capitolo + .nt-capitolo{ padding-block-start:0; }
.nt-capitolo__numero{ margin-bottom:var(--nt-space-3); }
.nt-capitolo__titolo{
  font-family:var(--nt-display);
  font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
  line-height:1.1;
  letter-spacing:var(--nt-ls-titolo);
  max-width:var(--nt-max-testo);
  margin:0 0 var(--nt-space-5);
}
/* I dettagli non sono un elenco puntato qualsiasi: sono le cose che
   uno strumento fa, e stanno bene in colonna con un filo davanti. */
.nt-dettagli{
  list-style:none;
  padding:0;
  margin:var(--nt-space-6) 0 0;
  max-width:var(--nt-max-testo);
  border-top:1px solid var(--nt-bordo);
}
.nt-dettagli li{
  padding:var(--nt-space-3) 0;
  border-bottom:1px solid var(--nt-bordo);
  font-family:var(--nt-meta);
  font-size:0.9375rem;
  letter-spacing:0.01em;
}
.nt-galleria--capitolo{ margin-top:var(--nt-space-7); }
.nt-full--capitolo{ margin-block:var(--nt-space-7); }
.nt-capitolo__didascalia{ margin-top:var(--nt-space-4); }

.nt-contenitore{
  width:100%;
  max-width:var(--nt-max);
  margin-inline:auto;
  padding-inline:var(--nt-gutter);
}
.nt-contenitore--testo{ max-width:var(--nt-max-testo); }

/* Due colonne editoriali: il racconto delle schede progetto */
.nt-due-colonne{
  display:grid;
  gap:var(--nt-space-7);
  grid-template-columns:1fr;
}
@media (min-width:860px){
  .nt-due-colonne{ grid-template-columns:1fr 1fr; gap:var(--nt-space-8); }
}

/* ============================================================
   2. META: etichette, numeri, firme (Space Mono)
   ============================================================ */
.nt-meta{
  font-family:var(--nt-meta);
  font-size:var(--nt-size-meta);
  font-weight:400;
  letter-spacing:var(--nt-ls-meta);
  text-transform:uppercase;
  color:var(--nt-inchiostro-2);
  margin:0;
}
.nt-meta--rosso{ color:var(--nt-rosso); }

/* Numero showroom: "Showroom / 014" */
.nt-numero{
  font-family:var(--nt-meta);
  font-size:var(--nt-size-meta);
  letter-spacing:var(--nt-ls-meta);
  color:var(--nt-rosso);
}
.nt-numero span{ color:var(--nt-inchiostro-2); }

/* Firma lunga: "LUGANO · CH — SOLO COSE BELLE" */
.nt-firma{
  font-family:var(--nt-meta);
  font-size:var(--nt-size-meta);
  letter-spacing:var(--nt-ls-firma);
  text-transform:uppercase;
  color:var(--nt-inchiostro-2);
}

/* Il punto rosso: connettore del marchio, mai decorazione */
.nt-punto{
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--nt-rosso);
  vertical-align:2px;
  margin-inline:.45em;
}

/* Riga di dati: Cliente · Anno · Discipline sotto la hero */
.nt-fascia{
  display:flex;
  flex-wrap:wrap;
  gap:var(--nt-space-5) var(--nt-space-7);
  padding-block:var(--nt-space-5);
  border-top:1px solid var(--nt-bordo);
  border-bottom:1px solid var(--nt-bordo);
}
.nt-fascia dt{
  font-family:var(--nt-meta);
  font-size:var(--nt-size-meta);
  letter-spacing:var(--nt-ls-meta);
  text-transform:uppercase;
  color:var(--nt-inchiostro-2);
  margin-bottom:var(--nt-space-2);
}
.nt-fascia dd{
  margin:0;
  font-weight:600;
  font-size:1rem;
}

/* ============================================================
   3. CARTELLINO: il gesto grafico del brand
   ============================================================ */
.nt-cartellino{
  display:inline-flex;
  align-items:center;
  gap:var(--nt-space-2);
  background:var(--nt-rosso);
  color:#fff;
  font-family:var(--nt-testo);
  font-weight:700;
  font-size:0.9375rem;
  line-height:1;
  padding:10px 18px 10px 26px;
  border-radius:var(--nt-raggio);
  position:relative;
  transition:background-color var(--nt-tempo) var(--nt-ease), transform var(--nt-tempo) var(--nt-ease);
}
/* il foro del cartellino */
.nt-cartellino::before{
  content:'';
  position:absolute;
  left:10px; top:50%;
  width:7px; height:7px;
  margin-top:-3.5px;
  border-radius:50%;
  background:var(--nt-fondo);
}
a.nt-cartellino{ background-image:none; }
a.nt-cartellino:hover,
button.nt-cartellino:hover{
  background:var(--nt-rosso-scuro);
  transform:rotate(var(--nt-tilt));
}

/* Cartellino appeso: sta sotto una cordicella e dondola */
.nt-cartellino-appeso{
  display:inline-block;
  padding-top:34px;
  position:relative;
}
/* la cordicella cade esattamente sul foro del cartellino (13px dal bordo) */
.nt-cartellino-appeso::before{
  content:'';
  position:absolute;
  left:13px; top:0;
  width:1px; height:34px;
  background:currentColor;
  opacity:.45;
  transform-origin:top center;
}
.nt-cartellino-appeso .nt-cartellino{
  transform-origin:13px -34px;
  animation:nt-dondolo 6s ease-in-out infinite;
}
.nt-cartellino-appeso:hover .nt-cartellino{ animation-duration:1.6s; }
@keyframes nt-dondolo{
  0%, 100%{ transform:rotate(-1.5deg); }
  50%     { transform:rotate(1.5deg); }
}

/* ============================================================
   4. BOTTONI
   ============================================================ */
.nt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--nt-space-2);
  font-family:var(--nt-testo);
  font-weight:600;
  font-size:1rem;
  line-height:1;
  padding:14px 26px;
  border:1px solid transparent;
  border-radius:var(--nt-raggio);
  background-image:none;
  cursor:pointer;
  transition:background-color var(--nt-tempo) var(--nt-ease),
             color var(--nt-tempo) var(--nt-ease),
             border-color var(--nt-tempo) var(--nt-ease),
             transform var(--nt-tempo) var(--nt-ease);
}
.nt-btn--rosso{ background:var(--nt-rosso); color:#fff; }
.nt-btn--rosso:hover{ background:var(--nt-rosso-scuro); transform:rotate(var(--nt-tilt)); }

.nt-btn--contorno{
  background:transparent;
  color:var(--nt-inchiostro);
  border-color:var(--nt-bordo);
}
.nt-btn--contorno:hover{ border-color:var(--nt-rosso); color:var(--nt-rosso); }

.nt-btn[disabled], .nt-btn--disattivo{
  background:var(--nt-nebbia);
  color:var(--nt-fumo);
  cursor:not-allowed;
  transform:none;
}

/* Link di testo con freccia: la terza gerarchia */
.nt-link-freccia{
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.nt-link-freccia::after{
  content:'→';
  transition:transform var(--nt-tempo) var(--nt-ease);
}
.nt-link-freccia:hover::after{ transform:translateX(4px); }

/* ============================================================
   5. TAG E CHIP
   ============================================================ */
/* Consegnato: le voci del repeater deliverable */
.nt-tags{ display:flex; flex-wrap:wrap; gap:var(--nt-space-2); }
.nt-tag{
  display:inline-block;
  font-family:var(--nt-meta);
  font-size:var(--nt-size-meta);
  letter-spacing:.04em;
  padding:6px 12px;
  border:1px solid var(--nt-bordo);
  border-radius:100px;
  color:var(--nt-inchiostro-2);
}

/* Categoria e skill: filtro cliccabile */
.nt-chip{
  display:inline-block;
  font-family:var(--nt-testo);
  font-weight:600;
  font-size:0.875rem;
  padding:8px 16px;
  border-radius:100px;
  border:1px solid var(--nt-bordo);
  color:var(--nt-inchiostro);
  background-image:none;
  transition:background-color var(--nt-tempo) var(--nt-ease), border-color var(--nt-tempo) var(--nt-ease), color var(--nt-tempo) var(--nt-ease);
}
.nt-chip:hover{ border-color:var(--nt-rosso); color:var(--nt-rosso); }
.nt-chip--attivo{ background:var(--nt-nero); border-color:var(--nt-nero); color:var(--nt-carta); }
.nt-scuro .nt-chip--attivo{ background:var(--nt-carta); color:var(--nt-nero); }

/* ============================================================
   6. CARD PROGETTO
   ============================================================ */
.nt-griglia-progetti{
  display:grid;
  gap:var(--nt-space-6);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.nt-card{
  display:block;
  background-image:none;
  color:inherit;
}
.nt-card__media{
  position:relative;
  overflow:hidden;
  border-radius:var(--nt-raggio);
  /* 3:2 è la proporzione della maggior parte delle immagini in
     archivio: chi ce l'ha riempie il riquadro esatto, gli altri
     restano interi con una fascia ai lati. */
  aspect-ratio:3 / 2;
  background:var(--nt-riquadro);
  /* Filo interno: sulle foto non si vede, sulle immagini con il fondo
     bianco (marchi, mockup) dà alla card un bordo, se no galleggia. */
  box-shadow:inset 0 0 0 1px rgba(18,18,18,.10);
}
/* Le immagini non si tagliano: un marchio panoramico, una schermata
   verticale e una fotografia 3:2 stanno tutte dentro lo stesso riquadro
   senza perdere un pezzo. Le proporzioni diverse si vedono come fascia
   di fondo, che è una scelta, non un incidente. */
.nt-card__media > img{
  width:100%; height:100%;
  object-fit:contain;
  background:var(--nt-riquadro);
  transition:transform .6s var(--nt-ease);
}
.nt-card:hover .nt-card__media > img{ transform:scale(1.04); }
/* Il numero sta sopra la foto, e le foto sono di tutti i tipi: fotografie
   scure, marchi su fondo bianco, mockup. Un cartellino scuro lo tiene
   leggibile ovunque e sembra una scelta, non una toppa. */
.nt-card__numero{
  position:absolute;
  left:var(--nt-space-4); top:var(--nt-space-4);
  z-index:2;
  font-family:var(--nt-meta);
  font-size:var(--nt-size-meta);
  letter-spacing:var(--nt-ls-meta);
  color:#fff;
  background:rgba(14,14,14,.62);
  padding:4px 9px 3px;
  border-radius:100px;
  backdrop-filter:blur(2px);
}
/* Logo del cliente in basso a sinistra, su una velatura che lo tiene
   leggibile su qualsiasi immagine. Serve la versione chiara del marchio. */
.nt-card__logo{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:var(--nt-space-8) var(--nt-space-5) var(--nt-space-5);
  background:linear-gradient(180deg, transparent 0%, rgba(14,14,14,.55) 45%, rgba(14,14,14,.88) 100%);
  display:flex;
  align-items:center;
  gap:var(--nt-space-4);
}
/* Due marchi: la casa madre e la sua emanazione, separati da un filo.
   Ducati e il Museo Ducati sono due cose diverse e vanno lette come due,
   ma appartengono alla stessa riga. */
.nt-card__filo{
  flex:0 0 1px;
  align-self:stretch;
  max-height:40px;
  margin-block:auto;
  background:rgba(244,243,241,.32);
}
.nt-card__logo--doppio img{ max-height:42px; max-width:44%; }
/* Il marchio del cliente è la cosa che fa fermare chi guarda, quindi
   deve leggersi da lontano. I marchi molto larghi (Ducati sta in 9:1)
   vengono fermati dalla larghezza, non dall'altezza: per questo il
   limite orizzontale è generoso. */
.nt-card__logo img{
  max-height:54px;
  width:auto;
  max-width:82%;
  object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
  transition:transform var(--nt-tempo) var(--nt-ease);
}
.nt-card:hover .nt-card__logo img{ transform:translateY(-2px); }
.nt-card__titolo{
  font-family:var(--nt-display);
  font-size:1.375rem;
  line-height:1.15;
  letter-spacing:var(--nt-ls-titolo);
  margin:var(--nt-space-4) 0 var(--nt-space-2);
}
.nt-card:hover .nt-card__titolo{ color:var(--nt-rosso); }
.nt-card__meta{
  font-family:var(--nt-meta);
  font-size:var(--nt-size-meta);
  letter-spacing:var(--nt-ls-meta);
  text-transform:uppercase;
  color:var(--nt-inchiostro-2);
}

/* ============================================================
   7. GALLERIA 2 + 2 + 3
   ============================================================ */
.nt-galleria{
  display:grid;
  gap:var(--nt-space-4);
  grid-template-columns:repeat(2, 1fr);
}
.nt-galleria figure{ margin:0; }
.nt-galleria img{
  width:100%; height:100%;
  /* Mai tagliare: vedi la nota sulle card. */
  object-fit:contain;
  background:var(--nt-riquadro);
  border-radius:var(--nt-raggio-s);
  aspect-ratio:3 / 2;
}
/* Quando il capitolo porta una sola immagine, quella tiene le sue
   proporzioni. Un marchio lungo e basso, o un quadro largo, dentro un
   riquadro 3:2 lascia mezzo schermo di grigio vuoto. */
.nt-galleria:has(> :first-child:last-child) img{
  aspect-ratio:auto;
  display:block;
  width:auto; height:auto;
  max-width:100%;
  max-height:min(72vh, 620px);
  margin-inline:auto;
  background:none;
}
/* Il disegno cambia con il numero di immagini, senza che nessuno debba
   scegliere una variante: 1 piena, 2 affiancate, 3 in fila, 4 in due
   righe, 5 due più tre, 6 tre più tre, 7 due più due più tre. */
@media (min-width:860px){
  .nt-galleria{ grid-template-columns:repeat(6, 1fr); }

  /* predefinito: 2 + 2 + 3 (sette immagini) */
  .nt-galleria > *:nth-child(-n+4){ grid-column:span 3; }
  .nt-galleria > *:nth-child(n+5){ grid-column:span 2; }

  /* una sola */
  .nt-galleria:has(> :first-child:last-child) > *{ grid-column:span 6; }

  /* due */
  .nt-galleria:has(> :nth-child(2):last-child) > *{ grid-column:span 3; }

  /* tre */
  .nt-galleria:has(> :nth-child(3):last-child) > *{ grid-column:span 2; }

  /* cinque: 2 + 3 */
  .nt-galleria:has(> :nth-child(5):last-child) > *:nth-child(-n+2){ grid-column:span 3; }
  .nt-galleria:has(> :nth-child(5):last-child) > *:nth-child(n+3){ grid-column:span 2; }

  /* sei: 3 + 3 */
  .nt-galleria:has(> :nth-child(6):last-child) > *{ grid-column:span 2; }
}

/* ============================================================
   8. PROSSIMO PROGETTO
   ============================================================ */
/* L'immagine sta accanto al titolo, non dietro: prima faceva da
   sfondo tagliato al 50% di opacità e un marchio ci finiva mozzato. */
.nt-next{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--nt-space-5);
  align-items:center;
  overflow:hidden;
  border-radius:var(--nt-raggio);
  background-image:none;
  background-color:var(--nt-nero);
  padding:var(--nt-space-5);
}
.nt-next img{
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:contain;
  background:var(--nt-carta);
  border-radius:var(--nt-raggio-s);
  transition:transform .6s var(--nt-ease);
}
.nt-next:hover img{ transform:scale(1.02); }
.nt-next__testo{
  display:flex;
  flex-direction:column;
  gap:var(--nt-space-3);
  padding:var(--nt-space-3) var(--nt-space-4);
  color:#fff;
}
@media (min-width:760px){
  .nt-next{ grid-template-columns:minmax(220px, 34%) 1fr; }
}
.nt-next__label{
  font-family:var(--nt-meta);
  font-size:var(--nt-size-meta);
  letter-spacing:var(--nt-ls-meta);
  text-transform:uppercase;
  color:var(--nt-rosso);
  margin-bottom:var(--nt-space-2);
}
.nt-next__titolo{
  font-family:var(--nt-display);
  font-size:clamp(1.75rem, 1rem + 3vw, 3rem);
  line-height:1.05;
  letter-spacing:var(--nt-ls-display);
}

/* ============================================================
   9. NOTE DI SERVIZIO
   ============================================================ */
.nt-nota{
  border-left:3px solid var(--nt-blu);
  background:color-mix(in srgb, var(--nt-blu) 6%, transparent);
  padding:var(--nt-space-4) var(--nt-space-5);
  border-radius:0 var(--nt-raggio-s) var(--nt-raggio-s) 0;
  font-size:0.9375rem;
}

/* Salta al contenuto: accessibilità */
.nt-skip{
  position:absolute;
  left:-9999px;
}
.nt-skip:focus-visible{
  left:var(--nt-gutter);
  top:var(--nt-space-4);
  z-index:99999;
  background:var(--nt-nero);
  color:#fff;
  padding:12px 18px;
  border-radius:var(--nt-raggio-s);
}

/* Il filtro dello Showroom nasconde le card, non le ricarica: senza una
   transizione il salto è secco, con una di mezzo secondo si capisce che
   cosa è cambiato. */
.nt-filtri__esito{ margin:calc(var(--nt-space-6) * -1) 0 var(--nt-space-6); }
.nt-card{ animation:nt-entra .28s var(--nt-ease) both; }
@keyframes nt-entra{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .nt-card{ animation:none; }
}