/* styles/sections/persona-split.css
 * Layout for the feature rows under "Brief is the product strategy agent" (Web App, MCP server and
 * CLI) and the three persona sections (frames: For Director, For Head of AI, For CPTO).
 * Persona headings are h2 on 390, display-sm on 1440 and h1 on 1920, as the frames set them.
 * The section rules on these frames run the full width of the page. */
@layer sections {
  /* ---------- Feature rows ---------- */
  .feature-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding-block: var(--space-48);
    box-shadow: inset 0 1px 0 var(--line);
  }

  .feature-row--mcp {
    padding-bottom: var(--space-48);
  }

  .feature-row__rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  /* Line heights are the frames' whole-pixel lines (Pencil rounds 23 x 1.05, 17 x 1.6, 18 x 1.6) */
  .feature-row__title {
    margin: 0;
    font-size: var(--t-h4-size);
    line-height: 24px;
    letter-spacing: var(--t-h4-ls);
  }

  .feature-row__body {
    margin: 0;
    font-size: 17px;
    line-height: 27px;
    color: var(--ink-muted);
  }

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

  /* The index sits on the step's first baseline (BRI-7805 J22) */
  .feature-row__step {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: baseline;
    font-size: 17px;
    line-height: 27px;
  }

  .feature-row__step .index {
    line-height: 1.5;
  }

  .feature-row__figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    margin: 0;
  }

  /* From 900px the rail and the figure share a row; below about 1100px of content the figure
     wraps under the rail (rail on top in both rows), so neither is squeezed. */
  @media (width >= 900px) {
    .feature-row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--space-32);
      padding-block: var(--space-80);
    }

    .feature-row__rail {
      flex: 0 1 405px;
    }

    .feature-row__figure {
      flex: 1 1 600px;
      min-width: 0;
    }

    /* MCP: the figure leads on the row; wrapped, the rail stays above it */
    .feature-row--mcp {
      flex-direction: row-reverse;
      justify-content: flex-end;
      column-gap: var(--space-48);
      padding-bottom: 0;
    }

    .feature-row__title {
      line-height: 34px;
    }

    .feature-row__body {
      font-size: 18px;
      line-height: 29px;
    }

    .feature-row__steps {
      gap: var(--space-16);
      padding: var(--space-8) 0 0;
    }

    .feature-row__step {
      grid-template-columns: 28px minmax(0, 1fr);
      font-size: 18px;
      line-height: 29px;
    }
  }

  @media (width >= 1680px) {
    .feature-row {
      padding-inline: 80px;
    }

    .feature-row__title {
      line-height: 42px;
    }
  }

  /* ---------- Persona sections ---------- */
  .persona {
    padding-block: var(--section-xl);
  }

  /* Section rules run the full width inside the section's height, as the frames draw them */
  .persona--director,
  .persona--cpto {
    box-shadow: inset 0 1px 0 var(--line);
  }

  .persona--ai {
    padding-bottom: var(--section-lg);
    overflow-x: clip;
  }

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

  .persona__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-20);
  }

  .persona__copy .stage-strip {
    align-self: stretch;
  }

  /* The persona CTAs are primary buttons (BRI-7805 J21); the longest label wraps inside its
     button below about 340px rather than overflow it */
  .persona__copy .btn,
  .persona__intro .btn {
    max-width: 100%;
    white-space: normal;
  }

  .persona__heading,
  .persona__intro .section-intro__heading {
    margin: 0;
    font-size: var(--t-h2-size);
    line-height: var(--t-h2-lh);
    letter-spacing: var(--t-h2-ls);
    text-wrap: wrap;
  }

  .persona__body {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
  }

  .persona__figure,
  .persona__wide-figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
    margin: 0;
  }

  .persona__intro {
    --intro-gap: var(--space-20);
    --intro-lede-pad: 0px;
    --intro-lede-size: 17px;
    --intro-lede-lh: 1.6;
  }

  .persona__intro .section-intro__lede {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-20);
  }

  .persona__intro .section-intro__lede > p {
    margin: 0;
  }

  .persona__intro .stage-strip {
    align-self: stretch;
  }

  .persona--cpto > .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
  }

  @media (width >= 900px) {
    .persona__split {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-56) var(--space-96);
    }


    .persona__figure {
      flex: 1 1 600px;
      min-width: 0;
    }

    /* Director: the figure leads on the row; wrapped, the copy stays above it */
    .persona--director .persona__split {
      flex-direction: row-reverse;
      justify-content: flex-end;
    }

    .persona__copy {
      flex: 0 1 460px;
      gap: 28px;
      padding-top: var(--space-8);
    }

    /* 64px at 1280 of content; narrower content scales it down */
    .persona__heading,
    .persona__intro .section-intro__heading {
      font-size: min(var(--t-display-sm-size), (100vw - 2 * var(--page-gutter)) * 0.05);
      line-height: var(--t-display-sm-lh);
      letter-spacing: var(--t-display-sm-ls);
    }

    .persona__body {
      font-size: 18px;
    }

    .persona__figure,
    .persona__wide-figure {
      gap: var(--space-16);
    }

    /* Head of AI: copy, then the dark card running off the right edge of the page */
    .persona--ai > .container {
      display: flex;
      flex-direction: column;
      gap: var(--space-96);
    }

    .persona__split--bleed {
      align-items: flex-start;
    }

    .persona__split--bleed .persona__copy {
      flex-basis: 440px;
    }

    .persona__figure--bleed {
      --bleed: calc((100vw - min(100vw, var(--container-max) + 2 * var(--page-gutter))) / 2 + var(--page-gutter));
      min-height: 436px;
      margin-right: calc(-1 * var(--bleed));
    }

    .persona__intro {
      --intro-lede-pad: var(--space-6);
      --intro-lede-size: 18px;
      --intro-heading-measure: 760px;
    }

    .persona__intro .section-intro__lede {
      gap: var(--space-24);
    }

    .persona--cpto > .container {
      gap: var(--space-56);
    }
  }

  @media (width >= 1680px) {
    .persona {
      --container-max: 1280px;
    }

    .persona--cpto {
      --container-max: 1440px;
    }

    .persona--cpto .persona__intro {
      padding-inline: 80px;
    }

    .persona__heading,
    .persona__intro .section-intro__heading {
      font-size: var(--t-h1-size);
      line-height: var(--t-h1-lh);
      letter-spacing: var(--t-h1-ls);
    }

    .persona__split--bleed {
      margin-right: -80px;
    }

    .persona__figure--bleed {
      margin-right: 0;
    }
  }
}

/* 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 {
  .persona__heading,
  .persona__intro .section-intro__heading {
    line-height: round(nearest, 1.05em, 1px);
  }

  .persona__body,
  .persona__intro {
    --intro-lede-lh: round(nearest, 1.6em, 1px);
    line-height: round(nearest, 1.6em, 1px);
  }

  @media (width >= 900px) and (width < 1680px) {
    .persona__heading,
    .persona__intro .section-intro__heading {
      line-height: round(nearest, 0.95em, 1px);
    }
  }
}