/* Component: TaxonomyOfGoods ----------------------------------------------- */
@layer components {
  .tp-taxonomy {
    position: relative;
    padding: 6cqw 0;
    container-type: inline-size;
    background: var(--tp-color-paper);
  }

  /* Backdrop: the supplied frame, contained and faded top/bottom as exported. */
  .tp-taxonomy__backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.0554) 3.43%, rgba(0, 0, 0, 0.1983) 6.86%, rgba(0, 0, 0, 0.3936) 10.29%, rgba(0, 0, 0, 0.6064) 13.71%, rgba(0, 0, 0, 0.8017) 17.14%, rgba(0, 0, 0, 0.9446) 20.57%, rgba(0, 0, 0, 1) 24%, rgba(0, 0, 0, 1) 41.33%, rgba(0, 0, 0, 1) 58.67%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 0.9446) 79.43%, rgba(0, 0, 0, 0.8017) 82.86%, rgba(0, 0, 0, 0.6064) 86.29%, rgba(0, 0, 0, 0.3936) 89.71%, rgba(0, 0, 0, 0.1983) 93.14%, rgba(0, 0, 0, 0.0554) 96.57%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.0554) 3.43%, rgba(0, 0, 0, 0.1983) 6.86%, rgba(0, 0, 0, 0.3936) 10.29%, rgba(0, 0, 0, 0.6064) 13.71%, rgba(0, 0, 0, 0.8017) 17.14%, rgba(0, 0, 0, 0.9446) 20.57%, rgba(0, 0, 0, 1) 24%, rgba(0, 0, 0, 1) 41.33%, rgba(0, 0, 0, 1) 58.67%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 0.9446) 79.43%, rgba(0, 0, 0, 0.8017) 82.86%, rgba(0, 0, 0, 0.6064) 86.29%, rgba(0, 0, 0, 0.3936) 89.71%, rgba(0, 0, 0, 0.1983) 93.14%, rgba(0, 0, 0, 0.0554) 96.57%, rgba(0, 0, 0, 0) 100%);
  }

  .tp-taxonomy__frame {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .tp-taxonomy__inner {
    position: relative;
    max-width: 40cqw;
    margin-inline: auto;
  }

  .tp-taxonomy__head {
    text-align: center;
  }

  .tp-taxonomy__heading {
    font-weight: var(--tp-weight-medium);
    font-size: max(15px, 2.4cqw);
    letter-spacing: var(--tp-track-h);
    text-transform: uppercase;
    line-height: var(--tp-leading-heading);
    color: var(--tp-color-deep-blue);
  }

  .tp-taxonomy__lead {
    margin-top: 0.8cqw;
    font-size: max(11px, 1.5cqw);
    font-style: italic;
    font-weight: var(--tp-weight-light);
    color: var(--tp-color-deep-blue);
  }

  .tp-taxonomy__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6cqw;
    margin-top: 2.4cqw;
  }

  .tp-taxonomy__card {
    display: block;
    transition: transform var(--tp-dur-fast) ease, filter var(--tp-dur-fast) ease;
  }

  .tp-taxonomy__card:hover {
    transform: translateY(-4px);
    filter: drop-shadow(var(--tp-shadow-drop-warm));
  }

  /* Artwork: natural 4:5 ratio, never cropped or stretched, no backing. */
  .tp-taxonomy__art {
    display: block;
    width: 100%;
    height: auto;
  }

  @media (max-width: 1099px) {
    .tp-taxonomy__inner {
      max-width: 54cqw;
    }

    /* Three columns through tablet: the specimen grid keeps its shape. */
    .tp-taxonomy__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 2.4cqw;
      margin-top: 3cqw;
    }

    /* Taller section: tile the frame at full width so the ephemera keeps
       running down both edges instead of zooming into blank paper. */
    .tp-taxonomy__backdrop {
      background: var(--tp-taxonomy-tile) center top / 100% auto repeat-y;
    }

    .tp-taxonomy__frame {
      display: none;
    }
  }

  @media (max-width: 699px) {
    .tp-taxonomy {
      padding: 10cqw 0;
    }

    .tp-taxonomy__inner {
      max-width: 420px;
      padding-inline: var(--tp-gutter);
      box-sizing: content-box;
    }

    .tp-taxonomy__heading {
      font-size: 19px;
    }

    .tp-taxonomy__lead {
      margin-top: 6px;
      font-size: 15px;
    }

    /* Two columns on phones: a specimen grid rather than a single file, and
       the printed labels stay at roughly desktop size. */
    .tp-taxonomy__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 22px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tp-taxonomy__card:hover {
      transform: none;
    }
  }
}