fizzy/app/assets/stylesheets/card-columns.css

@layer components {
  /* Columns
  /* ------------------------------------------------------------------------ */

  /* Card contents are resized via container queries. We're using #main here as
     the primary container so all cards have the same container reference */
  #main:has(.card-columns) {
    --cards-gap: min(2cqi, 1rem);
    --gradient-border: linear-gradient(to right,var(--color-canvas), var(--color-ink-lighter) 3%, var(--color-ink-lighter) 97%, var(--color-canvas));
    --reserved-bubble-space: calc(var(--bubble-size) + var(--bubble-gap));
    --bubble-gap: 0.5rem;
    --bubble-size: 4rem;

    container-type: inline-size;
    max-inline-size: 1400px;

    @media (max-width: 639px) {
      --bubble-gap: -0.5rem;
      --bubble-size: 3rem;
      --reserved-bubble-space: calc(var(--bubble-size) / 2 + var(--bubble-gap));
    }
  }

  .card-columns {
    margin: auto;
    max-inline-size: 100%;
    position: relative;

    &:before {
      background: var(--gradient-border);
      block-size: 1px;
      content: "";
      inset: 0 -0.6em 100% -0.6em;
      position: absolute;
    }

    @media (min-width: 640px) {
      display: grid;
      grid-template-columns: repeat(2, 50%);
    }
  }

  /* Cards
  /* ------------------------------------------------------------------------ */

  .cards {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--cards-gap);
    justify-content: start;
    padding: 0 var(--reserved-bubble-space) var(--cards-gap) var(--cards-gap);
    position: relative;

    /* Make sure filter dialogs don't end up behind sticky headers */
    &:has([open]) {
      z-index: 3;
    }

    &:first-child {
      @media (min-width: 640px) {
        border-inline-end: 1px solid var(--color-ink-lighter);
        padding-inline: var(--reserved-bubble-space) var(--cards-gap);
      }
    }

    @media (max-width: 639px) {
      padding-block-end: calc(var(--cards-gap) * 2);
      padding-inline-start: var(--reserved-bubble-space);
    }

    .card {
      --block-space: 1em;
      --block-space-half: 0.5em;
      --text-xx-large: 2em;

      /* Set lower limit for font size */
      font-size: clamp(0.45rem, 0.85cqi, 100px);
    }

    .card__title {
      pointer-events: none;
    }

    .card__link {
      z-index: 1;
    }

    .card__hide-on-index {
      display: none;
    }

    .card__background {
      .card:has(& img:not([src=""])) {
        .card__body,
        .card__meta,
        .workflow-stage:not(.workflow-stage--current) {
          opacity: 0;
          transition: opacity 0.2s ease-in-out;

          @media (any-hover: hover) {
            .card:hover & {
              opacity: 1;
            }
          }
        }
      }

      @media (any-hover: hover) {
        .card:hover & {
          img:not([src=""]) {
            filter: blur(3px) brightness(1.2);
            opacity: 0.2;
          }
        }
      }
    }
  }

  /* Column elements
  /* ------------------------------------------------------------------------ */

  .cards__heading {
    background-color: var(--color-canvas);
    display: flex;
    font-size: var(--text-medium);
    inset-block-start: 0;
    justify-content: center;
    margin-block-start: 1px;
    margin-inline: calc(-1 * var(--cards-gap) + 1px);
    padding-block: var(--cards-gap);
    position: sticky;
    z-index: 2;

    &, button {
      font-weight: bold;
      text-transform: uppercase;
    }

    button {
      --hover-size: 0;

      inline-size: auto;
      margin-inline-start: 2em;
      padding: 0 2em 0 0;
    }

    dialog {
      font-weight: normal;
      text-transform: none;
    }
  }

  /* Considering
  /* ------------------------------------------------------------------------ */

  .cards--considering {
    padding-inline-start: calc(var(--cards-gap) / 2);

    .card {
      --text-xx-large: 1.6em;
      --text-small: 1.1em;

      background-color: var(--color-canvas);
      line-height: 1.2;

      .avatar {
        block-size: 2.75em;
        inline-size: 2.75em;
      }
    }

    .card--drafted {
      --card-color: var(--color-ink-medium) !important;

      border-color: var(--card-color) !important;
      border-style: dashed !important;
      box-shadow: none !important;
    }

    .card__collection {
      background-color: var(--color-canvas);
      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
    }

    .card__collection-name {
      border-inline-start: 1px solid color-mix(in srgb, var(--color-ink) 33%, var(--color-canvas));
      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
    }

    .card__header {
      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
    }

    .card__title {
      margin-block-start: 0.1em;
      min-block-size: 0;
    }

    .card__people-label {
      display: none;
    }

    .card__body {
      padding-inline: 0;
    }

    .card__tags {
      font-size: var(--text-small);
    }
  }

  /* Doing
  /* ------------------------------------------------------------------------ */

  @media (max-width: 639px) {
    .cards--doing:before {
      background: var(--gradient-border);
      block-size: 1px;
      content: "";
      inset: 0 0 auto;
      position: absolute;
    }
  }

  /* Closed
  /* ------------------------------------------------------------------------ */

  .cards--closed {
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    inline-size: 100%;
    margin: 0 auto;
    position: relative;

    &:before {
      background: var(--gradient-border);
      block-size: 1px;
      content: "";
      inset: 0 -0.6em 100% -0.6em;
      position: absolute;
    }

    @media (max-width: 639px) {
      flex-direction: column;
      padding-inline: var(--reserved-bubble-space);
    }

    .cards__heading {
      min-inline-size: 100%;

      @media (max-width: 639px) {
        margin-inline-end: calc(-1 * var(--cards-gap));
      }
    }

    .card {
      @media (min-width: 640px) {
        inline-size: calc((100% - var(--cards-gap)) / 2);
      }

      @media (min-width: 960px) {
        inline-size: calc((100% - var(--cards-gap) * 2) / 3);
      }

      &:nth-of-type(7) {
        margin-block-start: var(--cards-gap);
      }

      &:nth-of-type(n+7) {
        background-color: var(--color-canvas);
        border: none;
        border-block-end: 1px solid var(--color-ink-lighter);
        box-shadow: none;
        inline-size: 100%;
        margin-inline: auto;
        max-inline-size: 110ch;
        padding-block: 0 var(--cards-gap);

        .card__meta {
          display: none;
        }

        .card__body {
          padding-block-end: 0;
        }

        .card__closed {
          aspect-ratio: unset;
          border-width: 0.5ch;
          font-size: 0.75em;
          inset: auto 0 var(--card-padding-block) auto;
          transform: none;
        }

        .card__closed-by-line,
        .card__closed-date {
          display: none;
        }

        .card__header {
          margin: 0;
        }

        .card__title {
          min-block-size: 0;
        }
      }
    }
  }

  /* Doing
  /* ------------------------------------------------------------------------ */

  .cards--doing {
    padding-inline-end: calc(var(--cards-gap) / 2);
  }
}