/**
 * Instagram Embed Frame Styling
 *
 * Adds a picture frame and mat effect to Instagram embed
 * Similar to the WooCommerce product gallery frame styling
 *
 * @package Pursue_Life_Outdoors
 */

/* Instagram Embed Frame Effect */
.instagram-frame {
    position: relative;
    background-color: #000; /* Frame color */
    padding: 3px; /* Frame thickness */
    border-radius: 0; /* Ensures square corners for frame */
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    z-index: 5;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 auto;
}

/* Mat styling for the Instagram container */
.instagram-frame .instagram-media {
    border: 15px solid white !important; /* Mat border */
    box-sizing: border-box !important;
    border-radius: 0 !important; /* Ensures square corners for mat */
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    background: white !important;
    min-height: 420px;
}

/* Ensure proper container alignment */
.instagram-embed-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 545px; /* Slightly larger to accommodate frame */
    padding: 0;
}

/* Extra embellishments for a nicer frame appearance */
.instagram-frame:before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    z-index: 1;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
    pointer-events: none;
}

/* Fix any overflow issues */
.instagram-frame * {
    max-width: 100% !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .instagram-frame .instagram-media {
        border-width: 10px !important;
    }
    
    .instagram-embed-container {
        max-width: 95%;
    }
}

@media (max-width: 576px) {
    .instagram-frame .instagram-media {
        border-width: 8px !important;
    }
}