/* ==========================================
   MOBILE POSTS
========================================== */

@media (max-width:768px) {
  
  .post-card {
    
    width: calc(100% - 24px);
    
    margin: 16px auto;
    
    border-radius: 20px;
    
    overflow: visible;
    
  }
  
}
/* ==========================
   BANNER
========================== */

.post-banner {
  
  width: 100%;
  
  height: 95px;
  
  position: relative;
  
  overflow: visible;
  
  z-index: 5;
  
}

@media (max-width:768px) {
  
  .post-banner {
    
    border-radius: 20px 20px 0 0;
    
  }
  
}
@media (max-width:768px) {
  
  .post-menu {
    
    z-index: 9999;
    
  }
.btn-post-menu {
  
  position: absolute;
  
  top: 12px;
  right: 12px;
  
  width: 32px;
  height: 32px;
  
  border-radius: 50%;
  
  border: none;
  
  background: #111827;
  
  color: #f8fafc;
  
  display: flex;
  
  align-items: center;
  justify-content: center;
  
  font-size: 16px;
  
  cursor: pointer;
  
  z-index: 10000;
  
  transition: .25s;
  
}


.btn-post-menu:hover {
  
  background: #2563eb;
  
  transform: scale(1.08);
  
}


.btn-post-menu i {
  
  line-height: 1;
  
}
  
}


.post-banner img {
  
  width: 100%;
  
  height: 100%;
  
  object-fit: cover;
  
}
  /* ==========================
       HEADER
    ========================== */
  
.post-header {
  
    position:relative;
    
    margin-top:-32px;
    
    z-index:10;
  
  padding: 0 18px 18px;
  
  gap: 14px;
  display:flex;
  align-items: flex-end;
  
}
  
  .avatar-wrapper {
    
    width: 72px;
    
    height: 72px;
    
    flex-shrink: 0;
  z-index: 2;
  }
  
.post-avatar {
  
  width: 72px;
  height: 72px;
  
  border-radius: 50%;
  
  object-fit: cover;
  
  border: 3px solid #2563eb;
  
  background: #020617;
  
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .4);
  
}
  
  .post-user {
    
    flex: 1;
    
    min-width: 0;
    z-index: 2;
    
  }
  
  .post-name {
    
    font-size: 18px;
    
    font-weight: 700;
    z-index: 2;
  }
  
  .post-meta {
    
    margin-top: 4px;
    
    font-size: 12px;
    
    gap: 8px;
    
    flex-wrap: wrap;
    z-index: 3;
  }
  
  /* ==========================
       CONTEÚDO
    ========================== */
  
  .post-content {
    
    padding: 18px;
    
  }
  
  .post-content p {
    
    font-size: 15px;
    
    line-height: 1.7;
    
    word-break: break-word;
    
  }
  
  /* ==========================
       ESTATÍSTICAS
    ========================== */
  
  .post-stats {
    
    padding: 14px 18px;
    
    font-size: 13px;
    
    flex-wrap: wrap;
    
    gap: 12px;
    
  }
/* ==========================
   AÇÕES
========================== */

.post-actions {
  
  display: grid;
  
  grid-template-columns: repeat(3, 1fr);
  
  gap: 8px;
  
  padding: 12px;
  
}


.post-actions button {
  
  display: flex;
  
  justify-content: center;
  
  align-items: center;
  
  gap: 5px;
  
  height: 40px;
  
  border-radius: 12px;
  
  font-size: 13px;
  
  padding: 0;
  
  min-width: 0;
  
}


.post-actions span {
  
  display: none;
  
}

.post-banner::before,
.post-banner::after {
  
  pointer-events: none;
  
}

.post-banner {
  position: relative;
  z-index: 1;
}


.post-menu {
  
  position: absolute;
  
  top: auto;
  
  right: 40px;
  
  bottom: 0;
  
  transform: translateY(-45px);
  
  z-index: 9999 !important;
  
}


.post-menu
.excluir-post {
  
  position: relative;
  
  z-index: 99999 !important;
  
  pointer-events: auto;
  
}
/* ==========================================
   MENU DE AÇÕES POST
========================================== */

.post-menu {
  
  position: absolute;
  
  bottom: 45px;
  right: 45px;
  
  width: 160px;
  
  padding: 8px;
  
  background: rgba(15, 23, 42, .95);
  
  backdrop-filter: blur(12px);
  
  border: 1px solid rgba(255, 255, 255, .08);
  
  border-radius: 14px;
  
  box-shadow:
    0 15px 35px rgba(0, 0, 0, .45);
  
  z-index: 9999 !important;
  
}


/* BOTÕES DO MENU */

.post-menu button {
  
  width: 100%;
  
  padding: 12px 14px;
  
  border: none;
  
  border-radius: 10px;
  
  background: transparent;
  
  color: #f8fafc;
  
  font-size: 14px;
  
  font-weight: 600;
  
  text-align: left;
  
  cursor: pointer;
  
  transition: .2s;
  
}


/* HOVER */

.post-menu button:hover {
  
  background: rgba(255, 255, 255, .08);
  
}


/* EDITAR */

.editar-post {
  
  color: #60a5fa !important;
  
}


/* EXCLUIR */

.excluir-post {
  
  color: #f87171 !important;
  
}

/* ==========================================
   FADE DO BANNER
========================================== */
.post-banner::after {

    content:"";

    position:absolute;

    left:0;
    right:0;

    bottom:0;

    height:50px;

    background:
    linear-gradient(
        to bottom,
        transparent 0%,
        #020617 100%
    );

    pointer-events:none;

    z-index:2;

}
/* ==========================
   BANNER COM FADE
========================== */

.post-banner {
  
  width: 100%;
  height: 95px;
  position: relative;
  overflow: visible;
  z-index: 5;
  
}
/* MENU SEM SER COBERTO PELO FADE */

.btn-post-menu {

    position:absolute;

    top:12px;
    right:12px;

    z-index:10;

}
.btn-post-menu {
  
  top: 15px;
  right: 15px;
  
}
@media (max-width:768px) {
  
  .post-card {
    
    width: calc(100% - 32px);
    
    margin: 16px;
    
    max-width: none;
    
  }
  
}

#postText::placeholder {
  
  color: #94a3b8;
  
  opacity: 1;
  
}