@layer dx-component-base {
/* ==========================================================================
   Component: Section

   The unified section component. Every section in Elegance — single-Core
   or multi-Core — uses `.dx-section` as the outer chrome and
   `.dx-container` as the inner wrapper (max-width + centering, defined
   in `dx-defaults.css`). For multi-Core layouts the container becomes a
   `<ul class="dx-container dx-container--list">` whose `<li class="dx-core">`
   children lay out as a grid.

   Replaces the retired `dx-basic-section` (no-op hook, gone) and
   `dx-repeater-grid` (class set retired in favour of the unified
   container/list approach).

   Class composition for the inner wrapper:
     .dx-container                         base — max-width + centering
                                            (rules in dx-defaults.css)
     .dx-container--list                   universal — every container
                                            renders as a CSS Grid with
                                            `repeat(auto-fit, minmax(...))`.
                                            The retired `.dx-container
                                            --cols-{N|auto}` modifier is
                                            gone — density is tuned via
                                            `--dx-container-min-core-width`
                                            (per-instance override) or
                                            `--dx-grid-min-column` (global
                                            token). Core count controls
                                            how many rows the grid wraps
                                            into.

   Container queries scope to `.dx-section` so a section dropped into a
   constrained surface (sidebar, modal, future column-grid) still
   reflows correctly. The container query is set on every section
   regardless of single/multi — having it active when there's no list
   inside is harmless and avoids conditional setup.

   Typography / link colour / list spacing all come from `.dx-core__*`
   in `core.css` — this file owns *layout*, not visual treatment.
   Component Reuse Principle: a change to Core's text styling updates
   every Section's Core (and every Core within multi-Core Sections) in
   lockstep.
   ========================================================================== */

.dx-section {
    container-type: inline-size;
    container-name: dx-section;

    /* Container architecture (Phase 3): a section is a vertical stack
       of N containers. flex-direction: column + gap provides the
       inter-container spacing, with `--dx-row-gap` set inline on the
       section element by `components/section.php` from the
       section's `row_gap` field. Empty / unset → falls back to
       `--dx-space-l` (the default `gap` value the registry hardcodes
       as well). Per CLAUDE.md "Spacing — use gap, not margin." */
    display: flex;
    flex-direction: column;
    gap: var(--dx-row-gap, var(--dx-space-l));
}

/* ── Multi-mode container (list of Cores in a grid) ────────────────────── */

/* `.dx-container--list` is the universal grid for every container.
   Resets the default `<ul>` chrome (list-style, margin, padding) and
   sets `display: grid` with `repeat(auto-fit, minmax(...))`. Density:
     - Per-instance override: `--dx-container-min-core-width` inline
       on the container element, set by components/section.php from
       the container's `min_core_width` field.
     - Site-wide default: `--dx-grid-min-column` global token
       (Spacing panel), 220px on a fresh install.
   One rule, every container. The retired `.dx-container--cols-{N|auto}`
   modifier set and the breakpoint-scaled column-count overrides are
   gone — the browser's auto-fit machinery handles responsiveness based
   on the minimum-track size, no manual breakpoint ladder needed.

   This auto-fit rule is now the FALLBACK. For containers with a known
   core count, components/section.php emits per-container `@container
   dx-section` breakpoints (scoped to `#dx-{container_id}`, unlayered, so
   they override this rule) that step ONLY between orphan-free column
   counts — the divisors of the count (4 → 2×2 → 1, never 3 + 1). See
   dx_balanced_grid_columns() + the "Balanced grid breakpoints" block in
   section.php. Auto-fit here still applies to counts that can't be
   balanced (a prime above the column cap) and to any future
   unknown-count grid (a Loop Grid).

   Inter-item spacing comes from the grid's `gap`, driven by
   `--dx-container-list-gap` (also set inline by section.php from the
   container's `gap` field). */
.dx-container--list {
    list-style: none;
    /* margin: 0 — reset UA <ul> default. Inter-item spacing comes from
       the grid's `gap`. Legit per CLAUDE.md. */
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--dx-container-list-gap, var(--dx-space-l));
    grid-template-columns: repeat(
        auto-fit,
        minmax(
            var(
                --dx-container-min-core-width,
                var(--dx-grid-min-column, 220px)
            ),
            1fr
        )
    );
}

} /* @layer dx-component-base */

/* Query-loop empty state — rendered ONLY in editor previews (REST) when
   the loop's query matches nothing; the live site renders an empty grid.
   Spans the full grid width so it reads as a notice, not a broken card. */
.dx-loop-empty {
  grid-column: 1 / -1;
  list-style: none;
  padding: var(--dx-space-m, 1rem);
  color: var(--dx-text, inherit);
  opacity: 0.6;
  text-align: center;
  border: 1px dashed currentColor;
  border-radius: 4px;
}