/* WorkHub — unified vertical rhythm between blocks */

/* —— Utilities —— */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.stack--lg {
  gap: var(--space-lg);
}

.stack--sm {
  gap: var(--space-sm);
}

.u-mt-md { margin-top: var(--space-md); }
.u-mb-md { margin-bottom: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mb-lg { margin-bottom: var(--space-lg); }

.actions-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* —— Page shell —— */
.inner {
  padding: var(--space-lg) 0 var(--space-2xl);
}

.breadcrumbs {
  margin-bottom: var(--space-md);
}

.page-hero {
  margin-bottom: var(--space-lg);
}

.page-search {
  margin-bottom: var(--space-md);
}

.cabinet-nav {
  margin-bottom: var(--space-md);
}

/* —— Cabinet main column: equal gaps between all direct children —— */
.cabinet-shell {
  gap: var(--space-md);
}

.cabinet-shell__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.cabinet-shell__main > .page-hero,
.cabinet-shell__main > .flash,
.cabinet-shell__main > .stats-grid,
.cabinet-shell__main > .funnel,
.cabinet-shell__main > .promo-banner,
.cabinet-shell__main > .tariff-active,
.cabinet-shell__main > .article-filters,
.cabinet-shell__main > .page-search,
.cabinet-shell__main > .billing-period,
.cabinet-shell__main > .cal-toolbar {
  margin-top: 0;
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .cabinet-shell__main > .page-hero {
    margin-bottom: 0;
  }
}

/* —— Two-column dashboard layouts —— */
.dash-grid > * {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.dash-grid .panel + .panel,
.dash-grid .panel + .ad-card,
.dash-grid .ad-card + .panel,
.cabinet-shell__main .panel + .panel {
  margin-top: 0;
}

/* —— Panels —— */
.panel + .panel {
  margin-top: var(--space-md);
}

.panel > .panel__title ~ .panel__title {
  margin-top: var(--space-lg);
}

.panel__title + .table-note {
  margin-top: calc(-1 * var(--space-xs));
}

.panel .table-note + .table-note,
.panel .table-note + form,
.panel .table-note + .btn,
.panel .table-note + .actions-col {
  margin-top: var(--space-md);
}

.panel > .table-note:first-child,
.panel > p:first-child {
  margin-top: 0;
}

/* —— Side cards & promos —— */
.ad-card,
.promo-banner,
.tariff-active {
  margin-bottom: 0;
}

.side-card + .ad-card,
.panel + .ad-card {
  margin-top: 0;
}

/* —— Stats, grids, lists —— */
.stats-grid {
  margin-bottom: 0;
}

.funnel {
  margin-bottom: 0;
}

.article-filters {
  margin-bottom: 0;
}

.section-gap {
  margin-top: var(--space-xl);
}

.section-gap .section-title {
  margin-bottom: var(--space-md);
}

.flash {
  margin: 0;
}

.cabinet-shell__main > .flash {
  margin-bottom: 0;
}

/* —— Forms & actions —— */
.vacancy-form-actions {
  margin-top: 0;
  padding-top: var(--space-xs);
}

.tpl-form-actions {
  margin-top: var(--space-md);
}

.field:last-child {
  margin-bottom: 0;
}

.grid-2 .field,
.grid-3 .field {
  margin-bottom: 0;
}

.grid-2,
.grid-3 {
  gap: var(--space-md);
}

/* —— Messages, vacancy detail, article —— */
.msg-layout {
  gap: var(--space-md);
}

.vac-detail {
  gap: var(--space-md);
}

.article-layout {
  gap: var(--space-lg);
}

.dash-grid {
  gap: var(--space-md);
}

/* —— Pagination & similar sections —— */
.pagination {
  margin: var(--space-lg) 0;
}

.similar {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.similar__head {
  margin-bottom: var(--space-md);
}

/* —— Admin settings: stacked panels/forms —— */
.cabinet-shell__main > form.panel,
.cabinet-shell__main > .panel {
  margin-top: 0;
  margin-bottom: 0;
}

.cabinet-shell__main > form.panel + form.panel {
  margin-top: 0;
}

/* —— Vacancies page (when spacing.css loads globally) —— */
.vac-page__head {
  margin-bottom: var(--space-md);
}

/* —— Native app —— */
body.is-native-app.page-inner .inner {
  padding-top: var(--space-md);
  padding-bottom: calc(var(--space-2xl) + env(safe-area-inset-bottom, 0px));
}

body.is-native-app .cabinet-shell,
body.is-native-app .dash-grid > * {
  gap: var(--space-md);
}

body.is-native-app .panel {
  padding: var(--space-md);
}

/* —— Homepage sections (tokenized in styles.css) —— */
.article-grid {
  gap: var(--space-md);
}

.feature-grid,
.price-grid {
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.emp-hero {
  margin-bottom: var(--space-lg);
}

@media (max-width: 640px) {
  .inner {
    padding: var(--space-md) 0 var(--space-xl);
  }

  .page-hero {
    margin-bottom: var(--space-md);
  }
}