/* ── Instagram Feed ─────────────────────────────────────────────────────── */
.bb-instagram-feed {
  background: #fff;
  padding: 48px 0 56px;
  border-top: 1px solid #e5e5e5;
  /* full-bleed: break out of any constrained parent column */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.bb-instagram-feed__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 24px 24px;
}

.bb-instagram-feed__label {
  font-size: 11px;
  font-weight: 400; /* HOME-13: no grassetto (era 600) */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000;
  text-decoration: none; /* [NEW-40] ora e' un link al profilo, come l'handle */
}

.bb-instagram-feed__label:hover {
  text-decoration: underline;
}

.bb-instagram-feed__handle {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #000;
  text-decoration: none;
}

.bb-instagram-feed__handle:hover {
  text-decoration: underline;
}

.bb-instagram-feed__track {
  display: flex;
  overflow-x: auto;
  gap: 2px;
  /* no horizontal padding — images go edge-to-edge */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bb-instagram-feed__track::-webkit-scrollbar {
  display: none;
}

.bb-instagram-feed__item {
  flex: 0 0 calc((100% - 6px) / 4);
  /* [NEW-56] formato fisso 4:5 (era quadrato), a ogni larghezza; la foto lo
     riempie ritagliata (object-fit: cover), senza mai deformarsi */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  scroll-snap-align: start;
  position: relative;
  display: block;
  text-decoration: none;
}

/* [NEW-56] Le foto di Instagram arrivano larghe 640px: con 4 tile a tutta
   larghezza, oltre i 2560 la tile superava i 640px e la foto veniva
   ingrandita (sgranata). Sugli schermi grandi si mostrano piu' tile, cosi'
   ognuna resta sotto i 640px: 5 da 1920, 6 da 2560 (a 3840: 638px). */
@media (min-width: 1920px) {
  .bb-instagram-feed__item { flex-basis: calc((100% - 8px) / 5); }
}
@media (min-width: 2560px) {
  .bb-instagram-feed__item { flex-basis: calc((100% - 10px) / 6); }
}

.bb-instagram-feed__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s;
}

.bb-instagram-feed__item:hover img {
  opacity: 0.85;
}

.bb-instagram-feed__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

@media (max-width: 767px) {
  .bb-instagram-feed {
    padding: 36px 0 44px;
  }

  /* [MOB-10] «togliere @benedettabruzziches - centrare seguici su instagram».
     Su desktop l'intestazione e' a due estremi: la dicitura a sinistra e
     l'handle a destra. Su telefono la riga e' stretta e i due pezzi si
     schiacciano ai bordi, cosi' il disegno chiede di tenere solo la dicitura,
     centrata.
     ⚠️ Qui si nasconde invece di rimuovere dal template — di solito facciamo
     il contrario — perche' la differenza e' di FORMATO, non di contenuto:
     l'handle deve restare su desktop, e lo stesso markup serve a entrambi.
     Il link all'account resta comunque raggiungibile: sono le immagini stesse
     a puntare al profilo. */
  .bb-instagram-feed__header {
    padding: 0 16px 20px;
    justify-content: center;
    text-align: center;
  }

  .bb-instagram-feed__handle {
    display: none;
  }

  .bb-instagram-feed__item {
    /* ~2.4 items visible, peek of third */
    flex: 0 0 calc(100% / 2.4);
  }
}