/* Instagram Feed — kabdalis2 design system.
   view.js adds .igw.b-card to wrapper at runtime.
   Alias .igw (NOT .ig — kolliderar med theme gallery). */

.kabdalis-instagram-feed.igw{
    padding:var(--card-pad);
    display:flex; flex-direction:column; gap:14px;
}

.igw .instagram-feed-container,
.igw .instagram-feed-container-wrapper{
    display:flex; flex-direction:column; gap:14px;
}

.igw .instagram-author-info{
    display:flex; align-items:center; gap:12px;
    padding-bottom:10px; border-bottom:1px solid var(--line);
}
.igw .instagram-author-info h3,
.igw .instagram-author-info strong{
    font-family:var(--font-display); font-weight:var(--display-w);
    letter-spacing:var(--display-ls);
    font-size:1.15rem; line-height:1.15; margin:0; color:var(--ink);
}
.igw .instagram-page-icon{
    width:42px; height:42px; border-radius:50%;
    display:grid; place-items:center; color:#fff;
    background:linear-gradient(135deg, #feda75, #d62976 52%, #4f5bd5);
}
.igw .instagram-follow-button{
    margin-left:auto;
    display:inline-flex; align-items:center; gap:6px;
    padding:.5em 1em; border-radius:999px;
    background:var(--accent); color:var(--on-accent);
    font-weight:600; font-size:.86rem; text-decoration:none;
    border:none; cursor:pointer;
}

.igw .instagram-posts-list{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:8px;
}
@media (min-width:760px){
    .igw .instagram-posts-list{ grid-template-columns:repeat(6, minmax(0,1fr)); }
}

.igw .instagram-media-container{
    position:relative;
    aspect-ratio:1;
    overflow:hidden;
    border-radius:var(--radius-sm);
    background:var(--bg2);
    cursor:pointer;
}
.igw .instagram-media-container img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.igw .instagram-media-container:hover img{ transform:scale(1.06); }

.igw .instagram-media-placeholder{
    position:absolute; inset:0;
    display:grid; place-items:center;
    color:var(--muted); font-family:var(--font-mono); font-size:.78rem;
}

/* Play glyph centred over a video tile's thumbnail. */
.igw .instagram-video-overlay{
    position:absolute; inset:0;
    display:grid; place-items:center;
    color:var(--surface, #fff); font-size:2rem;
    text-shadow:0 2px 8px color-mix(in srgb, var(--ink, #25211b) 55%, transparent);
    pointer-events:none;
}

/* Like/comment counts, revealed as a gradient footer on hover of the tile. */
.igw .instagram-media-meta{
    position:absolute; inset-inline:0; bottom:0;
    display:flex; gap:12px; align-items:center;
    padding:18px 8px 6px;
    background:linear-gradient(to top, color-mix(in srgb, var(--ink, #25211b) 70%, transparent), transparent);
    opacity:0; transition:opacity .2s ease;
}
.igw .instagram-media-container:hover .instagram-media-meta,
.igw .instagram-media-container:focus-visible .instagram-media-meta{ opacity:1; }

.igw .instagram-likes,
.igw .instagram-comments{
    display:inline-flex; align-items:center; gap:4px;
    font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft);
}
.igw .instagram-media-meta .instagram-likes,
.igw .instagram-media-meta .instagram-comments{ color:var(--surface, #fff); }

/* Loading skeleton tile — square, matches the grid cell. */
.igw .instagram-skel{ display:block; aspect-ratio:1; border-radius:var(--radius-sm); }

/* State cards (empty / error / loading text) span the whole grid instead of
   being trapped in the first cell. */
.igw .instagram-posts-list > .kab-empty,
.igw .instagram-posts-list > .loading-message{ grid-column:1 / -1; }