/* Tileor — [tileor_foto] */
.tlf { --tlf-ground: #ECEBE7; --tlf-ink: #141414; }
.tlf-tile { position: relative; display: block; overflow: hidden; background: #DAD7D0; }
.tlf-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .6s; }
a.tlf-tile:hover img, a.tlf-tile:focus-visible img { transform: scale(1.04); }
a.tlf-tile:focus-visible { outline: 2px solid #7A5C24; outline-offset: 3px; }
.tlf-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: #F4F2EE; background: linear-gradient(to top, rgba(20,20,20,.55), rgba(20,20,20,0));
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
a.tlf-tile:hover .tlf-label, a.tlf-tile:focus-visible .tlf-label { opacity: 1; transform: none; }
@media (hover: none) { .tlf-label { opacity: 1; transform: none; } }

/* Griglia: 4 colonne, foto verticali come su Instagram */
.tlf--griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.tlf--griglia .tlf-tile { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .tlf--griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Striscia: una foto grande e due più strette, a tutta larghezza del contenuto */
.tlf--striscia { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3px; height: clamp(300px, 38vw, 580px); }
.tlf--striscia .tlf-tile { height: 100%; }
@media (max-width: 760px) {
  .tlf--striscia { grid-template-columns: 1fr 1fr; grid-template-rows: 1.3fr 1fr; height: auto; aspect-ratio: 4 / 5; }
  .tlf--striscia .tlf-tile:first-child { grid-column: 1 / -1; }
  .tlf--striscia .tlf-tile:nth-child(n+4) { display: none; }
}

/* Miniature accanto al nome del marchio */
.tlf--marchio { display: inline-flex; gap: 3px; flex: none; }
.tlf--marchio .tlf-tile { width: 64px; height: 80px; }
@media (max-width: 640px) { .tlf--marchio .tlf-tile { width: 48px; height: 60px; } .tlf--marchio .tlf-tile:nth-child(n+3) { display: none; } }

@media (prefers-reduced-motion: reduce) { .tlf-tile img, .tlf-label { transition: none; } }