/* ═══════════════════════════════════════
   ATTIVAZIONI — CSS columns (Porto Rocha style)
   Ogni item ha il proprio aspect-ratio.
   Le colonne scorrono in altezza in modo
   indipendente → nessun buco, look organico.
═══════════════════════════════════════ */

/* ── Titolo di sezione (es. "Placemaking") ── */
/* Niente filo di separazione in alto: sopra c'e' il blocco ESG, che da
   quando e' verde si stacca da solo dal bianco di questa banda. */
.section-title-band {
  background: var(--white);
  padding: 56px 40px 48px;   /* 56px in alto: allinea il badge alle altre sezioni */
}

.section-title-label {
  font-family: 'Inter', sans-serif;
  font-size: var(--t-titolo);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--dark);
  text-align: center;
}

/* Header a 3 colonne: prima metà del testo a sinistra, titolo al
   centro, seconda metà a destra.
   Colonne laterali simmetriche (1fr auto 1fr) → il titolo è centrato
   senza il translateX di compensazione. */
.trademarks-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* Allineamento alla BASELINE dell'ultima riga del titolo, non al bordo
     inferiore delle scatole. Con "end" i box finiscono alla stessa quota, ma
     la baseline del titolo (100px, line-height .95) sta 11px sopra il suo
     bordo, mentre quella dei testi laterali (12px, line-height 1.5) ne sta
     4,6px sopra: i testi laterali risultavano 8px piu' bassi.
     La prima riga e' il fallback per i browser che non conoscono
     "last baseline": la ignorano e restano al comportamento precedente. */
  align-items: end;
  align-items: last baseline;
  gap: 80px;
  margin-top: 48px;
}

.trademarks-name-wrap {
  text-align: center;
}

.trademarks-text {
  font-size: var(--t-testo);
  line-height: 1.55;
  color: var(--ink-testo);
}

.trademarks-text--right {
  text-align: right;
}

/* ── Sotto i 1400px: titolo sopra, i due testi sotto ──
   Stessa soglia della frase dei progetti, per non moltiplicare i punti di
   rottura. A tre colonne il titolo "Trademarks" si mangia il centro e ai
   due testi restano poco piu' di 200px per parte: si sfilacciano. Meglio
   il titolo su una riga sua e i testi affiancati sotto. */
@media (max-width: 1400px) {
  .trademarks-header {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 28px 48px;
  }

  /* order: -1 porta il titolo davanti ai due testi senza toccare l'HTML,
     dove l'ordine di lettura resta testo / titolo / testo. */
  .trademarks-name-wrap {
    grid-column: 1 / -1;
    order: -1;
  }

  .trademarks-text--right {
    text-align: left;
  }
}

.activations-section {
  background: var(--white);
  padding: 0 0 80px;
}

/* ── Griglia a 4 colonne CSS ────────────── */

.activations-grid {
  columns: 4;
  column-gap: 5px;
  margin: 0 5px;
}

/* ── Item ──────────────────────────────── */

.act-item {
  break-inside: avoid;
  margin-bottom: 5px;
  opacity: 0;
  transform: translateY(40px);
  filter: blur(6px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--act-delay, 0s);
}

.act-item.act-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

/* ── Immagine con aspect-ratio esplicito ── */

.act-img {
  display: block;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
}

/* ── Slideshow (foto senza crop) ────────── */

.act-slideshow {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  background: #111; /* sfondo neutro attorno all'immagine contain */
}

/* Come chiudono le quattro colonne.
   Erano 8 tessere, poi 7 (via Pavilion Fuorimano): una colonna ne conteneva
   una sola e per pareggiare veniva stirata con un padding-bottom calcolato
   a mano — il tile lungo. Tornate a 8 con Pubblicazioni, ogni colonna ne
   prende due e bastano i formati:
       col 1  4/5 + 1/1   col 2  1/1 + 4/5
       col 3  4/5 + 1/1   col 4  4/5 + 1/1
   Misurato: le quattro colonne finiscono allo stesso pixel (scarto 0) a
   1728, 1440 e 1200px. Toccando un aspect-ratio inline nell'HTML questo
   pareggio si rompe: exhibition-bim era 2/3 e lasciava 106px di scalino. */

.slideshow-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* riempie il contenitore */
  opacity: 0;
  transition: opacity 0.8s ease;
}

.slideshow-img.is-active {
  opacity: 1;
}

/* ── Caption ───────────────────────────── */

.act-caption {
  padding: 6px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.act-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--dark);
  line-height: 1.5;
}

.act-desc {
  font-size: var(--t-didascalia);
  color: var(--mid-testo);
}

/* ── Etichetta "scopri di più" che segue il mouse ────────────────
   Stava in projects.css e serviva due cose insieme: "visita il sito"
   sulle foto dei progetti e "scopri di più" sulle tessere placemaking.
   Riscrivendo i progetti a schede la parte foto e' sparita e con lei si
   e' persa anche questa: ora vive qui, dove e' l'unica che la usa.
   position:fixed + pointer-events:none: segue il puntatore senza mai
   intercettare il click che apre la scheda. */
.cursor-label {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  background: var(--accent);
  color: var(--dark);
  /* Stessa voce degli altri pulsanti del sito: vedi base.css */
  font-size: var(--t-pulsante);
  font-weight: var(--peso-pulsante);
  letter-spacing: var(--ls-pulsante);
  text-transform: uppercase;
  padding: 10px 20px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}

.cursor-label.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}


/* ═══════════════════════════════════════
   HEADER TRADEMARKS — solo il titolo
   Tolti i due paragrafi laterali (richiesta del cliente, 30 settembre),
   l'header e' rimasto il solo titolo dentro una
   griglia pensata per tre elementi: il titolo finiva centrato nella
   colonna avanzata e la sua posizione cambiava con la larghezza della
   finestra — 141px di scarto dal badge a 1920, 21px a 1440, 257px a
   1024. Una colonna sola e allineamento a sinistra: il titolo sta sul
   filo del badge a qualsiasi larghezza, come gia' faceva da mobile.
   Se i testi laterali tornassero, basta togliere questo blocco.
═══════════════════════════════════════ */
.trademarks-header {
  grid-template-columns: 1fr;
}

.trademarks-name-wrap,
.section-title-label {
  text-align: left;
}