/**
 * Instagram Integration Styles
 * Grid, Carousel, and Single Post Page
 */

/* ============================================
   INSTAGRAM GRID ENHANCEMENTS
   ============================================ */

.instagram-grid-wrapper {
    border-radius: 12px;
}

.instagram-posts-grid {
    max-width: 100%;
}

/* Hover effect overlay */
.instagram-card-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.instagram-card:hover .instagram-card-image::before {
    opacity: 1;
}

/* Instagram icon on hover */
.instagram-card-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E1306C'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073z'/%3E%3Cpath d='M12 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4z'/%3E%3Ccircle cx='18.406' cy='5.594' r='1.44'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
}

.instagram-card:hover .instagram-card-image::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ============================================
   INSTAGRAM CTA GRADIENT
   ============================================ */

.instagram-cta-gradient {
    background: linear-gradient(135deg, #833AB4 0%, #E1306C 50%, #F77737 100%) !important;
}

/* ============================================
   SINGLE POST - HEADER COVER IMAGE
   ============================================ */

/* Position cover image at top instead of center */
.single-instagram_post .wp-block-cover__image-background,
.single-instagram_post .wp-block-cover img,
.single-instagram_post .wp-block-cover video {
    object-position: center 25% !important;
}

/* Also target if it's set as background-image */
.single-instagram_post .wp-block-cover {
    background-position: center 25% !important;
}

/* ============================================
   SINGLE POST PAGE - TWO COLUMN LAYOUT
   ============================================ */

/* Force columns to not wrap on desktop */
.instagram-single-page .wp-block-columns.instagram-content-columns {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 48px;
    align-items: center;
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
}

.instagram-single-page .wp-block-column.instagram-carousel-column {
    flex: 0 0 420px !important;
    max-width: 420px !important;
    width: 420px !important;
}

.instagram-single-page .wp-block-column.instagram-caption-column {
    flex: 1 1 auto !important;
    max-width: 550px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ============================================
   SINGLE POST PAGE - CAROUSEL
   ============================================ */

.instagram-carousel-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.instagram-carousel-main {
    position: relative;
    aspect-ratio: 4/5;
    max-height: 480px;
    overflow: hidden;
    background: #000;
}

/* Blur background for images that don't fill frame */
.instagram-carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.instagram-carousel-slide::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: inherit;
    filter: blur(30px) brightness(0.6);
    transform: scale(1.1);
    z-index: 0;
}

.instagram-carousel-slide.active {
    opacity: 1;
}

.instagram-carousel-slide img,
.instagram-carousel-slide video {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Navigation arrows */
.instagram-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #333;
    z-index: 10;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.instagram-carousel-nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
}

.instagram-carousel-prev {
    left: 10px;
}

.instagram-carousel-next {
    right: 10px;
}

/* Indicators */
.instagram-carousel-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: #fff;
}

.instagram-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ddd;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.instagram-carousel-dot.active {
    background: #E1306C;
    transform: scale(1.3);
}

.instagram-carousel-counter {
    font-size: 12px;
    color: #666;
    margin-right: 10px;
}

/* Thumbnails */
.instagram-carousel-thumbs {
    display: flex;
    gap: 4px;
    padding: 6px 10px 10px;
    background: #fff;
    overflow-x: auto;
    scrollbar-width: none;
}

.instagram-carousel-thumbs::-webkit-scrollbar {
    display: none;
}

.instagram-carousel-thumb {
    flex-shrink: 0;
    width: 40px;
    height: 50px;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: none;
    transition: border-color 0.2s ease;
}

.instagram-carousel-thumb.active {
    border-color: #E1306C;
}

.instagram-carousel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Single image fallback */
.instagram-single-image {
    max-width: 400px;
    border-radius: 12px;
    overflow: hidden;
}

.instagram-single-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   SINGLE POST - CAPTION STYLING
   ============================================ */

.instagram-single-page .instagram-caption {
    margin: 0;
}

.instagram-single-page .instagram-caption p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #333;
    margin-bottom: 1em;
}

.instagram-single-page .instagram-caption p:last-child {
    margin-bottom: 0;
}

/* ============================================
   RESPONSIVE - LARGE DESKTOP
   ============================================ */

@media (min-width: 1200px) {
    .instagram-carousel-main {
        max-height: 520px;
    }
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (max-width: 1024px) {
    .instagram-single-page .wp-block-columns.instagram-content-columns {
        gap: 32px;
    }

    .instagram-single-page .wp-block-column.instagram-carousel-column {
        flex: 0 0 360px !important;
        max-width: 360px !important;
        width: 360px !important;
    }

    .instagram-single-page .wp-block-column.instagram-caption-column {
        flex: 1 1 auto !important;
        max-width: 100% !important;
    }

    .instagram-carousel-main {
        max-height: 420px;
    }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 781px) {
    /* Stack columns on mobile */
    .instagram-single-page .wp-block-columns.instagram-content-columns {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 32px;
        align-items: center;
    }

    .instagram-single-page .wp-block-column.instagram-carousel-column,
    .instagram-single-page .wp-block-column.instagram-caption-column {
        flex: 0 0 100% !important;
        max-width: 500px !important;
        width: 100% !important;
    }

    /* Full-width carousel on mobile */
    .instagram-carousel-wrap {
        max-width: 100%;
        border-radius: 8px;
        margin: 0 auto;
    }

    .instagram-carousel-main {
        aspect-ratio: 4/5;
        max-height: none;
    }

    .instagram-carousel-slide img,
    .instagram-carousel-slide video {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
    }

    .instagram-carousel-nav {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .instagram-carousel-prev {
        left: 8px;
    }

    .instagram-carousel-next {
        right: 8px;
    }

    .instagram-carousel-thumb {
        width: 36px;
        height: 45px;
    }

    .instagram-carousel-indicators {
        padding: 8px;
    }

    .instagram-carousel-thumbs {
        padding: 6px 8px 8px;
    }

    /* Caption styling on mobile */
    .instagram-single-page .instagram-caption-column .wp-block-buttons {
        justify-content: center;
    }

    .instagram-single-page .instagram-caption p {
        text-align: center;
    }
}

/* ============================================
   RESPONSIVE - SMALL MOBILE
   ============================================ */

@media (max-width: 480px) {
    .instagram-carousel-main {
        max-height: 60vh;
    }

    .instagram-carousel-thumb {
        width: 32px;
        height: 40px;
    }

    .instagram-carousel-dot {
        width: 5px;
        height: 5px;
    }
}

/* ============================================
   NO POSTS STATE
   ============================================ */

.instagram-no-posts {
    text-align: center;
    padding: 60px 20px;
    background: #f8f9fa;
    border-radius: 12px;
    color: #666;
}

/* ============================================
   ARCHIVE PAGE
   ============================================ */

.post-type-archive-instagram_post .site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}