/* News index (template news.php) + the news card (snippets/news-card.php).
   Not a block: lives here because the layout auto-loads this folder.
   V0.1 News 62:2138: rows of a 4 × 260 grid, 40 gutters; each row 30 above, 50 below,
   a hairline under it. Cards top-aligned, so image heights make the masonry.
   Review 2026-09-24 (N1): the hairline drops to the quiet border role, and rows after
   the first sit 50 below it, matching the 50 above. */

/* V0.1: the grid starts 75px under the headline (page-hero's default is 120). */
.tpl-news .block--page-hero .page-hero { padding-bottom: 75px; }

.news-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 40px; align-items: start;
  padding: 30px 0 50px;
  border-bottom: 1px solid var(--border-default);
}
.news-row + .news-row { padding-top: 50px; }
.news-index__filter { display: flex; align-items: center; gap: var(--space-12); padding-bottom: var(--space-24); }
.news-index__clear { text-decoration: underline; text-underline-offset: 3px; }
.news-index__empty { padding-block: var(--space-40); }

.news-card { position: relative; display: flex; flex-direction: column; gap: 20px; }
.news-card--l { grid-column: span 2; }
/* V0.1: card image radius 15. */
.news-card .news-card__media { border-radius: 15px; background: var(--surface-subtle); }
.news-card .news-card__media > img { transition: transform 900ms var(--ease-out); }
.news-card__body { display: flex; flex-direction: column; gap: 15px; }
.news-card__tags { position: relative; z-index: 1; gap: 5px; }
/* V0.1: pills carry 18px side padding. */
.news-card__tags .tag { padding-inline: 18px; }
/* V0.1: Ovo 32, leading 1.05, tracking -4%. */
.news-card__title { line-height: 1.05; letter-spacing: -0.04em; text-wrap: balance; }
.news-card__title a::after { content: ""; position: absolute; inset: 0; }
.news-card__title span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 600ms var(--ease-out);
}
/* V0.1: date is Ekstra 11 (Label/XS is 12). */
.news-card__date { font-size: 11px; }

/* Hover: picture leans in, headline underlines. */
:where([data-input="mouse"], .no-js) .news-card:hover .news-card__media > img { transform: scale(1.045); }
:where([data-input="mouse"], .no-js) .news-card:hover .news-card__title span,
.news-card__title a:focus-visible span { background-size: 100% 1px; }
.news-card__title a:focus-visible { outline: none; }
.news-card:has(.news-card__title a:focus-visible) { outline: 2px solid var(--ink-accent); outline-offset: 6px; border-radius: 4px; }

@media (max-width: 1023px) {
  .news-card__title br { display: none; } /* manual breaks are set for the desktop column widths */
  .news-row { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; row-gap: var(--space-48); column-gap: var(--space-24); }
}

/* Mobile: one column. A 2-up would put 22px Ovo headlines in 165px columns (three or
   four words a line) and shrink the pictures to thumbnails, so it's one card per row.
   The desktop rows mean nothing in one column, so their hairlines go and every card
   sits the same 48 from the next. */
@media (max-width: 767px) {
  .tpl-news .block--page-hero .page-hero { padding-bottom: var(--space-32); }
  .news-row { grid-template-columns: 1fr; row-gap: var(--space-48); padding: 0; border-bottom: 0; }
  .news-row + .news-row { padding-top: var(--space-48); }
  .news-index { padding-bottom: var(--space-48); }
  /* Tag pills: 44-tall hit area around the drawn pill (see article.css). */
  .news-card__tags { row-gap: var(--space-12); }
  .news-card__tags .tag { position: relative; overflow: visible; white-space: normal; height: auto; min-height: 22px; }
  .news-card__tags .tag::after { content: ""; position: absolute; inset: -12px -3px; }
  .news-index__clear { padding-block: 12px; margin-block: -12px; }
  .news-card--l { grid-column: auto; }
  /* The feed has a rhythm: the Panel's sizes get their own shapes (mobile experience,
     2026-09-30). L runs its picture edge to edge; M is the square card in the column; S is
     the 16:9 card in the column. Every headline is one size, a step up from the desktop's
     Ovo 32 (Nick 09-30: "the same size, and larger"); S had been a list row with a
     thumbnail, but a headline this size wants the whole column. */
  .news-card--l .news-card__media { width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); border-radius: 0; } /* a set width, not a stretch: WebKit sized the 16:9 from the unstretched width */
  .news-card--l .news-card__title a::after { inset: 0 calc(-1 * var(--gutter)); } /* the tap area spans the picture's full width */
  .news-card__title { font-size: clamp(30px, 8.5vw, 34px); } /* 32 at 375, 34 from 400 */
}