/**
 * Instagram Feed Styles
 * Limita il feed Instagram a mostrare solo i primi 4 post
 * Porto Child Theme
 */

/* Limita il feed Instagram a 4 post */
#sbi_images {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
}

/* Nascondi tutti i post dopo il 4° */
#sbi_images > *:nth-child(n+5) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Alternativa: se i post sono in un container diverso */
.elementor-element[data-id="933a070"] #sbi_images > *:nth-child(n+5),
.elementor-widget-sbi-widget #sbi_images > *:nth-child(n+5),
.elementor-element[data-id="933a070"] #sbi_images > *:nth-child(n+5) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Assicura che i primi 4 post siano visibili */
#sbi_images > *:nth-child(-n+4) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Da tablet in giù: padding laterale */
@media (max-width: 991px) {
    .elementor-element[data-id="933a070"] .elementor-widget-container,
    .elementor-widget-sbi-widget .elementor-widget-container,
    #sb_instagram.sbi {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Responsive: su tablet mostra 2 colonne */
@media (max-width: 992px) and (min-width: 769px) {
    #sbi_images {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Responsive: su mobile mostra 2 colonne */
@media (max-width: 768px) {
    #sbi_images {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Nascondi tutti i post dopo il 4° anche su mobile */
    #sbi_images > *:nth-child(n+5) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Assicura che i primi 4 post siano visibili su mobile */
    #sbi_images > *:nth-child(-n+4) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Nascondi il pulsante "Carica altro" del feed Instagram */
.sbi_load_btn {
    display: none !important;
    visibility: hidden !important;
}

/* Rimuovi margin-left dal pulsante "Segui su Instagram" */
#sb_instagram #sbi_load .sbi_follow_btn {
    margin-left: 0 !important;
}

/* Imposta margin per pulsanti Instagram */
#sb_instagram #sbi_load .sbi_load_btn,
#sb_instagram .sbi_follow_btn a,
.et-db #et-boc .et-l .et_pb_module .sbi_follow_btn a {
    margin: 10px 0 !important;
}

/* Rimuovi padding-top dall'header del feed Instagram */
#sb_instagram .sb_instagram_header,
.sb_instagram_header {
    padding-top: 0 !important;
}