/* Legacy-parity text rendering (see BlogListOld.css). */
:host,
div.blog-card-old {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
}

/* ------------------------------------------------------------------ *
 * Semantic port of the LatestBlogPosts `Post` card.
 *
 * Class naming: single-class, no BEM `__` separator; element rules nested
 * under `.blog-card-old`. The title link is `.title-link` (not `.title`) so it
 * doesn't clash with the section `.title` in the parent BlogListOld.
 *
 * Two Webflow-specific layers on top of the source declarations:
 *  1. The shared card-sizing contract (--card-*) so a slot host can reflow the
 *     rail into a wider row. Defaults reproduce the legacy `flex: 0 0 240px`;
 *     !important is required to win over the source `flex` shorthand.
 *  2. The sibling-shrink hover, driven by custom properties set on the rail.
 * ------------------------------------------------------------------ */

.blog-card-old {
  scroll-snap-align: start;
  list-style: none;
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
  flex-grow: var(--card-grow, 0) !important;
  flex-shrink: var(--card-shrink, 0) !important;
  flex-basis: var(--card-basis, 240px) !important;
  width: 240px;
  max-width: var(--card-max, 240px) !important;
  min-width: 0;
  scale: var(--blog-card-target-scale, 1);
  opacity: var(--blog-card-target-opacity, 1);
  transition: scale 250ms ease, opacity 250ms ease;

  @media (pointer: fine) {
    &:hover,
    &:focus-within {
      --blog-card-target-scale: 1;
      --blog-card-target-opacity: 1;
    }
  }

  /* ── PostLink (image wrapper) ── color inherit / no underline / pointer. */
  .link {
    color: inherit !important;
    text-decoration: none;
    cursor: pointer;
  }

  /* ── PostImage ── */
  .image {
    display: block;
    width: 240px;
    height: 200px;
    object-fit: cover;
  }

  /* ── PostContent ── */
  .content {
    padding: 1rem;
  }

  /* ── PostLink (title) ── Typography bodyLgMedium, color inherit /
   * no underline / pointer. */
  .title-link {
    color: inherit !important;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0.3px;
  }
}