/* Список анонсів /anonsy/ — окремо від новин.
 * iOS Safari: tap-target ≥44px, -webkit-overflow-scrolling не потрібен
 * (сторінка скролиться нативно).
 */

.announcements-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-24);
}

.announcement-card,
.announcement-card--static {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

a.announcement-card:hover {
  border-color: var(--c-primary);
  box-shadow: 0 8px 24px -8px rgba(13, 90, 158, 0.28);
  transform: translateY(-2px);
}

.announcement-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: linear-gradient(170deg, var(--c-primary-700) 0%, var(--c-primary-900) 100%);
  overflow: hidden;
}

.announcement-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.announcement-card__date {
  display: block;
  padding: var(--sp-12) var(--sp-20) 0;
  font-size: var(--fs-13);
  color: var(--c-text-muted);
}

.announcement-card__title {
  display: block;
  padding: var(--sp-8) var(--sp-20) var(--sp-12);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-primary-900);
  min-height: var(--tap-min);
}

.announcement-card__summary {
  display: block;
  padding: 0 var(--sp-20) var(--sp-16);
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--c-text-muted);
}

.announcements-empty {
  margin: var(--sp-32) 0;
  font-size: var(--fs-16);
  color: var(--c-text-muted);
  text-align: center;
}

/* ── Адаптив ─────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .announcements-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-20);
  }
}

@media (max-width: 600px) {
  .announcements-list {
    grid-template-columns: 1fr;
    gap: var(--sp-16);
  }

  .announcement-card__title {
    font-size: var(--fs-14);
    padding: var(--sp-8) var(--sp-16) var(--sp-10);
  }

  .announcement-card__date,
  .announcement-card__summary {
    padding-inline: var(--sp-16);
  }
}