/* Product-scoped styles for Activity for ClickUp marketing pages only (§33). */

@layer product {

  :root {
    --accent: light-dark(#15803d, #4ade80);
    --tint: light-dark(#f0f7f2, #141c17);
  }

  /* Guides list on the product page, matching follo's "By problem" list. */

  .guide-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--border);
    text-align: start;

    & p {
      color: var(--text-muted);
      font-size: .875rem;
    }
  }

  .guide-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    column-gap: var(--space-8);
    padding: 0;
    text-align: start;

    & li {
      max-inline-size: none;
    }

    & a {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
      block-size: 100%;
      padding: var(--space-4) 2px;
      border-block-end: 1px solid var(--border);
      color: var(--text);
      font-weight: 600;
      line-height: 1.45;
      text-decoration: none;
      text-wrap: pretty;

      &:hover {
        color: var(--accent);
      }
    }
  }

  .guide-tag {
    flex: none;
    margin-block-start: 2px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
}