/* «Seguici su Instagram» on the home page (28 Oct 2026): the latest Reels, drawn by the Worker
   (src/lib/instagram-cards.ts). The section is removed when there are no clips. */
.ba-ig__head { margin-bottom: 2rem; max-width: 46rem; }
.ba-ig__head h2 { color: var(--sea); }
.ba-ig__head p { margin: .75rem 0 0; color: var(--muted); font-size: var(--step-0); line-height: 1.6; }
.ba-ig__list {
  list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 1rem;
  display: grid; gap: 1rem; grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 42%);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin;
}
.ba-ig__list > li { scroll-snap-align: start; min-width: 0; }
.ba-ig__clip { display: grid; gap: .65rem; color: var(--ink); text-decoration: none; }
.ba-ig__media {
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: var(--radius); background: var(--sea);
  box-shadow: 0 12px 28px rgb(18 26 46 / .18);
}
.ba-ig__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ba-ig__badge {
  position: absolute; top: .6rem; left: .6rem; display: inline-flex; padding: .3rem; border-radius: 8px;
  background: rgb(18 26 46 / .55); color: #fff;
}
.ba-ig__badge svg { width: 1.1rem; height: 1.1rem; }
.ba-ig__play {
  position: absolute; left: 50%; top: 50%; width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 -1.75rem;
  display: grid; place-items: center; border-radius: 50%; border: 2px solid #fff; background: rgb(18 26 46 / .5); color: #fff;
}
.ba-ig__play svg { width: 1.35rem; height: 1.35rem; margin-left: .2rem; }
.ba-ig__text { font-size: var(--step--1); line-height: 1.5; }
.ba-ig__date { display: block; margin-top: .15rem; color: var(--muted); }
.ba-ig__clip:hover .ba-ig__media img { transform: scale(1.03); }
.ba-ig__clip:focus-visible { outline: 3px solid var(--stripe); outline-offset: 4px; border-radius: var(--radius); }
.ba-ig__links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.ba-ig__links .btn svg { flex: none; }
@media (max-width: 479.98px) { .ba-ig__links .btn { flex: 1 1 100%; } }
@media (min-width: 768px) {
  .ba-ig__list { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: 0; padding-inline: 0; overflow: visible; gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .ba-ig__media img { transition: none; } }