/* Centering and spacing tweaks */
#instagram-feed {
    justify-content: center; /* Centers items when grid isn't full */
}

/* Square Item Container Card Customizations */
.insta-item {
    position: relative;
    overflow: hidden;
    padding-bottom: 100%; /* Keeps 1:1 Square */
    border-radius: 12px;  /* Smooth, modern rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Soft premium shadow */
    background: #000; /* Ensures black background behind videos/images */
}

/* Image & Video Base Styles + Smooth Transition */
.insta-item img, .insta-item video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Ultra smooth ease */
}

/* Subtle Interactive Image Zoom on Hover */
.insta-item:hover img, .insta-item:hover video {
    transform: scale(1.06); /* Elegant, subtle zoom-in */
}

/* Sleeker Hover Overlay Layout */
.insta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Perfect opacity dimming */
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    z-index: 2;
}

.insta-item:hover .insta-overlay {
    opacity: 1;
}

/* Modern styling for text/icon inside the hover state */
.insta-overlay span {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 6px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px); /* Trendy glassmorphism effect */
    transition: background 0.2s ease;
}

.insta-overlay span:hover {
    background: rgba(255, 255, 255, 0.25);
}


/* Hide the static badge when the main hover overlay kicks in */
.insta-item:hover::before {
    opacity: 0;
}

/* Subtle lift animation for micro-blogging panels */
.hover-threads-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.hover-threads-card:hover {
    transform: translateY(-4px); /* Clean upward lift */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* Ensure the thread text doesn't overflow drastically if long */
.card-text {
    display: -webkit-box;
    -webkit-line-clamp: 5; /* Safe stop at 5 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}