/* Website-Feed (FE_SocialFeed). Farben aus dem Farbvertrag der Festival-Site (--bs-*). */
.social-feed__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: .75rem;
    margin: 0;
}
.social-feed__tile { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: .5rem; background: var(--bs-secondary-bg, #eee); }
.social-feed__link { display: block; width: 100%; height: 100%; color: #fff; text-decoration: none; }
.social-feed__media { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.social-feed__link:hover .social-feed__media, .social-feed__link:focus-visible .social-feed__media { transform: scale(1.04); }
.social-feed__caption {
    position: absolute; inset: auto 0 0 0; padding: 2.5rem .75rem .75rem;
    font-size: .85rem; line-height: 1.3;
    background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
    opacity: 0; transition: opacity .25s ease;
}
.social-feed__link:hover .social-feed__caption, .social-feed__link:focus-visible .social-feed__caption { opacity: 1; }
@media (hover: none) { .social-feed__caption { opacity: 1; -webkit-line-clamp: 2; } }
.social-feed__badge { position: absolute; top: .5rem; right: .6rem; font-size: .9rem; text-shadow: 0 0 4px rgba(0,0,0,.6); }
.social-feed__link:focus-visible { outline: 3px solid var(--bs-primary, #e3480f); outline-offset: 2px; }