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

.filterable-system {
    /* Social Follow component styling */
    & .filterable-card[data-type="social-follow"] {
        position: relative;
        overflow: hidden;
        background: linear-gradient(to bottom, #959595 0%, #ffffff 100%);
        padding:var(--spacing-md);
        
        & .card-content {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        & .social-follow-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            height: 100%;
            width: 100%;
            
            /* Heading styling */
            & .follow-heading {
                text-align: center;
                color:#000;
            }
            
            /* Social icons container */
            & .social-icons-container {
                margin-top: auto;
                width: 100%;
                display: flex;
                justify-content: center;
            }
            
            /* Social menu styling */
            & .social-follow-menu {
                display: flex;
                list-style: none;
                margin: 0;
                padding: 0;
                justify-content: center;
                gap: var(--spacing-md);
                
                & li {
                    margin: 0;
                    padding: 0px;

                    &:before {
                        display: none;
                    }
                }
                
                & a {
                    display: block;
                    width: 36px;
                    height: 36px;
                    font-size: 0;
                    color: transparent;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: contain;
                    filter: brightness(0); /* Make icons black */
                    transition: transform 0.3s ease;
                    
                    &:hover {
                        transform: scale(1.1);
                    }
                }
                
                /* Individual social icons */
                & .facebook-icon a {
                    background-image: url('../../../svg/facebook-icon.svg');
                }

                & .x-icon a {
                    background-image: url('../../../svg/x-icon.svg');
                }
                
                & .instagram-icon a,
                & .isntagram-icon a { /* Handle typo in class name */
                    background-image: url('../../../svg/instagram-icon.svg');
                }
                
                /* Add more social icons as needed */
            }
        }
    }
}

/* Responsive adjustments */
@media screen and (max-width: 576px) {
    .filterable-system {
        & .filterable-card[data-type="social-follow"] {
            & .social-follow-content {      
                & .social-follow-menu {
                    gap: var(--spacing-sm);
                    
                    & a {
                        width: 30px;
                        height: 30px;
                    }
                }
            }           
        }   
    }
}