/* styles/sections/chapter-index.css
 * A workflow hero with an "In this video" chapter list (scripts/lib/workflow-page.js, hero.index):
 * heading, deck and actions on the left, the list beside them on D and W (below them on M), the
 * player full width underneath. A hero with hero.meta or hero.stacked places the list itself. The list is text,
 * not a control; the player's chapters seek. The player's own sizing is the workflow hero's.
 * Geometry is the Decision History frames (GDoqz 1440, Ak0Hy 390, xWIIy 1920). */
@layer sections {
  /* Hero: display-lg role at weight 600 (52, 88, 120), deck 18 then 21, lines on whole pixels as
     Pencil draws them (88 x 0.95 is 84, 21 x 1.45 is 30). M: heading, deck and actions 24 apart,
     the list 40 below the actions, the player 32 below the list. */
  .workflow-hero:not(.workflow-hero--meta, .workflow-hero--stacked):has(.chapter-index) {
    --workflow-hero-gap: var(--space-24);
    --workflow-hero-media-gap: var(--space-32);
    --workflow-hero-heading-size: var(--t-display-lg-size);
    --workflow-hero-heading-lh: round(nearest, var(--t-display-lg-lh) * 1em, 1px);
    --workflow-hero-heading-ls: var(--t-display-lg-ls);
    --workflow-hero-heading-weight: 600;
    --workflow-hero-deck-size: var(--t-body-lg-size);
    --workflow-hero-deck-lh: round(nearest, 1.45em, 1px);
    --workflow-hero-deck-measure: 600px;
  }

  .workflow-hero:not(.workflow-hero--meta, .workflow-hero--stacked):has(.chapter-index) .workflow-hero__actions {
    justify-self: start;
    margin-top: 0;
  }

  .workflow-hero:not(.workflow-hero--meta, .workflow-hero--stacked):has(.chapter-index) .chapter-index { margin-top: calc(var(--space-40) - var(--workflow-hero-gap)); }

  /* D and W: the list is a 400 column 64 right of the copy, its last row level with the actions */
  @media (min-width: 900px) {
    .workflow-hero:not(.workflow-hero--meta, .workflow-hero--stacked):has(.chapter-index) {
      --workflow-hero-gap: var(--space-32);
      --workflow-hero-media-gap: var(--space-56);
      --workflow-hero-deck-size: 21px;
    }

    .workflow-hero:not(.workflow-hero--meta, .workflow-hero--stacked):has(.chapter-index) .workflow-hero__inner {
      grid-template-columns: minmax(0, 1fr) 400px;
      grid-template-areas:
        "heading index"
        "deck index"
        "actions index"
        "media media";
      column-gap: var(--space-64);
    }

    .workflow-hero:not(.workflow-hero--meta, .workflow-hero--stacked):has(.chapter-index) .chapter-index {
      grid-area: index;
      align-self: end;
      margin-top: 0;
    }
  }

  .workflow-hero:not(.workflow-hero--meta, .workflow-hero--stacked):has(.chapter-index) :is(.workflow-hero__deck, .chapter-index__head) { text-wrap: wrap; }

  /* ---------- The list: label and runtime, then ruled rows of timecode and title ---------- */
  .chapter-index__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    margin: 0;
    padding-bottom: var(--space-12);
  }

  .chapter-index__label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--white-70);
  }

  .chapter-index__runtime,
  .chapter-index__time {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0.2px;
    color: var(--white-70);
  }

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

  /* The rule is drawn inside the row, as Pencil draws strokes: 1 + 13 above the text */
  .chapter-index__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    padding-block: 13px var(--space-14);
    border-top: 1px solid var(--white-18);
  }

  .chapter-index__title {
    font-size: 16px;
    line-height: 19px;
    color: var(--white);
  }

  @media (min-width: 900px) {
    .chapter-index__head {
      flex-direction: row;
      align-items: baseline;
      justify-content: space-between;
    }

    .chapter-index__row {
      flex-direction: row;
      align-items: center;
    }
  }
}