/* KharonBridge UX — LAYOUT (Phase 3A: container classes only) */

/* Conteneur principal : centré + largeur responsive */
.kb-ux-container {
  width: min(100%, var(--kb-container-max));
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 28px);
}

/* Largeur “lecture” (pour textes longs) */
.kb-ux-reading {
  width: min(100%, var(--kb-reading-max));
  margin-inline: auto;
}

/* Grille simple : 2 colonnes sur écran large, 1 colonne sur mobile */
.kb-ux-grid {
  display: grid;
  gap: clamp(14px, 2vw, 24px);
}

@media (min-width: 960px) {
  .kb-ux-grid--2 {
    grid-template-columns: 1.2fr 0.8fr; /* sanctuaire / narration-souvenirs */
    align-items: start;
  }
}

/* Espacement vertical standard entre sections */
.kb-ux-stack {
  display: grid;
  gap: clamp(18px, 3vw, 32px);
}
/* Phase 3B — kb-ux-container controls width (scoped, safe) */
.kb-ux-container > .kbmb-widget,
.kb-ux-container > .kbmb-widget.kb-wrap {
  width: 100%;
  max-width: none;
}