/*
 * DIA CAPITAL — Section 10A · Apex Membership — FINAL (frozen for this phase). V2.1 architecture + the image-icon block at the end.
 * Previous: src/archive/section-10a-v1.0/section-10a.css (original); section-10a-v2.css / section-10a-v2-1.css (tests).
 *
 * Requires the base system (main.css). Fills dia.sections; scoped under .dia-apex. PAGE THEME: a true
 * Light adaptation (tokens swap; geometry is shared). Static; pure CSS / inline SVG.
 *
 * ≥ 960 px: five stations along one horizontal rail (portal above, stem, rail node, number + name below);
 * station 05 is open-ended (dashed continuation) and the membership note hangs under it.
 * < 960 px: a vertical path (rail at the left, station rows), the note at its end.
 */

@layer dia.sections {
  .dia-apex .dia-mem2 {
    --mem-bronze: #B6783C;
    --mem-blue: #3D8BFF;
    --mem-rail: color-mix(in srgb, var(--dia-text) 18%, transparent);
    --mem-portal-bg: linear-gradient(180deg, color-mix(in srgb, var(--dia-text) 6%, var(--dia-surface)), var(--dia-surface));
    --mem-edge: color-mix(in srgb, var(--dia-text) 14%, transparent);
    --mem-portal: 5.25rem;
    --mem-stem: 1.75rem;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--dia-bg);
    color: var(--dia-text);
  }

  .dia-apex .dia-mem2 {
    --mem-bronze-text: var(--dia-accent-text-raised);
  }

  .dia-theme-light .dia-apex .dia-mem2 {
    --mem-bronze: #A8662A;
    --mem-blue: #2F6FD0;
    --mem-rail: color-mix(in srgb, var(--dia-text) 22%, transparent);
    --mem-portal-bg: linear-gradient(180deg, #FFFFFF, #F4F5F5);
    --mem-edge: color-mix(in srgb, var(--dia-text) 13%, transparent);
  }

  /* Local atmosphere: the page returns from the dark custody chapter; a soft Bronze / blue lift behind the rail. */
  .dia-apex .dia-mem2::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 60% 34% at 50% 0%, rgb(201 138 75 / 0.07), transparent 70%),
      radial-gradient(ellipse 50% 30% at 50% 62%, rgb(61 139 255 / 0.06), transparent 72%);
  }

  .dia-theme-light .dia-apex .dia-mem2::before {
    background:
      radial-gradient(ellipse 60% 34% at 50% 0%, rgb(168 102 42 / 0.07), transparent 70%),
      radial-gradient(ellipse 50% 30% at 50% 62%, rgb(47 111 208 / 0.05), transparent 72%);
  }

  .dia-apex .dia-mem2__eyebrow { margin: 0; color: var(--mem-bronze-text); }
  .dia-apex .dia-mem2__title { margin-block-start: var(--space-4); }

  .dia-apex .dia-mem2__system {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-block-start: var(--space-9);
  }

  .dia-apex .dia-mem2__steps { grid-column: 1 / -1; }

  /* ---------- Steps ---------- */

  .dia-apex .dia-mem2__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* The rail: one continuous Bronze → blue line behind the nodes, running past station 05 (dashed). */
  .dia-apex .dia-mem2__steps::before {
    content: "";
    position: absolute;
    inset-inline: 0 0;
    inset-block-start: calc(var(--mem-portal) + var(--mem-stem) + 5px);
    block-size: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--mem-bronze) 0, var(--mem-bronze) 14%, var(--mem-blue) 100%);
    opacity: 0.85;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
  }

  .dia-apex .dia-mem2__step {
    position: relative;
    display: grid;
    justify-items: start;
    padding-inline-end: var(--space-4);
  }

  .dia-apex .dia-mem2__portal {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--mem-portal);
    block-size: var(--mem-portal);
    border: 1px solid var(--mem-edge);
    border-radius: var(--radius-lg);
    background: var(--mem-portal-bg);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 18px 34px -24px rgb(0 0 0 / 0.7);
    color: var(--mem-bronze);
  }

  .dia-theme-light .dia-apex .dia-mem2__portal {
    box-shadow: inset 0 1px 0 #fff, 0 16px 30px -22px rgb(12 28 36 / 0.35);
  }

  /* Inner frame: a second hairline reads as a portal opening. */
  .dia-apex .dia-mem2__portal::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid color-mix(in srgb, var(--mem-bronze) 28%, transparent);
    border-radius: calc(var(--radius-lg) - 6px);
  }

  .dia-apex .dia-mem2__portal svg {
    inline-size: 2.1rem;
    block-size: 2.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .dia-apex .dia-mem2__stem {
    inline-size: 1px;
    block-size: var(--mem-stem);
    margin-inline-start: calc(var(--mem-portal) / 2);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--mem-bronze) 55%, transparent), var(--mem-bronze));
  }

  .dia-apex .dia-mem2__node {
    inline-size: 12px;
    block-size: 12px;
    margin-inline-start: calc(var(--mem-portal) / 2 - 5.5px);
    border: 2px solid var(--mem-bronze);
    border-radius: 50%;
    background: var(--dia-bg);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mem-bronze) 14%, transparent);
  }

  .dia-apex .dia-mem2__label {
    display: grid;
    row-gap: var(--space-1);
    margin-block-start: var(--space-4);
  }

  .dia-apex .dia-mem2__num {
    font-size: var(--dia-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--mem-bronze-text);
  }

  .dia-apex .dia-mem2__name {
    font-family: var(--font-display);
    font-size: var(--dia-fs-h4);
    font-weight: 600;
    line-height: 1.25;
    color: var(--dia-text);
  }

  /* Progression: the later stations' portals brighten slightly (sequence, not ranking). */
  .dia-apex .dia-mem2__step:nth-child(2) .dia-mem2__portal { border-color: color-mix(in srgb, var(--mem-bronze) 20%, var(--mem-edge)); }
  .dia-apex .dia-mem2__step:nth-child(3) .dia-mem2__portal { border-color: color-mix(in srgb, var(--mem-bronze) 32%, var(--mem-edge)); }
  .dia-apex .dia-mem2__step:nth-child(4) .dia-mem2__portal { border-color: color-mix(in srgb, var(--mem-bronze) 46%, var(--mem-edge)); }

  /* 05: open-ended, in the tech blue (continued availability while active). */
  .dia-apex .dia-mem2__step--ongoing .dia-mem2__portal {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--mem-blue) 60%, transparent);
    color: var(--mem-blue);
  }

  .dia-apex .dia-mem2__step--ongoing .dia-mem2__portal::before { border-color: color-mix(in srgb, var(--mem-blue) 28%, transparent); }
  .dia-apex .dia-mem2__step--ongoing .dia-mem2__stem { background: linear-gradient(to bottom, color-mix(in srgb, var(--mem-blue) 55%, transparent), var(--mem-blue)); }
  .dia-apex .dia-mem2__step--ongoing .dia-mem2__node { border-color: var(--mem-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mem-blue) 16%, transparent); }

  /* ---------- Membership note: a calm system condition tied to station 05 ---------- */

  .dia-apex .dia-mem2__note {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0 0;
    grid-column: 4 / -1;
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--mem-edge);
    border-inline-start: 2px solid var(--mem-blue);
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, color-mix(in srgb, var(--mem-blue) 7%, transparent), transparent 70%), var(--dia-surface);
    font-size: var(--dia-fs-small);
    line-height: 1.55;
    color: var(--dia-text);
  }

  /* A short connector from the note up toward station 05. */
  .dia-apex .dia-mem2__note::before {
    content: "";
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: calc(50% + var(--mem-portal) / 2);
    inline-size: 1px;
    block-size: var(--space-5);
    background: linear-gradient(to top, var(--mem-blue), transparent);
  }

  .dia-apex .dia-mem2__note-mark {
    flex: none;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--mem-blue);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mem-blue) 18%, transparent);
  }

  /* ---------- < 960 px: vertical path ---------- */

  @media (max-width: 959px) {
    .dia-apex .dia-mem2__system { grid-template-columns: minmax(0, 1fr); margin-block-start: var(--space-7); }

    .dia-apex .dia-mem2__steps {
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--space-4);
      max-inline-size: 40rem;
    }

    /* The rail becomes the vertical spine through the node column. */
    .dia-apex .dia-mem2__steps::before {
      inset-inline: auto;
      inset-inline-start: calc(var(--mem-portal) + 1.5rem + 5px);
      inset-block: 2.5rem 2.5rem;
      inline-size: 2px;
      block-size: auto;
      background: linear-gradient(to bottom, var(--mem-bronze) 0, var(--mem-bronze) 14%, var(--mem-blue) 100%);
      -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
    }

    .dia-apex .dia-mem2 { --mem-portal: 4rem; --mem-stem: 1.5rem; }

    .dia-apex .dia-mem2__step {
      grid-template-columns: var(--mem-portal) var(--mem-stem) 12px minmax(0, 1fr);
      grid-template-areas: "portal stem node label";
      align-items: center;
      justify-items: start;
      column-gap: 0;
      padding-inline-end: 0;
    }

    .dia-apex .dia-mem2__portal { grid-area: portal; }

    .dia-apex .dia-mem2__stem {
      grid-area: stem;
      inline-size: var(--mem-stem);
      block-size: 1px;
      margin: 0;
      background: linear-gradient(to right, color-mix(in srgb, var(--mem-bronze) 55%, transparent), var(--mem-bronze));
    }

    .dia-apex .dia-mem2__step--ongoing .dia-mem2__stem { background: linear-gradient(to right, color-mix(in srgb, var(--mem-blue) 55%, transparent), var(--mem-blue)); }

    .dia-apex .dia-mem2__node { grid-area: node; margin: 0; }

    .dia-apex .dia-mem2__label {
      grid-area: label;
      grid-auto-flow: column;
      justify-content: start;
      align-items: baseline;
      column-gap: var(--space-4);
      margin: 0 0 0 var(--space-4);
    }

    .dia-apex .dia-mem2__portal svg { inline-size: 1.75rem; block-size: 1.75rem; }

    .dia-apex .dia-mem2__note {
      grid-column: 1;
      max-inline-size: 40rem;
      margin: var(--space-5) 0 0;
    }

    .dia-apex .dia-mem2__note::before { inset-inline-end: auto; inset-inline-start: calc(var(--space-6)); }
  }

  @media (max-width: 479px) {
    .dia-apex .dia-mem2__title { max-inline-size: 14ch; }
    .dia-apex .dia-mem2__system { margin-block-start: var(--space-6); }
    .dia-apex .dia-mem2__steps { row-gap: var(--space-3); }
    .dia-apex .dia-mem2__label { column-gap: var(--space-3); margin-inline-start: var(--space-3); }
    .dia-apex .dia-mem2__name { font-size: var(--dia-fs-body); }
    .dia-apex .dia-mem2__note { padding: var(--space-3) var(--space-4); }
  }
}

/* =====================================================================
 * V2.1 — descriptions, upgraded icon modules, section-level note
 * ===================================================================== */
@layer dia.sections {
  .dia-apex .dia-mem2__intro {
    max-inline-size: 42rem;
    margin: var(--space-4) 0 0;
    font-size: var(--dia-fs-body);
    line-height: 1.6;
    color: var(--dia-text-secondary);
    text-wrap: pretty;
  }

  .dia-apex .dia-mem2__system { margin-block-start: var(--space-8); }

  /* The icon module carries its own slab / rim / frame: the V2 portal chrome is removed. */
  .dia-apex .dia-mem2__portal {
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    color: inherit;
  }

  .dia-apex .dia-mem2__portal::before { content: none; }

  .dia-apex .dia-mem2__step .dia-mem2__portal,
  .dia-apex .dia-mem2__step--ongoing .dia-mem2__portal { border: 0; }

  .dia-apex .dia-mem2__portal .dia-mem2__icon {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    fill: none;
    stroke: none;
  }

  .dia-apex .dia-mem2__glyph { filter: drop-shadow(0 0 3px rgb(201 138 75 / 0.55)); }
  .dia-apex .dia-mem2__step--ongoing .dia-mem2__glyph { filter: drop-shadow(0 0 3px rgb(77 141 232 / 0.6)); }
  .dia-theme-light .dia-apex .dia-mem2__icon { filter: drop-shadow(0 14px 18px rgb(12 28 36 / 0.28)); }

  .dia-apex .dia-mem2__step { align-content: start; }

  .dia-apex .dia-mem2__label { row-gap: var(--space-1); }

  .dia-apex .dia-mem2__name { font-size: var(--dia-fs-body); font-weight: 600; line-height: 1.3; }

  .dia-apex .dia-mem2__desc {
    margin-block-start: var(--space-1);
    font-size: var(--dia-fs-small);
    font-weight: 400;
    line-height: 1.55;
    color: var(--dia-text-secondary);
    text-wrap: pretty;
  }

  /* Plan-variation note: a calm, full-system condition below the architecture (no connector). */
  .dia-apex .dia-mem2__note {
    display: block;
    inline-size: auto;
    max-inline-size: 48rem;
    margin: var(--space-7) 0 0;
    padding: var(--space-3) 0 0;
    border: 0;
    border-block-start: 1px solid var(--mem-edge);
    border-radius: 0;
    background: none;
    font-size: var(--dia-fs-small);
    line-height: 1.55;
    color: var(--dia-text-secondary);
  }

  .dia-apex .dia-mem2__note::before { content: none; }

  /* Vertical path now below 1100 px so five description columns never get narrow. */
  @media (min-width: 960px) and (max-width: 1099px) {
    .dia-apex .dia-mem2__system { grid-template-columns: minmax(0, 1fr); }

    .dia-apex .dia-mem2 { --mem-portal: 4rem; --mem-stem: 1.5rem; }

    .dia-apex .dia-mem2__steps {
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--space-5);
      max-inline-size: 44rem;
    }

    .dia-apex .dia-mem2__steps::before {
      inset-inline: auto;
      inset-inline-start: calc(var(--mem-portal) + 1.5rem + 5px);
      inset-block: 2.5rem 2.5rem;
      inline-size: 2px;
      block-size: auto;
      background: linear-gradient(to bottom, var(--mem-bronze) 0, var(--mem-bronze) 14%, var(--mem-blue) 100%);
      -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
    }

    .dia-apex .dia-mem2__step {
      grid-template-columns: var(--mem-portal) var(--mem-stem) 12px minmax(0, 1fr);
      grid-template-areas: "portal stem node label";
      align-items: center;
      justify-items: start;
      padding-inline-end: 0;
    }

    .dia-apex .dia-mem2__portal { grid-area: portal; }
    .dia-apex .dia-mem2__stem { grid-area: stem; inline-size: var(--mem-stem); block-size: 1px; margin: 0; background: linear-gradient(to right, color-mix(in srgb, var(--mem-bronze) 55%, transparent), var(--mem-bronze)); }
    .dia-apex .dia-mem2__step--ongoing .dia-mem2__stem { background: linear-gradient(to right, color-mix(in srgb, var(--mem-blue) 55%, transparent), var(--mem-blue)); }
    .dia-apex .dia-mem2__node { grid-area: node; margin: 0; }
    .dia-apex .dia-mem2__label { grid-area: label; margin: 0 0 0 var(--space-4); }
  }

  /* Vertical path (< 1100): number + title on one row, the description underneath. */
  @media (max-width: 1099px) {
    .dia-apex .dia-mem2__label {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      grid-auto-flow: row;
      align-items: baseline;
      column-gap: var(--space-3);
      row-gap: 2px;
    }

    .dia-apex .dia-mem2__num { grid-column: 1; grid-row: 1; }
    .dia-apex .dia-mem2__name { grid-column: 2; grid-row: 1; }
    .dia-apex .dia-mem2__desc { grid-column: 2; grid-row: 2; margin-block-start: 0; }

    .dia-apex .dia-mem2__note { margin-block-start: var(--space-6); }
  }

  @media (max-width: 959px) {
    .dia-apex .dia-mem2__steps { row-gap: var(--space-5); }
  }

  @media (max-width: 479px) {
    .dia-apex .dia-mem2__steps { row-gap: var(--space-4); }
    .dia-apex .dia-mem2__desc { font-size: 0.8125rem; line-height: 1.5; }
    .dia-apex .dia-mem2__intro { font-size: var(--dia-fs-small); }
    .dia-apex .dia-mem2__system { margin-block-start: var(--space-5); }
  }
}

/* =====================================================================
 * FINAL — supplied PNG icon modules (transparent WebP derivatives) replace the inline SVG layer.
 * Same 84 px footprint; the artwork carries ~6 % transparent padding, so the image is drawn at 106 %
 * to match the previous tile's visible size. No frame, no filter, no recolour.
 * ===================================================================== */
@layer dia.sections {
  .dia-apex .dia-mem2__portal .dia-mem2__icon {
    position: absolute;
    inset: -3%;
    display: block;
    inline-size: 106%;
    block-size: 106%;
    max-inline-size: none;
    object-fit: contain;
    filter: none;
  }

  .dia-theme-light .dia-apex .dia-mem2__icon { filter: drop-shadow(0 12px 14px rgb(12 28 36 / 0.22)); }
}