/* Instagram Reels Slider & Player Styles */
.instagram-slider-container {
    position: relative;
    overflow: hidden;
    padding-bottom: 20px;
}

.instagram-grid {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 15px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) transparent;
}

.instagram-grid::-webkit-scrollbar { height: 6px; }
.instagram-grid::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.instagram-grid::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 10px; }

.instagram-item {
    flex: 0 0 calc(25% - 11.25px); /* Perfectly fills 4 columns on desktop */
    min-width: unset;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 9/16;
    scroll-snap-align: start;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.instagram-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.instagram-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1200px) {
    .instagram-item { flex: 0 0 calc(25% - 12px); min-width: 200px; }
}

@media (max-width: 992px) {
    .instagram-item { flex: 0 0 calc(45% - 12px); min-width: 180px; }
    .instagram-grid { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 20px; }
}

@media (max-width: 576px) {
    .instagram-item { flex: 0 0 calc(65% - 15px); min-width: 220px; border-radius: 12px; }
    .instagram-grid { gap: 15px; padding-left: 20px; padding-right: 20px; }
}

/* THE PURE REEL MAGIC - PERFECT CLIP */
#reelIframe {
    position: absolute;
    /* DEEP CLIP: Push the header (-60px) and the footer (+180px) out of the box precisely */
    top: -60px; left: -1px; width: calc(100% + 2px); height: calc(100% + 240px) !important;
    border: none; transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    filter: brightness(1.02); transform: scale(1);
}

.reel-nav {
    position: absolute; top: 50%; transform: translateY(-50%); width: 55px; height: 55px;
    background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10002; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    border: 1px solid rgba(255, 255, 255, 0.1); font-size: 1rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.reel-prev { left: -85px; } .reel-next { right: -85px; }
.reel-nav:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-50%) scale(1.1); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5); }
#reelLoader { pointer-events: none; text-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.letter-spacing-2 { letter-spacing: 2px; }

@media (max-width: 1200px) {
    .reel-prev { left: 15px; } .reel-next { right: 15px; }
    .reel-nav { width: 45px; height: 45px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2); }
}

@media (max-width: 768px) {
    .modal-dialog { margin: 0; padding: 0; }
    #reelFrameContainer { height: 95vh; border-radius: 0; border: none; margin: 0; }
    /* MOBILE DEEP CLIP */
    #reelIframe { top: -60px; height: calc(100% + 230px) !important; }
    
    /* ENABLE MOBILE NAVIGATION */
    .reel-nav { 
        display: flex !important; 
        width: 44px; height: 44px; 
        background: rgba(0, 0, 0, 0.4); 
        top: 50%; 
        border: 1px solid rgba(255, 255, 255, 0.2);
        z-index: 10006;
    }
    .reel-prev { left: 15px; }
    .reel-next { right: 15px; }
    
    .btn-close-white { top: 25px !important; right: 25px !important; }
    #reelCtaContainer { padding-bottom: 40px !important; }
}