/* ============================================================
   instafeed — grade de posts do Instagram
   Depende das variáveis de cor definidas em index.html (:root)
   ============================================================ */

/* --ig-cols-base vem do atributo data-colunas (estilo inline).
   --ig-cols é resolvido aqui para que as media queries abaixo
   consigam sobrescrever — estilo inline venceria a media query. */
.ig-feed{--ig-cols:var(--ig-cols-base,4);--ig-gap:14px}

.ig-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:0 0 26px;
}
.ig-perfil{display:flex;align-items:center;gap:14px;text-decoration:none}
.ig-avatar{
  width:56px;height:56px;border-radius:50%;object-fit:cover;
  padding:3px;background:#fff;
  box-shadow:0 0 0 3px var(--amarelo,#f5b312);
}
.ig-perfil b{display:block;font-size:17px;font-weight:900;color:var(--azul,#0b3f8f);letter-spacing:-.01em}
.ig-perfil span{display:block;font-size:14px;color:#5a7391}

.ig-grid{
  display:grid;
  grid-template-columns:repeat(var(--ig-cols),1fr);
  gap:var(--ig-gap);
}
@media(max-width:900px){.ig-feed{--ig-cols:3}}
@media(max-width:620px){.ig-feed{--ig-cols:2;--ig-gap:10px}}

.ig-item{
  position:relative;display:block;overflow:hidden;
  border-radius:14px;background:var(--papel-2,#f2f5fa);
  aspect-ratio:4/5;text-decoration:none;
  border:1px solid var(--linha,rgba(16,35,63,.12));
  transition:transform .18s ease,box-shadow .18s ease;
}
.ig-item:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(11,63,143,.16)}
.ig-item img{width:100%;height:100%;object-fit:cover;display:block}

/* legenda que sobe no hover */
.ig-cap{
  position:absolute;inset:auto 0 0 0;
  padding:38px 14px 12px;color:#fff;font-size:13px;line-height:1.35;
  background:linear-gradient(to top,rgba(8,40,79,.92),rgba(8,40,79,0));
  opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ig-item:hover .ig-cap,.ig-item:focus-visible .ig-cap{opacity:1;transform:none}
@media(hover:none){.ig-cap{opacity:1;transform:none}}

/* selo de tipo de mídia (vídeo / carrossel) */
.ig-tipo{
  position:absolute;top:9px;right:9px;
  width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;font-size:13px;
  background:rgba(8,40,79,.72);color:#fff;backdrop-filter:blur(4px);
}

.ig-rodape{text-align:center;margin-top:30px}
.ig-vazio{
  grid-column:1/-1;text-align:center;padding:40px 20px;
  color:#5a7391;border:1px dashed var(--linha,rgba(16,35,63,.12));border-radius:16px;
}

/* esqueleto de carregamento */
.ig-skel{
  aspect-ratio:4/5;border-radius:14px;
  background:linear-gradient(100deg,#eef2f8 30%,#f8fafd 50%,#eef2f8 70%);
  background-size:200% 100%;animation:ig-shine 1.2s linear infinite;
}
@keyframes ig-shine{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){
  .ig-skel{animation:none}
  .ig-item,.ig-cap{transition:none}
}