/* Novosti: popis, članak i unos objave. Samo tokeni iz tokens.css i komponente p-* iz plava.css. */

.nv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.page-content .nv-head h1 { font-family: var(--font-display); }
.nv-back { display: inline-block; margin-bottom: var(--space-3); color: var(--ink-muted); font: 600 14px/20px var(--font-text); text-decoration: none; }
.nv-back:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* ── Filtar kategorija ── */
.nv-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: calc(-1 * var(--space-3)) 0 var(--space-6); }
.nv-filter a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--surface); color: var(--ink); font: 600 14px/20px var(--font-text); text-decoration: none; }
.nv-filter a:hover { border-color: var(--primary); color: var(--primary); }
.nv-filter a[aria-current="page"] { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }

/* ── Kartice ── */
.nv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.nv-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.nv-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.nv-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--primary-soft); }
.nv-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform .3s; }
.nv-card:hover .nv-card__img img { transform: scale(1.03); }
.nv-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
.nv-card.no-img .nv-card__body { border-top: 4px solid var(--primary-soft); }
.nv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; }
.nv-meta time { color: var(--ink-muted); font: 600 13px/20px var(--font-text); font-variant-numeric: tabular-nums; }
.page-content .nv-card :is(h2, h3) { margin: 0; font: 700 var(--fs-lg)/1.3 var(--font-display); letter-spacing: -.2px; }
.nv-card :is(h2, h3) a { color: var(--ink); text-decoration: none; }
.nv-card :is(h2, h3) a::after { content: ''; position: absolute; inset: 0; }
.nv-card:hover :is(h2, h3) a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.page-content .nv-excerpt { margin: 0; color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.6; }
.nv-edit { position: relative; z-index: 1; align-self: flex-start; margin-top: auto; padding-top: var(--space-2); color: var(--primary); font: 600 14px/20px var(--font-text); }

/* Prva objava na stranici: slika lijevo, tekst desno. */
.nv-card.is-lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.nv-card.is-lead.no-img { grid-template-columns: 1fr; }
.nv-card.is-lead .nv-card__img { aspect-ratio: auto; height: clamp(280px, 30vw, 420px); }
.nv-card.is-lead .nv-card__body { justify-content: center; gap: var(--space-3); padding: var(--space-6) var(--space-7) var(--space-6) var(--space-6); }
.page-content .nv-card.is-lead h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -.6px; }
.page-content .nv-card.is-lead .nv-excerpt { font-size: var(--fs-md); }
.nv-card.is-lead .nv-edit { margin-top: 0; }

.nv-pager { margin-top: var(--space-7); }

/* ── Članak ── */
.nv-article { max-width: 760px; margin: 0 auto; padding-top: var(--space-6); }
.nv-article__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.page-content .nv-article h1 { margin: 0; font: 700 var(--fs-3xl)/1.1 var(--font-display); letter-spacing: -1px; }
.nv-meta a.p-tag { text-decoration: none; }
.page-content .nv-lead, .page-content .nv-lead p { color: var(--ink); font-size: var(--fs-lg); line-height: 1.55; }
.nv-lead > * { margin: 0; }
.nv-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nv-danger { color: var(--danger); }
.nv-figure { margin: 0 0 var(--space-6); }
.nv-figure a { display: block; overflow: hidden; border-radius: var(--radius-lg); background: var(--subtle); cursor: zoom-in; }
.nv-figure img { display: block; width: 100%; max-height: 640px; object-fit: contain; }
.page-content .nv-body { font-size: 17px; line-height: 1.75; }
.page-content .nv-body > :first-child { margin-top: 0; }
.nv-attachment { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; }
.nv-attachment:hover { border-color: var(--primary); color: var(--primary); }
.nv-attachment .p-icon { width: 22px; height: 22px; color: var(--primary); }
.nv-attachment span { display: grid; min-width: 0; }
.nv-attachment small { color: var(--ink-muted); font-size: 13px; overflow-wrap: anywhere; }

.nv-more { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.nv-more__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.page-content .nv-more h2 { margin: 0; font: 700 var(--fs-2xl)/1.2 var(--font-display); }

/* ── Unos ── */
.nv-form { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); align-items: start; }
.nv-form__side { display: grid; gap: var(--space-4); position: sticky; top: var(--space-4); }
.nv-form__side .p-card > * + * { margin-top: 0; }
.nv-form__actions { display: grid; gap: var(--space-2); }
.nv-delete-link { justify-self: center; margin-top: var(--space-2); font: 600 14px/20px var(--font-text); }
.nv-check { display: flex; align-items: center; gap: var(--space-2); font: 600 14px/20px var(--font-text); cursor: pointer; }
.nv-check input { width: 18px; height: 18px; accent-color: var(--primary); }
.nv-form .p-field input[type=file] { min-height: 0; padding: 8px; font-size: 14px; }
.nv-form .p-field a { color: var(--primary); overflow-wrap: anywhere; }
.nv-form .prose-editor { border-radius: var(--radius-md); }
.nv-form .ProseMirror { min-height: 140px; }
.nv-form .p-field:has(#id_body) .ProseMirror { min-height: 380px; }

.nv-confirm { max-width: 560px; margin: var(--space-7) auto; }
.page-content .nv-confirm h1 { margin: 0; font: 700 var(--fs-2xl)/1.2 var(--font-display); }
.nv-confirm__actions { display: flex; gap: var(--space-2); }

@media (prefers-reduced-motion: reduce) { .nv-card, .nv-card__img img { transition: none; } .nv-card:hover .nv-card__img img { transform: none; } }

@media (max-width: 1024px) {
  .nv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv-form { grid-template-columns: 1fr; }
  .nv-form__side { position: static; }
}
@media (max-width: 720px) {
  .nv-grid { grid-template-columns: 1fr; }
  .nv-card.is-lead { display: flex; }
  .nv-card.is-lead .nv-card__img { aspect-ratio: 16 / 10; height: auto; }
  .nv-card.is-lead .nv-card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
}