/* styles/sections/source-strip.css
 * Source strips (Status Reporting): the raw source a shot was read from, cropped from the video.
 * The Jira strip (XxLuO) is the shared media crop with a side caption. The
 * Slack source row (dpTDd, WQUCC) is an 880 crop with a 20% white edge beside its caption, 32
 * apart (stacked 24 apart on M), joined to the thread below by the exported connector (myrWn:
 * 56 in from D, 20 on M). */
@layer sections {
  /* The Jira crop box is the frame's (342 x 64 on M, 860 x 161 from D) with the shared 1px edge
     inside it, the image filling what is left */
  /* The side caption on whole-pixel lines (26 at 17px), as rxdkV, PZJDd and bq8yk draw it */
  .source-strip { --caption-side-lh: round(nearest, 1.5em, 1px); }

  .source-strip .media-crop__frame > img {
    aspect-ratio: 340 / 62;
    object-fit: cover;
  }

  .feedback-flow {
    display: flex;
    flex-direction: column;
  }

  .source-row {
    display: grid;
    gap: var(--space-24);
    margin: 0;
  }

  .source-row__crop {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    aspect-ratio: 880 / 84;
  }

  /* The edge is drawn over the crop, inside the box, as Pencil strokes it */
  .source-row__crop::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--white-20);
    border-radius: inherit;
  }

  .source-row__crop > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .source-row__caption {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    font-size: 17px;
    line-height: round(nearest, 1.5em, 1px);
    color: var(--white);
  }

  .source-row__where {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 14px;
    color: var(--white-70);
  }

  .feedback-flow__connector {
    display: block;
    margin-left: var(--space-20);
  }

  @media (width < 900px) {
    /* M frame: the crop is 342 x 33 */
    .source-row__crop { aspect-ratio: 342 / 33; }
  }

  @media (min-width: 900px) {
    /* Crop 860 and caption 356 at 1440 (rxdkV); below it both give way together, so the
       caption keeps a measure at 900 */
    .source-strip { --media-crop-columns: minmax(0, 860fr) minmax(0, 356fr); }

    .source-strip .media-crop__frame > img { aspect-ratio: 858 / 159; }

    /* Pencil wraps a line that fills the column exactly (356.0 in 356 at 1440): 1px less
       measure breaks the caption where the frame does */
    .source-strip .figure-caption--side > span:last-child { max-width: calc(100% - 1px); }

    .source-row {
      grid-template-columns: minmax(0, 880fr) minmax(0, 368fr);
      align-items: center;
      gap: var(--space-32);
    }

    .source-row__caption { gap: var(--space-8); }

    .feedback-flow__connector { margin-left: var(--space-56); }
  }

  @media (min-width: 1680px) {
    .source-strip { --media-crop-columns: 860px minmax(0, 1fr); }
    .source-row { grid-template-columns: 880px minmax(0, 1fr); }
  }
}