/* Новости Костромы: пульс региона, викторина, FAQ */
.knp-pulse { margin: 18px 0; padding: 18px; border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, #6366f1 12%, var(--surface)), var(--surface)); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 16px; }
.knp-pulse__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.knp-pulse__stats div { padding: 12px 14px; border-radius: 16px; background: var(--sunk); }
.knp-pulse__stats b { display: block; font: 900 clamp(22px, 3vw, 30px)/1.1 var(--font-display); letter-spacing: -.02em; background: linear-gradient(135deg, #818cf8, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.knp-pulse__stats span { font-size: 12.5px; color: var(--muted); }
.knp-bars { display: grid; gap: 8px; }
.knp-bars a { display: grid; grid-template-columns: minmax(130px, 190px) 1fr 40px; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font: 700 13.5px/1.2 var(--font-display); }
.knp-bars i { height: 12px; border-radius: 99px; background: var(--sunk); position: relative; overflow: hidden; }
.knp-bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #818cf8, #38bdf8); animation: knpGrow 1.2s var(--spring, ease) both; transform-origin: left; }
.knp-bars a:hover i::after { filter: brightness(1.2); }
.knp-bars b { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
@keyframes knpGrow { from { transform: scaleX(0); } }
.knp-quiz, .knp-faq { margin: 34px 0; }
.knp-quiz { padding: 22px; border-radius: 24px; background: radial-gradient(circle at 90% 0%, rgba(99, 102, 241, .22), transparent 55%), var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.knp-quiz h2, .knp-faq h2 { margin: 8px 0 8px; font: 800 clamp(22px, 3vw, 30px)/1.2 var(--font-display); }
.knp-hint { margin: 6px 0; font-size: 14px; color: var(--muted); }
.knp-btn { min-height: 46px; padding: 11px 22px; border: 0; border-radius: 14px; cursor: pointer; font: 800 14.5px/1 var(--font-display); color: #fff; background: linear-gradient(135deg, #6366f1, #0ea5e9); transition: transform .2s, filter .2s; }
.knp-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.knp-btn--ghost { color: var(--ink); background: var(--sunk); border: 1px solid var(--line); }
.knp-q { margin: 14px 0 6px; font: 800 clamp(18px, 2.4vw, 23px)/1.35 var(--font-display); animation: knpIn .4s var(--spring, ease) both; }
.knp-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 12px 0; }
.knp-opts button { min-height: 48px; padding: 10px 14px; border-radius: 14px; cursor: pointer; text-align: left; font: 700 14px/1.2 var(--font-display); color: var(--ink); background: var(--sunk); border: 1px solid var(--line); transition: transform .2s, border-color .2s, background .2s; }
.knp-opts button:hover:not(:disabled) { transform: translateY(-2px); border-color: #818cf8; }
.knp-opts button.ok { background: rgba(16, 185, 129, .22); border-color: #10b981; }
.knp-opts button.bad { background: rgba(239, 68, 68, .2); border-color: #ef4444; animation: knpShake .4s; }
@keyframes knpIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes knpShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.knp-meter { height: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden; margin: 8px 0; }
.knp-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6366f1, #0ea5e9); transition: width .5s var(--spring, ease); }
.knp-faq details { margin: 0 0 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.knp-faq summary { cursor: pointer; padding: 16px 52px 16px 18px; position: relative; font: 700 15.5px/1.4 var(--font-display); list-style: none; }
.knp-faq summary::-webkit-details-marker { display: none; }
.knp-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; margin-top: -14px; font: 400 26px/1 var(--font-display); color: #818cf8; transition: transform .25s; }
.knp-faq details[open] summary::after { transform: rotate(45deg); }
.knp-faq details p { margin: 0; padding: 0 18px 18px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
@media (max-width: 560px) { .knp-bars a { grid-template-columns: 1fr 34px; } .knp-bars i { grid-column: 1 / -1; order: 3; } }
@media (prefers-reduced-motion: reduce) { .knp-pulse *, .knp-quiz * { animation: none !important; transition: none !important; } }

/* Заглушка вместо фото: фирменное табло с заголовком новости */
.kn-ph{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:18px 22px 16px;color:#f4f7fb;text-decoration:none;isolation:isolate;background:radial-gradient(circle at 0 0,rgba(0,139,249,.34),transparent 62%),radial-gradient(circle at 100% 100%,rgba(255,176,32,.18),transparent 55%),#0b1220}
.kn-ph::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:30px 30px}
.kn-ph__brand{display:flex;align-items:center;gap:10px}
.kn-ph__brand i{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1.5px solid #008bf9;background:#10182a;font:800 17px/1 var(--font-display,inherit);font-style:normal}
.kn-ph__brand i::after{content:"";position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:#ffb020}
.kn-ph__brand b{display:grid;gap:3px;font:800 15px/1 var(--font-display,inherit);letter-spacing:.02em}
.kn-ph__brand small{font:600 8.5px/1 var(--font-display,inherit);letter-spacing:.24em;color:#008bf9}
.kn-ph__title{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font:800 clamp(15px,1.5vw,20px)/1.26 var(--font-display,inherit)}
.kn-ph__cap{padding-top:9px;border-top:1px solid rgba(255,255,255,.18);font:500 11.5px/1.4 var(--font-display,inherit);font-style:normal;color:#93a3b8}
.kn-card:hover .kn-ph{filter:brightness(1.08)}
.kn-ph{container-type:size}
@container (max-height:210px){.kn-ph__title{-webkit-line-clamp:2}.kn-ph__cap{font-size:10.5px}.kn-ph__brand i{width:32px;height:32px;font-size:15px}}
@container (min-height:300px){.kn-ph__title{-webkit-line-clamp:5;font-size:clamp(18px,2vw,26px)}.kn-ph__cap{font-size:13px}}
.kn-ph__cap{display:block;font:600 10px/1.4 var(--font-display,inherit);letter-spacing:.06em;text-transform:uppercase;color:#93a3b8}
.kn-ph__cap b{display:block;margin-bottom:3px;font:800 12px/1.3 var(--font-display,inherit);letter-spacing:.08em;color:#f4f7fb}
@container (min-height:300px){.kn-ph__cap{font-size:12px}.kn-ph__cap b{font-size:15px}}
@container (max-height:210px){.kn-ph__cap{font-size:9px}.kn-ph__cap b{font-size:11px}}