/* ============================================================================
   EGKits Public — Layout Density & Content Organization
   8px grid: sections 24–32px, heading gaps 12–16px, paragraphs 8–12px.
   ========================================================================== */

/* ── Page shells ────────────────────────────────────────────────────────── */
.egk-page,
.egk-landing-page,
.egk-catalog-page,
.egk-module-page {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

/* ── Section rhythm (replaces arbitrary py-12 / py-16) ──────────────────── */
.egk-page-section,
.public-app .marketing-section {
  padding-block: var(--egk-section-y);
}

.egk-page-section--sm {
  padding-block: var(--egk-section-y-sm);
}

.egk-page-section--surface {
  background: var(--egk-bg-secondary);
}

.egk-page-section--alt {
  background: var(--egk-bg-primary);
}

.egk-page-hero,
.public-app section.hero-section,
.public-app section.production-hero,
.public-app section.docs-hero,
.public-app section.docs-search-hero,
.public-app section.changelog-hero,
.public-app section.kb-hero {
  padding-block: var(--egk-section-y-hero);
}

.egk-page-cta,
.public-app section.cta-gradient,
.public-app section.docs-cta,
.public-app section.marketing-cta-panel {
  padding-block: var(--egk-section-y);
}

/* Normalize legacy utility padding on sections */
.public-app section.py-12,
.public-app section.py-14,
.public-app section.py-16 {
  padding-block: var(--egk-section-y) !important;
}

.public-app section.hero-section.py-16,
.public-app section.production-hero.py-16,
.public-app section.docs-hero,
.public-app section.docs-search-hero {
  padding-block: var(--egk-section-y-hero) !important;
}

/* ── Section heading block (H1 → lead → H2 flow) ────────────────────────── */
.egk-page-section__head,
.egk-section-head {
  max-width: 52rem;
  margin-bottom: var(--egk-density-block);
}

.egk-page-section__head--center,
.egk-section-head {
  margin-inline: auto;
  text-align: center;
}

.egk-page-section__head .egk-title,
.egk-section-head .egk-title {
  margin-bottom: var(--egk-density-heading);
}

.egk-page-section__head .egk-lead,
.egk-section-head .egk-lead {
  margin-bottom: 0;
}

.egk-page-section__head .egk-eyebrow,
.egk-section-head .egk-eyebrow {
  margin-bottom: var(--egk-density-heading);
}

/* Compact heading-to-content gap inside sections */
.public-app section .text-center.mb-10,
.public-app section .hero-content.mb-10,
.public-app .marketing-section .text-center.mb-10 {
  margin-bottom: var(--egk-density-block) !important;
}

.public-app section .mb-8 {
  margin-bottom: var(--egk-density-group) !important;
}

.public-app section .mb-6 {
  margin-bottom: var(--egk-density-block) !important;
}

.public-app section .mb-4 {
  margin-bottom: var(--egk-density-heading-lg) !important;
}

/* ── Visual content blocks ──────────────────────────────────────────────── */
.egk-block {
  background: var(--egk-bg-secondary);
  border: 1px solid var(--egk-color-divider);
  border-radius: var(--egk-radius-xl);
  padding: var(--egk-density-block);
}

.egk-block + .egk-block {
  margin-top: var(--egk-density-block);
}

.egk-block-grid {
  display: grid;
  gap: var(--egk-density-block);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.egk-block-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* ── Docs layout density ────────────────────────────────────────────────── */
.docs-layout-shell {
  padding-block: var(--egk-section-y-sm);
  min-height: 0;
}

.doc-hub-shell__feedback {
  padding-block: var(--egk-section-y-sm) !important;
}

.doc-hub-shell__footer {
  padding-block: var(--egk-density-block) !important;
}

.doc-content-area h1,
.doc-content-area h2,
.doc-content-area h3,
.doc-content-area h4 {
  margin-top: var(--egk-density-group);
  margin-bottom: var(--egk-density-heading);
}

.doc-content-area h1:first-child,
.doc-content-area h2:first-child,
.doc-content-area h3:first-child {
  margin-top: 0;
}

.doc-content-area p {
  margin-bottom: var(--egk-density-paragraph);
}

.doc-content-area section + section {
  margin-top: var(--egk-density-block);
}

.doc-content-area ul,
.doc-content-area ol {
  margin-bottom: var(--egk-density-stack);
}

.doc-content-area li {
  margin-bottom: var(--egk-density-paragraph);
}

/* Catalog / module listing groups */
.egk-catalog-page .mb-10,
.egk-module-page .mb-10 {
  margin-bottom: var(--egk-density-group) !important;
}

.egk-catalog-page .production-card.pa-5,
.egk-module-page .production-card.pa-5 {
  padding: var(--egk-density-block) !important;
}

/* ── Mud grid tightening in marketing sections ──────────────────────────── */
.public-app .marketing-section .mud-grid {
  row-gap: var(--egk-density-block);
}

/* ── Portal content density ─────────────────────────────────────────────── */
.portal-content {
  padding-block: var(--egk-section-y-sm) !important;
}

.portal-page-header {
  margin-bottom: var(--egk-density-block) !important;
}

/* ── Section separators ─────────────────────────────────────────────────── */
.egk-section-divider {
  border: 0;
  height: 1px;
  margin: var(--egk-density-block) 0;
  background: var(--egk-color-divider);
}