/* ============================================================
 * News index (/blog/*) — v3 design system.
 * The page reuses the shop's .shop-* layout (container, sidebar
 * filters, toolbar, pager, mobile drawer) from general.css. The
 * only news-specific element is the article list — horizontal
 * cards, thumb-left / text-right.
 * ============================================================ */

/* ─── Article list ──────────────────────────────────────────── */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.news-item {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background: var(--hp-bg, #ffffff);
  border: 1px solid var(--hp-hairline, #e6e8ec);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease,
    transform 160ms ease;
}

.news-item:hover {
  border-color: var(--hp-hairline-strong, #c8ccd3);
  box-shadow: var(--bsh-300, 0 5px 15px rgba(0, 0, 0, 0.05));
  transform: translateY(-2px);
}

@media (max-width: 599px) {
  .news-item {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }
  .news-item-thumb { aspect-ratio: 16 / 9; }
  .news-item-body { padding: 18px; }
}

/* Thumbnail */
.news-item-thumb {
  display: block;
  width: 100%;
  height: 100%;
  align-self: stretch;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: hidden;
  background: #f7f9fb;
}

.news-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.news-item:hover .news-item-img {
  transform: scale(1.04);
}

/* When an article has no thumb, the body spans the full width. */
.news-item:not(:has(.news-item-thumb)) {
  grid-template-columns: 1fr;
}

/* Body — three tiers: chips (top), title+dek (anchor),
 * meta footer (bottom). The footer is pushed down so short and
 * long cards both keep the meta on the baseline. */
.news-item-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 24px 24px 20px;
}

/* Category / brand chips — the top tier. */
.news-item-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
}

/* Meta footer: date + reading time. Pushed to the bottom of the
 * card, separated by a hairline so it reads as secondary. */
.news-item-meta {
  width: 100%;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hp-hairline, #e6e8ec);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--hp-mono, 'Roboto Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hp-fg-faint, #727b8a);
}

.news-item-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.news-item-meta i {
  font-size: 10px;
}

.news-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--hp-mono, 'Roboto Mono', monospace);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

.news-item-chip i {
  font-size: 8px;
}

.news-item-chip-cat {
  background: var(--hp-accent-soft, rgba(14, 165, 233, 0.08));
  color: var(--hp-accent, #0ea5e9);
}

.news-item-chip-cat:hover {
  background: rgba(14, 165, 233, 0.16);
}

.news-item-chip-brand {
  background: transparent;
  color: var(--hp-fg-muted, #5b6473);
  border: 1px solid var(--hp-hairline, #e6e8ec);
}

.news-item-chip-brand:hover {
  background: rgba(11, 19, 32, 0.04);
  color: var(--hp-fg, #0b1320);
}

/* Title — the visual anchor of the card. */
.news-list .news-item h2.news-item-title {
  margin: 0 0 10px;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

.news-item-title a {
  color: var(--hp-fg, #0b1320);
  text-decoration: none;
  transition: color 160ms ease;
  /* Two-line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-item:hover .news-item-title a {
  color: var(--hp-accent, #0ea5e9);
}

.news-item-dek {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--hp-fg-muted, #5b6473);
  /* Three-line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Pročitaj više" — sits at the right end of the meta footer. */
.news-item-more {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hp-accent, #0ea5e9);
}

.news-item-more i {
  font-size: 10px;
  transition: transform 160ms ease;
}

.news-item:hover .news-item-more i {
  transform: translateX(3px);
}

/* ─── Keyboard focus ────────────────────────────────────────────
   Visible focus indicator for keyboard users — the card is a link. */
.news-item:focus-visible {
  outline: 2px solid var(--hp-accent, #0ea5e9);
  outline-offset: 3px;
  border-radius: 4px;
}