/* ==========================================================================
   BeLight Energy — news.css
   ========================================================================== */
@layer pages {
  .news-search { position: relative; display: block; max-inline-size: 36rem; }
  .news-search .bi { position: absolute; inset-block: 0; inset-inline-start: var(--s-5); margin-block: auto; block-size: 1em; color: var(--muted); pointer-events: none; }
  .news-search .input { min-block-size: 3.5rem; padding-inline: 3.25rem 3.5rem; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm); font-size: var(--fs-md); }
  .news-search kbd { position: absolute; inset-block: 0; inset-inline-end: var(--s-4); margin-block: auto; block-size: 1.75rem; inline-size: 1.75rem; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); text-align: center; line-height: 1.6rem; font: 600 var(--fs-xs) var(--font-body); color: var(--muted); }
  .news-search .input::-webkit-search-cancel-button { appearance: none; }

  .news-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4); margin-block-end: var(--s-6); }
  .news-count { font-size: var(--fs-sm); color: var(--muted); }

  /* Destaque */
  .featured { display: grid; padding: 0; overflow: clip; border-radius: var(--r-xl); margin-block-end: var(--s-7); }
  @media (min-width: 56em) { .featured { grid-template-columns: 1.1fr 1fr; } }
  .featured__media { aspect-ratio: 16 / 9; overflow: clip; }
  @media (min-width: 56em) { .featured__media { aspect-ratio: auto; } }
  .featured__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--t-slow) var(--ease-out); }
  .featured:hover img { scale: 1.03; }
  .featured__body { display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); }
  .featured h2 { font-size: var(--fs-2xl); }
  .featured p { font-size: var(--fs-lg); }

  .news-layout { display: grid; gap: var(--s-6); }
  @media (min-width: 64em) { .news-layout { grid-template-columns: 1fr 20rem; align-items: start; } }
  .news-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }

  /* Filtragem animada: o browser anima a saída/entrada */
  .post[data-post] { transition: opacity var(--t) var(--ease), scale var(--t) var(--ease-out), display var(--t) allow-discrete, border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), translate var(--t) var(--ease-out); }
  .post[data-post].is-hidden { display: none; opacity: 0; scale: .96; }
  @starting-style { .post[data-post] { opacity: 0; scale: .96; } }
  mark { background: color-mix(in oklab, var(--accent) 40%, transparent); color: inherit; border-radius: 3px; padding-inline: 1px; }

  .news-empty { grid-column: 1 / -1; text-align: center; padding: var(--s-8) var(--s-5); border: 1px dashed var(--line); border-radius: var(--r-lg); color: var(--muted); }
  .news-empty .bi { font-size: 2rem; display: block; margin-block-end: var(--s-3); }
  .news-empty strong { color: var(--text); }
  .link-btn { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }

  .news-aside { display: grid; gap: var(--s-5); }
  @media (min-width: 64em) { .news-aside { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-5)); } }
  .newsletter { display: grid; gap: var(--s-3); }
  .newsletter .icon-chip { margin-block-end: var(--s-2); }
  .newsletter h2 { font-size: var(--fs-xl); }
}