@layer components {
  /* A category that is home to a product kind (Minnekort): filters on
     normalized specs, what each use needs, and what each size costs. */

  .kind-intro {
    color: var(--color-muted);
    margin-block-start: var(--block-space-half);
    max-inline-size: 65ch;
  }

  /* "Hva skal kortet brukes til?": one row per use, the minimum it needs
     and the cheapest card meeting it. The row is the link: it applies
     the minimum as filters. */
  .use-cases {
    padding: var(--block-space);
    border-radius: 1.5rem;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-soft);
    container-type: inline-size;
  }

  /* Folded once the shopper filters: the title, the use they picked and a
     chevron on one line. */
  .use-cases__summary {
    display: grid;
    cursor: pointer;
    gap: var(--block-space-quarter) var(--inline-space);
    grid-template-columns: minmax(0, 1fr) auto;
    list-style: none;
    place-items: center start;

    [open] > & {
      margin-block-end: var(--block-space-quarter);
    }

    @container (min-width: 36rem) {
      grid-template-columns: auto minmax(0, 1fr) auto;
    }
  }

  .use-cases__title {
    font-size: var(--text-xl);
    font-weight: 700;
  }

  .use-cases__chosen {
    overflow: hidden;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background-color: var(--color-tag-bg);
    font-size: var(--text-sm);
    font-weight: 600;
    grid-column: 1;
    grid-row: 2;
    max-inline-size: 100%;
    min-inline-size: 0;
    text-overflow: ellipsis;
    white-space: nowrap;

    @container (min-width: 36rem) {
      grid-column: 2;
      grid-row: 1;
    }
  }

  .use-cases__toggle {
    color: var(--color-muted);
    grid-column: -2;
    grid-row: 1;
    transition: transform 200ms;

    [open] > .use-cases__summary & {
      transform: rotate(180deg);
    }
  }

  /* multiply melts a photo's white backdrop into the tint. */
  .use-cases__row--chosen {
    border-radius: 0.75rem;
    background-color: var(--color-tag-bg);
    margin-inline: calc(var(--inline-space-half) * -1);
    padding-inline: var(--inline-space-half);

    .use-cases__photo {
      mix-blend-mode: multiply;
    }
  }

  /* On the current chip: clicking it again clears the filter. */
  .variant-selector__chip-clear {
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  /* The listing's grid already spaces the ladders. */
  .content > .variant-selector {
    margin-block-start: 0;
  }

  .use-cases__item:not(:last-child) {
    border-block-end: 1px solid var(--color-border);
  }

  /* The whole row is the link, with the category tile's hover. */
  .use-cases__row {
    display: grid;
    align-items: center;
    color: var(--color-ink);
    gap: 0 var(--inline-space);
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    padding-block: var(--block-space-quarter);
    text-decoration: none;

    @container (min-width: 36rem) {
      grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr) 7rem;
    }
  }

  a.use-cases__row:hover {
    .use-cases__photo {
      transform: scale(1.05);
    }

    .use-cases__label {
      color: var(--color-primary-hover);
    }

    .use-cases__price {
      text-decoration: underline;
    }
  }

  /* The phone-width category tile's thumbnail. overflow and font size
     keep a failed image's alt text inside its box. */
  .use-cases__photo {
    overflow: hidden;
    padding: var(--block-space-quarter);
    aspect-ratio: 1;
    color: var(--color-muted);
    font-size: var(--text-xs);
    grid-row: 1 / span 2;
    inline-size: 3.5rem;
    object-fit: contain;
    transition: transform 300ms;

    @container (min-width: 36rem) {
      grid-row: auto;
    }
  }

  .use-cases__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background-color: var(--color-tag-bg);

    .material-icons-outlined {
      font-size: 1.75rem;
    }
  }

  /* Two lines beside a taller photo: held together in the middle. */
  .use-cases__label {
    align-self: end;
    font-weight: 600;

    @container (min-width: 36rem) {
      align-self: auto;
    }
  }

  .use-cases__requirement {
    align-self: start;
    color: var(--color-muted);
    font-size: var(--text-sm);
    grid-column: 2;
    grid-row: 2;

    @container (min-width: 36rem) {
      align-self: auto;
      grid-column: auto;
      grid-row: auto;
    }
  }

  .use-cases__price {
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    grid-column: 3;
    grid-row: 1 / span 2;
    text-align: end;
    white-space: nowrap;

    @container (min-width: 36rem) {
      grid-column: auto;
      grid-row: auto;
    }
  }

  .use-cases__price--none {
    color: var(--color-muted);
    font-weight: 500;
  }

  /* Listing cards in a kind's category: the specs under the name, the
     price per GB under the price. */
  .product__specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-quarter);
    margin-block-start: var(--block-space-half);
  }

  .product__spec {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--color-separator);
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 500;
  }

  .product__unit-price {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
  }
}