/* plugins/instagram/public/assets/css/home-section.css */
/* Homepage Instagram grid (4 / 3 / 2 columns), caption on hover, follow button. Theme tokens only. */

.ig-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ig-item { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--bg-3); }
.ig-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ig-item:hover img { transform: scale(1.04); }
.ig-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ig-badge { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.45); }
.ig-badge svg { width: 15px; height: 15px; fill: #fff; }
.ig-cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: 28px 14px 12px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #fff;
    font-size: 0.82rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.ig-item:hover .ig-cap, .ig-item:focus-visible .ig-cap { opacity: 1; transform: none; }
.ig-follow { margin-top: 32px; text-align: center; }

@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 600px) {
    .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ig-item { border-radius: 12px; }
    .ig-cap { display: none; }
}