/* Topologia condivisa: griglia di famiglie merceologiche.
   ⚠ Solo token comuni a TUTTI i verticali; nessun colore letterale. ⚠ Mobile-first.
   ⭐ Le tessere hanno TUTTE la stessa misura a ogni fascia: senza un rapporto imposto alla fotografia,
   ognuna prende quello NATIVO del proprio file e i titoli si sfalsano riga per riga. */

.fp-topo-tiles { padding-top: calc(var(--section-y) * 1.35); padding-bottom: calc(var(--section-y) * 1.35); background: var(--surface); color: var(--ink); }
/* ⚠ Il gradiente sta sulla SEZIONE, non dentro le tessere: una sfumatura larga tre centimetri dentro un
   riquadro non e' una superficie della pagina ne' per lo strumento ne' per chi guarda. */
.fp-topo-tiles { background-image: linear-gradient(170deg, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 42%, color-mix(in srgb, var(--ink) 5%, transparent) 100%); }

.fp-topo-tiles__intro { margin-bottom: var(--space-8); }
.fp-topo-tiles__eyebrow { margin: 0 0 var(--space-2); font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.fp-topo-tiles__h { margin: 0 0 var(--space-3); line-height: var(--lh-tight); }
/* ⚠ La misura di lettura sta sul PARAGRAFO, mai sul contenitore: sul contenitore strozzerebbe anche il
   titolo, che ha un corpo molto piu' grande e conterebbe molti meno caratteri per riga. */
.fp-topo-tiles__lead { margin: 0; max-width: 62ch; line-height: var(--lh-body); }

/* L'ultima riga incompleta si CENTRA invece di allargare l'ultima tessera: un riquadro piu' largo
   chiederebbe una fotografia di formato diverso, e il parco foto di un cliente non sempre ce l'ha. */
.fp-topo-tiles__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); justify-content: center; }

.fp-topo-tiles__tile { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius); overflow: hidden;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1), box-shadow 260ms cubic-bezier(.22,.61,.36,1); }
.fp-topo-tiles__tile:hover { transform: translateY(-4px); box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 12%, transparent); }
/* Il ritaglio sta sul CONTENITORE della foto, che porta il rapporto: cosi' ogni tessera e' alta uguale
   qualunque sia il formato nativo del file. */
.fp-topo-tiles__media { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
/* Velo in gradiente: stacca la fotografia dalla tessera e da' profondita' senza toccare i pixel. */
.fp-topo-tiles__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--ink) 30%, transparent) 100%); }
.fp-topo-tiles__media img { transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.fp-topo-tiles__tile:hover .fp-topo-tiles__media img { transform: scale(1.05); }
.fp-topo-tiles__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.fp-topo-tiles__body { padding: var(--space-5) var(--space-5) var(--space-6); }
.fp-topo-tiles__t { margin: 0 0 var(--space-2); line-height: var(--lh-snug); font-size: var(--text-lg); }
.fp-topo-tiles__t a { color: inherit; text-decoration: none; }
.fp-topo-tiles__t a:hover { text-decoration: underline; }
.fp-topo-tiles__t a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fp-topo-tiles__d { margin: 0; max-width: 46ch; line-height: var(--lh-body); }

@media (min-width: 700px) {
  .fp-topo-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}
@media (min-width: 1000px) {
  .fp-topo-tiles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}