.instagram-section {
    width: 100%;
    height: auto;
    padding: 96px 0;
    background-color: #F5ECE0;
    /* Figma background layer 7341:347: 1.5px monotone noise,
       25% density, #000000 at 20%. Keep its original scale on all screens. */
    background-image: url("../images/Textures/instagram-background.png");
    background-repeat: repeat;
    background-size: 1440px 831px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 64px;
    overflow: hidden;
}

.instagram-title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    max-width: 1280px;
    padding: 0 24px;
}

.instagram-secondary-title {
    color: var(--brown-01, #2A2224);
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    letter-spacing: 1px;
}

.instagram-title {
    color: var(--brown-01, #2A2224);
    text-align: center;
    font-size: 48px;
    font-weight: 500;
    line-height: 100%;
}

/*-----------------------------------*\
  #INSTAGRAM CAROUSEL
\*-----------------------------------*/

/* Own Instagram carousel, fed by instagram.php/instagram-feed.php from the
   real Graph API - replaces the old Elfsight embed entirely, so it renders
   full-bleed edge-to-edge like the Figma design instead of being boxed
   into the site's usual 1280px content width. */

.instagram-carousel-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.instagram-images-carrussel {
    width: 100%;
    overflow: hidden;
}

.instagram-images-track {
    display: flex;
    gap: 4px;
    transform: translate3d(0, 0, 0);
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.instagram-slide {
    position: relative;
    display: block;
    flex: 0 0 25%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.instagram-slide-image {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform 400ms ease;
}

.instagram-slide:hover .instagram-slide-image,
.instagram-slide:focus-visible .instagram-slide-image {
    transform: scale(1.04);
}

.instagram-slide:focus-visible {
    outline: 2px solid var(--primary-brown, #2A2224);
    outline-offset: -2px;
}

.instagram-slide-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(42, 34, 36, 0.18);
    pointer-events: none;
}

.instagram-carrussel-buttons-container {
    display: flex;
    align-items: center;
    gap: 24px;
}

.instagram-carrussel-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(42, 34, 36, 0.24);
    background-color: transparent;
    transition: background-color 180ms ease, border-color 180ms ease;
}

.instagram-carrussel-button:hover,
.instagram-carrussel-button:focus-visible {
    background-color: rgba(42, 34, 36, 0.08);
    border-color: var(--primary-brown, #2A2224);
}

.instagram-carrussel-button:focus-visible {
    outline: 1px solid var(--primary-brown, #2A2224);
    outline-offset: 2px;
}

.instagram-carrussel-btn-icon {
    width: 18px;
    height: 18px;
    max-width: none;
    filter: var(--filter-primary-brown);
}

.instagram-carrussel-btn-icon.previous {
    transform: rotate(180deg);
}

.instagram-unavailable {
    max-width: 640px;
    padding: 0 24px;
    text-align: center;
    color: var(--brown-01, #2A2224);
    font-size: 16px;
    font-weight: 300;
    line-height: 150%;
}

@media (prefers-reduced-motion: reduce) {
    .instagram-images-track {
        transition: none;
    }

    .instagram-slide-image {
        transition: none;
    }
}

@media(max-width: 1080px) {
    .instagram-title {
        font-size: 40px;
    }

    .instagram-secondary-title {
        font-size: 18px;
    }

    .instagram-slide {
        flex-basis: 33.333%;
    }
}

@media(max-width: 700px) {
    .instagram-section {
        padding: 72px 0 64px;
        gap: 40px;
    }

    .instagram-title {
        font-size: 32px;
        margin: 0 32px;
    }

    .instagram-secondary-title {
        font-size: 16px;
    }

    .instagram-carousel-wrapper {
        gap: 24px;
    }

    /* One post fills most of the width with a deliberate sliver of the
       next post peeking in, matching the mobile Figma export - and, since
       we now fully own this markup, it can actually scroll/page here
       (the old Elfsight embed's mobile carousel behavior wasn't something
       this codebase could touch, per the earlier fix notes). */
    .instagram-slide {
        flex-basis: 84%;
    }

    .instagram-images-track {
        gap: 12px;
    }

    .instagram-carrussel-buttons-container {
        gap: 32px;
    }
}

@media (width < 700px) {
    .instagram-images-carrussel {
        overflow-x: auto;
        scrollbar-width: none;
        cursor: grab;
    }

    .instagram-images-carrussel::-webkit-scrollbar {
        display: none;
    }

    .instagram-images-carrussel.is-dragging,
    .instagram-images-carrussel.is-dragging .instagram-slide {
        cursor: grabbing;
    }

    .instagram-images-track {
        transform: none;
        transition: none;
        will-change: auto;
        user-select: none;
        -webkit-user-select: none;
    }

    .instagram-slide {
        cursor: grab;
    }

    .instagram-carrussel-buttons-container {
        display: none;
    }
}