@layer components {
  /* ── News List: Featured Hero ── */
  .news-featured-section {
    padding: 0 var(--space-md) var(--space-xl);
  }

  .news-featured {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 12px 32px oklch(var(--lch-ink) / 0.1);
    background: linear-gradient(135deg, var(--color-primary), oklch(var(--lch-primary) / 0.8));
  }

  .news-featured__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, oklch(var(--lch-primary) / 0.9), oklch(var(--lch-primary) / 0.2), transparent);
  }

  .news-featured__content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: var(--space-xl);
    width: 100%;

    @media (min-width: 640px) {
      width: 66%;
    }
  }

  .news-featured__title {
    /* intentional: text overlay on featured article background image */
    color: oklch(var(--lch-white));
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    margin: 0;

    @media (min-width: 640px) {
      font-size: var(--text-3xl);
    }
  }

  .news-featured__meta {
    /* intentional: text overlay on featured article background image */
    color: oklch(var(--lch-white) / 0.8);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-top: var(--space-xs);
  }

  .news-featured__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}