/* ============================================================
   PATRUL — Новини / Блог
   Стрічка статей, картки, шаблон окремої статті, архіви.
   Використовує токени й глобальні класи з base.css.
   ============================================================ */

/* ---- Герой розділу ---- */
.nhero{padding:calc(clamp(120px,16vh,190px) + 20px) 0 clamp(40px,6vh,72px);border-bottom:1px solid var(--line)}
.nhero .crumbs{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);margin-bottom:28px}
.nhero .crumbs a{color:var(--fg-2);text-decoration:none}
.nhero .crumbs a:hover{color:var(--accent)}
.nhero .crumbs b{color:var(--fg);font-weight:500}
.nhero .kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2);margin-bottom:22px}
.nhero h1{font-family:var(--font-display);font-weight:800;line-height:1.06;font-size:clamp(40px,9vw,132px);text-transform:uppercase;letter-spacing:-.01em;margin:0}
.nhero .lead{max-width:620px;margin-top:26px;color:var(--fg-2);font-size:clamp(15px,1.6vw,19px);line-height:1.6}
.nhero .lead b{color:var(--fg);font-weight:600}

/* ---- Фільтр категорій ---- */
.ncats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(28px,4vh,44px)}
.ncats a{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);text-decoration:none;padding:9px 16px;border:1px solid var(--line);border-radius:999px;transition:all var(--dur-1)}
.ncats a:hover{color:var(--fg);border-color:var(--fg-2)}
.ncats a.act{background:var(--accent);color:#0B0B0C;border-color:var(--accent);font-weight:600}

/* ---- Сітка статей ---- */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
.news-list{padding:clamp(48px,7vh,90px) 0}

/* ---- Картка статті ---- */
.ncard{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--card);text-decoration:none;color:var(--fg);overflow:hidden;transition:transform var(--dur-2) var(--ease-evidence),border-color var(--dur-2)}
.ncard:hover{transform:translateY(-4px);border-color:var(--fg-2)}
.ncard-media{position:relative;aspect-ratio:16/10;background:var(--bg-2);overflow:hidden;display:flex;align-items:center;justify-content:center}
.ncard-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-3) var(--ease-evidence)}
.ncard:hover .ncard-media img{transform:scale(1.04)}
/* заглушка без фото — фірмовий щит */
.ncard-media .ph-shield{width:34%;max-width:110px;opacity:.10;color:var(--fg)}
/* «візирні» кутові маркери */
.ncard-media::after{content:"";position:absolute;inset:14px;pointer-events:none;opacity:.45;
  background:
    linear-gradient(var(--fg-2),var(--fg-2)) 0 0/16px 1px no-repeat,
    linear-gradient(var(--fg-2),var(--fg-2)) 0 0/1px 16px no-repeat,
    linear-gradient(var(--fg-2),var(--fg-2)) 100% 0/16px 1px no-repeat,
    linear-gradient(var(--fg-2),var(--fg-2)) 100% 0/1px 16px no-repeat,
    linear-gradient(var(--fg-2),var(--fg-2)) 0 100%/16px 1px no-repeat,
    linear-gradient(var(--fg-2),var(--fg-2)) 0 100%/1px 16px no-repeat,
    linear-gradient(var(--fg-2),var(--fg-2)) 100% 100%/16px 1px no-repeat,
    linear-gradient(var(--fg-2),var(--fg-2)) 100% 100%/1px 16px no-repeat}
.ncard-cat{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#0B0B0C;background:var(--accent);padding:5px 10px;border-radius:2px}
.ncard-num{position:absolute;bottom:14px;right:16px;z-index:2;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--fg-2)}
.ncard-body{display:flex;flex-direction:column;flex:1;padding:24px}
.ncard-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);margin-bottom:14px}
.ncard-meta .dot{margin:0 8px;opacity:.5}
.ncard h2{font-family:var(--font-display);font-weight:600;font-size:clamp(18px,2vw,23px);line-height:1.2;letter-spacing:-.01em;margin:0 0 12px}
.ncard:hover h2{color:var(--accent)}
.ncard p{color:var(--fg-2);font-size:14.5px;line-height:1.6;margin:0 0 20px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ncard .more{margin-top:auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);display:inline-flex;align-items:center;gap:8px}
.ncard .more .arrow{color:var(--accent);transition:transform var(--dur-1)}
.ncard:hover .more .arrow{transform:translateX(4px)}

/* Перша картка — на всю ширину (фічер) */
.news-grid .ncard.feature{grid-column:1/-1}
@media(min-width:900px){
  .news-grid .ncard.feature{flex-direction:row}
  .news-grid .ncard.feature .ncard-media{flex:0 0 54%;aspect-ratio:auto}
  .news-grid .ncard.feature .ncard-body{justify-content:center;padding:clamp(28px,4vw,56px)}
  .news-grid .ncard.feature h2{font-size:clamp(24px,3vw,40px)}
  .news-grid .ncard.feature p{-webkit-line-clamp:4;font-size:16px}
}

/* ---- Пагінація ---- */
.news-pagination{margin-top:clamp(40px,6vh,72px)}
.news-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.news-pagination a,.news-pagination span{font-family:var(--font-mono);font-size:12px;min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--line);color:var(--fg-2);text-decoration:none;transition:all var(--dur-1)}
.news-pagination a:hover{color:var(--fg);border-color:var(--fg-2)}
.news-pagination .current{background:var(--accent);color:#0B0B0C;border-color:var(--accent);font-weight:600}
.news-pagination .dots{border:none}

/* Порожній стан */
.news-empty{padding:clamp(80px,14vh,160px) 0;text-align:center}
.news-empty h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,4vw,44px);text-transform:uppercase;margin:0 0 16px}
.news-empty p{color:var(--fg-2);max-width:440px;margin:0 auto}

/* ============================================================
   Окрема стаття
   ============================================================ */
.article-hero{padding:calc(clamp(120px,16vh,190px) + 20px) 0 clamp(28px,4vh,48px)}
.article-hero .crumbs{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);margin-bottom:30px}
.article-hero .crumbs a{color:var(--fg-2);text-decoration:none}
.article-hero .crumbs a:hover{color:var(--accent)}
.article-hero .crumbs b{color:var(--fg);font-weight:500}
.article-hero .kicker{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);margin-bottom:24px}
.article-hero .kicker .cat{color:#0B0B0C;background:var(--accent);padding:5px 11px;border-radius:2px}
.article-hero .kicker .dot{opacity:.5}
.article-hero h1{font-family:var(--font-display);font-weight:800;line-height:1.08;font-size:clamp(30px,5.2vw,66px);letter-spacing:-.01em;max-width:16ch;margin:0}
.article-lead{max-width:760px;margin-top:24px;color:var(--fg-2);font-size:clamp(16px,1.8vw,20px);line-height:1.6}

.article-media{margin:clamp(20px,4vh,44px) 0}
.article-media .frame{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.article-media img{width:100%;height:100%;object-fit:cover;display:block}
.article-media .frame::after{content:"";position:absolute;inset:16px;pointer-events:none;opacity:.4;
  background:
    linear-gradient(#fff,#fff) 0 0/22px 1px no-repeat,linear-gradient(#fff,#fff) 0 0/1px 22px no-repeat,
    linear-gradient(#fff,#fff) 100% 0/22px 1px no-repeat,linear-gradient(#fff,#fff) 100% 0/1px 22px no-repeat,
    linear-gradient(#fff,#fff) 0 100%/22px 1px no-repeat,linear-gradient(#fff,#fff) 0 100%/1px 22px no-repeat,
    linear-gradient(#fff,#fff) 100% 100%/22px 1px no-repeat,linear-gradient(#fff,#fff) 100% 100%/1px 22px no-repeat}

/* Тіло статті — типографіка */
.article-body{max-width:760px;margin:0 auto;padding:clamp(8px,2vh,24px) 0 clamp(40px,6vh,72px);font-size:clamp(16px,1.15vw,18px);line-height:1.75;color:#D9DADC}
.article-body > *{margin:0 0 1.35em}
.article-body p{margin:0 0 1.35em}
.article-body h2{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3vw,34px);line-height:1.2;color:var(--fg);margin:1.8em 0 .7em;letter-spacing:-.01em}
.article-body h3{font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.2vw,26px);color:var(--fg);margin:1.5em 0 .6em}
.article-body h4{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--fg);margin:1.4em 0 .5em}
.article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article-body a:hover{text-decoration-thickness:2px}
.article-body strong{color:var(--fg);font-weight:600}
.article-body ul,.article-body ol{padding-left:1.4em;margin:0 0 1.35em}
.article-body li{margin:0 0 .55em}
.article-body ul li::marker{color:var(--accent)}
.article-body blockquote{border-left:2px solid var(--accent);margin:1.6em 0;padding:6px 0 6px 24px;font-family:var(--font-display);font-weight:300;font-size:clamp(19px,2vw,25px);line-height:1.4;color:var(--fg)}
.article-body blockquote p{margin:0}
.article-body img,.article-body figure img{max-width:100%;height:auto;border:1px solid var(--line);display:block}
.article-body figure{margin:1.8em 0}
.article-body figcaption{font-family:var(--font-mono);font-size:12px;color:var(--fg-2);margin-top:10px;letter-spacing:.04em}
.article-body hr{border:none;border-top:1px solid var(--line);margin:2.4em 0}
.article-body code{font-family:var(--font-mono);font-size:.9em;background:var(--bg-2);border:1px solid var(--line);padding:2px 6px;border-radius:3px;color:var(--accent)}
.article-body pre{background:var(--bg-2);border:1px solid var(--line);padding:20px;overflow-x:auto;border-radius:4px}
.article-body pre code{background:none;border:none;padding:0;color:#D9DADC}
.article-body table{width:100%;border-collapse:collapse;font-size:15px}
.article-body th,.article-body td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.article-body th{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-2)}

/* Мітки + низ статті */
.article-foot{max-width:760px;margin:0 auto;border-top:1px solid var(--line);padding:28px 0}
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.article-tags a{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);text-decoration:none;padding:7px 13px;border:1px solid var(--line);border-radius:999px;transition:all var(--dur-1)}
.article-tags a:hover{color:var(--fg);border-color:var(--fg-2)}
.article-share{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.article-share .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.article-share a{color:var(--fg-2);display:inline-flex;transition:color var(--dur-1)}
.article-share a:hover{color:var(--accent)}
.article-share svg{width:20px;height:20px}
.article-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);text-decoration:none;margin-top:26px}
.article-back .arrow{color:var(--accent)}
.article-back:hover .arrow{transform:translateX(-4px);transition:transform var(--dur-1)}

/* Схожі статті */
.related-news{border-top:1px solid var(--line);padding:clamp(56px,8vh,100px) 0}
.related-news .sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:36px}
.related-news .sec-num{font-family:var(--font-mono);font-size:13px;color:var(--accent)}
.related-news h2{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,3vw,34px);text-transform:uppercase;letter-spacing:-.01em;margin:0}

@media(max-width:600px){
  .news-grid{grid-template-columns:1fr}
  .nhero h1{font-size:clamp(38px,15vw,70px)}
}