/* Раздел «Кострома»: хаб и страница отключений */
.kh { padding-bottom: 56px; }
.kh-hero { position: relative; isolation: isolate; margin: 8px 0 8px; padding: clamp(26px, 5vw, 56px) clamp(20px, 4vw, 44px); border-radius: 28px; overflow: hidden; color: #fff; background: #0b1220 var(--hero) center / cover no-repeat; min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.kh-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 14, 26, .94) 0%, rgba(8, 14, 26, .78) 42%, rgba(8, 14, 26, .25) 100%); }
.kh-hero .eyebrow { color: #7df9ff; }
.kh-hero h1 { margin: 0; max-width: 18ch; font: 900 clamp(30px, 5vw, 54px)/1.05 var(--font-display, system-ui); letter-spacing: -.03em; color: #fff; }
.kh-hero p { margin: 0; max-width: 56ch; font: 500 clamp(15px, 1.6vw, 18px)/1.55 var(--font-display, system-ui); color: rgba(255, 255, 255, .88); }
.kh-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.kh .kh-chips a:not(.btn):not(.tag), .kh-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff; text-decoration: none; font: 600 14px/1.2 var(--font-display, system-ui); backdrop-filter: blur(6px); transition: background .2s, transform .2s; }
.kh .kh-chips a:not(.btn):not(.tag):hover { background: rgba(255, 255, 255, .26); transform: translateY(-1px); color: #fff; }
.kh-chips b { font-weight: 900; }
.kh-h2 { margin: 36px 0 14px; font: 800 clamp(21px, 2.6vw, 28px)/1.2 var(--font-display, system-ui); letter-spacing: -.02em; }
.kh-lead { margin: -6px 0 16px; max-width: 70ch; color: var(--muted); font: 500 15.5px/1.6 var(--font-display, system-ui); }

.kh-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.kh .kh-card:not(.btn):not(.tag) { position: relative; display: grid; gap: 6px; padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; }
.kh .kh-card:not(.btn):not(.tag)::after { content: ""; position: absolute; inset: auto -30px -40px auto; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c, #3DC7FF) 35%, transparent), transparent 70%); pointer-events: none; }
.kh .kh-card:not(.btn):not(.tag):hover { transform: translateY(-3px); border-color: var(--c, var(--signal)); box-shadow: 0 16px 34px -18px var(--c, var(--signal)); }
.kh-card i { font-size: 30px; font-style: normal; }
.kh-card b { font: 800 18px/1.25 var(--font-display, system-ui); }
.kh-card span { color: var(--muted); font: 500 14.5px/1.5 var(--font-display, system-ui); }

.kh-towns { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.kh .kh-towns a:not(.btn):not(.tag), .kh .kh-res a:not(.btn):not(.tag), .kh .kh-links a:not(.btn):not(.tag) { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.kh .kh-towns a:not(.btn):not(.tag):hover, .kh .kh-res a:not(.btn):not(.tag):hover, .kh .kh-links a:not(.btn):not(.tag):hover { border-color: var(--signal); transform: translateY(-1px); }
.kh-towns b { font: 800 15px/1.3 var(--font-display, system-ui); }
.kh-towns span { color: var(--muted); font: 600 12.5px/1.3 var(--font-display, system-ui); }

.kh-news { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kh .kh-news a:not(.btn):not(.tag) { display: grid; grid-template-columns: 92px 1fr; gap: 2px 14px; padding: 12px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .2s; }
.kh .kh-news a:not(.btn):not(.tag):hover { border-color: var(--signal); }
.kh-news time { grid-row: 1 / 3; align-self: center; font: 800 13px/1.3 var(--font-display, system-ui); color: var(--signal); font-variant-numeric: tabular-nums; }
.kh-news b { font: 700 15px/1.4 var(--font-display, system-ui); }
.kh-news span { color: var(--muted); font: 600 12.5px/1.3 var(--font-display, system-ui); }
.kh-more { margin: 14px 0 0; font: 700 15px/1.4 var(--font-display, system-ui); }

.kh-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.kh-res a { grid-template-columns: 30px 1fr; }
.kh-res i { grid-row: 1 / 3; font-size: 22px; font-style: normal; align-self: center; }
.kh-res b { font: 800 14.5px/1.3 var(--font-display, system-ui); }
.kh-res span { color: var(--muted); font: 500 13px/1.45 var(--font-display, system-ui); }
.kh-note { margin: 12px 0 0; color: var(--muted); font: 500 13.5px/1.55 var(--font-display, system-ui); }

.kh-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.kh-filters button { cursor: pointer; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 13.5px/1 var(--font-display, system-ui); transition: background .2s, border-color .2s; }
.kh-filters button.is-on { background: var(--signal); border-color: var(--signal); color: #fff; }
.kh-filters input { flex: 1 1 200px; min-width: 160px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--sunk); color: var(--ink); font: 600 14px/1 var(--font-display, system-ui); }
.kh-day { margin: 22px 0 8px; font: 800 13px/1 var(--font-display, system-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kh-feed { display: grid; }
.kh-item { display: grid; grid-template-columns: 40px 1fr; gap: 12px; margin-bottom: 10px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.kh-item[hidden], .kh-day[hidden], .kh-empty[hidden] { display: none; }
.kh-item__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--sunk); font-size: 20px; }
.kh-item h4 { margin: 0 0 4px; font: 800 15.5px/1.4 var(--font-display, system-ui); }
.kh .kh-item h4 a:not(.btn):not(.tag) { color: var(--ink); text-decoration: none; }
.kh .kh-item h4 a:not(.btn):not(.tag):hover { color: var(--signal); }
.kh-item p { margin: 0 0 6px; color: var(--muted); font: 500 14px/1.55 var(--font-display, system-ui); }
.kh-item small { color: var(--muted); font: 600 12.5px/1.4 var(--font-display, system-ui); }
.kh-empty { padding: 18px 20px; border-radius: 18px; background: var(--sunk); border: 1px dashed var(--line); color: var(--muted); font: 500 14.5px/1.55 var(--font-display, system-ui); }
.kh-empty b { color: var(--ink); }

.kh-table { display: grid; gap: 8px; }
.kh-table > div { display: grid; grid-template-columns: 1.1fr .6fr .8fr 3fr; gap: 14px; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font: 500 14px/1.5 var(--font-display, system-ui); align-items: start; }
.kh-table__head { background: var(--sunk) !important; font-weight: 800 !important; font-size: 12.5px !important; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kh-table b { font-weight: 800; }
@media (max-width: 720px) { .kh-table > div { grid-template-columns: 1fr 1fr; } .kh-table > div > span:last-child { grid-column: 1 / -1; } .kh-table__head { display: none !important; } }
.kh-steps { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.kh-steps li { counter-increment: s; padding: 14px 16px 14px 56px; position: relative; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font: 500 14.5px/1.6 var(--font-display, system-ui); }
.kh-steps li::before { content: counter(s); position: absolute; left: 14px; top: 13px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--signal); color: #fff; font: 800 14px/1 var(--font-display, system-ui); }
.kh-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.kh-links a { font: 700 14px/1.35 var(--font-display, system-ui); }
.kh-faq details { margin-bottom: 10px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.kh-faq summary { cursor: pointer; font: 800 15.5px/1.4 var(--font-display, system-ui); }
.kh-faq details p { margin: 10px 0 0; color: var(--muted); font: 500 14.5px/1.6 var(--font-display, system-ui); }
@media (max-width: 600px) { .kh-hero { min-height: 240px; border-radius: 22px; } .kh .kh-news a:not(.btn):not(.tag) { grid-template-columns: 1fr; } .kh-news time { grid-row: auto; } }