.slb { position: fixed; inset: 0; display: none; z-index: 9999; }
.slb:not(.slb--hidden) { display: block; }
.slb__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.slb__dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(900px, 92vw); height: min(80vh, 92vh); background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.slb__close { position: absolute; top: 8px; right: 10px; font-size: 28px; line-height: 1; color: #000; cursor: pointer; z-index: 2; background: white; border: 1px solid gray;border-radius: 50%;}
.slb__content { width: 100%; height: 100%; }
.slb__content iframe { width: 100%; height: 100%; border: 0; background: #000; }

.fb-ig-video a {
    display: block;
}

#social-lightbox .slb__dialog {
    width: auto;
    height: auto;
    max-width: 80vw;
    max-height: 80vh;
    display: flex;
}

#social-lightbox .slb__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
    justify-content: center;
    background-color: white;
    padding: 20px;
    max-height: 80vh;
    overflow: hidden; /* no scroll inside content */
}

#social-lightbox .slb-original-link {
    display: block;
    background-color: #65b391 !important;
}

#social-lightbox .slb__content img {
    max-width: 100%;
    height: auto;
    max-height: 55vh; /* leave room for text/buttons */
    object-fit: contain;
}

/* Ensure iframes and videos also fit without causing scrollbars */
#social-lightbox .slb__content iframe,
#social-lightbox .slb__content video {
    max-width: 100%;
    max-height: 55vh;
}

/* Clamp message text so entire lightbox content fits without scrolling */
#social-lightbox .slb-message {
    max-width: 90%;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Clamp post excerpts in feed to 4 lines */
.fb-ig-mixed-feed .fb-ig-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Feed layout: 4 items per row using flex */
.fb-ig-mixed-feed {
    display: flex !important; /* override inline grid */
    flex-wrap: wrap;
    gap: 16px;
}

.fb-ig-mixed-feed .fb-ig-post {
    width: 100% !important;
    box-sizing: border-box;
    flex: 0 0 calc((100% - 3 * 16px) / 4);
}

.fb-ig-mixed-feed .fb-ig-post img,
.fb-ig-mixed-feed .fb-ig-post video {
    display: block;
    width: 100%;
    height: auto;
}

.fb-ig-nav {
    z-index: 100;
}

/* Responsiveness */

/* Fix carousel slide alignment: remove gaps and force 100% slide width */
.fb-ig-carousel .fb-ig-carousel-viewport {
    overflow: hidden;
}
.fb-ig-carousel .fb-ig-carousel-track {
    gap: 0 !important;
}
.fb-ig-carousel .fb-ig-item {
    flex: 0 0 100%;
    min-width: 100% !important;
}
.fb-ig-carousel .fb-ig-item img,
.fb-ig-carousel .fb-ig-item video {
    display: block;
    width: 100%;
    height: auto;
}

/* Limit carousel overall width and center it (adjust the max as needed) */
.fb-ig-carousel {
    /* Customize this to control maximum carousel width */
    --carousel-max-width: 600px;
    width: 100%;
    max-width: var(--carousel-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Optionally shrink the viewport to a percentage of its container */
/* Example: uncomment to use 80% width
.fb-ig-carousel .fb-ig-carousel-viewport {
    width: 80%;
    margin: 0 auto;
}
*/

/* Salli asemointi justify-contentilla */
.fb-ig-mixed-feed {
    display: flex !important;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center; /* vaihda: flex-start | flex-end | space-between | space-around | space-evenly */
    --feed-card-width: 260px; /* säädä tarpeen mukaan */
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.fb-ig-mixed-feed .fb-ig-post {
    flex: 1 1 var(--feed-card-width);
}

@media (max-width: 1024px) {
    /* .fb-ig-mixed-feed .fb-ig-post {
        flex: 0 0 calc((100% - 2 * 16px) / 3);
    } */
}

@media (max-width: 768px) {
    .fb-ig-mixed-feed {
        gap: 12px;
    }
    /* .fb-ig-mixed-feed .fb-ig-post {
        flex: 0 0 calc((100% - 1 * 12px) / 2);
    }  */
}

@media (max-width: 480px) {
    .fb-ig-mixed-feed {
        gap: 10px;
    }
    .fb-ig-mixed-feed .fb-ig-post {
        flex: 0 0 100%; /* 1 column */
    }

    #social-lightbox .slb__dialog {
        max-width: 90vw;
        width: 90vw;
    }
}