/* ──────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.section.composer
   Classification : Orchestrator | Page Composer | JSON-Driven Renderer | Wrapping-Aware
   Version        : 3.1.0 | Genesis-Final • Token-Harmonized • Layer-Scoped • Schema-Aligned
   File           : /tools/modules/ui.section.composer/ui.section.composer.css
   Maintainer     : DΛREΛKT_ UI TEAM
   ────────────────────────────────────────────────────────────────────────────── */

/* ─── Layer Declaration ─────────────────────────────────────────────────────── */
@layer site, ui.section;

/* ─── Base Container ────────────────────────────────────────────────────────── */
.ui-section-composer {
  display: flex;
  flex-direction: column;
  gap: var(--site-pad, 3rem);
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  isolation: isolate;
  contain: layout paint;
}

/* ─── Fade-in Animation (deprecated - using opacity transition instead) ───── */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Section Placeholder — Production Fallback ─────────────────────────────── */
.section-placeholder {
  padding: clamp(1rem, 2vw, 2rem);
  text-align: center;
  font-size: 0.9rem;
  color: var(--ui-muted, #777);
  border: 1px dashed var(--ui-border, #ccc);
  border-radius: var(--ui-radius, 0.5rem);
  background: var(--ui-bg-alt, #fafafa);
  margin-inline: auto;
  width: min(100%, 900px);
  opacity: 0.85;
  line-height: 1.5;
  backdrop-filter: var(--ui-blur, none);
}

/* ─── Developer Mode Placeholder (DAREAKT_MODE=dev) ─────────────────────────── */
.section-placeholder.dev {
  background: #fff5f5;
  border-color: #ff8888;
  color: #d33;
  font-family: ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 1.5rem;
  box-shadow: inset 0 0 6px rgba(255, 0, 0, 0.1);
}

/* ─── Token Harmony — Site Layer Bridge ─────────────────────────────────────── */
body[data-site] .ui-section-composer {
  --ui-border: var(--site-border, #ccc);
  --ui-bg-alt: var(--site-bg-alt, #fafafa);
  --ui-muted: var(--site-muted, #666);
  --ui-radius: var(--site-radius, 0.5rem);
  --ui-blur: var(--site-blur, none);
}

/* ─── Wrapping Awareness — Structural Markers ───────────────────────────────── */
.ui-section-composer[data-wrapping="layout"] {
  outline: 1px dotted rgba(0, 128, 255, 0.25);
  outline-offset: 3px;
}
.ui-section-composer[data-wrapping="canvas"] {
  outline: 1px dashed rgba(0, 200, 128, 0.25);
  outline-offset: 3px;
}

/* ─── Debug Overlay — Optional Diagnostic Grid ──────────────────────────────── */
.ui-section-composer[data-debug="true"] {
  outline: 1px dotted rgba(0, 0, 0, 0.25);
  outline-offset: 2px;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.02) 0,
    rgba(0, 0, 0, 0.02) 2px,
    transparent 2px,
    transparent 4px
  );
}