/*
 * The grants overview: a search and funder filter above a board of four
 * columns -- draft, submitted, won, cancelled & lost -- each a list of paper
 * cards (GrantCardComponent) an editor drags between columns
 * (grant_board_controller.js).
 */
@layer components {
  .grant-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: var(--space-4);
    max-inline-size: var(--width-reading);
    margin-block-end: var(--space-7);

    & > p {
      margin: 0;
      max-inline-size: none;
    }

    & :is(input, select) {
      inline-size: 100%;
      max-inline-size: 100%;
    }
  }

  .grant-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
  }

  .grant-column {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    min-block-size: calc(var(--space-10) * 3);
    margin: 0;
    padding: var(--space-3);
    border: 1px dashed transparent;
    border-radius: var(--radius-m);
    background: var(--color-surface-2);

    & > * {
      margin: 0;
      max-inline-size: none;
    }

    main & + & {
      margin-block-start: 0;
    }
  }

  .grant-column__title {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding-inline: var(--space-2);
    font: var(--text-body-strong);
    color: var(--color-ink);
  }

  .grant-column__count {
    font: var(--text-caption);
    color: var(--color-muted);
  }

  .grant-column__cards {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    padding: 0;

    & > li + li {
      margin-block-start: 0;
    }
  }

  .grant-column__empty {
    display: none;
    padding: var(--space-2);
    font: var(--text-small);
    color: var(--color-subtle);
  }

  .grant-column:not(:has(.grant-card)) .grant-column__empty {
    display: block;
  }

  /* Cancelled & lost: two drop halves, shown only while a card is dragged. */
  .grant-column__zones {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .grant-board:has(.grant-card--dragging) .grant-column__zones {
    display: grid;
  }

  .grant-column__zone {
    margin: 0;
    padding: var(--space-5) var(--space-2);
    border: 1px dashed var(--color-subtle);
    border-radius: var(--radius-s);
    background: var(--color-paper);
    font: var(--text-small);
    color: var(--color-muted);
    text-align: center;
  }

  /* The column or half a dragged card is over. */
  .grant-board__target--over {
    border-color: var(--color-text);
    background: var(--color-surface);
  }

  .grant-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: var(--border);
    border-radius: var(--radius-m);
    background: var(--color-paper);

    &:hover {
      border-color: var(--color-text);
    }

    &[draggable="true"] {
      cursor: grab;
    }

    & > * {
      margin: 0;
      max-inline-size: none;
    }
  }

  .grant-card--dragging {
    opacity: 0.4;
  }

  .grant-card__title {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-2);
    font: var(--text-body-strong);
  }

  /* The name links to the grant's page; it reads as a heading. */
  .grant-card__open {
    color: var(--color-ink);
    text-decoration: none;

    &:hover {
      color: var(--color-ink);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;
    }
  }

  /* The introduction, cut to three lines. */
  .grant-card__summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font: var(--text-small);
    color: var(--color-muted);
  }

  .grant-card__facts {
    font: var(--text-caption);
    color: var(--color-subtle);
  }
}