/* styles/sections/decision-flow.css
 * "Brief is the product strategy agent" (frames: What is Brief, Header): the heading block and the
 * decision flow figure. 1440 and 1920: where it was decided, a fern bracket and arrow, the
 * decision, an arrow and bracket, who works from it, in one row. 390: the same pieces stacked,
 * joined by short fern lines and down arrows. Brackets and lines are the frames' 1.5px fern
 * rules; the arrows and source marks are Pencil exports. */
@layer sections {
  .what-is {
    padding-block: var(--section-xl);
  }

  .what-is__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-20);
    padding-bottom: var(--space-48);
  }

  .what-is__heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-display-md-size);
    font-weight: 600;
    line-height: var(--t-display-md-lh);
    letter-spacing: var(--t-display-md-ls);
  }

  .what-is__lede {
    margin: 0;
    max-width: 624px;
    font-size: 17px;
    line-height: 1.6;
  }

  .what-is__actions {
    padding-top: var(--space-4);
  }

  .home-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-16) var(--space-20);
  }

  /* ---------- Flow ---------- */
  .flow {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-bottom: var(--space-48);
  }

  .flow__grid {
    display: flex;
    flex-direction: column;
  }

  .flow__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
  }

  .flow__label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.4px;
    color: var(--ink-muted);
  }

  .flow__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .flow__card {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    min-height: 56px;
    padding: var(--space-6) var(--space-12);
    border: 1px solid var(--line);
    background: var(--white);
  }

  .flow__mark {
    flex: none;
    display: block;
  }

  .flow__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .flow__source {
    font-size: 12px;
    line-height: 1.2;
    color: var(--ink-muted);
  }

  .flow__item {
    font-size: 14px;
    line-height: 1.2;
    color: var(--ink);
  }

  .flow__connector {
    display: none;
  }

  .flow__connector-m {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6) 0;
  }

  .flow__vline {
    width: 1.5px;
    height: 22px;
    background: var(--fern);
  }

  .flow__arrow {
    display: block;
    flex: none;
  }

  .flow__decision-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-10);
    padding: var(--space-20);
    background: var(--white);
    box-shadow: inset 0 0 0 1.5px var(--fern);
  }

  .flow__decision-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.15;
  }

  .flow__decision-meta {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-muted);
  }

  .flow__caption {
    padding-top: var(--space-16);
  }

  @media (width >= 900px) {
    .what-is__head {
      gap: var(--space-40);
      padding-bottom: var(--space-80);
    }

    .what-is__lede {
      font-size: 18px;
    }

    .what-is__actions {
      margin-top: -12px;
      padding-top: 0;
      gap: var(--space-16) var(--space-24);
    }

    .flow {
      gap: var(--space-16);
      padding-bottom: var(--space-96);
    }

    .flow__grid {
      display: grid;
      grid-template-columns: minmax(0, 300px) minmax(28px, 1fr) minmax(0, 320px) minmax(28px, 1fr) minmax(0, 300px);
      align-items: center;
    }

    .flow__connector-m {
      display: none;
    }

    .flow__connector {
      display: flex;
      min-width: 0;
      align-items: center;
      padding-top: 25px;
    }

    .flow__bracket {
      flex: none;
      box-sizing: border-box;
      width: 28px;
      height: 204px;
      border: 1.5px solid var(--fern);
    }

    .flow__connector--in .flow__bracket {
      border-left: 0;
    }

    .flow__connector--out .flow__bracket {
      border-right: 0;
    }

    .flow__line {
      flex: 1;
      height: 1.5px;
      background: var(--fern);
    }

    .flow__connector .flow__arrow {
      margin-left: -6px;
    }

    .flow__connector--out .flow__arrow {
      margin-right: -6px;
    }

    .flow__decision {
      padding-top: 25px;
    }

    .flow__caption {
      padding-top: 0;
    }
  }

  @media (width >= 1680px) {
    .what-is {
      --container-max: 1440px;
    }

    .what-is__head {
      padding-inline: 80px;
    }
  }
}

/* Pencil sets every line on a whole pixel (88 x 0.95 = 84, 18 x 1.6 = 29, 17 x 1.6 = 27);
   these rounded line heights keep the page's text boxes the frames' size. */
@layer sections {
  .what-is__heading {
    line-height: round(nearest, 0.95em, 1px);
  }

  .what-is__lede {
    line-height: round(nearest, 1.6em, 1px);
  }
}