/**
 * News archive.
 *
 * Three columns with the Listing Grid's own gaps — 36px across, 60px down.
 * Heading follows the same accent pattern as the page heroes: first word bold,
 * the rest regular.
 */

.deka-news {
  width: min(100% - 2.5rem, var(--deka-container-wide));
  margin-inline: auto;
  padding-block: var(--deka-space-2xl) var(--deka-space-3xl);
}

.deka-news__title {
  margin: 0 0 var(--deka-space-2xl);
  font-family: var(--deka-font-display);
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem); /* 30 → 48 */
  font-weight: var(--deka-weight-regular);
  line-height: 1.1667;
  letter-spacing: var(--deka-tracking-tight);
  color: var(--deka-text);
}

.deka-news__title-accent { font-weight: var(--deka-weight-bold); }

.deka-news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 36px;
  row-gap: 60px;
}

/* ==========================================================================
   Card
   ========================================================================== */

.deka-news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.deka-news-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--deka-space-md);
  border-radius: var(--deka-radius-sm);
  overflow: hidden;
  background: var(--deka-surface-sunken);
}

.deka-news-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--deka-duration-slow) var(--deka-ease-out);
}

.deka-news-card:hover .deka-news-card__image { transform: scale(1.04); }

.deka-news-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--deka-sand-100), var(--deka-surface-sunken));
}

.deka-news-card__title {
  margin: 0 0 var(--deka-space-md);
  font-family: var(--deka-font-display);
  font-size: 1.25rem; /* 20 */
  font-weight: var(--deka-weight-semibold);
  line-height: 1.35;
  color: var(--deka-text);
}

/* :hover pinned too: the global a:hover (base.css) outranks a bare class, and
   with the link stretched over the card any hover turned the title grey. */
.deka-news-card__link,
.deka-news-card__link:hover {
  color: inherit;
  text-decoration: none;
}

/* Not positioned itself, so this resolves against .deka-news-card and covers
   the whole card rather than just the words of the title. */
.deka-news-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.deka-news-card__link:focus-visible {
  outline: 2px solid var(--deka-focus-ring);
  outline-offset: 3px;
}

/* --- Foot: date, tag, read more -------------------------------------------- */

.deka-news-card__foot {
  display: flex;
  align-items: center;
  gap: var(--deka-space-sm);
  margin-top: auto;
  padding-top: var(--deka-space-sm);
  border-top: 1px solid var(--deka-divider);
}

.deka-news-card__date {
  font-family: var(--deka-font-display);
  font-size: var(--deka-text-sm);
  color: var(--deka-text);
}

.deka-news-card__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--deka-space-3xs);
  font-family: var(--deka-font-display);
  font-size: var(--deka-text-sm);
  color: var(--deka-text);
  white-space: nowrap;
}

.deka-news-card__tag-dot {
  width: 6px;
  height: 6px;
  background: var(--deka-oxblood-700);
}

.deka-news-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--deka-space-2xs);
  margin-left: auto;
  padding: var(--deka-space-xs) var(--deka-space-md);
  border: 1px solid var(--deka-border);
  font-family: var(--deka-font-display);
  font-size: var(--deka-text-sm);
  font-weight: var(--deka-weight-medium);
  letter-spacing: var(--deka-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--deka-text);
  transition: border-color var(--deka-duration-base) var(--deka-ease-out),
              color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-news-card__more svg {
  width: 16px;
  height: 16px;
  transition: transform var(--deka-duration-base) var(--deka-ease-out);
}

.deka-news-card:hover .deka-news-card__more {
  border-color: var(--deka-oxblood-700);
  color: var(--deka-oxblood-700);
}

.deka-news-card:hover .deka-news-card__more svg { transform: translateX(3px); }

/* ==========================================================================
   Pagination / empty
   ========================================================================== */

.deka-news__pagination {
  margin-top: var(--deka-space-2xl);
}

.deka-news__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--deka-space-2xs);
  border: 1px solid var(--deka-border);
  font-family: var(--deka-font-display);
  font-size: var(--deka-text-sm);
  text-decoration: none;
  color: var(--deka-text);
}

.deka-news__pagination .page-numbers.current,
.deka-news__pagination .page-numbers:hover {
  border-color: var(--deka-oxblood-700);
  color: var(--deka-oxblood-700);
}

.deka-news__pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--deka-space-2xs);
  justify-content: center;
}

.deka-news__empty {
  padding-block: var(--deka-space-2xl);
  font-size: var(--deka-text-md);
  color: var(--deka-text-muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 64rem) { /* 1024 */
  .deka-news__grid { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
}

@media (max-width: 40rem) { /* 640 */
  .deka-news__grid { grid-template-columns: 1fr; row-gap: 40px; }

  /* The button would otherwise push the date and tag onto their own cramped
     line; letting the row wrap keeps all three readable. */
  .deka-news-card__foot { flex-wrap: wrap; }
  .deka-news-card__more { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .deka-news-card:hover .deka-news-card__image { transform: none; }
  .deka-news-card:hover .deka-news-card__more svg { transform: none; }
}