/* =====================================================================
   PORTAL DE NOTÍCIAS (blog) + página de artigo
   Carregar após design-system.css e layout.css.
   ===================================================================== */

/* ---------- TOOLBAR (busca + filtros) ---------- */
.news-toolbar { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.search-box { position: relative; max-width: 520px; margin-inline: auto; width: 100%; }
.search-box input {
  width: 100%; padding: 0.95rem 1.1rem 0.95rem 3rem; font: inherit; color: var(--tinta);
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
  border-radius: var(--r-pill); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm); transition: box-shadow 0.25s var(--ease);
}
.search-box input:focus { outline: none; box-shadow: var(--glow-ciano); }
.search-box .search-ico { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.1rem; opacity: 0.6; }

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }

/* ---------- GRID DE POSTS ---------- */
/* Grade responsiva: no desktop cabem MAIS cards (menores) por linha. */
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-3); }
.post-card { display: flex; flex-direction: column; text-align: left; }
/* Capa em proporção FIXA 16:9 (1920x1080). A imagem inteira aparece (contain),
   sem cortar; o espaço restante fica num fundo neutro suave. Envie imagens 16:9
   para preencher a moldura por completo. */
.post-card a.cover {
  aspect-ratio: 16 / 9;
  background-color: #e9efe6;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex; align-items: flex-start; padding: 0.8rem;
  position: relative; overflow: hidden;
}
.post-card a.cover:not(.has-image) {
  background-image: var(--g, linear-gradient(135deg, #266b3c, #f18fa0));
  background-size: cover;
}
.post-card a.cover:not(.has-image)::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 80% 15%, rgba(255,255,255,0.32), transparent); }
.post-card a.cover.has-image .badge { background: rgba(255,255,255,0.9); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.post-card .post-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.post-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--tinta-suave); }
.post-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.post-card h3 { font-size: 1.18rem; line-height: 1.25; }
.post-card h3 a { color: var(--verde-800); }
.post-card h3 a:hover { color: var(--ciano-700); }
.post-card .excerpt { color: var(--tinta-suave); font-size: 0.95rem; }
.post-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; padding-top: 0.4rem; }
.tag { font-size: 0.72rem; font-weight: 600; color: var(--verde-700); background: rgba(46,125,70,0.09); padding: 0.2rem 0.6rem; border-radius: var(--r-pill); }

/* ---------- ESTADO VAZIO ---------- */
.empty-state { text-align: center; padding: var(--sp-5) var(--sp-2); display: none; }
.empty-state.show { display: block; }
.empty-state .leaf-loader { width: 70px; height: 70px; margin: 0 auto 1rem; opacity: 0.5; }

/* ---------- PAGINAÇÃO ---------- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 0.4rem; margin-top: var(--sp-4); flex-wrap: wrap; }
.pagination button {
  min-width: 42px; height: 42px; padding: 0 0.7rem; border-radius: var(--r-md);
  border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--verde-700);
  font: inherit; font-weight: 700; cursor: pointer; transition: all 0.2s var(--ease);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pagination button:hover:not(:disabled) { background: var(--verde-600); color: #fff; transform: translateY(-2px); }
.pagination button[aria-current="true"] { background: var(--verde-600); color: #fff; border-color: var(--verde-600); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

.results-count { text-align: center; color: var(--tinta-suave); font-size: 0.9rem; margin-bottom: var(--sp-2); }

/* ---------- PÁGINA DE ARTIGO ---------- */
.article { max-width: 760px; margin-inline: auto; }
.article-header { text-align: center; padding-top: clamp(3rem, 6vw, 5rem); }
.article-header .breadcrumb { margin-bottom: 1rem; }
.article-cover { aspect-ratio: 16 / 9; border-radius: var(--r-lg); background-color: #e9efe6; background-size: contain; background-repeat: no-repeat; background-position: center; margin: var(--sp-3) 0; box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.article-cover:not(.has-image) { background-image: var(--g, linear-gradient(120deg,var(--verde-500),var(--ciano))); background-size: cover; }
.article-cover:not(.has-image)::after { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 75% 10%, rgba(255,255,255,0.3), transparent); }
.article-meta { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; color: var(--tinta-suave); font-size: 0.9rem; margin-top: 0.8rem; }
.article-meta .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(120deg,var(--verde-500),var(--rosa)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.8rem; }
.article-title { font-size: clamp(1.9rem, 4vw, 2.8rem); }

.article-body { font-size: 1.1rem; line-height: 1.8; color: #2c3a32; }
.article-body > * + * { margin-top: 1.3rem; }
.article-body h2 { font-size: 1.6rem; margin-top: 2.2rem; }
.article-body h3 { font-size: 1.3rem; margin-top: 1.8rem; }
.article-body blockquote { border-left: 4px solid var(--ciano); padding: 0.4rem 0 0.4rem 1.3rem; color: var(--verde-700); font-family: var(--font-display); font-size: 1.25rem; font-style: italic; }
.article-body ul, .article-body ol { padding-left: 1.4rem; }
.article-body li + li { margin-top: 0.5rem; }
.article-body a { text-decoration: underline; }

.article-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid rgba(46,125,70,0.15); }
.share { display: flex; gap: 0.5rem; align-items: center; }
.share span { font-size: 0.85rem; color: var(--tinta-suave); }
.share a,
.share button { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-bg); border: 1px solid var(--glass-border); color: inherit; font: inherit; cursor: pointer; }
.share a:hover,
.share button:hover { background: var(--verde-600); color: #fff; }

.related { margin-top: var(--sp-5); }
.related h2 { text-align: center; margin-bottom: var(--sp-3); }

/* ---------- RESPONSIVO ---------- */
@media (max-width: 900px) { .posts-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .posts-grid { grid-template-columns: 1fr; } .article-header { padding-top: 2.4rem; } }

@media (max-width: 640px) {
  .news-toolbar { margin-bottom: 1.15rem; gap: 0.75rem; }
  .search-box input {
    min-height: 44px;
    padding: 0.68rem 0.9rem 0.68rem 2.35rem;
    border-radius: 14px;
    font-size: 0.94rem;
  }
  .search-box .search-ico { left: 0.95rem; font-size: 1rem; }
  .filters {
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
    gap: 0.45rem;
  }
  .filters .chip {
    flex: 0 1 auto;
    white-space: nowrap;
    padding: 0.34rem 0.64rem;
    font-size: 0.78rem;
  }
  .post-card { border-radius: 18px; }
  .post-card a.cover {
    aspect-ratio: 16 / 9;
    padding: 0.75rem;
  }
  .post-card .post-body { padding: 0.9rem; gap: 0.42rem; }
  .post-card h3 { font-size: 1.02rem; line-height: 1.24; }
  .post-card .excerpt { font-size: 0.9rem; line-height: 1.5; }
  .post-meta {
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.74rem;
  }
  .tag { font-size: 0.68rem; padding: 0.16rem 0.48rem; }
  .article {
    width: min(100% - 1.5rem, 760px);
  }
  .article-header {
    padding-top: 2.15rem;
    text-align: left;
  }
  .article-header .breadcrumb,
  .article-meta {
    justify-content: flex-start;
  }
  .article-cover {
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    margin: 1.25rem 0;
  }
  .article-title {
    font-size: clamp(1.45rem, 7vw, 1.85rem);
    line-height: 1.08;
  }
  .article-meta {
    gap: 0.45rem;
    font-size: 0.8rem;
    line-height: 1.45;
  }
  .article-meta .avatar {
    width: 30px;
    height: 30px;
    font-size: 0.72rem;
  }
  .article-body {
    font-size: 0.96rem;
    line-height: 1.68;
  }
  .article-body > * + * { margin-top: 1rem; }
  .article-body h2 { font-size: 1.25rem; margin-top: 1.6rem; }
  .article-body h3 { font-size: 1.08rem; margin-top: 1.4rem; }
  .article-body ul,
  .article-body ol {
    padding-left: 1.1rem;
  }
  .article-body blockquote {
    padding-left: 0.85rem;
    font-size: 1rem;
  }
  .article-foot {
    align-items: stretch;
    flex-direction: column;
  }
  .share {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}