/* CANONICAL — promoted from section-04-v2-1.css (Global Polish V2); previous canonical archived in src/archive/section-04-v1.0-canonical/ */
/*
 * DIA CAPITAL — Section 04 · Seis inteligencias — VISUAL V2 (parallel TEST; section-04.css / section-04.js untouched).
 * Requires main.css. dia.sections layer; scoped under .dia-apex. Page-theme section (native Light / Dark). Static.
 * One shared field of six systems (3 × 2) — no cards: faint hairline separators, a shared CSS ground with a horizontal
 * grounding plane, and a local radial light per system taken from its own accent token. Transparent official art,
 * sized by visible mass (--sys-k) so no module reads as bigger or smaller.
 */
@layer dia.sections {
  .dia-apex .dia-sys {
    --sys-T: clamp(8.25rem, 13.2vw, 12.5rem); /* target visible size of every module */
    --sys-line: color-mix(in srgb, var(--dia-text) 14%, transparent);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--dia-text);
  }

  /* Shared technical field: faint grid + two wide soft planes (not six boxes). */
  .dia-apex .dia-sys::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 60% 22% at 50% 44%, rgb(61 139 255 / 0.06), transparent 72%),
      radial-gradient(ellipse 60% 22% at 50% 80%, rgb(201 138 75 / 0.05), transparent 72%),
      linear-gradient(to right, color-mix(in srgb, var(--dia-text) 3.5%, transparent) 1px, transparent 1px) 0 0 / 7.5rem 100%,
      linear-gradient(to bottom, color-mix(in srgb, var(--dia-text) 3.5%, transparent) 1px, transparent 1px) 0 0 / 100% 7.5rem;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 52%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 75% 70% at 50% 52%, #000 30%, transparent 100%);
  }

  .dia-apex .dia-sys__head { max-inline-size: 46rem; }
  .dia-apex .dia-sys__eyebrow { margin: 0; color: var(--dia-accent-text-raised); }
  .dia-apex .dia-sys__title { margin-block-start: var(--space-3); }

  /* ---------- Field ---------- */
  .dia-apex .dia-sys__field {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid var(--sys-line);
  }

  .dia-apex .dia-sys__item {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: start;
    padding: var(--space-4) var(--space-6) var(--space-5);
    border-block-end: 1px solid var(--sys-line);
  }

  .dia-apex .dia-sys__item:not(:nth-child(3n + 1)) { border-inline-start: 1px solid var(--sys-line); }
  .dia-apex .dia-sys__item:nth-child(n + 4) { border-block-end: 0; }

  /* Art: a fixed stage; image width = target ÷ visible-mass factor, bottom-aligned on a soft contact shadow. */
  .dia-apex .dia-sys__art {
    position: relative;
    display: grid;
    place-items: end center;
    inline-size: 100%;
    block-size: calc(var(--sys-T) * 1.12);
    margin: 0;
  }

  /* Local light from the system's own accent (restrained) and a ground shadow. */
  .dia-apex .dia-sys__art::before {
    content: "";
    position: absolute;
    inset: 4% 8%;
    background: radial-gradient(ellipse 50% 50% at 50% 55%, color-mix(in srgb, var(--sys-accent) 22%, transparent), transparent 72%);
  }

  .dia-apex .dia-sys__art::after {
    content: "";
    position: absolute;
    inset-inline: 22%;
    inset-block-end: 2%;
    block-size: 10%;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(0 0 0 / 0.5), transparent 72%);
  }

  .dia-apex .dia-sys__img {
    position: relative;
    z-index: 1;
    display: block;
    inline-size: calc(var(--sys-T) / var(--sys-k));
    max-inline-size: 100%;
    block-size: auto;
    margin-block-end: 6%;
  }

  .dia-theme-light .dia-apex .dia-sys__art::before {
    inset: 0 4%;
    background:
      radial-gradient(ellipse 48% 46% at 50% 52%, rgb(7 20 28 / 0.42) 0%, rgb(7 20 28 / 0.26) 46%, transparent 100%),
      radial-gradient(ellipse 50% 50% at 50% 55%, color-mix(in srgb, var(--sys-accent) 14%, transparent), transparent 72%);
  }

  .dia-theme-light .dia-apex .dia-sys__art::after { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(12 28 36 / 0.3), transparent 72%); }

  /* ---------- Type ---------- */
  .dia-apex .dia-sys__meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    font-size: var(--dia-fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dia-text-secondary);
  }

  .dia-apex .dia-sys__num { flex: none; padding-block-end: 2px; border-block-end: 2px solid var(--sys-accent); color: var(--dia-accent-text-raised); letter-spacing: 0.14em; }

  .dia-apex .dia-sys__name { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: var(--dia-fs-h4); font-weight: 700; line-height: 1.2; }
  .dia-apex .dia-sys__sub { display: block; font-weight: 600; color: var(--dia-text-secondary); font-size: 0.85em; }
  .dia-apex .dia-sys__sep { display: none; }
  .dia-apex .dia-sys__tagline { margin: var(--space-1) 0 0; font-size: var(--dia-fs-small); font-style: italic; color: var(--dia-accent-text-raised); }
  .dia-apex .dia-sys__desc { max-inline-size: 24rem; margin: var(--space-2) 0 0; font-size: var(--dia-fs-small); line-height: 1.6; color: var(--dia-text-secondary); text-wrap: pretty; }

  .dia-apex .dia-sys__closing { max-inline-size: 36rem; margin: var(--space-5) auto 0; text-align: center; text-wrap: balance; }

  /* ---------- Tablet: 2 × 3 ---------- */
  @media (max-width: 1023px) {
    .dia-apex .dia-sys { --sys-T: clamp(8rem, 20vw, 11rem); }
    .dia-apex .dia-sys__field { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dia-apex .dia-sys__item:not(:nth-child(3n + 1)) { border-inline-start: 0; }
    .dia-apex .dia-sys__item:nth-child(even) { border-inline-start: 1px solid var(--sys-line); }
    .dia-apex .dia-sys__item:nth-child(n + 4) { border-block-end: 1px solid var(--sys-line); }
    .dia-apex .dia-sys__item:nth-child(n + 5) { border-block-end: 0; }
    .dia-apex .dia-sys__item { padding-inline: var(--space-5); }
    .dia-apex .dia-sys__art { block-size: calc(var(--sys-T) * 1.1); }
  }

  /* ---------- Mobile: one column, art left / text right ---------- */
  @media (max-width: 639px) {
    .dia-apex .dia-sys { --sys-T: 6.25rem; }
    .dia-apex .dia-sys__field { grid-template-columns: minmax(0, 1fr); margin-block-start: var(--space-5); }
    .dia-apex .dia-sys__item,
    .dia-apex .dia-sys__item:nth-child(even) { grid-template-columns: 7.25rem minmax(0, 1fr); grid-template-areas: "art meta" "art name" "art tag" "art desc"; column-gap: var(--space-4); padding: var(--space-3) 0; border-inline-start: 0; border-block-end: 1px solid var(--sys-line); }
    .dia-apex .dia-sys__item:last-child { border-block-end: 0; }
    .dia-apex .dia-sys__art { grid-area: art; block-size: 7.25rem; align-self: center; }
    .dia-apex .dia-sys__meta { grid-area: meta; margin-block-start: 0; }
    .dia-apex .dia-sys__name { grid-area: name; }
    .dia-apex .dia-sys__tagline { grid-area: tag; }
    .dia-apex .dia-sys__desc { grid-area: desc; }
  }
}

/* V2.1 — closing bridge into Section 05 */
@layer dia.sections {
  .dia-apex .dia-sys__bridge { display: grid; justify-items: center; margin-block-start: var(--space-5); text-align: center; }
  .dia-apex .dia-sys__bridge .dia-sys__closing { margin: 0; max-inline-size: 38rem; }
  .dia-apex .dia-sys__bridge-line {
    max-inline-size: 30rem;
    margin: var(--space-3) 0 0;
    font-size: var(--dia-fs-body);
    line-height: 1.55;
    color: var(--dia-text-secondary);
  }
  .dia-apex .dia-sys__bridge-line::before { content: ""; display: block; inline-size: 2.5rem; block-size: 1px; margin: 0 auto var(--space-3); background: linear-gradient(90deg, transparent, var(--dia-bronze), transparent); }
  @media (max-width: 639px) { .dia-apex .dia-sys__bridge-line br { display: none; } }

  /* Large text scale only (em = the field's own font size): stack art above text so the text column is not squeezed to a sliver. */
  .dia-apex .dia-sys__field { container-type: inline-size; }
  @container (max-width: 14em) {
    .dia-apex .dia-sys__item,
    .dia-apex .dia-sys__item:nth-child(even) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "meta" "name" "tag" "desc"; row-gap: var(--space-2); }
    .dia-apex .dia-sys__art { justify-self: start; }
  }
}