/* CANONICAL — promoted from section-02-v1-2.css (Global Polish V2); previous canonical archived in src/archive/section-02-v1.0-canonical/ */
/*
 * DIA CAPITAL — Section 02 · Fuerzas del mercado — VISUAL V1.2 (compact composition; parallel TEST; V1 kept).
 * Requires main.css. dia.sections layer; scoped under .dia-apex. Dark cinematic chapter in both themes (.dia-island).
 * Stage = an explicit 1672 : 650 frame (the composite reference is a guide, not a DOM ratio), max 1500 px wide:
 * labels at the top of their columns → light stems → force objects → flow toward the platform; the platform is the
 * visible base and carries "Market behavior" as live HTML text. Static. No JS.
 * < 768 px: a vertical sequence (label → art per row) ending on the platform with its label.
 */
@layer dia.sections {
  .dia-apex .dia-mf {
    --mf-copper: #C98A4B;
    --mf-pw: min(92vw, 430px); /* platform width on narrow screens */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: 0; /* the global section padding would add a dead field above and below */
    color: var(--dia-text);
    background:
      radial-gradient(ellipse 60% 40% at 50% 66%, rgb(61 139 255 / 0.10) 0%, transparent 72%),
      radial-gradient(ellipse 80% 30% at 50% 94%, rgb(201 138 75 / 0.08) 0%, transparent 70%),
      linear-gradient(to bottom, #07141C 0%, #061018 55%, #050D14 100%);
  }

  /* Short ramps: Dark blends to the neighbours' tone; Light passes through a cool petroleum dissolve. */
  .dia-apex .dia-mf::before,
  .dia-apex .dia-mf::after { content: ""; position: absolute; z-index: 3; inset-inline: 0; pointer-events: none; }
  .dia-apex .dia-mf::before { inset-block-start: 0; block-size: 3rem; background: linear-gradient(to bottom, #07141C 0%, transparent 100%); }
  .dia-apex .dia-mf::after { inset-block-end: 0; block-size: 3.5rem; background: linear-gradient(to top, #050D14 0%, transparent 100%); }

  .dia-theme-light .dia-apex .dia-mf::before {
    block-size: 4rem;
    background: linear-gradient(to bottom, #F7F8F8 0%, #DCE5E9 18%, #8FA6B2 42%, #3B5666 66%, rgb(7 20 28 / 0.6) 86%, transparent 100%);
  }

  .dia-theme-light .dia-apex .dia-mf::after {
    block-size: 4.5rem;
    background: linear-gradient(to top, #F7F8F8 0%, #DCE5E9 18%, #8FA6B2 42%, #3B5666 66%, rgb(7 20 28 / 0.6) 86%, transparent 100%);
  }

  /* ---------- Head ---------- */
  .dia-apex .dia-mf__head {
    position: relative;
    z-index: 4;
    display: grid;
    justify-items: center;
    grid-template-columns: minmax(0, 1fr); /* lets eyebrow / H2 / lede wrap inside the viewport at large text scales */
    padding-block-start: 5.25rem;
    text-align: center;
  }
  .dia-apex .dia-mf__head > * { overflow-wrap: break-word; }

  .dia-apex .dia-mf__title { max-inline-size: min(18ch, 100%); margin-block-start: var(--space-3); text-wrap: balance; }
  .dia-apex .dia-mf__title > span { display: block; }
  .dia-apex .dia-mf__accent { font-style: normal; color: var(--dia-accent-text-raised, var(--mf-copper)); }
  .dia-apex .dia-mf__lede { max-inline-size: 50rem; margin-block-start: var(--space-4); color: var(--dia-text-secondary); text-wrap: pretty; }

  /* ---------- Stage ---------- */
  .dia-apex .dia-mf__stage {
    position: relative;
    z-index: 1;
    inline-size: min(100%, 1500px);
    aspect-ratio: 1672 / 650;
    margin-inline: auto;
    margin-block: calc(var(--space-3) + 14px) -14px; /* +14 px air under the paragraph, paid back from the empty bottom field */
  }

  .dia-apex .dia-mf__fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
    mask-composite: intersect;
  }

  .dia-apex .dia-mf__layer { position: absolute; display: block; max-inline-size: none; }

  /* True-alpha layers; `screen` keeps their glows additive on the dark field. */
  .dia-apex .dia-mf__layer--atmosphere { left: 0; top: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 72%; mix-blend-mode: screen; opacity: 0.7; }
  .dia-apex .dia-mf__layer--lines { left: 5%; top: -1.2%; inline-size: 90%; block-size: 104.3%; mix-blend-mode: screen; opacity: 0.9; }
  .dia-apex .dia-mf__layer--beam {
    left: 34.7%; top: -25.4%; inline-size: 30.6%; block-size: auto; mix-blend-mode: screen; opacity: 0.6;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 22%, #000 58%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 22%, #000 58%);
  }
  .dia-apex .dia-mf__layer--platform { left: 32.1%; top: 20.9%; inline-size: 35.9%; block-size: auto; }

  /* ---------- Forces: label → stem → object ---------- */
  .dia-apex .dia-mf__forces { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
  .dia-apex .dia-mf__force { position: absolute; inset: 0; pointer-events: none; }

  .dia-apex .dia-mf__label {
    position: absolute;
    left: var(--mf-x);
    top: 1.5%;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    row-gap: 3px;
    text-align: center;
    white-space: nowrap;
    z-index: 2;
  }

  .dia-apex .dia-mf__name {
    font-family: var(--font-display);
    font-size: clamp(0.8125rem, 0.5rem + 0.6vw, 1.0625rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mf-c);
  }

  .dia-apex .dia-mf__sub {
    font-size: clamp(0.625rem, 0.45rem + 0.3vw, 0.75rem);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dia-text-secondary);
  }

  /* Fine luminous marker connecting the label to the column. */
  .dia-apex .dia-mf__stem {
    position: absolute;
    left: var(--mf-x);
    top: 15.4%;
    block-size: 3.6%;
    inline-size: 1px;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--mf-c) 80%, transparent));
  }

  .dia-apex .dia-mf__art {
    position: absolute;
    display: block;
    inline-size: 20.3%;
    aspect-ratio: 1;
    top: 15.2%;
    left: calc(var(--mf-x) - 10.15%);
  }

  .dia-apex .dia-mf__img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }

  .dia-apex .dia-mf__force--price { --mf-x: 11.3%; --mf-c: #E8A55A; }
  .dia-apex .dia-mf__force--volume { --mf-x: 30.1%; --mf-c: #5C9CF0; }
  .dia-apex .dia-mf__force--structure { --mf-x: 50%; --mf-c: #3FD0C9; }
  .dia-apex .dia-mf__force--timeframes { --mf-x: 70%; --mf-c: #9C86F2; }
  .dia-apex .dia-mf__force--macro { --mf-x: 88.6%; --mf-c: #F0765A; }

  /* ---------- Result: live text inside the platform ---------- */
  .dia-apex .dia-mf__result {
    position: absolute;
    left: 50%;
    top: 73.8%; /* centre of the pedestal's dark inner disc (was 77%, ~3.2% of the stage too low) */
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: clamp(0.5625rem, 0.4rem + 0.35vw, 0.8125rem);
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-indent: 0.3em;
    color: #EAF0F2;
    text-shadow: 0 0 6px #050D14, 0 0 12px #050D14, 0 0 22px #050D14;
    white-space: nowrap;
    z-index: 2;
  }

  /* ---------- Tablet: same composition, a touch more air for the labels ---------- */
  @media (max-width: 1023px) and (min-width: 768px) {
    .dia-apex .dia-mf__head { padding-block-start: 4.5rem; }
    .dia-apex .dia-mf__stage { inline-size: 100%; }
    .dia-apex .dia-mf__sub { letter-spacing: 0.08em; }
  }

  /* ---------- < 768 px: vertical convergence ---------- */
  @media (max-width: 767px) {
    .dia-apex .dia-mf__head { padding-block-start: 4.5rem; }
    .dia-apex .dia-mf__title { max-inline-size: min(14ch, 100%); }

    .dia-apex .dia-mf__stage {
      aspect-ratio: auto;
      display: grid;
      row-gap: var(--space-4);
      padding: var(--space-5) var(--space-5) calc(var(--mf-pw) * 0.52);
      margin-block-start: var(--space-3);
    }

    .dia-apex .dia-mf__fx { inset: 0; -webkit-mask-image: none; mask-image: none; }
    .dia-apex .dia-mf__layer--atmosphere { opacity: 0.4; }
    .dia-apex .dia-mf__layer--lines,
    .dia-apex .dia-mf__layer--beam { display: none; }
    .dia-apex .dia-mf__layer--platform { top: auto; bottom: calc(-0.204 * var(--mf-pw)); left: 50%; transform: translateX(-50%); inline-size: var(--mf-pw); }

    .dia-apex .dia-mf__forces { position: relative; inset: auto; display: grid; row-gap: var(--space-4); }
    .dia-apex .dia-mf__forces::before {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-end: 2.75rem;
      inline-size: 1px;
      background: linear-gradient(to bottom, color-mix(in srgb, #E8A55A 60%, transparent), color-mix(in srgb, #5C9CF0 60%, transparent) 50%, color-mix(in srgb, #F0765A 60%, transparent));
    }

    /* Label first, then its art. */
    .dia-apex .dia-mf__force {
      position: relative;
      inset: auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 5.5rem;
      align-items: center;
      column-gap: var(--space-4);
    }

    .dia-apex .dia-mf__label { position: static; transform: none; justify-items: start; text-align: start; white-space: normal; grid-column: 1; grid-row: 1; }
    .dia-apex .dia-mf__stem { display: none; }
    .dia-apex .dia-mf__art { position: relative; inset: auto; top: auto; left: auto; inline-size: 5.5rem; grid-column: 2; grid-row: 1; }

    .dia-apex .dia-mf__result {
      position: absolute;
      left: 50%;
      top: auto;
      bottom: calc(0.2234 * var(--mf-pw) - 0.8em); /* label centre on the disc centre (was 0.146 × pw: ~19 px too low) */
      transform: translateX(-50%);
      font-size: 0.6875rem;
      z-index: 5; /* above the section exit ramp (z 3): the label must not be dissolved into the Light ramp */
    }
    .dia-apex .dia-mf__stage { z-index: auto; }
  }
}