/* =========================================================
   FILE: 02-dnh-layout.css
   ROLE: Layout primitives and page rhythm
   RULES:
   - chỉ chứa layout primitives
   - không chứa component skin
   - không chứa page-specific fix
   - page nào muốn đẹp hơn phải đi qua primitives trước
   ========================================================= */

/* =========================================================
   01. SECTION SYSTEM
   ========================================================= */

.dnh-l-section {
  padding-block: var(--dnh-section-pad-y-md);
}

.dnh-l-section--sm {
  padding-block: var(--dnh-section-pad-y-sm);
}

.dnh-l-section--lg {
  padding-block: var(--dnh-section-pad-y-lg);
}

.dnh-l-section--flush-top {
  padding-top: 0;
}

.dnh-l-section--flush-bottom {
  padding-bottom: 0;
}

/* =========================================================
   02. CONTAINER SYSTEM
   ========================================================= */

.dnh-l-container {
  width: min(100% - (var(--dnh-container-pad-desktop) * 2), var(--dnh-container-xl));
  margin-inline: auto;
}

.dnh-l-container--sm {
  width: min(100% - (var(--dnh-container-pad-desktop) * 2), var(--dnh-container-sm));
  margin-inline: auto;
}

.dnh-l-container--md {
  width: min(100% - (var(--dnh-container-pad-desktop) * 2), var(--dnh-container-md));
  margin-inline: auto;
}

.dnh-l-container--lg {
  width: min(100% - (var(--dnh-container-pad-desktop) * 2), var(--dnh-container-lg));
  margin-inline: auto;
}

.dnh-l-container--wide {
  width: min(100% - (var(--dnh-container-pad-desktop) * 2), 1360px);
  margin-inline: auto;
}

.dnh-l-container--full {
  width: 100%;
  margin-inline: auto;
}

/* =========================================================
   03. GRID SYSTEM
   ========================================================= */

.dnh-l-grid {
  display: grid;
  gap: var(--dnh-gap-grid-md);
}

.dnh-l-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dnh-l-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dnh-l-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dnh-l-grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.dnh-l-grid--listing {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.dnh-l-grid--metrics {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* =========================================================
   04. STACK / CLUSTER / ACTIONS
   ========================================================= */

.dnh-l-stack {
  display: grid;
  gap: var(--dnh-gap-stack-md);
}

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

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

.dnh-l-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnh-space-4);
  align-items: center;
}

.dnh-l-cluster--between {
  justify-content: space-between;
}

.dnh-l-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnh-space-4);
  align-items: center;
  align-content: flex-start;
}

.dnh-l-actions > * {
  min-width: 0;
  max-width: 100%;
}

.dnh-l-actions--center {
  justify-content: center;
}

.dnh-l-actions--between {
  justify-content: space-between;
}

@media (max-width: 767px) {
  .dnh-l-actions {
    gap: var(--dnh-space-3);
  }
}

/* =========================================================
   05. SPLIT LAYOUTS
   ========================================================= */

.dnh-l-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--dnh-gap-grid-lg);
  align-items: center;
}

.dnh-l-split--content-media {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.dnh-l-split--media-content {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.dnh-l-split--content-rail {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--dnh-space-8);
  align-items: start;
}

.dnh-l-split--content-sidebar {
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--dnh-space-8);
  align-items: start;
}

/* =========================================================
   06. HERO SHELL
   ========================================================= */

/* =========================
   HERO LAYOUT - CANONICAL
========================= */

.dnh-l-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--dnh-space-8);
  align-items: center;
  min-height: clamp(420px, 60vh, 720px);
}

/* giữ lại để backward-compatible nhưng KHÔNG còn bắt buộc */
.dnh-l-hero--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.dnh-l-hero--content {
  max-width: var(--dnh-measure-reading);
}

.dnh-l-hero__head {
  display: grid;
  gap: var(--dnh-space-4);
}

.dnh-l-hero__body {
  display: grid;
  gap: var(--dnh-space-6);
}

.dnh-l-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnh-space-4);
  align-items: center;
}

.dnh-l-hero__media {
  min-width: 0;
}

/* =========================================================
   07. RAIL / SIDEBAR LAYOUTS
   ========================================================= */

.dnh-l-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--dnh-space-8);
  align-items: start;
}

.dnh-l-rail__main {
  min-width: 0;
}

.dnh-l-rail__side {
  min-width: 0;
}

.dnh-l-rail--wide {
  grid-template-columns: minmax(0, 1fr) 380px;
}

.dnh-l-sidebar-stack {
  display: grid;
  gap: var(--dnh-space-5);
}

/* =========================================================
   08. TRUST / PANEL / METRIC SHELLS
   ========================================================= */

.dnh-l-trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--dnh-gap-grid-md);
  align-items: start;
}

.dnh-l-metric-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--dnh-gap-grid-md);
}

.dnh-l-panel {
  display: grid;
  gap: var(--dnh-space-5);
}

.dnh-l-panel--sm {
  gap: var(--dnh-space-4);
}

.dnh-l-panel--lg {
  gap: var(--dnh-space-6);
}

/* =========================================================
   09. INTAKE / COMPARE / BUSINESS ROWS
   ========================================================= */

.dnh-l-intake {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--dnh-space-8);
  align-items: start;
}

.dnh-l-intake__content,
.dnh-l-intake__form {
  min-width: 0;
}

.dnh-l-compare-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dnh-gap-grid-md);
  align-items: stretch;
}

.dnh-l-business-row {
  display: grid;
  gap: var(--dnh-gap-grid-md);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* =========================================================
   10. PAGE-ROLE CONTAINER VARIANTS
   ========================================================= */

.dnh-l-page-public {
  width: min(100% - (var(--dnh-container-pad-desktop) * 2), var(--dnh-container-xl));
  margin-inline: auto;
}

.dnh-l-page-participation {
  width: min(100% - (var(--dnh-container-pad-desktop) * 2), 1160px);
  margin-inline: auto;
}

.dnh-l-page-concierge {
  width: min(100% - (var(--dnh-container-pad-desktop) * 2), var(--dnh-container-lg));
  margin-inline: auto;
}

/* =========================================================
   11. RESPONSIVE HELPERS (CONTROLLED)
   ========================================================= */

.dnh-l-collapse-mobile {
  display: grid;
}

.dnh-l-order-first-mobile {
  order: unset;
}

.dnh-l-order-last-mobile {
  order: unset;
}

@media (max-width: 1023px) {
  .dnh-l-split,
  .dnh-l-split--content-media,
  .dnh-l-split--media-content,
  .dnh-l-split--content-rail,
  .dnh-l-split--content-sidebar,
  .dnh-l-rail,
  .dnh-l-rail--wide,
  .dnh-l-hero--split,
  .dnh-l-intake,
  .dnh-l-compare-row {
    grid-template-columns: 1fr;
  }

  .dnh-l-container,
  .dnh-l-container--sm,
  .dnh-l-container--md,
  .dnh-l-container--lg,
  .dnh-l-container--wide,
  .dnh-l-page-public,
  .dnh-l-page-participation,
  .dnh-l-page-concierge {
    width: min(100% - (var(--dnh-container-pad-tablet) * 2), 100%);
  }
}

@media (max-width: 767px) {
  .dnh-l-grid--2,
  .dnh-l-grid--3,
  .dnh-l-grid--4,
  .dnh-l-grid--cards,
  .dnh-l-grid--listing,
  .dnh-l-grid--metrics,
  .dnh-l-trust-strip,
  .dnh-l-metric-band,
  .dnh-l-business-row {
    grid-template-columns: 1fr;
  }

  .dnh-l-container,
  .dnh-l-container--sm,
  .dnh-l-container--md,
  .dnh-l-container--lg,
  .dnh-l-container--wide,
  .dnh-l-page-public,
  .dnh-l-page-participation,
  .dnh-l-page-concierge {
    width: min(100% - (var(--dnh-container-pad-mobile) * 2), 100%);
  }

  .dnh-l-hero {
    min-height: auto;
    gap: var(--dnh-space-6);
  }

  .dnh-l-order-first-mobile {
    order: -1;
  }

  .dnh-l-order-last-mobile {
    order: 99;
  }
}

/* =========================================================
   PROMOTED: Shared Layout Utilities
   Target:
   - HOME approved visual truth
   - section heads
   - auto grids
   - asymmetrical hero sidecar
   - feature split 2 cột
   - analysis row image/content
   Owner note:
   - chỉ chứa layout primitives / layout helpers
   - không thêm component skin ở đây
   ========================================================= */

.dnh-l-grid-auto-280 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--dnh-space-6, 24px);
}

.dnh-l-grid-auto-300 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--dnh-space-6, 24px);
}

.dnh-l-section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--dnh-space-4, 16px);
  margin-bottom: var(--dnh-space-8, 32px);
  padding-bottom: var(--dnh-space-4, 16px);
  border-bottom: 1px solid var(--dnh-color-border);
}

.is-light .dnh-l-section-head {
  border-bottom-color: var(--dnh-color-border);
}

.dnh-l-hero-sidecar {
  display: grid;
  grid-template-columns: minmax(0, 6.5fr) minmax(320px, 3.5fr);
  align-items: stretch;
  gap: 0;
  min-height: min(90vh, 880px);
  border-bottom: 1px solid var(--dnh-color-border);
}

.dnh-l-hero-sidecar__main,
.dnh-l-hero-sidecar__side {
  min-width: 0;
}

.dnh-l-hero-sidecar__main {
  display: grid;
  align-content: center;
}

.dnh-l-hero-sidecar__side {
  display: grid;
  align-content: center;
}

.dnh-l-feature-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dnh-space-10, 40px);
  align-items: stretch;
}

.dnh-l-feature-split__content,
.dnh-l-feature-split__media {
  min-width: 0;
}

.dnh-l-feature-split__content {
  display: grid;
  align-content: center;
}

.dnh-l-feature-split__media {
  display: grid;
}

.dnh-l-analysis-row {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  gap: var(--dnh-space-8, 32px);
  align-items: center;
}

.dnh-l-analysis-row__media,
.dnh-l-analysis-row__body {
  min-width: 0;
}

@media (max-width: 1023px) {
  .dnh-l-hero-sidecar,
  .dnh-l-feature-split,
  .dnh-l-analysis-row {
    grid-template-columns: 1fr;
  }

  .dnh-l-hero-sidecar {
    min-height: auto;
  }
}

@media (max-width: 767px) {
  .dnh-l-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dnh-space-4, 16px);
    margin-bottom: var(--dnh-space-6, 24px);
  }

  .dnh-l-stack-mobile {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .dnh-l-stack-mobile .dnh-btn {
    width: 100% !important;
  }
}

.dnh-bg-inverse {
  background-color: var(--dnh-color-surface-inverse, #0F0F11) !important;
}

.dnh-bg-alt {
  background-color: var(--dnh-color-surface-alt, #E5E0D6) !important;
}

.dnh-bg-surface {
  background-color: var(--dnh-color-surface, #FDFBF7) !important;
}

.dnh-border-t-subtle {
  border-top: 1px solid var(--dnh-color-border-subtle, #EEEEEE) !important;
}

.dnh-text-opacity-80 {
  opacity: 0.8 !important;
}

.dnh-bg-soft {
  background-color: var(--dnh-color-bg, #EFEBE4) !important;
}