/* ВЫП113 · Компонент «Работы/кейсы»: лента /raboty/, «Кейсы и материалы» партнёра,
   одиночный кейс. Карточки — .okna-bcard из blog-list.css; здесь только сетка,
   фильтры, галерея «до/после» и раскладка одиночного кейса. Токены --ok-* / --okna-cw. */

/* Баннер «Подберём стекло» внизу /raboty/ и одиночного кейса: белый заголовок на
   тёмном фоне. Правило .okna-pick__title{color:#fff} живёт в glavnaya.css, где
   привязано к контексту главной; на /raboty/ (.okna-works) и на кейсе (.okna-case)
   не срабатывает → дублируем точечно (специфичность обёртки перебивает). */
.okna-works .okna-pick__title,
.okna-casepage .okna-pick__title{ color:var(--ok-on-dark, #fff); }
.okna-works .okna-pick__sub,
.okna-casepage .okna-pick__sub{ color:rgba(255,255,255,.85); }

/* ── Лента /raboty/: шапка ──────────────────────────────────────────────────── */
.okna-works{ padding:36px 0 42px; }
/* ритм баннер→футер на /raboty/ к 72: у .okna-blog-wrap свой padding-bottom 64,
   он складывался с .okna-works → двойной отступ. Убираем паддинг wrap для /raboty/. */
.okna-works > .okna-blog-wrap{ padding-bottom:0; }
.okna-works__head{ margin:0 0 24px; }
.okna-works__head .okna-section-title{ margin-bottom:12px; }
.okna-works__lead{ max-width:820px; color:var(--ok-text-2); font-size:17px; line-height:1.5; }
.okna-works__lead p{ margin:0 0 8px; }
@media (max-width:600px){ .okna-works{ padding:24px 0 32px; } .okna-works__lead{ font-size:15px; } }

/* ── Сетка карточек (3 / 2 / 1) ─────────────────────────────────────────────── */
.okna-works-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
  margin:0;
}
@media (max-width:1023px){ .okna-works-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }
@media (max-width:600px){ .okna-works-grid{ grid-template-columns:1fr; gap:14px; } }

/* Карточка кейса-ленты повторяет .okna-bcard; бейдж срока — в мете (уже .okna-bcard__meta). */

/* ── Фильтры ленты /raboty/ ─────────────────────────────────────────────────── */
.okna-works-filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin:0 0 26px;
}
.okna-works-filters__sel{
  position:relative;
  min-width:220px;
}
.okna-works-filters select{
  width:100%;
  height:44px;
  padding:0 38px 0 14px;
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-btn, 8px);
  background:var(--ok-section-a);
  color:var(--ok-ink);
  font-size:15px;
  appearance:none;
  cursor:pointer;
}
.okna-works-filters__sel::after{
  content:"";
  position:absolute; right:16px; top:50%;
  width:8px; height:8px;
  border-right:2px solid var(--ok-text-2);
  border-bottom:2px solid var(--ok-text-2);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.okna-works-filters__reset{
  color:var(--ok-blue);
  font-size:14px;
  text-decoration:none;
  white-space:nowrap;
}
.okna-works-filters__reset:hover{ text-decoration:underline; }
@media (max-width:600px){
  .okna-works-filters{ flex-direction:column; align-items:stretch; gap:10px; }
  .okna-works-filters__sel{ min-width:0; }
}

/* ── Пустое состояние ───────────────────────────────────────────────────────── */
.okna-works-empty{
  padding:40px 24px;
  border:1px dashed var(--ok-border);
  border-radius:var(--ok-radius-card,16px);
  text-align:center;
  color:var(--ok-text-2);
  font-size:17px;
  background:var(--ok-section-b);
}

/* ── Пагинация (как у блога, моб скрыта) ────────────────────────────────────── */
.okna-works-pager{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  margin:32px 0 0;
}
.okna-works-pager a, .okna-works-pager span{
  min-width:42px; height:42px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--ok-border); border-radius:10px;
  color:var(--ok-ink); text-decoration:none; font-weight:600;
}
.okna-works-pager .is-current{ background:var(--ok-blue); color:var(--ok-on-dark); border-color:var(--ok-blue); }
/* ВЫП113: на /raboty/ пагинация нужна и на мобилке (по 5 карточек) — не скрываем. */
@media (max-width:600px){ .okna-works-pager{ gap:6px; margin-top:24px; } }

/* Секция «Кейсы и материалы» партнёра — отступ сверху. */
.okna-partner__materials{ margin-top:36px; }
.okna-partner__materials .okna-section-title{ margin-bottom:18px; }
/* ритм: низ страницы партнёра → футер к 72 (было 30; +42 паддинг снизу +30 базовый стык) */
.okna-partner{ padding-bottom:42px; }

/* ══════════════════ [CASE ВЫП114] Страница кейса по макету ══════════════════ */
/* Обёртка страницы — .okna-casepage (НЕ .okna-case: тот класс в design.css —
   интерактивная карточка кейса с :active scale(0.98), из-за коллизии имени вся
   страница «нажималась»). */
/* Фон страницы: лёгкий, сверху по центру; на мобилке — свой файл. */
.okna-casepage{
  background:url("img/case-bg-desktop.webp") no-repeat top center / 100% auto;
}
@media (max-width:767px){
  .okna-casepage{ background-image:url("img/case-bg-mobile.webp"); background-size:100% auto; }
}
/* Ритм низа страницы кейса = секция→футер 72 (десктоп) одним рычагом (padding-bottom
   обёртки). Тема twentytwentyone даёт `.site-main>* margin-bottom:90` + `.site-main`
   padding-bottom 30 → двойной отступ (176px под баннером). Гасим их для кейса. */
.okna-casepage{ margin-bottom:0 !important; }
body.single-okna_case .site-main{ padding-bottom:0; }
.okna-casepage .okna-blog-wrap{ padding-top:24px; padding-bottom:72px; }

/* Шапка кейса */
.okna-case-hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:32px; margin:8px 0 26px; }
.okna-case-hero__main{ min-width:0; }
.okna-case-hero__h1{ margin:0 0 12px; font-size:40px; font-weight:800; line-height:1.12; color:var(--ok-ink); letter-spacing:-.01em; text-wrap:balance; }
.okna-case-hero__lead{ margin:0 0 14px; max-width:640px; font-size:18px; line-height:1.5; color:var(--ok-text-2); }
.okna-case-hero__meta{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; font-size:15px; color:var(--ok-text-2); }
.okna-case-hero__meta b{ color:var(--ok-ink); }
.okna-case-hero__partner{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--ok-ink); font-weight:700; }
.okna-case-hero__partner img{ height:24px; width:auto; }
/* Слоган справа: две строки + короткая синяя черта ПОД текстом слева (как в макете). */
.okna-case-hero__slogan{ flex:0 0 auto; max-width:240px; margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; text-align:right; font-size:15px; font-weight:600; color:var(--ok-ink); line-height:1.3; }
.okna-case-hero__slogan span{ display:block; }
.okna-case-hero__slogan::after{ content:""; align-self:flex-start; width:44px; height:3px; margin-top:14px; border-radius:2px; background:var(--ok-blue); }

/* Белые карты */
.okna-case-card{
  background:var(--ok-section-a);
  border-radius:20px;
  padding:32px 36px;
  /* Чёткий край: тонкая рамка + заметная тень — иначе белая карта на светлом фоне
     теряет края и КАЖЕТСЯ уже баннера (при равной ширине 1216). */
  border:1px solid rgba(18,61,135,.07);
  box-shadow:0 8px 30px rgba(20,70,130,.10);
  margin:0 0 24px;
}
.okna-case-card .okna-section-title{ margin:0 0 18px; }

/* Карта «Что сделали»: слева текст 40%, справа фото 60%.
   Высота карты = высота ТЕКСТА (текст в потоке, задаёт высоту .okna-case-did__grid);
   фото — абсолютом на правую часть, top/bottom:0 → его высота = высоте карты (нет
   пустоты под фото). Так избегаем бага «% высоты img в растянутой grid-ячейке». */
.okna-case-did__grid{ position:relative; min-height:240px; }
.okna-case-did__txt{ width:38%; }
.okna-case-did--nophoto .okna-case-did__txt{ width:100%; }
/* Фото — фоном на абсолютной правой колонке: background-size:cover всегда заполняет
   бокс (в отличие от height:100% у img, который в этой раскладке не резолвится).
   Высота = высоте текста (top/bottom:0 от .okna-case-did__grid, задаваемой текстом). */
.okna-case-did__photo{ position:absolute; top:0; right:0; bottom:0; width:58%; margin:0; border-radius:14px; background:center/cover no-repeat; }
/* чеклист «что сделали»: пункт = синий круг с галочкой + текст */
/* Чеклист: синий круг с белой галочкой. Префикс .okna-case-did — чтобы перебить
   точку-маркер канона .okna-st-body (иначе выходит 7px точка). */
.okna-case-did__list ul{ list-style:none; margin:0; padding:0; }
.okna-case-did .okna-case-did__list li,
.okna-case-did .okna-case-did__list > p{
  position:relative; margin:0 0 22px; padding-left:56px; min-height:40px;
  display:flex; align-items:center; line-height:1.5; color:var(--ok-text-2);
}
.okna-case-did .okna-case-did__list li:last-child,
.okna-case-did .okna-case-did__list > p:last-child{ margin-bottom:0; }
.okna-case-did .okna-case-did__list li::before,
.okna-case-did .okna-case-did__list > p::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  background:var(--ok-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
/* заголовки/картинки внутри «что сделали» (если владелец добавит) не ломают чеклист */
.okna-case-did__list h2, .okna-case-did__list h3{ padding-left:0; }
.okna-case-did__list img{ max-width:100%; height:auto; border-radius:12px; }

/* ── Блок «Описание работы»: типографика КАНОНА .okna-st-body (не переопределяем).
   Свёрнут до --case-clamp с плавным раскрытием; кнопку показывает JS только при
   переполнении (класс .okna-case-desc--clamp). ── */
.okna-case-desc{ --case-clamp:430px; } /* видно ~3–4 абзаца, дальше «Показать ещё» */
/* мера чтения как у статей сайта — прозу не растягиваем на всю карту */
.okna-case-desc__body{ max-width:820px; transition:max-height .4s ease; }
.okna-case-desc__btn{ display:none; }               /* по умолчанию (объём в норме) кнопки нет */
.okna-case-desc__lbl--less{ display:none; }
/* Переполнение (класс от JS): клип + градиент снизу + кнопка «Показать ещё». */
.okna-case-desc--clamp .okna-case-desc__body{ max-height:var(--case-clamp); overflow:hidden; -webkit-mask-image:linear-gradient(#000 72%, transparent); mask-image:linear-gradient(#000 72%, transparent); }
.okna-case-desc--clamp .okna-case-desc__btn{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; padding:9px 18px; border:1px solid var(--ok-blue); border-radius:10px; color:var(--ok-blue); font-weight:700; font-size:14.5px; cursor:pointer; background:transparent; transition:background .15s, color .15s; }
.okna-case-desc--clamp .okna-case-desc__btn:hover{ background:var(--ok-blue); color:#fff; }
/* Раскрыто (класс --open от JS): снять клип и маску, переключить подпись кнопки. */
.okna-case-desc--open .okna-case-desc__body{ max-height:none; -webkit-mask-image:none; mask-image:none; overflow:visible; }
.okna-case-desc--open .okna-case-desc__lbl--more{ display:none; }
.okna-case-desc--open .okna-case-desc__lbl--less{ display:inline; }

/* ── Блок «Было / Стало»: заголовок и фото До/После — по ширине контента,
   вровень с блоком СТА под ним (владелец: край в край с баннером, не вылезать
   за контейнер). Фото крупные за счёт 2 колонок во всю ширину контента. ── */
.okna-case-ba{ margin:6px 0 32px; }
.okna-case-ba .okna-section-title{ margin:0 0 20px; }
.okna-ba2{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.okna-ba2__col{ position:relative; margin:0; border-radius:14px; aspect-ratio:16/9; background:center/cover no-repeat var(--ok-section-b,#eef2f8); }
.okna-ba2__label{
  position:absolute; top:12px; left:12px; z-index:1;
  padding:6px 14px; border-radius:8px; font-size:14px; font-weight:700; color:#fff;
}
.okna-ba2__label--before{ background:rgba(17,23,33,.62); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.okna-ba2__label--after{ background:var(--ok-blue); }
.okna-ba2__arrow{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:52px; height:52px; border-radius:50%; background:#fff; color:var(--ok-blue);
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(20,70,130,.18);
}

/* «Ещё кейсы» */
.okna-case-more{ margin:8px 0 24px; }
.okna-case-more .okna-section-title{ margin-bottom:18px; }

/* ── Планшет 768–1024: фото под текстом (сброс десктопной абсолютной раскладки) ── */
@media (max-width:1024px){
  .okna-case-hero__h1{ font-size:32px; }
  .okna-case-did__grid{ min-height:0; }
  .okna-case-did__txt{ width:100%; }
  .okna-case-did__photo{ position:relative; width:100%; height:230px; margin-top:22px; }
}
/* ── Мобилка <768: «Было/Стало» в столбик (16:9 в 2 колонки слишком мелко), стрелка вниз ── */
@media (max-width:767px){
  .okna-casepage .okna-blog-wrap{ padding-inline:16px; }
  .okna-case-hero{ flex-direction:column; gap:14px; margin-bottom:20px; }
  .okna-case-hero__h1{ font-size:26px; }
  .okna-case-hero__lead{ font-size:16px; }
  .okna-case-hero__slogan{ text-align:left; max-width:none; align-items:flex-start; margin-left:0; }
  .okna-case-card{ padding:20px; border-radius:16px; margin-bottom:16px; }
  .okna-case-did .okna-case-did__list li, .okna-case-did .okna-case-did__list > p{ padding-left:48px; }
  .okna-case-did .okna-case-did__list li::before, .okna-case-did .okna-case-did__list > p::before{ width:34px; height:34px; background-size:17px 17px; }
  .okna-ba2{ grid-template-columns:1fr; gap:12px; }
  .okna-ba2__label{ top:8px; left:8px; padding:4px 10px; font-size:12px; }
  .okna-ba2__arrow{ width:40px; height:40px; left:50%; top:auto; bottom:calc(50% - 6px); transform:translate(-50%,50%) rotate(90deg); }
}

/* ── Одиночный кейс: тело статьи — типографика КАНОНА .okna-st-body (как у блога/услуг):
   шрифт/размер/интерлиньяж/отступы абзацев НЕ переопределяем. Здесь только рамка
   картинок в тексте (иначе большие изображения вылезают за колонку) и подпись. ──── */
.okna-blog-single .okna-st-body img{ max-width:100%; height:auto; border-radius:14px; }
.okna-blog-single .okna-st-body figure{ margin:24px 0; }
.okna-blog-single .okna-st-body figure img{ width:100%; display:block; }
.okna-blog-single .okna-st-body figcaption{ margin-top:10px; font-size:14px; color:var(--ok-text-2); text-align:center; }

/* ── Одиночный кейс: галерея «до/после» ─────────────────────────────────────── */
.okna-case-single__lead{
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  margin:0 0 20px; color:var(--ok-text-2); font-size:15px;
}
.okna-case-single__lead b{ color:var(--ok-ink); }
.okna-case-single__partner{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:var(--ok-ink); font-weight:700;
}
.okna-case-single__partner img{ height:26px; width:auto; }

.okna-ba{ margin:26px 0; }
.okna-ba__cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.okna-ba__col h3{ margin:0 0 10px; font-size:17px; color:var(--ok-ink); }
.okna-ba__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.okna-ba__grid a{ display:block; }
.okna-ba__grid img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:12px; border:1px solid var(--ok-border); cursor:zoom-in; display:block;
}
@media (max-width:768px){
  .okna-ba__cols{ grid-template-columns:1fr; gap:22px; }
}
@media (max-width:600px){
  .okna-ba__grid{ grid-template-columns:1fr 1fr; gap:8px; }
}

/* CTA-карточка в боковой колонке кейса. */
.okna-case-cta{
  padding:22px 20px;
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card,16px);
  background:var(--ok-section-b);
}
.okna-case-cta__h{ display:block; font-size:18px; color:var(--ok-ink); margin:0 0 8px; }
.okna-case-cta__t{ margin:0 0 16px; color:var(--ok-text-2); font-size:15px; line-height:1.5; }
.okna-case-cta .okna-btn{ width:100%; justify-content:center; }

/* «Ещё кейсы партнёра» под статьёй. */
.okna-case-more{ margin-top:40px; }
.okna-case-more .okna-section-title{ margin-bottom:18px; }