/* styles/sections/tool-map.css
 * "Jira stays Jira" (Product Teams: V8nlQ2, sZLkw, LfWNT): the two-column map of where work is
 * recorded and where the answer shows up (product marks are Pencil exports), the adoption
 * stats, and the closing dither edge: the shared .edge-bottom surface with tex-edge-cta-base.png
 * as its mask over fern-app and the grain, as VA0BR, PTQ6X and WI8W0 layer it. The frames cut
 * the edge at the band (46px of the 73); it runs its full height into the band instead, at the
 * shared whole-pixel tiling, as the other pages' edges do (BRI-7805 J35). */
@layer sections {
  .tool-map {
    padding-bottom: var(--section-md);
  }

  /* The band texture comes only at 1440 wide, so M keeps it at 1:1 (3px cells) too */
  .tool-map.edge-bottom {
    --edge-tex-h: 72px;
    --edge-fill: var(--fern-app);
  }

  .tool-map__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
  }

  /* ---------- Map ---------- */
  .tool-map__map {
    display: flex;
    flex-direction: column;
    gap: 36px;
  }

  .tool-map__heading {
    margin: 0 0 var(--space-10);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: round(nearest, 1.2em, 1px);
    color: var(--ink);
  }

  .tool-map__rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line-2);
    line-height: round(nearest, 1.2em, 1px);
  }

  .tool-map__row {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    padding: var(--space-14) 0 13px;
    border-bottom: 1px solid var(--line-2);
  }

  /* The name and its descriptor share a baseline, centred in the row as one (BRI-7805 J22) */
  .tool-map__name {
    display: flex;
    flex: 1 1 0;
    align-items: baseline;
    gap: var(--space-16);
    min-width: 0;
  }

  /* The list's top rule is stroked across the first row's edge, as Pencil draws it */
  .tool-map__row:first-child {
    padding-top: 13px;
  }

  .tool-map__marks {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-8);
    width: 56px;
  }

  .tool-map__tool {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
  }

  .tool-map__what {
    flex: 1 1 0;
    font-size: 14px;
    color: var(--ink-muted);
  }

  /* "and more" closes each column: the map is not the full list of tools Brief connects to */
  .tool-map__more {
    margin: var(--space-14) 0 0 calc(56px + var(--space-16));
    font-size: 14px;
    color: var(--ink-muted);
  }

  /* ---------- Adoption ---------- */
  .adoption {
    display: flex;
    flex-direction: column;
    padding-top: var(--space-40);
  }

  .adoption__stat {
    padding-top: 23px;
    border-top: 1px solid var(--rule-edge);
  }

  .adoption__stat + .adoption__stat {
    flex-direction: row;
    align-items: center;
    padding-inline: var(--space-20);
    border-left: 1px solid var(--rule-edge);
  }

  .adoption__value,
  .adoption__label {
    margin: 0;
  }

  .adoption__value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.6px;
  }

  .adoption__label {
    font-size: 15px;
    line-height: 22px;
  }

  .adoption__stat + .adoption__stat .adoption__label {
    flex: 1 1 0;
  }

  /* ---------- Dither edge into the closing band ---------- */
  .tool-map.edge-bottom::after {
    mask-image: url("/assets/textures/tex-edge-cta-base.png"), linear-gradient(var(--fern), var(--fern));
  }

  @media (width >= 900px) {
    .tool-map__inner {
      gap: var(--space-64);
    }

    /* 608 and 624 with 48 between at 1440; W keeps both and starts the second at 861 */
    .tool-map__map {
      display: grid;
      grid-template-columns: minmax(0, 608fr) minmax(0, 624fr);
      gap: var(--space-48);
      min-height: 276px;
    }

    .tool-map__heading {
      margin-bottom: 26px;
    }

    .tool-map__row,
    .tool-map__row:first-child {
      min-height: 56px;
      padding-block: 0;
    }

    .tool-map__what {
      flex: 0 1 auto;
    }

    /* Three equal columns (427 at 1440, 560 at 1920); the side padding sits inside each */
    .adoption {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .adoption__stat + .adoption__stat {
      flex-direction: column;
      align-items: stretch;
      padding-inline: var(--space-32);
    }

    .adoption__value {
      font-size: 48px;
      letter-spacing: -1px;
    }
  }

  /* W: 608 and 624 with the gap taking 253 of the 448 spare at 1920 (sOE8q: second column at
     861), the same share of whatever the container spares from 1680, so it never overflows */
  @media (width >= 1680px) {
    .tool-map__map {
      grid-template-columns: minmax(0, 608px) minmax(0, 624px);
      column-gap: max(var(--space-48), (100% - 1232px) * 253 / 448);
    }

    /* The shared W edge: 4px cells, dark side on the band */
    .tool-map.edge-bottom {
      --edge-tex-h: 96px;
      --edge-cell: 4px;
    }
  }
}