/* Neula Instagram Performance - Non-Critical Styles for supro-instagram-2 */

/* Additional hover effects and animations - scale content, not the padded container */
.supro-instagram-2 .instagram-wrapper a img,
.supro-instagram-2 .instagram-wrapper a video {
    transition: transform 0.3s ease;
    transform-origin: center center;
}

.supro-instagram-2 .instagram-wrapper a:hover img,
.supro-instagram-2 .instagram-wrapper a:hover video {
    transform: scale(1.02);
}

/* Video specific enhancements */
.supro-instagram-2-video-display video {
    object-fit: cover;
    aspect-ratio: 1;
}

/* Performance optimizations */
.supro-instagram-2 .instagram-wrapper a img,
.supro-instagram-2 .instagram-wrapper a video {
    will-change: opacity;
}

.supro-instagram-2 .instagram-wrapper a:hover span,
.supro-instagram-2 .instagram-wrapper a:hover i.fa-instagram {
    will-change: transform, opacity;
}

/* Aspect ratio maintenance */
.supro-instagram-2 .instagram-wrapper a::before {
    content: '';
    display: block;
    padding-bottom: 100%; /* 1:1 aspect ratio */
}

.supro-instagram-2 .instagram-wrapper a img,
.supro-instagram-2 .instagram-wrapper a video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* High-resolution display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .supro-instagram-2 .instagram-wrapper a {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .supro-instagram-2 .instagram-wrapper a,
    .supro-instagram-2 .instagram-wrapper a span,
    .supro-instagram-2 .instagram-wrapper a i.fa-instagram,
    .supro-instagram-2 .instagram-wrapper a img,
    .supro-instagram-2 .instagram-wrapper a video {
        transition: none !important;
        animation: none !important;
    }
}

/* Focus states for accessibility - removed visible outline */
.supro-instagram-2 .instagram-wrapper a:focus {
    outline: none; /* Remove blue focus halo */
}

.supro-instagram-2 .instagram-wrapper a:focus span {
    opacity: 1; /* Keep hover effect on focus for keyboard users */
}

.supro-instagram-2 .instagram-wrapper a:focus i.fa-instagram {
    transform: translate(-50%, -50%) scale(1); /* Keep hover effect on focus for keyboard users */
}

/* Print styles */
@media print {
    .supro-instagram-2 .instagram-wrapper a span,
    .supro-instagram-2 .instagram-wrapper a i.fa-instagram {
        display: none !important;
    }
}

/* WP Rocket compatibility enhancements */
.supro-instagram-2 .instagram-wrapper a.rocket-lazyload {
    transition: opacity 0.3s ease;
}

.supro-instagram-2 .instagram-wrapper a.rocket-lazyload.lazyloaded {
    opacity: 1;
}