/* SITO ADC S.r.l. – post Instagram (homepage e pagina Novità). Usa i colori e i caratteri del sito. */

.adc-ig { padding-block: 1rem 5rem; }
.adc-ig-page { padding-block: 5rem; }
@media (min-width: 48rem) {
  .adc-ig { padding-block: 2rem 7rem; }
  .adc-ig-page { padding-block: 7rem; }
}

.adc-ig-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 2rem; margin-bottom: 2.5rem;
}
.adc-ig-head > div { max-width: 42rem; }

.adc-ig-btn {
  display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0;
  border-radius: 9999px; padding: .75rem 1.5rem;
  font-size: .875rem; font-weight: 600; letter-spacing: .025em; text-decoration: none;
  transition: transform .3s var(--ease-spring, ease), background-color .3s, color .3s;
}
.adc-ig-btn:hover { transform: translateY(-2px); }
.adc-ig-btn-dark { background: var(--color-ink); color: #fff; box-shadow: 0 10px 15px -3px rgb(10 61 110 / .25); }
.adc-ig-btn-dark:hover { background: var(--color-ink-deep); }
@media (prefers-color-scheme: dark) {
  .adc-ig-btn-dark { background: #fff; color: var(--color-ink-deep); }
  .adc-ig-btn-dark:hover { background: rgb(255 255 255 / .9); }
}

/* carosello: ogni post una volta sola; allineato al contenuto della pagina, scorre fino al bordo */
.adc-ig-track {
  --pad: max(1.25rem, calc((100% - 80rem) / 2 + 1.25rem));
  position: relative; /* tiene dentro anche i testi per screen reader (posizionati in assoluto) */
  display: flex; gap: 1rem; margin: 0; padding: 0 var(--pad) .25rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.adc-ig-track::-webkit-scrollbar { display: none; }
@media (min-width: 48rem) {
  .adc-ig-track { --pad: max(2rem, calc((100% - 80rem) / 2 + 2rem)); gap: 1.5rem; }
}
.adc-ig-slide { flex: none; scroll-snap-align: start; }

.adc-ig-arrows { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }
.adc-ig-arrows[hidden] { display: none; }
.adc-ig-arrow {
  display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line); border-radius: 9999px; background: transparent; color: var(--fg);
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.adc-ig-arrow:hover { background: var(--color-ink); border-color: var(--color-ink); color: #fff; transform: translateY(-1px); }
.adc-ig-arrow:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.adc-ig-card { position: relative; display: block; color: inherit; text-decoration: none; outline: none; }
.adc-ig-img { position: relative; display: block; }
.adc-ig-img img {
  display: block; height: 14rem; width: auto; max-width: none; aspect-ratio: var(--r);
  object-fit: cover; border-radius: 1.5rem; background: var(--line);
  transition: transform .5s var(--ease-out-soft, ease), filter .5s;
}
@media (min-width: 48rem) { .adc-ig-img img { height: 20rem; } }
.adc-ig-card:hover img { filter: brightness(.92); }
.adc-ig-card:focus-visible .adc-ig-img img { outline: 3px solid var(--accent); outline-offset: 3px; }

.adc-ig-badge {
  position: absolute; top: .75rem; right: .75rem;
  display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: 9999px; background: rgb(255 255 255 / .9); color: var(--color-ink-deep);
  box-shadow: 0 4px 12px rgb(0 0 0 / .18); transition: transform .3s;
}
.adc-ig-card:hover .adc-ig-badge { transform: scale(1.1); }

/* pagina Novità: data e didascalia sotto l'immagine, larghe quanto l'immagine */
.adc-ig-meta {
  display: block; width: calc(14rem * var(--r)); margin-top: .9rem; padding-inline: .25rem;
}
@media (min-width: 48rem) { .adc-ig-meta { width: calc(20rem * var(--r)); } }
.adc-ig-meta time {
  display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .15em; color: var(--accent);
}
.adc-ig-cap {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  margin-top: .35rem; font-size: .95rem; line-height: 1.5; color: var(--muted);
}
.adc-ig-card:hover .adc-ig-cap { color: var(--fg); }

.adc-ig-empty {
  border: 1px dashed var(--line); border-radius: 1.5rem; padding: 2.5rem 1.5rem;
  text-align: center; font-size: 1.125rem; color: var(--muted);
}