/**
 * Social Post component styles for filterable components
 * Follows the JPK theme's design system
 */

.filterable-system {
    /* Social Post component styling */
    & .filterable-card[data-type="social-post"] {
        border: 1px solid rgba(255, 255, 255, .5);

        .social-post-content {
            position: relative;
            aspect-ratio: 4 / 5;
            
            .social-post-placeholder {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                z-index: 1;
                background-color: black;
                transition: opacity .5s ease;
                
                &.hidden {
                    opacity: 0;
                    pointer-events: none;
                }
                img {
                    width: 100%;
                }
            }
        }
        .card-content {
            padding: 0px;
            height: 100%;

            .sbi {
                padding-bottom: 0px !important;
                height: 100% !important;
            }
            #sbi_images {
                padding: 0px !important;
                height: 100% !important;
            }
            .sbi_item {
                height: 100% !important;
            }
            .sbi_photo_wrap,
            .sbi_photo {
                height: 100% !important;
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                width: 100% !important;
            }
            .sbi_photo img {
                object-fit: cover !important;
                height: 100% !important;
                width: 100% !important;
            }
        }
    }
}