/* Карлсон, раздел «Кейсы»: хаб /keysy/ с фильтром и шаблон кейса /keysy/<slug>/ (перенос из холста Claude Design «Карлсон: Кейсы»).
   Дополняет home.css и page.css, те же токены, сетка и шапка. Один шаблон, данные из content.json. */

/* ---------- первый экран хаба: коллаж из трёх работ ---------- */
.kx { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 12px; height: 600px; }
.kx-f { position: relative; margin: 0; overflow: hidden; background: var(--ti); }
.kx-f:first-child { grid-row: 1 / 3; }
.kx-f img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.kx-f:hover img { transform: scale(1.05); }
.kx .kx-b { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px 10px 16px; border: 0; background: rgba(255,255,255,.94); color: var(--ink); text-align: left; cursor: pointer; transition: background .25s, color .25s; }
.kx .kx-b:hover { background: var(--ink); color: var(--white); }
.kx-b span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kx-b b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.kx-b small { font-size: 12px; color: inherit; opacity: .7; }

/* ---------- фильтр ---------- */
.kf-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; margin-bottom: 40px; }
.kf { display: flex; flex-wrap: wrap; gap: 8px; }
.kw .kf button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 15px; font-weight: 500; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.kw .kf button:hover { border-color: var(--ink); }
.kf button i { font-style: normal; font-size: 12px; font-weight: 600; min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--pink2); color: var(--corten); }
.kw .kf button.on { background: var(--steel); border-color: var(--steel); color: var(--white); }
.kf button.on i { background: var(--red); color: var(--ink); }
.kf-n { font-size: 14px; color: var(--muted); }
.kf-n b { color: var(--ink); font-weight: 600; }

/* ---------- лента карточек: колонки разной высоты, как в журнале ---------- */
.kg { columns: 3; column-gap: 24px; }
.kc { display: block; break-inside: avoid; margin: 0 0 40px; text-decoration: none; color: inherit; }
.kc-ph { position: relative; overflow: hidden; background: var(--ti); }
.kc-ph img { width: 100%; height: auto; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.kc:hover .kc-ph img { transform: scale(1.04); }
.kc-num { position: absolute; left: 12px; top: 12px; padding: 5px 8px; background: rgba(255,255,255,.92); font-size: 11px; font-weight: 600; letter-spacing: .14em; }
.kc-tags { position: absolute; left: 12px; bottom: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.kc-tags span { padding: 5px 9px; background: var(--steel); color: var(--white); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.kc-arr { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--red); color: var(--ink); transform: scale(.6); opacity: 0; transition: transform .35s, opacity .35s; }
.kc:hover .kc-arr, .kc:focus-visible .kc-arr { transform: none; opacity: 1; }
.kc-bd { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; }
.kc-t { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.kc-p { margin: 0; font-size: 14px; color: var(--muted); }
.kc-m { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.kc-m b { color: var(--ink); font-weight: 600; }

/* ---------- «Не нашли похожую работу» ---------- */
.kn { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.kn-l { grid-column: 1 / 7; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.kn-l .lead { color: #D5DEE2; }
.kn-r { grid-column: 8 / 13; }
.kn-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.4); }
.kn-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 16px; }
.kn-list li span:first-child { color: #B9C6CC; }
.kn-list li b { font-weight: 600; text-align: right; }

/* ---------- кейс: первый экран ---------- */
.kh .lh-grid { align-items: stretch; }
.kh .lh-l { grid-column: 1 / 6; display: flex; flex-direction: column; align-items: flex-start; }
.kh .lh-r { grid-column: 6 / 13; }
.kt { font-size: min(4.2cqi, 60px); line-height: .95; }
.ktags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.kw .ktags button { min-height: 34px; padding: 0 12px; border: 1px solid var(--steel); border-radius: 999px; background: transparent; color: var(--steel); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: background .25s, color .25s; }
.kw .ktags button:hover { background: var(--steel); color: var(--white); }
.kplace { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font-size: 15px; color: var(--muted); }
.kplace .ico { width: 18px; height: 18px; color: var(--corten); }
.kh .hero-sub { margin: 18px 0 30px; }
.kcov { position: relative; height: 100%; min-height: 560px; overflow: hidden; background: var(--ti); }
.kw .kcov > button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.kcov img { width: 100%; height: 100%; object-fit: cover; }
.kcov-bar { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.kcov-bar > * { pointer-events: auto; }
.kcov-n { display: inline-flex; align-items: center; height: 48px; padding: 0 16px; background: var(--white); font-size: 13px; font-weight: 600; letter-spacing: .12em; }
.kw .kcov-bar .btn { min-height: 48px; background: var(--white); color: var(--ink); }
.kw .kcov-bar .btn:hover { background: var(--ink); color: var(--white); }

/* паспорт работы */
.ksp { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--ink); background: var(--white); }
.ksp > div { padding: 22px 24px 26px 0; border-bottom: 1px solid var(--line); }
.ksp > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.ksp .lbl { color: var(--corten); display: block; margin-bottom: 10px; }
.ksp p { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 500; }

/* задача и решение */
.ktd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.ktd > div { display: flex; flex-direction: column; gap: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.ktd > div:first-child { grid-column: 1 / 6; }
.ktd > div:last-child { grid-column: 7 / 13; }
.ktd h2 { font-size: 40px; line-height: .95; }
.ktd p { margin: 0; font-size: 19px; line-height: 1.55; }

/* галерея кейса */
.kgal { columns: 3; column-gap: 16px; }
.kw .kgal button { display: block; width: 100%; padding: 0; margin: 0 0 16px; border: 0; background: var(--ti); break-inside: avoid; overflow: hidden; cursor: zoom-in; }
.kgal img { width: 100%; height: auto; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.kgal button:hover img { transform: scale(1.03); }
.kgal-1 { columns: 1; max-width: 880px; }
.kgal-2 { columns: 2; }
.gal-cap { font-size: 14px; color: #C3CED3; text-align: center; margin: 0; }

/* «Хочу так же» */
.kwant { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.kwant-l { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.kwant-l .lead { color: #D5DEE2; max-width: 600px; }
.kwant-r { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 10px; }
.kwant-r .btn { width: 100%; justify-content: space-between; }
.kwant-r .note { color: #B9C6CC; }

/* соседние кейсы */
.krel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.krel .kc { margin: 0; }
.krel .kc-ph { aspect-ratio: 4 / 3; }
.krel .kc-ph img { height: 100%; object-fit: cover; }
.knav { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.kw .knav button { display: flex; flex-direction: column; gap: 4px; max-width: 46%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.kw .knav button:last-child { text-align: right; align-items: flex-end; }
.knav small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--corten); font-weight: 600; }
.knav span { font-size: 18px; font-weight: 600; line-height: 1.25; }
.kw .knav button:hover span { text-decoration: underline; }

/* плашка выбранного кейса в форме */
.kchip { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kw .kchip button { flex: none; border: 0; background: none; padding: 0; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }

/* ---------- телефон и планшет ---------- */
@container k (min-width: 821px) and (max-width: 1200px) {
  .kg { columns: 2; }
  .kx { height: 520px; }
  .kt { font-size: min(5cqi, 56px); }
}
@container k (max-width: 820px) {
  .kx { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: 260px 160px; gap: 8px; }
  .kx-f:first-child { grid-column: 1 / 3; grid-row: 1; }
  .kx .kx-b { left: 8px; right: 8px; bottom: 8px; min-height: 0; padding: 8px 10px; }
  .kx-b b { font-size: 13px; }
  .kx-b small, .kx-b .ico { display: none; }
  .kf-bar { margin-bottom: 24px; }
  .kf { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .kf::-webkit-scrollbar { display: none; }
  .kw .kf button { flex: none; min-height: 44px; padding: 0 14px; font-size: 14px; }
  .kg { columns: 2; column-gap: 12px; }
  .kc { margin-bottom: 24px; }
  .kc-num, .kc-arr { display: none; }
  .kc-tags { left: 6px; bottom: 6px; right: 6px; gap: 4px; }
  .kc-tags span { padding: 3px 6px; font-size: 9px; letter-spacing: .06em; }
  .kc-bd { padding-top: 10px; gap: 4px; }
  .kc-t { font-size: 15px; }
  .kc-p { font-size: 12px; }
  .kc-m { font-size: 11px; padding-top: 8px; margin-top: 2px; }
  .kn { display: flex; flex-direction: column; gap: 36px; }
  .kn-l .btns .btn { flex: 1 1 100%; }
  .kn-list li { font-size: 15px; }

  .kh .lh-grid { display: flex; flex-direction: column; gap: 28px; }
  .kt { font-size: 9.6cqi; }
  .kh .hero-sub { margin: 14px 0 24px; }
  .kh .lh-l .btns { align-self: stretch; }
  .kcov { min-height: 0; height: 330px; margin: 0 -16px; }
  .kcov-bar { left: 12px; bottom: 12px; }
  .kcov-n { height: 40px; padding: 0 12px; font-size: 12px; }
  .kw .kcov-bar .btn { min-height: 40px; padding: 0 14px; font-size: 13px; }
  .ksp { grid-template-columns: 1fr 1fr; }
  .ksp > div, .ksp > div + div { padding: 16px 12px 18px 0; border-left: 0; }
  .ksp > div:nth-child(2n) { padding-left: 12px; border-left: 1px solid var(--line); }
  .ksp p { font-size: 15px; }
  .ktd { display: flex; flex-direction: column; gap: 36px; }
  .ktd h2 { font-size: 30px; }
  .ktd p { font-size: 16px; }
  .kgal, .kgal-2 { columns: 2; column-gap: 8px; }
  .kw .kgal button { margin-bottom: 8px; }
  .kwant { display: flex; flex-direction: column; align-items: stretch; gap: 32px; }
  .kwant-l .btn { align-self: stretch; }
  .krel { display: flex; overflow-x: auto; gap: 12px; margin: 0 -16px; padding: 0 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .krel::-webkit-scrollbar { display: none; }
  .krel .kc { flex: 0 0 72%; scroll-snap-align: start; }
  .knav span { font-size: 15px; }
  .gal-th { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .gal-th button { flex: none; width: 64px; height: 48px; }
  .gal-cap { font-size: 13px; }
}

/* ---------- сайт: ссылки там, где в макете кнопки (кнопки направлений и соседние работы ведут на свои адреса) ---------- */
.kx a.kx-b { text-decoration: none; }
.kw .ktags a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--steel); border-radius: 999px; background: transparent; color: var(--steel); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; text-decoration: none; transition: background .25s, color .25s; }
.kw .ktags a:hover { background: var(--steel); color: var(--white); }
.kw .knav a { display: flex; flex-direction: column; gap: 4px; max-width: 46%; text-align: left; text-decoration: none; color: inherit; }
.kw .knav a:last-child { text-align: right; align-items: flex-end; }
.kw .knav a:hover span { text-decoration: underline; }
.kc[hidden] { display: none; }