/* karta.brestobl.com - свои стили сайта карт, после siteall.css.
 * Только новые классы k-*: правила siteall.css не переопределяются.
 * Цвета и шрифты - переменные siteall.css (--paper, --rule, --accent...). */

/* ---------- заголовок страницы ---------- */
.k-head{margin: 8px 0 18px}
.k-head h1{font-family: "PT Serif", serif; font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 6px; text-wrap: balance}
.k-sub{margin: 0; color: var(--muted); font-size: 14px}
.k-lead{max-width: 68ch; margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-2)}

/* ---------- просмотрщик карты ---------- */
.k-viewer{margin: 0 0 22px; border: 1px solid var(--rule); background: #fff; position: relative}
.k-stage{position: relative; overflow: hidden; height: min(72vh, 760px); min-height: 320px; cursor: grab; touch-action: none; user-select: none}
.k-stage.k-drag{cursor: grabbing}
.k-stage img{position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform}
/* без скрипта карта вписана в рамку целиком */
.k-viewer:not(.k-on) .k-stage{height: auto; min-height: 0; cursor: default}
.k-viewer:not(.k-on) .k-stage img{position: static; width: 100%; height: auto}
.k-tools{display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--rule-soft); background: var(--paper)}
.k-tools button{font: 500 13px "IBM Plex Sans", system-ui, sans-serif; min-width: 34px; height: 30px; padding: 0 10px; border: 1px solid var(--rule); background: #fff; color: var(--ink); cursor: pointer}
.k-tools button:hover{border-color: var(--accent); color: var(--accent)}
.k-tools button:focus-visible, .k-tools a:focus-visible, .k-card:focus-visible{outline: 2px solid var(--accent); outline-offset: 2px}
.k-tools a{margin-left: auto; font-size: 13px; color: var(--accent)}
.k-viewer figcaption{padding: 6px 10px 8px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--rule-soft)}
.k-viewer:fullscreen{display: flex; flex-direction: column; border: 0}
.k-viewer:fullscreen .k-stage{flex: 1; height: auto}

/* ---------- скачивание ---------- */
.k-dl, .k-places, .k-years{margin: 0 0 22px}
.k-dl h2, .k-places h2, .k-years h2, .k-group h2, .k-cat h2{font-family: "PT Serif", serif; font-size: 21px; font-weight: 700; margin: 0 0 10px}
.k-places h2 span, .k-group h2 span{font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 400; color: var(--muted)}
.k-dl ul, .k-years ul{list-style: none; margin: 0; padding: 0; display: grid; gap: 6px}
.k-dl li{display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 12px; background: var(--paper); border: 1px solid var(--rule-soft)}
.k-dl a{color: var(--accent); font-weight: 500}
.k-size{font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums}

/* ---------- подписи и другие годы ---------- */
.k-places p{margin: 0; max-width: 80ch; color: var(--ink-2); line-height: 1.7}
.k-years b{font-family: "IBM Plex Mono", monospace; font-weight: 500; margin-right: 8px; color: var(--accent); font-variant-numeric: tabular-nums}

/* ---------- сетка карт ---------- */
.k-intro{margin-bottom: 18px}
.k-group{margin: 0 0 28px}
.k-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px}
.k-card{display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--paper); border: 1px solid var(--rule-soft); min-width: 0}
.k-card:hover{border-color: var(--accent)}
.k-thumb{position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; border: 1px solid var(--rule-soft); max-width: 100%}
.k-thumb img{position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); max-width: none; object-fit: contain}
.k-card-title{font-weight: 500; line-height: 1.3; text-wrap: balance}
.k-card-meta{font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--muted)}

/* ---------- главная ---------- */
.k-home-map{margin: 0 0 28px; padding: 12px; background: #d4d0c8; border: 1px solid var(--rule); max-width: 100%}
.k-home-map object{display: block; width: 100%; max-width: 760px; height: auto; aspect-ratio: 501 / 347; margin: 0 auto}
.k-home-map figcaption{margin-top: 8px; text-align: center; font-size: 13px; color: var(--ink-2)}

/* ---------- каталог ---------- */
.k-cat{margin: 0 0 26px}
.k-cat h2 a{color: inherit}
.k-cat-scroll{overflow-x: auto}
.k-cat table{width: 100%; border-collapse: collapse; font-size: 14px}
.k-cat th{text-align: left; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--rule); padding: 6px 8px}
.k-cat td{border-bottom: 1px solid var(--rule-soft); padding: 6px 8px; vertical-align: top}
.k-cat td a{color: var(--ink)}
.k-cat td a:hover{color: var(--accent)}
.k-num{font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; white-space: nowrap}
.k-fmt a{display: inline-block; margin-right: 6px; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--accent) !important}

@media (max-width: 640px){
  .k-stage{height: 60vh}
  .k-grid{grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px}
}
@media (prefers-reduced-motion: reduce){
  .k-stage img{transition: none !important}
}