/* === Stories redondos no topo — Fala Mundo === */

/* 1) Transforma o conteúdo principal em coluna flexível
      (assim dá para reordenar a seção com "order") */
#main-content {
  display: flex;
  flex-direction: column;
}

/* 2) Move a seção de Web Stories para o TOPO da página */
[aria-label="Web Stories"] {
  order: -1;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid #eceef2;
}

/* 3) Barra horizontal e rolável (igual o Instagram) */
[aria-label="Web Stories"] > div:last-child {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
[aria-label="Web Stories"] > div:last-child::-webkit-scrollbar {
  display: none;
}

/* 4) Cada story: fixo, empilhado, centralizado */
[aria-label="Web Stories"] a {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 78px;
  text-decoration: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* 5) Avatar REDONDO com anel colorido */
[aria-label="Web Stories"] img {
  width: 72px;
  height: 72px;
  border-radius: 50%;          /* deixa redondo */
  object-fit: cover;           /* corta sem distorcer */
  padding: 3px;
  background: linear-gradient(45deg,
    #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  border: 0 !important;
}

/* 6) Rótulo curto embaixo do círculo */
[aria-label="Web Stories"] a > p:last-child {
  font-size: 12px;
  line-height: 1.25;
  max-width: 78px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #444;
}

/* remove margens do <p> que envolve a imagem */
[aria-label="Web Stories"] a > p { margin: 0; }
[aria-label="Web Stories"] h2 {
  font-size: 0 !important;
}
[aria-label="Web Stories"] h2::after {
  content: "Stories";
  font-size: 18px !important;
  font-weight: 700;
}
/* Teste: força a imagem do card a aparecer na grade de Últimas Notícias */
#postsGrid .post-card-thumb {
  display: block !important;
}
#postsGrid .post-card-thumb img {
  display: block !important;
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}