/* styles/editorial-index-list.css
 * Blog index pieces, split from editorial-index.css by concern: featured post, filter (tabs
 * and search), post list and pagination. Load it right after editorial-index.css (same layer,
 * same order as before the split); the --ed-* properties it reads are set on the index roots
 * in editorial-index.css. */
@layer editorial {
  /* Featured post: fern, copy left, two key figures right */
  .featured-post {
    display: grid;
    gap: var(--space-24);
    padding: 48px var(--page-gutter) 56px;
  }

  .featured-post__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
    min-width: 0;
  }

  .featured-post__kicker {
    margin: 0;
    font-family: var(--font-display);
    font-size: 17px;
    font-style: italic;
    color: var(--white-70);
  }

  .featured-post__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--ed-featured-title);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: var(--ed-featured-title-ls);
    color: var(--white);
    text-wrap: balance;
  }

  .featured-post__deck {
    margin: 18px 0 0;
    font-size: 18px;
    font-style: italic;
    line-height: 1.5;
    color: var(--white-80);
  }

  /* Read link: a plain white link on a 2px rule as wide as the label, 5px under the text
     (frame Read Link row). The board's chip lives on ::after behind the label and rule, so
     the rule keeps the label width: 25% white on hover, white with fern text when pressed. */
  .featured-post__read {
    position: relative;
    isolation: isolate;
    margin-top: var(--space-4);
    padding-bottom: 5px;
    border-bottom: 2px solid var(--white);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--white);
    text-decoration: none;
    transition: color var(--dur-fast);
  }

  .featured-post__read::after {
    content: "";
    position: absolute;
    inset: -3px -6px -2px;
    z-index: -1;
    border-radius: var(--radius-sm);
    transition: background-color var(--dur-fast);
  }

  .featured-post__read:hover::after {
    background: var(--white-25);
  }

  .featured-post__read:active {
    color: var(--fern);
  }

  .featured-post__read:active::after {
    background: var(--white);
  }

  .featured-post__read::before {
    content: "";
    position: absolute;
    inset: -8px 0;
  }

  /* Without figures (featured_figure_1 absent) the copy takes the whole band; the deck keeps
     the frames' 760px measure. */
  .featured-post__copy:only-child {
    grid-column: 1 / -1;
  }

  .featured-post__copy:only-child .featured-post__deck {
    max-width: 760px;
  }

  .featured-post__aside {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--space-4);
    margin: 0;
  }

  .featured-post__figure {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding-block: 18px;
    border-bottom: 1px solid var(--white-20);
  }

  .featured-post__figure:first-child {
    padding-top: 0;
  }

  .featured-post__figure dt {
    font-size: 15px;
    color: var(--white-70);
  }

  .featured-post__figure dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--ed-featured-fig);
    font-weight: 600;
    line-height: var(--ed-featured-fig-lh);
    letter-spacing: var(--ed-featured-fig-ls);
    color: var(--white);
  }

  .featured-post__figure--accent dd {
    color: var(--orange);
  }

  .featured-post__note {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-style: italic;
    color: var(--white-70);
  }

  /* Copy and aside split 733:515 of the content box on D and 960:560 on W */
  @media (min-width: 900px) {
    .featured-post {
      grid-template-columns: minmax(0, 440fr) minmax(0, 309fr);
      align-items: end;
      gap: var(--space-32);
      padding-block: 64px 96px;
    }

    .featured-post__kicker {
      font-size: 18px;
    }

    .featured-post__deck {
      font-size: 20px;
    }

    .featured-post__read {
      font-size: 18px;
    }
  }

  @media (min-width: 1680px) {
    .featured-post {
      grid-template-columns: minmax(0, 12fr) minmax(0, 7fr);
      column-gap: 160px;
      padding-block: 96px 115px;
    }
  }

  /* Filter: tabs (links or buttons) with an optional search link. M wraps the tabs into
     44px ruled rows with search at the end of the last row; D and W are one 56px row. */
  /* 32px above the first tab label on M (the row centers the label in 44px), 32 and 40 on D
     and W, as the frames' Filter Bar padding. */
  .index-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0 var(--space-24);
    margin-top: 19px;
    background: repeating-linear-gradient(to bottom, transparent 0 43px, var(--ink-16) 43px 44px);
  }

  .index-filter__tabs {
    display: contents;
  }

  .index-filter__tabs > li {
    display: flex;
  }

  .index-filter__tab {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--ink-2);
    text-decoration: none;
    transition: color var(--dur-fast);
  }

  .index-filter__tab:hover {
    color: var(--ink);
  }

  .index-filter__tab[aria-current] {
    font-weight: 600;
    color: var(--ink);
    text-decoration: underline 2px var(--orange);
    text-underline-offset: 5px;
  }

  .index-filter__search {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: none;
    min-height: 44px;
    margin-inline-start: auto;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
  }

  .index-filter__search::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: currentcolor;
    -webkit-mask: url("/assets/figures/ds/search.svg") center / contain no-repeat;
    mask: url("/assets/figures/ds/search.svg") center / contain no-repeat;
  }

  @media (min-width: 900px) {
    .index-filter {
      flex-wrap: nowrap;
      justify-content: space-between;
      gap: var(--space-24);
      margin-top: var(--space-32);
      background: none;
      border-bottom: 1px solid var(--ink-16);
    }

    .index-filter__tabs {
      display: flex;
      gap: 36px;
      margin: 0;
      padding: 0;
      overflow-x: auto;
      list-style: none;
    }

    .index-filter__tab {
      min-height: 56px;
      border-bottom: 2px solid transparent;
    }

    .index-filter__tab[aria-current] {
      border-bottom-color: var(--orange);
      text-decoration: none;
    }

    .index-filter__search {
      min-height: 56px;
    }
  }

  @media (min-width: 1680px) {
    .index-filter {
      margin-top: var(--space-40);
    }
  }

  /* Post list: rule under every item. M stacks a meta row (number, time) over the copy;
     D is number | copy | time; W lays the list in two 792px columns. */
  .post-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .post-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "number time" "copy copy";
    gap: var(--space-8) var(--space-24);
    padding: var(--space-20) 0;
    border-bottom: 1px solid var(--ink-16);
    color: var(--ink);
    text-decoration: none;
  }

  .post-list > li:last-child .post-list-item {
    border-bottom: 0;
  }

  .post-list-item__number {
    grid-area: number;
  }

  .post-list-item__time {
    grid-area: time;
  }

  .post-list-item__number,
  .post-list-item__time {
    font-size: 14px;
    line-height: 2;
    color: var(--ink-2);
  }

  .post-list-item__copy {
    grid-area: copy;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
  }

  .post-list-item__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--ed-list-title);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ink);
  }

  .post-list-item:hover .post-list-item__title {
    color: var(--fern);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .post-list-item__deck {
    margin: 0;
    max-width: 720px;
    font-family: var(--font-body);
    font-size: 17px;
    font-style: italic;
    line-height: 1.6;
    color: var(--ink-2);
  }

  @media (min-width: 900px) {
    .post-list-item {
      grid-template-columns: 187px minmax(0, 1fr) 80px;
      grid-template-areas: "number copy time";
      gap: var(--space-32);
      padding: var(--space-20) 0 var(--space-24);
    }

    .post-list-item__time {
      text-align: end;
    }

    .post-list-item__deck {
      font-family: var(--font-display);
      line-height: 1.45;
    }
  }

  @media (min-width: 1680px) {
    /* Two columns that read down, as the frame's Column A and B. */
    .post-list {
      padding-top: var(--space-24);
      columns: 2;
      column-gap: var(--space-96);
    }

    .post-list > li {
      break-inside: avoid;
    }

    .post-list-item {
      grid-template-columns: 96px minmax(0, 1fr) 80px;
      gap: var(--space-24);
      padding: var(--space-24) 0 26px;
    }
  }

  /* Pagination: Earlier, then ranges of issue numbers. The label sits on the post list's
     number column from D. */
  .index-pagination {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: var(--space-32) 0 72px;
  }

  .index-pagination__label {
    font-family: var(--font-display);
    font-size: 20px;
    font-style: italic;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }

  .index-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12) var(--space-20);
    line-height: 1.2;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Range links take the fern arrow-link states (actions board): mint chip on hover, fern
     chip with white text when pressed, background only, 120ms. */
  .index-pagination a {
    padding: 3px 6px;
    margin: -3px -6px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 500;
    color: var(--fern);
    text-decoration: none;
    transition: background-color var(--dur-fast), color var(--dur-fast);
  }

  .index-pagination a:hover {
    background: var(--mint);
  }

  .index-pagination a:active {
    background: var(--fern);
    color: var(--white);
  }

  .index-pagination a[aria-current] {
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
  }

  @media (min-width: 900px) {
    .index-pagination {
      flex-direction: row;
      align-items: flex-end;
      gap: var(--space-32);
      padding: var(--space-40) 0 120px;
    }

    .index-pagination__label {
      flex: none;
      width: 187px;
      font-size: 24px;
    }

    .index-pagination ul {
      gap: var(--space-12) var(--space-32);
    }
  }

  @media (min-width: 1680px) {
    .index-pagination {
      padding-bottom: 144px;
    }

    .index-pagination__label {
      font-size: 28px;
    }
  }
}