/**
 * Collection tile (Figma 141:438 wide, 334:14337 compact). The color key
 * comes from the category's "Homepage tile color" (core plugin).
 */
.c-collection-tile {
  --tile-color: var(--color-banner-blue-600);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  block-size: 6.5625rem;
  padding-inline: var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--tile-color);
  color: var(--color-white);
  text-decoration: none;
  transition: filter var(--duration-fast) var(--easing-standard);
}

.c-collection-tile:hover {
  filter: brightness(1.06);
}

.c-collection-tile--teal { --tile-color: var(--color-banner-blue-600); }
.c-collection-tile--sky { --tile-color: var(--color-info-300); }
.c-collection-tile--orange { --tile-color: var(--color-banner-orange-500); }
.c-collection-tile--red { --tile-color: var(--color-accent-red); }
.c-collection-tile--blue { --tile-color: var(--color-accent-blue); }
.c-collection-tile--purple { --tile-color: var(--color-accent-purple); }

.c-collection-tile__text {
  display: grid;
  justify-items: start;
  gap: var(--space-6);
}

.c-collection-tile__title {
  font-family: var(--font-family-title);
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-l);
}

.c-collection-tile__icon {
  flex: none;
  inline-size: 3.75rem;
  block-size: 3.75rem;
  object-fit: contain;
}

.c-collection-tile--wide {
  block-size: 7.625rem;
}

.c-collection-tile--wide .c-collection-tile__text {
  gap: var(--space-3);
}

.c-collection-tile--wide .c-collection-tile__icon {
  inline-size: 4.25rem;
  block-size: 4.25rem;
}

.c-collection-tile--wide .c-button--lg {
  padding: 0.25rem 1rem;
  font-size: var(--font-size-s);
}

@media (min-width: 1024px) {
  .c-collection-tile,
  .c-collection-tile--wide {
    block-size: 10.25rem;
  }

  .c-collection-tile--wide {
    padding-inline: var(--space-8);
  }

  .c-collection-tile__title {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
  }

  .c-collection-tile__icon {
    inline-size: 5rem;
    block-size: 5rem;
  }

  .c-collection-tile--wide .c-collection-tile__text {
    gap: var(--space-6);
  }

  .c-collection-tile--wide .c-collection-tile__icon {
    inline-size: 6rem;
    block-size: 6rem;
  }

  .c-collection-tile--wide .c-button--lg {
    padding: 0.6875rem 1.625rem;
    font-size: var(--font-size-m);
  }
}