/* ==========================================================================
   VELURA — Pages: контентні сторінки, блог, 404, порожні стани
   ========================================================================== */

/* --------------------------------------------------------------------------
   Заголовок сторінки
   -------------------------------------------------------------------------- */
.pagehead { margin-bottom: clamp(28px, 3vw, 48px); }
.pagehead__title { margin-bottom: .3em; }
.pagehead__lead {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 62ch;
  margin: 0;
}
.pagehead__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.page__cover { border-radius: var(--r-lg); margin-bottom: var(--sp-8); }

/* --------------------------------------------------------------------------
   Порожній стан
   -------------------------------------------------------------------------- */
.emptystate {
  max-width: 520px;
  margin: 0 auto;
  padding: var(--sp-16) var(--sp-4);
  text-align: center;
}
.emptystate__icon {
  display: grid; place-items: center;
  width: 80px; height: 80px;
  margin: 0 auto var(--sp-5);
  border-radius: 50%;
  background: var(--bg-cream);
  color: var(--ink-3);
}
.emptystate h2 { margin-bottom: .4em; }
.emptystate p { color: var(--ink-2); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.emptystate__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.err { padding-top: var(--sp-8); }
.err__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: center;
  padding-bottom: var(--sp-12);
}
@media (min-width: 900px) { .err__inner { grid-template-columns: 420px 1fr; gap: var(--sp-12); } }

.err__art { order: -1; }
@media (min-width: 900px) { .err__art { order: 0; } }
.err__art svg { width: 100%; height: auto; max-width: 420px; margin-inline: auto; }

.err__title { margin-bottom: .35em; }
.err__lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 52ch; margin-bottom: var(--sp-6); }

.err__search { position: relative; display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.err__search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.err__search .input { padding-left: 46px; }
.err__search .btn { flex: none; }
@media (max-width: 480px) {
  .err__search { flex-direction: column; }
  .err__search .btn { width: 100%; }
}

.err__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }

.err__redirect {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.err__redirect svg { color: var(--accent); flex: none; }
.err__redirect strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.err__cancel { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); text-decoration: underline; }
.err__cancel:hover { color: var(--accent-2); }

.err__cats { padding: var(--sp-8) 0 var(--sp-12); border-top: 1px solid var(--line-2); }
.err__cats-title {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
}
.err__cats-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2) var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) { .err__cats-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .err__cats-list { grid-template-columns: repeat(3, 1fr); } }
.err__cats-list li { margin: 0; }
.err__cats-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-bottom: 1px solid var(--line-2);
}
.err__cats-list svg { color: var(--accent); flex: none; }

/* --------------------------------------------------------------------------
   Картка-стаття в результатах пошуку
   -------------------------------------------------------------------------- */
.pcard--post .pcard__body { gap: 10px; }
.pcard--post .pcard__title { min-height: 0; font-size: 1rem; }
.pcard__excerpt { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }

/* --------------------------------------------------------------------------
   Контакти
   -------------------------------------------------------------------------- */
.contacts { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 768px) { .contacts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .contacts { grid-template-columns: repeat(3, 1fr); } }

.contact {
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.contact__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.contact__label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 5px; }
.contact__value { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.contact__value a:hover { color: var(--accent); }
.contact__note { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--ink-3); }