/* Post card: a blog post in a list (ShopPost) — its picture, date, title and
   a few words; the title's link covers the card.
   data-featured  the newest post, wide, its picture beside the words */
.post-list {
  --auto-grid-min: 18rem;
}

.post-card {
  background: var(--color-surface-1);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: transform var(--duration-fast) var(--ease-out);

  &:hover {
    transform: translateY(-2px);
  }

  &:has(:focus-visible) {
    box-shadow: var(--shadow-card), 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
    outline: var(--focus-ring-width) solid transparent;
  }
}

.post-card__picture {
  aspect-ratio: 3 / 2;
  inline-size: 100%;
  object-fit: cover;
}

.post-card__text {
  --flow-space: var(--space-2xs);

  padding: var(--space-s-m);
}

.post-card__date {
  align-items: center;
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--step--1);
  gap: var(--space-2xs);
}

.post-card__title {
  font-size: var(--step-2);
  line-height: var(--leading-tight);
}

.post-card__link {
  color: inherit;
  text-decoration: none;

  &::after {
    content: "";
    inset: 0;
    position: absolute;
  }

  &:focus-visible {
    outline: none;
  }
}

.post-card__summary {
  color: var(--color-muted);
}

/* The style's pictures (data-look-images), as the post shows it (post.css) */
[data-look-images="mono"] .post-card__picture {
  filter: grayscale(1) contrast(1.06);
}

[data-look-images="duotone"] .post-card__picture {
  filter: contrast(1.1) url(#shop-duotone);
}

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

@media (min-width: 48rem) {
  .post-card[data-featured] {
    display: grid;
    grid-template-columns: 3fr 2fr;

    .post-card__picture {
      aspect-ratio: auto;
      block-size: 100%;
      min-block-size: 20rem;
    }

    .post-card__text {
      align-self: center;
      padding: var(--space-l);
    }

    .post-card__title {
      font-size: calc(var(--step-4) * var(--display-scale, 1));
    }
  }
}