.article-feed {
  --card-max-width: 400px;
  --card-height: 440px;
  --card-padding: 24px;
  --card-title-lines: 3;
  width: 100%;
  min-width: 0;
  max-width: calc(var(--feed-columns, 1) * var(--card-max-width) + (var(--feed-columns, 1) - 1) * var(--space-5));
  margin-inline: auto;

  margin-top: var(--space-7);

  display: grid;

  grid-template-columns:
    repeat(var(--feed-columns, 1), minmax(0, 1fr));

  gap: var(--space-5);

  align-items: stretch;
}

.article-card {
  position: relative;

  width: 100%;
  min-width: 0;
  max-width: 100%;

  height: var(--card-height);
  min-height: 0;

  display: grid;

  grid-template-columns: minmax(0, 1fr);
  grid-template-rows:
    calc(var(--h4-line) * var(--card-title-lines) + var(--card-padding))
    calc(var(--text-small-line) * 2 + var(--space-3) + var(--card-padding))
    minmax(0, 1fr);

  overflow: hidden;

  border-radius: var(--radius-2xl);

  background: var(--surface-raised);

  box-shadow: var(--shadow-panel);

  transition:
    box-shadow 320ms var(--ease-out),
    transform 320ms var(--ease-out);
}

.article-card:hover,
.article-card:focus-within {
  box-shadow: var(--shadow-panel-hover);

  transform: translateY(-3px);
}

.article-card-title,
.article-card-description {
  padding-inline: var(--card-padding);

  min-width: 0;

  overflow-wrap: break-word;
}

.article-card-title {
  grid-row: 1;
  block-size: calc(var(--h4-line) * var(--card-title-lines));

  margin: var(--card-padding) 0 0;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--card-title-lines);
  line-clamp: var(--card-title-lines);

  overflow: hidden;
}

.article-card-title a {
  color: inherit;

  transition: color var(--motion-ui);
}

.article-card-title a:hover {
  color: var(--brand);
}

.article-card-title a::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 3;
}

.article-card-description {
  grid-row: 2;
  block-size: calc(var(--text-small-line) * 2);
  position: relative;
  z-index: 4;

  margin: var(--space-3) 0 var(--card-padding);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;

  overflow: hidden;
}

.article-card-media {
  grid-row: 3;

  min-height: 0;

  height: 100%;
  aspect-ratio: auto;
}

.article-card-read {
  position: absolute;
  z-index: 4;
  pointer-events: none;

  right: var(--space-5);
  bottom: var(--space-5);

  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: var(--radius-pill);

  background: var(--surface-raised);

  color: var(--brand);

  box-shadow: var(--shadow-sm);

  transition:
    background-color var(--motion-ui),
    color var(--motion-ui),
    transform 320ms var(--ease-out);
}

.article-card-read svg {
  display: block;

  stroke: currentColor;

  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-card:hover .article-card-read {
  background: var(--surface-raised);

  color: var(--brand);

  transform: translateX(3px);
}

@media (max-width: 1024px) {

  .article-feed {
    margin-top: var(--space-6);

    gap: var(--space-5);
  }



}

@media (max-width: 720px) {

  .article-feed {
    gap: var(--space-5);
  }

  .article-card {
    border-radius: var(--radius-xl);
  }

}

/* Mobile uses the compact medium card; desktop-only large feeds scale down
   to medium cards on tablets so two columns remain readable. */
@media (max-width: 639px) {
  .article-feed { --card-height: 380px; --card-padding: 20px; }
}

.article-card:focus-within { outline: 3px solid var(--brand); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .article-card:hover .media-frame--zoom img { transform: scale(1.04); }
}
@media (hover: none) {
  .article-card:hover { transform: none; }
}

@media (min-width: 640px) { .article-feed { --feed-columns: 2; } }
@media (min-width: 1180px) {
  .article-feed { --feed-columns: 3; }
  .article-feed--large {
    --feed-columns: 2;
    --card-max-width: 592px;
    --card-height: 520px;
    --card-padding: 32px;
  }
}


.article-card a:focus-visible { outline-offset: -3px; }