/* assets/css/comunidade.css */
.post-card { border-radius:12px; overflow:hidden; }
.post-img { height:180px; object-fit:cover; width:100%; }
.avatar-sm { width:40px; height:40px; object-fit:cover; }
.comments-area { background:#f8fafc; padding:0.6rem; border-radius:8px; }
.btn-react i { color:#e74c3c; }
/* modal + grid */
.modal-instagram {
  height: 85vh;
  border-radius: 10px;
  overflow: hidden;
}

.modal-instagram .row {
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
}

/* imagem */
.post-image-container {
  background: #613030;   /* sua cor */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.post-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;   /* mantém a imagem inteira */
}

/* comentários (scroll interno) */
.comments-area {
  flex: 1;
  min-height: 0;         /* CRUCIAL para overflow funcionar dentro de flex */
  overflow-y: auto;
  padding: 1rem;
  background: #fafbfc;
}

/* scrollbar mais discreto */
.comments-area::-webkit-scrollbar { width: 8px; }
.comments-area::-webkit-scrollbar-thumb { background:#e0e0e0; border-radius:8px; }

/* responsivo: empilha (imagem em cima, comentários abaixo), sem sumir a imagem */
@media (max-width: 768px) {
    .modal-instagram {
  overflow-y: scroll !important;
}
  .modal-instagram .row { flex-direction: column; }
  .post-image-container { height: 40vh; }   /* altura da imagem no mobile */
  .comments-area { height: calc(85vh - 40vh - 160px); } /* ajusta espaço para o campo de comentário e cabeçalho */
}