/* =====================================================
   Pretpot Instagram Feed Widget — instagram-feed.css
   ===================================================== */

/* ---------- Shared wrapper ---------- */
.pretpot-ig-wrapper {
    width: 100%;
    box-sizing: border-box;
}

/* =====================================================
   GRID
   ===================================================== */
.pretpot-ig-grid {
    display: grid;
    /* columns set via Elementor responsive selector */
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
}

/* =====================================================
   CAROUSEL
   ===================================================== */

/*
 * .pretpot-ig-belt
 *   The visible viewport. overflow:hidden clips the
 *   tracks outside the belt. The CSS mask creates the
 *   transparent fade at both edges.
 */
.pretpot-ig-belt {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.pretpot-ig-belt.pretpot-ig-fade-edges {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--ig-fade-width, 80px),
        #000 calc(100% - var(--ig-fade-width, 80px)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--ig-fade-width, 80px),
        #000 calc(100% - var(--ig-fade-width, 80px)),
        transparent 100%
    );
}

/*
 * .pretpot-ig-runway
 *   Flex container holding Track A + Track B side by side.
 *   Combined width = 2 × track width.
 *   CSS animation moves it by -50% (one track width) then snaps back.
 *   will-change: transform tells the browser to GPU-composite this layer.
 */
.pretpot-ig-runway {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    /* animation is set inline per widget instance */
}

/*
 * .pretpot-ig-track
 *   One copy of all cards side by side.
 *   Each track takes up exactly half the runway.
 *   min-width:max-content prevents the track from
 *   wrapping or being squashed by the flex parent.
 */
.pretpot-ig-track {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    min-width: max-content;
    /* gap set via Elementor selector */
    /* padding-right matches the gap so the seam between Track A and Track B
       is identical to the gap between any two cards within a track */
    padding-right: var(--ig-track-gap, 16px);
}

/* =====================================================
   CARD  (shared between grid and carousel)
   ===================================================== */
.pretpot-ig-card {
    position: relative;
    overflow: hidden;
    display: block;
    background: #111;
    flex-shrink: 0;
    box-sizing: border-box;
    /* width / height / border-radius set via Elementor selectors */
}

/* Grid cards fill the column, carousel cards use explicit width */
.pretpot-ig-grid .pretpot-ig-card {
    width: 100%;
}

.pretpot-ig-card:hover .pretpot-ig-media {
    transform: scale(1.05);
}

/* ---------- Media ---------- */
.pretpot-ig-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* ---------- Gradient overlay ---------- */
.pretpot-ig-gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        var(--ig-grad-start, rgba(0, 0, 0, 0))   0%,
        var(--ig-grad-end,   rgba(0, 0, 0, 0.65)) 100%
    );
}

/* ---------- Caption ---------- */
.pretpot-ig-caption {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    /* padding set via Elementor selector */
}

.pretpot-ig-caption--bottom {
    bottom: 0;
}

.pretpot-ig-caption--top {
    top: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0)   100%
    );
}

/* ---------- Full-card link overlay ---------- */
.pretpot-ig-overlay-link {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
}