/* Feed list, category filter, empty state, and the flush list-panel layout. */

@layer components {
  .feed__head {
    padding: 0.25rem var(--inline-space) 0.75rem;
  }

  .feed__title {
    font-size: var(--text-x-large);
    font-weight: 700;

    i {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--color-primary);
    }
  }

  .feed {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-inline: var(--inline-space);
  }

  .feed__more {
    display: flex;
    justify-content: center;
    padding: 1rem var(--inline-space) 1.5rem;

    &:empty {
      padding: 0;
    }
  }

  .feed__more-btn {
    min-inline-size: 10rem;
  }


  /* A panel that holds a list (feed, search, profile) is a flush, zero-padding
     container clipped to its rounded corners, so the full-width row hover and
     dividers meet the panel edges cleanly. Non-list content (hero, search form,
     profile header) is inset on its own. */
  .panel:has(.feed) {
    padding: 0;
    overflow: hidden;
  }

  .panel .feed {
    padding-inline: 0;
    gap: 0;
  }

  .panel .hero {
    margin: 1rem 1.5ch;
    margin-block-end: 0.75rem;
  }

  .panel:has(.feed) .search__form,
  .panel:has(.feed) .search__count {
    padding-inline: 1.5ch;
  }

  .panel:has(.feed) .search__form {
    padding-block-start: 1rem;
  }

  .panel:has(.feed) .profile__head {
    padding-inline: 1.5ch;
  }

  .panel .deal-row {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding-block: 0.75rem;
    padding-inline: 1.5ch;
    border-block-end: 1px solid var(--color-border-subtle);
    transition: background-color 0.12s ease;
  }

  @media (any-hover: hover) {
    .panel .deal-row:hover {
      background: var(--tint-ink-5);
    }
  }

  .panel .feed .deal-row:last-child {
    border-block-end: none;
  }

  .panel .feed__more {
    padding: 1rem 1.5ch;
  }

  .panel .feed__more:empty {
    padding: 0;
  }
}