/**
 * PIM Instagram Feed – Styles
 * Scoped via .pim-instagram wrapper. All design tokens via CSS custom properties.
 *
 * Responsive nav/button placement is controlled via data attributes
 * (data-nav-d/m/s, data-btn-d/m/s) set per-breakpoint in PHP. Both
 * placement variants are always rendered in the markup; these rules
 * just show/hide the right one for the current viewport width.
 */

/* ── Wrapper ──────────────────────────────────────────────────── */
.pim-instagram {
    box-sizing: border-box;
    width: 100%;
}

.pim-instagram *,
.pim-instagram *::before,
.pim-instagram *::after {
    box-sizing: border-box;
}

/* ── Header Row (title + optional "above" button) ───────────────
 * Default (no "above" button on this breakpoint): title alone, full width.
 * When the button placement for the active breakpoint is "above", the
 * title takes 3/5 width and the button takes 2/5 width, side by side,
 * with the button right-aligned. Toggled per-breakpoint below.
 * ──────────────────────────────────────────────────────────────── */
.pim-instagram__header-row {
    display: flex;
    align-items: center;
    margin-bottom: var(--pimig-title-margin-bottom, 30px);
    gap: 0;
}

.pim-instagram__title-wrap {
    flex: 1 1 100%;
    text-align: var(--pimig-title-align, center) !important;
    margin-bottom: 0;
}

.pim-instagram__title {
    font-family: var(--pimig-title-font-family, inherit) !important;
    font-size: var(--pimig-title-font-size, inherit) !important;
    line-height: var(--pimig-title-line-height, inherit) !important;
    letter-spacing: var(--pimig-title-letter-spacing, normal) !important;
    text-transform: var(--pimig-title-text-transform, none) !important;
    color: var(--pimig-title-color, inherit) !important;
    margin: 0 !important;
}

.pim-instagram__btn-wrap {
    width: 100%;
}

/* "Above" button: hidden by default, shown only on breakpoints where
 * data-btn-* = "above" (see breakpoint rules below). Right-aligned. */
.pim-instagram__btn-wrap--above {
    display: none;
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
    width: auto;
}

/* "Below" button: shown by default (placement = "below" is the default
 * for every breakpoint), hidden when the active breakpoint is "above". */
.pim-instagram__btn-wrap--below {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

/* "Above" nav: hidden by default, shown only on breakpoints where
 * data-nav-* = "above" (see breakpoint rules below). Sits beside the
 * title the same way the "above" button does; right-aligned when it's
 * the only "above" element in the row. */
.pim-instagram__nav-wrap--above {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    margin-left: auto;
    width: auto;
}

/* Circular styling for the nav buttons when placed beside the title —
 * matches the reference mockup (outlined prev / filled next), scaled
 * off the configured arrow size so it stays proportional. */
.pim-instagram__nav-wrap--above .pim-instagram__nav {
    width: var(--pimig-nav-arrow-size, 24px);
    height: var(--pimig-nav-arrow-size, 24px);
    padding: 0;
}

.pim-instagram__nav-wrap--above .pim-instagram__nav:disabled {
    opacity: 0.3;
}

/* ── Button placement: "above" — title 3/5, button 2/5, side by side ── */
.pim-instagram[data-btn-d="above"] .pim-instagram__header-row { flex-wrap: nowrap; }
.pim-instagram[data-btn-d="above"] .pim-instagram__title-wrap { flex: 0 0 60%; max-width: 60%; }
.pim-instagram[data-btn-d="above"] .pim-instagram__btn-wrap--above { flex: 0 0 40%; max-width: 40%; display: flex; }
.pim-instagram[data-btn-d="above"] .pim-instagram__btn-wrap--below { display: none; }

/* ── Nav placement: "above" — title 3/5, nav 2/5, side by side ───────── */
.pim-instagram[data-nav-d="above"] .pim-instagram__header-row { flex-wrap: nowrap; }
.pim-instagram[data-nav-d="above"] .pim-instagram__title-wrap { flex: 0 0 60%; max-width: 60%; }
.pim-instagram[data-nav-d="above"] .pim-instagram__nav-wrap--above { flex: 0 0 40%; max-width: 40%; display: flex; }

/* Button AND nav both "above" on the same breakpoint: split the row
 * three ways instead — title 2/5, button 3/10, nav 3/10. This selector
 * carries higher specificity (two attribute selectors) than the two
 * single-element rules above, so it wins automatically whenever both apply. */
.pim-instagram[data-btn-d="above"][data-nav-d="above"] .pim-instagram__title-wrap { flex: 0 0 40%; max-width: 40%; }
.pim-instagram[data-btn-d="above"][data-nav-d="above"] .pim-instagram__btn-wrap--above { flex: 0 0 30%; max-width: 30%; margin-left: 0; }
.pim-instagram[data-btn-d="above"][data-nav-d="above"] .pim-instagram__nav-wrap--above { flex: 0 0 30%; max-width: 30%; margin-left: 0; }

@media (max-width: 1024px) {
    .pim-instagram[data-btn-m="above"] .pim-instagram__header-row { flex-wrap: nowrap; }
    .pim-instagram[data-btn-m="above"] .pim-instagram__title-wrap { flex: 0 0 60%; max-width: 60%; }
    .pim-instagram[data-btn-m="above"] .pim-instagram__btn-wrap--above { flex: 0 0 40%; max-width: 40%; display: flex; }
    .pim-instagram[data-btn-m="above"] .pim-instagram__btn-wrap--below { display: none; }

    .pim-instagram[data-btn-m="below"] .pim-instagram__title-wrap { flex: 1 1 100%; max-width: 100%; }
    .pim-instagram[data-btn-m="below"] .pim-instagram__btn-wrap--above { display: none; }
    .pim-instagram[data-btn-m="below"] .pim-instagram__btn-wrap--below { display: flex; }
    .pim-instagram__title-wrap {text-align: var(--pimig-title-align-tab, center) !important;  }

    .pim-instagram[data-nav-m="above"] .pim-instagram__header-row { flex-wrap: nowrap; }
    .pim-instagram[data-nav-m="above"] .pim-instagram__title-wrap { flex: 0 0 60%; max-width: 60%; }
    .pim-instagram[data-nav-m="above"] .pim-instagram__nav-wrap--above { flex: 0 0 40%; max-width: 40%; display: flex; }

    .pim-instagram[data-nav-m="default"] .pim-instagram__title-wrap,
    .pim-instagram[data-nav-m="below"] .pim-instagram__title-wrap { flex: 1 1 100%; max-width: 100%; }
    .pim-instagram[data-nav-m="default"] .pim-instagram__nav-wrap--above,
    .pim-instagram[data-nav-m="below"] .pim-instagram__nav-wrap--above { display: none; }

    .pim-instagram[data-btn-m="above"][data-nav-m="above"] .pim-instagram__title-wrap { flex: 0 0 40%; max-width: 40%; }
    .pim-instagram[data-btn-m="above"][data-nav-m="above"] .pim-instagram__btn-wrap--above { flex: 0 0 30%; max-width: 30%; margin-left: 0; }
    .pim-instagram[data-btn-m="above"][data-nav-m="above"] .pim-instagram__nav-wrap--above { flex: 0 0 30%; max-width: 30%; margin-left: 0; }
}

@media (max-width: 640px) {
    .pim-instagram[data-btn-s="above"] .pim-instagram__header-row { flex-wrap: nowrap; }
    .pim-instagram[data-btn-s="above"] .pim-instagram__title-wrap { flex: 0 0 60%; max-width: 60%; }
    .pim-instagram[data-btn-s="above"] .pim-instagram__btn-wrap--above { flex: 0 0 40%; max-width: 40%; display: flex; }
    .pim-instagram[data-btn-s="above"] .pim-instagram__btn-wrap--below { display: none; }

    .pim-instagram[data-btn-s="below"] .pim-instagram__title-wrap { flex: 1 1 100%; max-width: 100%; }
    .pim-instagram[data-btn-s="below"] .pim-instagram__btn-wrap--above { display: none; }
    .pim-instagram[data-btn-s="below"] .pim-instagram__btn-wrap--below { display: flex; }
    .pim-instagram__title-wrap {text-align: var(--pimig-title-align-mob, center) !important;  }

    .pim-instagram[data-nav-s="above"] .pim-instagram__header-row { flex-wrap: nowrap; }
    .pim-instagram[data-nav-s="above"] .pim-instagram__title-wrap { flex: 0 0 60%; max-width: 60%; }
    .pim-instagram[data-nav-s="above"] .pim-instagram__nav-wrap--above { flex: 0 0 40%; max-width: 40%; display: flex; }

    .pim-instagram[data-nav-s="default"] .pim-instagram__title-wrap,
    .pim-instagram[data-nav-s="below"] .pim-instagram__title-wrap { flex: 1 1 100%; max-width: 100%; }
    .pim-instagram[data-nav-s="default"] .pim-instagram__nav-wrap--above,
    .pim-instagram[data-nav-s="below"] .pim-instagram__nav-wrap--above { display: none; }

    .pim-instagram[data-btn-s="above"][data-nav-s="above"] .pim-instagram__title-wrap { flex: 0 0 40%; max-width: 40%; }
    .pim-instagram[data-btn-s="above"][data-nav-s="above"] .pim-instagram__btn-wrap--above { flex: 0 0 30%; max-width: 30%; margin-left: 0; }
    .pim-instagram[data-btn-s="above"][data-nav-s="above"] .pim-instagram__nav-wrap--above { flex: 0 0 30%; max-width: 30%; margin-left: 0; }
}

/* ── Slider Wrap ──────────────────────────────────────────────── */
.pim-instagram__slider-wrap {
    position: relative;
    margin-top: var(--pimig-posts-margin-top, 0px);
    margin-right: var(--pimig-posts-margin-right, 0px);
    margin-bottom: var(--pimig-posts-margin-bottom, 30px);
    margin-left: var(--pimig-posts-margin-left, 0px);
}

/* "Default" (flanking) nav buttons are absolutely positioned outside
 * the post track rather than taking up flex space beside it. This lets
 * the track itself span the full width of the element — flush with the
 * title and button container edges above — while the arrows float in
 * the side margin/gutter. "Nav Side Gap" controls how far outside the
 * track edge each arrow sits. */
.pim-instagram__slider-wrap > .pim-instagram__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: calc(16px + var(--pimig-nav-arrow-size, 24px));
}

.pim-instagram__slider-wrap > .pim-instagram__nav--prev {
    right: 100%;
    margin-right: var(--pimig-nav-side-gap, 20px);
}

.pim-instagram__slider-wrap > .pim-instagram__nav--next {
    left: 100%;
    margin-left: var(--pimig-nav-side-gap, 20px);
}

.pim-instagram__track-wrap {
    overflow: hidden;
    width: 100%;
}

.pim-instagram__track {
    display: grid;
    grid-template-columns: repeat(var(--pimig-cols, 4), 1fr);
    gap: var(--pimig-gap, 20px);
    transition: transform 0.35s ease;
}

/* ── Post Card ────────────────────────────────────────────────── */
.pim-instagram__post {
    background: transparent;
    overflow: hidden;
    flex-shrink: 0;
}

.pim-instagram__post-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    border-bottom: none;
    border-radius: var(--pimig-post-radius, 6px) var(--pimig-post-radius, 6px) 0 0;
    background: var(--pimig-post-header-bg, #f2f2f2);
}

/* Avatar is a background painted from the wrapper's --pimig-avatar
 * variable, so the profile image downloads once for every post. */
.pim-instagram__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: block;
    background-color: #d8d8d8;
    background-image: var(--pimig-avatar, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Instagram logo sprite: defined once per element, referenced via <use>.
 * Visually hidden (not display:none, which breaks the gradient). */
.pim-instagram__sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.pim-instagram__avatar--placeholder {
    background-image: none;
}

.pim-instagram__post-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.pim-instagram__username {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #262626;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pim-instagram__date {
    font-size: 11px;
    color: #8e8e8e;
    line-height: 1.2;
}

.pim-instagram__ig-icon {
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Post Image ───────────────────────────────────────────────── */
.pim-instagram__post-link {
    display: block;
    overflow: hidden;
}

.pim-instagram__img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 0;
    border-top: none;
    border-radius: 0 0 var(--pimig-post-radius, 6px) var(--pimig-post-radius, 6px);
    transition: transform 0.3s ease;
}

.pim-instagram__post-link:hover .pim-instagram__img {
    transform: scale(1.03);
}

/* ── Nav Buttons ──────────────────────────────────────────────── */
.pim-instagram__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #333;
    transition: opacity 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.pim-instagram__nav:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Arrow sizing — applies to both the default SVG arrow and any
 * custom uploaded arrow image, so the "Nav Arrow Size" setting
 * controls both consistently. */
.pim-instagram__nav-svg,
.pim-instagram__nav-img {
    width: var(--pimig-nav-arrow-size, 24px);
    height: var(--pimig-nav-arrow-size, 24px);
}

/* Image nav */
.pim-instagram__nav-img {
    object-fit: contain;
}

.pim-instagram__nav-img--hover {
    display: none;
}

.pim-instagram__nav:hover .pim-instagram__nav-img--default {
    display: none;
}

.pim-instagram__nav:hover .pim-instagram__nav-img--hover {
    display: block;
}

/* Custom uploaded arrow images are authored pointing left (the "prev"
 * direction). Flip them horizontally for the "next" button so the
 * same uploaded image can serve both directions without the user
 * needing to provide two separate files. The default SVG fallback
 * already uses direction-specific polyline points and needs no flip. */
.pim-instagram__nav--next .pim-instagram__nav-img {
    transform: scaleX(-1);
}

/* Nav "below" placement — shared styling. Visibility (display) is
 * controlled entirely by the responsive rules further down, which
 * default every breakpoint to hidden and selectively show it. */
.pim-instagram__nav-below {
    justify-content: center;
    gap: 24px;
    margin-top: 0;
    margin-bottom: 0;
}

/* ── Responsive nav placement ─────────────────────────────────────
 * "default": flanking arrows shown, "below" arrows hidden, normal
 *            slider-wrap bottom margin applies.
 * "below":   flanking arrows hidden, centered arrows shown below,
 *            slider-wrap bottom margin is trimmed (the below-nav row
 *            carries the margin instead).
 * "above":   flanking and below-nav arrows both hidden — the arrows
 *            live in the header row instead (see .pim-instagram__nav-wrap--above
 *            above); normal slider-wrap bottom margin applies since
 *            there's no below-nav row to account for.
 * Desktop ("d") has no max-width query — it's the unprefixed/default
 * state, overridden by the medium/small queries below.
 * ──────────────────────────────────────────────────────────────── */
.pim-instagram__nav-below { display: none; }

.pim-instagram[data-nav-d="below"] .pim-instagram__slider-wrap > .pim-instagram__nav { display: none; }
.pim-instagram[data-nav-d="below"] .pim-instagram__slider-wrap { margin-bottom: 16px; }
.pim-instagram[data-nav-d="below"] .pim-instagram__nav-below { display: flex; }

.pim-instagram[data-nav-d="above"] .pim-instagram__slider-wrap > .pim-instagram__nav { display: none; }

@media (max-width: 1024px) {
    .pim-instagram[data-nav-m="default"] .pim-instagram__slider-wrap > .pim-instagram__nav { display: inline-flex; }
    .pim-instagram[data-nav-m="default"] .pim-instagram__nav-below { display: none; }

    .pim-instagram[data-nav-m="below"] .pim-instagram__slider-wrap > .pim-instagram__nav { display: none; }
    .pim-instagram[data-nav-m="below"] .pim-instagram__nav-below { display: flex; }

    .pim-instagram[data-nav-m="above"] .pim-instagram__slider-wrap > .pim-instagram__nav { display: none; }
    .pim-instagram[data-nav-m="above"] .pim-instagram__nav-below { display: none; }

    .pim-instagram__slider-wrap {
        position: relative;
        margin-top: var(--pimig-posts-margin-top-tab, 0px);
        margin-right: var(--pimig-posts-margin-right-tab, 0px);
        margin-bottom: var(--pimig-posts-margin-bottom-tab, 30px);
        margin-left: var(--pimig-posts-margin-left-tab, 0px);
    }
}

@media (max-width: 640px) {
    .pim-instagram[data-nav-s="default"] .pim-instagram__slider-wrap > .pim-instagram__nav { display: inline-flex; }
    .pim-instagram[data-nav-s="default"] .pim-instagram__nav-below { display: none; }

    .pim-instagram[data-nav-s="below"] .pim-instagram__slider-wrap > .pim-instagram__nav { display: none; }
    .pim-instagram[data-nav-s="below"] .pim-instagram__nav-below { display: flex; }

    .pim-instagram[data-nav-s="above"] .pim-instagram__slider-wrap > .pim-instagram__nav { display: none; }
    .pim-instagram[data-nav-s="above"] .pim-instagram__nav-below { display: none; }

    .pim-instagram__slider-wrap {
        position: relative;
        margin-top: var(--pimig-posts-margin-top-mob, 0px);
        margin-right: var(--pimig-posts-margin-right-mob, 0px);
        margin-bottom: var(--pimig-posts-margin-bottom-mob, 30px);
        margin-left: var(--pimig-posts-margin-left-mob, 0px);
    }

    .pim-instagram__title {
        font-size: var(--pimig-title-font-size-mob) !important;
        line-height: var(--pimig-title-line-height-mob) !important;
    }
}

/* ── Button ────────────────────────────────────────────────────── */
/* Responsive button visibility — hide both button variants when the
 * "Show Instagram Button" setting is "No" for the active breakpoint. */
.pim-instagram[data-btn-show-d="no"] .pim-instagram__btn-wrap--above,
.pim-instagram[data-btn-show-d="no"] .pim-instagram__btn-wrap--below { display: none !important; }

@media (max-width: 1024px) {
    .pim-instagram[data-btn-show-m="no"] .pim-instagram__btn-wrap--above,
    .pim-instagram[data-btn-show-m="no"] .pim-instagram__btn-wrap--below { display: none !important; }
}

@media (max-width: 640px) {
    .pim-instagram[data-btn-show-s="no"] .pim-instagram__btn-wrap--above,
    .pim-instagram[data-btn-show-s="no"] .pim-instagram__btn-wrap--below { display: none !important; }
}

.pim-instagram__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: transparent;
    border: 2px solid #2b8080;
    color: #2b8080;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.pim-instagram__btn:hover {
    background: #2b8080;
    color: #fff;
}

/* ── Slider: hidden overflow posts (controlled by JS) ─────────── */
.pim-instagram__post.pim-instagram--hidden {
    display: none;
}

/* ── Mobile: centered peek-view ───────────────────────────────────
 * On small screens, always show exactly 1 post centered with slivers
 * of the prev/next posts visible on each side ("peek-width" %).
 * The track is a flex row; JS translates it to keep current post
 * centered. The slider-wrap clips the overflow so only the peek
 * slivers bleed in from the edges.
 * ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .pim-instagram__slider-wrap {
        overflow: hidden;
    }

    .pim-instagram__track-wrap {
        overflow: visible;
    }

    .pim-instagram__track {
        display: flex;
        gap: var(--pimig-gap, 12px);
        transition: transform 0.35s ease;
        will-change: transform;
    }

    .pim-instagram__track .pim-instagram__post {
        /* Each card fills the full track-wrap width minus the two peek
         * slivers. peek-width % is the fraction each side peeks. */
        flex: 0 0 calc(100% - 2 * var(--pimig-peek-width, 15%));
        width: calc(100% - 2 * var(--pimig-peek-width, 15%));
    }

    /* JS controls visibility via transform, not display:none on mobile */
    .pim-instagram__track .pim-instagram__post.pim-instagram--hidden {
        display: block;
    }
}