/* =========================================
   Blog UniCBE — Home Pública (blog.css)
   ========================================= */

/* ─── Hero Carousel ─── */
.hero-carousel {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 400px;
  background: #1a1a2e;
  overflow: hidden;
}
.hero-carousel__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}
.hero-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #1a1a2e 0%, rgba(26,26,46,0.5) 50%, transparent 100%);
}
.hero-slide__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 24px 40px;
  z-index: 2;
  color: #fff;
}
.hero-slide__tag {
  display: inline-block;
  background: #FF8000;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.hero-slide__title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
  max-width: 800px;
}
.hero-slide__summary {
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  max-width: 600px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Controles do Carousel */
.hero-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(4px);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.hero-carousel__btn:hover {
  background: #FF8000;
  border-color: #FF8000;
}
.hero-carousel__btn--prev { left: 24px; }
.hero-carousel__btn--next { right: 24px; }

.hero-carousel__nav {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 0.3s;
}
.hero-dot.ativo {
  background: #FF8000;
  width: 24px;
  border-radius: 10px;
}

/* ─── Filtros e Busca ─── */
.filtros {
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  position: sticky;
  top: 75px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.filtros-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  flex-wrap: wrap;
}
.filtros-scroll-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  overflow: hidden;
}
.filtros-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  flex: 1;
}
.filtros-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}
.filtro-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.filtro-arrow:hover {
  background: #FF8000;
  border-color: #FF8000;
  color: #fff;
}
.filtro-arrow .material-symbols-outlined {
  font-size: 18px;
}
.filtro-btn {
  flex-shrink: 0;
  padding: 8px 18px;
  border-radius: 100px;
  border: 2px solid #e0e0e0;
  background: transparent;
  color: #666;
  font-family: var(--fonte-base);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .3s ease;
  white-space: nowrap;
}
.filtro-btn:hover { border-color: #FF8000; color: #FF8000; }
.filtro-btn.ativo { background: #FF8000; border-color: #FF8000; color: #fff; font-weight: 600; }

.filtros-busca {
  display: flex;
  background: #f5f5f5;
  border-radius: 100px;
  overflow: hidden;
  width: 600px;
  max-width: 100%;
}
.filtros-busca input {
  flex: 1;
  padding: 10px 16px;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--fonte-base);
  font-size: .85rem;
}
.filtros-busca button {
  padding: 10px 16px;
  background: #FF8000;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.filtros-busca button:hover { background: #e06e00; }

/* Aviso busca */
.aviso-busca {
  background: #fff3e6;
  border-left: 4px solid #FF8000;
  padding: 12px 20px;
  border-radius: 0 6px 6px 0;
  margin-top: 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.aviso-busca p { font-size: .9rem; color: #1a1a2e; }
.aviso-busca p strong { color: #FF8000; }
.aviso-busca button {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-family: var(--fonte-base);
  font-size: .8rem;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.aviso-busca button:hover { color: #FF8000; }

/* (Em Alta removido para dar lugar ao Hero Carousel) */

/* Recomendados */
.secao-recomendados {
  padding:40px 0;background:#fff;
  border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;
}
.carrossel-wrapper {
  position: relative;
}
.carrossel {
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:8px;
}
.carrossel::-webkit-scrollbar { display:none; }
.carrossel .post-card { flex-shrink:0;width:300px;scroll-snap-align:start; }
.carrossel-nav { display:flex;gap:8px;margin-top:16px;justify-content:flex-end; }
.carrossel-btn {
  width:40px;height:40px;border-radius:50%;border:2px solid #e0e0e0;background:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;color:#1a1a2e;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.carrossel-btn:hover { border-color:#FF8000;color:#FF8000;background:#fff3e6; box-shadow: 0 6px 14px rgba(255, 128, 0, .15); }
.carrossel-btn .material-symbols-outlined { font-size:20px; }
.carrossel-btn--prev {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.carrossel-btn--next {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Todos os posts */
.secao-posts { padding:64px 0; }
.secao-posts__header {
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:40px;flex-wrap:wrap;gap:16px;
}
.contador-posts { font-size:.875rem;color:#666; }
.contador-posts strong { color:#FF8000; }

.grid-posts { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }

.estado-vazio { grid-column:1/-1;text-align:center;padding:64px;color:#666; }
.estado-vazio .material-symbols-outlined {
  font-size:64px;color:#e0e0e0;display:block;margin-bottom:16px;
}
.estado-vazio h3 { font-size:1.2rem;color:#1a1a2e;margin-bottom:8px; }

/* Paginação */
.paginacao {
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:64px;flex-wrap:wrap;
}
.paginacao__btn {
  min-width:40px;height:40px;padding:0 12px;border-radius:6px;border:2px solid #e0e0e0;
  background:#fff;cursor:pointer;font-family:var(--fonte-base);font-size:.9rem;font-weight:500;
  color:#333;display:flex;align-items:center;justify-content:center;transition:all .3s ease;
}
.paginacao__btn:hover { border-color:#FF8000;color:#FF8000; }
.paginacao__btn.ativo { background:#FF8000;border-color:#FF8000;color:#fff;font-weight:700; }
.paginacao__btn:disabled { opacity:.4;cursor:not-allowed; }

/* Responsividade */
@media (max-width:1024px) { .grid-posts { grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px) {
  .filtros { top:67px; }
  .grid-em-alta { grid-template-columns:1fr;grid-template-rows:auto; }
  .grid-em-alta .post-card--destaque { grid-row:auto;min-height:320px; }
}
@media (max-width: 768px) {
  .blog-hero .container { flex-direction:column; }
  .blog-hero__deco { display:none; }
  .grid-posts { grid-template-columns:1fr; }
  .secao-posts__header { flex-direction:column;align-items:flex-start; }

  /* Ajustes Mobile Adicionais */
  .hero-carousel__btn { display:none; }
  .carrossel-btn { display:none; }
  .filtro-arrow { display: none !important; }
  .filtros-scroll-container { width: 100%; }
  
  .filtros-wrapper { 
    flex-direction: column-reverse; 
    align-items: stretch; 
    gap: 12px; 
    padding: 16px 16px;
    overflow: hidden; /* Garante que os filhos não estiquem a tela */
  }
  .filtros-scroll { width: 100%; }
  .filtros-busca { width: 100%; max-width: none; }
}

/* Telas muito pequenas (celulares compactos) */
@media (max-width:480px) {
  .blog-hero { padding:32px 0; }
  .blog-hero__titulo { font-size:1.7rem; }
  .blog-hero__subtitulo { font-size:.85rem; }
  .filtros-busca {
    border-radius:12px;
    overflow:hidden;
  }
  .filtros-busca input { border-radius:0; padding:14px; }
  .filtros-busca button {
    border-radius:0;
    padding:14px 20px; /* Mais largo para facilitar toque */
  }
}