/* styles/sections/review-states.css
 * Review states beside a product shot (Personas "Row" PRRYI, M6keZ): three ruled states (rule,
 * mono index, serif head, body) in a 300 column, 56 from the persona list window, which fills
 * the rest of the row from D. On M the states stack above the window, 32 apart. */
@layer sections {
  .call {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
  }

  .call__states {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .call-state {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: var(--space-20) 0 28px;
    box-shadow: inset 0 1px 0 var(--line-2);
  }

  .call-state__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-14);
  }

  .call-state__title {
    font-size: 19px;
    line-height: normal;
    letter-spacing: -0.01em;
  }

  .call-state__body {
    margin: 0;
    font-size: 15px;
    line-height: 23px;
    color: var(--ink-2);
  }

  .call .ui-window--call {
    flex: 1;
    min-width: 0;
  }

  @media (min-width: 900px) {
    .call {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--space-56);
    }

    .call__states {
      flex: none;
      width: 300px;
    }

    .call-state__title {
      font-size: 24px;
      line-height: 25px;
    }
  }

  @media (min-width: 1680px) {
    .call-state__title {
      font-size: 28px;
      line-height: 29px;
      letter-spacing: -0.015em;
    }
  }

  /* The rule is an inset shadow, inside the box as Pencil draws it; a border in forced colors */
  @media (forced-colors: active) {
    .call-state {
      border-top: 1px solid CanvasText;
    }
  }
}