/* ===== Feed de Instagram SomaVet ===== */
.ig-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin-top:28px;
}
@media (max-width: 900px){ .ig-grid{ grid-template-columns:repeat(3, 1fr); gap:10px; } }
@media (max-width: 560px){ .ig-grid{ grid-template-columns:repeat(2, 1fr); gap:8px; } }

.ig-card{
  position:relative;
  display:block;
  aspect-ratio:1 / 1;
  border-radius:18px;
  overflow:hidden;
  background:#E8EFFC;
  box-shadow:0 6px 18px rgba(11,44,93,.10);
  transition:transform .25s ease, box-shadow .25s ease;
}
.ig-card img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.ig-card:hover, .ig-card:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 12px 26px rgba(11,44,93,.18);
}
.ig-card:hover img, .ig-card:focus-visible img{ transform:scale(1.06); }

.ig-badge{
  position:absolute; top:10px; right:10px;
  background:rgba(11,44,93,.78);
  color:#fff;
  font-size:12px; font-weight:800;
  line-height:1;
  padding:6px 8px;
  border-radius:999px;
}

.ig-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:4px;
  padding:14px;
  color:#fff;
  background:linear-gradient(to top, rgba(11,44,93,.88) 0%, rgba(11,44,93,.45) 45%, rgba(11,44,93,0) 75%);
  opacity:0;
  transition:opacity .25s ease;
}
.ig-card:hover .ig-overlay, .ig-card:focus-visible .ig-overlay{ opacity:1; }
.ig-overlay p{
  font-size:13px; line-height:1.4; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.ig-overlay time{ font-size:11px; font-weight:700; opacity:.85; }

/* En celulares no hay hover: mostramos solo la fecha, abajo */
@media (hover: none){
  .ig-overlay{ opacity:1; background:linear-gradient(to top, rgba(11,44,93,.75) 0%, rgba(11,44,93,0) 45%); padding:10px; }
  .ig-overlay p{ display:none; }
}

/* Carga (skeleton) */
.ig-skel{
  aspect-ratio:1 / 1;
  border-radius:18px;
  background:linear-gradient(90deg, #E8EFFC 25%, #F4F7FF 50%, #E8EFFC 75%);
  background-size:200% 100%;
  animation:igShimmer 1.4s linear infinite;
}
@keyframes igShimmer{ to{ background-position:-200% 0; } }

/* Mensaje cuando no se pueden cargar las publicaciones */
.ig-fallback{
  grid-column:1 / -1;
  text-align:center;
  padding:34px 18px;
  background:#fff;
  border:1.5px dashed #C7DCF7;
  border-radius:18px;
  color:#0B2C5D;
  font-weight:700;
}

.ig-actions{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin-top:30px;
}

@media (prefers-reduced-motion: reduce){
  .ig-card, .ig-card img, .ig-overlay{ transition:none; }
  .ig-skel{ animation:none; }
}