/* ==========================================================================
   Empty state (components/empty-state.js): a topic section with no content yet.
   ========================================================================== */

.empty-state {
  --empty-soft: #e8f6ed;
  --empty-soft-blue: #edf5ff;
  --empty-paper: #ffffff;
  --empty-ink: #161616;
  --empty-line: #c6c6c6;
  --empty-accent: #24a148;
  --empty-blue: #0f62fe;
  display: grid;
  justify-items: center;
  gap: var(--cds-spacing-04, 0.75rem);
  padding: var(--cds-spacing-09, 3rem) var(--cds-spacing-05, 1rem);
  text-align: center;
  background: var(--cds-layer, #fff);
  border: 1px dashed var(--cds-border-subtle, #e0e0e0);
}

/* Inside a card grid (blog posts), take the whole row. */
* > .empty-state { grid-column: 1 / -1; }

.empty-state__art svg {
  display: block;
  width: min(15rem, 70vw);
  height: auto;
}

.empty-state__art svg > * { animation: empty-float 4s ease-in-out infinite; }
.empty-state__art svg > circle:first-child,
.empty-state__art svg > path:nth-child(2) { animation: none; }

@keyframes empty-float {
  50% { transform: translateY(-3px); }
}

.empty-state__title {
  margin: var(--cds-spacing-03, 0.5rem) 0 0;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
}

.empty-state__text {
  max-width: 32rem;
  margin: 0;
  color: var(--cds-text-secondary, #525252);
  line-height: 1.5;
}

html[lang="km"] .empty-state__title,
html[lang="km"] .empty-state__text { line-height: 1.8; }

:root[data-theme="dark"] .empty-state {
  --empty-soft: #0e2a18;
  --empty-soft-blue: #001d6c;
  --empty-paper: #262626;
  --empty-ink: #f4f4f4;
  --empty-line: #525252;
}


@media (prefers-reduced-motion: reduce) {
  .empty-state__art svg > * { animation: none; }
}