/* ============================================================
   Стили только для страницы кейса — расширяют styles.css тем же
   языком (токены --ink/--paper/--line и т.д. уже объявлены там).
   При заполнении шаблона менять только разметку ниже (текст,
   --bcolor, картинки).
   ============================================================ */

/* раунд 23 — «Назад» убрана, отступ от дивайдера до карточки сохранён
   прежним (старый отступ + высота строки «Назад» 22px + её отступ) ◄◄◄ */
.case-top{ padding-top:calc(clamp(20px, 3vw, 28px) + 22px + clamp(16px, 2.4vw, 24px)); }

/* — карточка кейса «выглядывает» из-за дивайдера: скруглены только
   верхние углы, нижняя грань стоит вплотную на дивайдере (margin-bottom
   0, дивайдер идёт сразу после .case-top) — */
.case-hero{
  position:relative;
  overflow:hidden;
  border-radius:16px 16px 0 0;          /* ◄◄◄ только верхние углы */
  aspect-ratio:3 / 1;   /* ◄◄◄ десктоп 3:1 (картинка 2400×800) */
  /* раунд 23 — название прижато к низу карточки: нижний отступ = боковому ◄◄◄ */
  padding:clamp(40px, 7vw, 88px) clamp(24px, 5vw, 64px) clamp(24px, 5vw, 64px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:14px;
}
.case-hero-bg{
  position:absolute;
  inset:0;
  /* ЗАМЕНИТЬ --bcolor на фирменный цвет клиента (как в case-card) */
  background:var(--bcolor, #999);
}
.case-hero-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.5));
}
/* мобайл — 3:2 (картинка 1200×800) ◄◄◄ */
@media(max-width:768px){ .case-hero{ aspect-ratio:3 / 2; padding:20px 22px 24px; gap:10px; } }

/* картинка в карточке — две версии, браузер сам берёт нужную:
   <picture class="case-hero-img">
     <source media="(min-width:769px)" srcset="assets/cases/wide/имя-wide.jpg">
     <img src="assets/cases/имя.jpg" alt="">
   </picture>
   Если тег/название/описание поверх картинки не нужны — удалить эти
   три строки из разметки. */
.case-hero-img{ position:absolute; inset:0; z-index:1; display:block; }
.case-hero-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.case-hero-tag{
  position:relative; z-index:2;
  font-size:clamp(11px, 1.6vw, 14px);
  font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; opacity:.85;
}
.case-hero-title{
  position:relative; z-index:2;
  font-size:clamp(34px, 6vw, 76px); /* = .hero-title на страницах продуктов */
  font-weight:800; letter-spacing:-.03em; line-height:1.02;
  color:#fff;
  max-width:20ch;
}

/* — факты о проекте: тот же «точечный лидер», что в характеристиках
   продукта (specs-grid), статичные, без подсветки — */
.case-facts{ border-top:1px solid var(--line); margin-top:clamp(28px,4vw,44px); }
.case-fact{
  display:flex; align-items:baseline; gap:10px;
  padding:16px clamp(4px, 1.5vw, 12px);
  border-bottom:1px solid var(--line);
}
.case-fact-label{ font-size:14px; font-weight:500; color:var(--ink-45); white-space:nowrap; }
.case-fact-leader{ flex:1; }
.case-fact-value{ font-family:'JetBrains Mono', monospace; font-size:14.5px; font-weight:600; color:var(--heading); text-align:right; }
@media(max-width:640px){
  .case-fact{ flex-wrap:wrap; }
  .case-fact-leader{ display:none; }
  .case-fact-label{ width:100%; }
}

/* — текст задачи/решения — */
.case-copy{ max-width:72ch; font-size:16px; line-height:1.75; color:var(--ink-70); }
.case-copy + .case-copy{ margin-top:16px; }

/* — кнопка «Посмотреть результат»: ссылка на живой проект клиента.
   Тот же язык, что у .hero-cta на страницах продуктов: чёрная заливка,
   при наведении — инверсия — */
/* раунд 23 — кнопка по центру ◄◄◄ */
.case-result{
  display:flex; width:fit-content; margin-left:auto; margin-right:auto;
  align-items:center; justify-content:center;
  margin-top:var(--title-gap);   /* ◄◄◄ от таблицы фактов до кнопки */
  padding:15px 28px;
  border:1px solid var(--btn-bg); border-radius:999px;
  font-family:'Raleway', -apple-system, sans-serif;
  font-size:16px; font-weight:600; letter-spacing:.02em; /* = все кнопки */
  color:var(--paper); background:var(--btn-bg);
  transition:background .25s ease, color .25s ease, transform .2s ease;
}
.case-result:hover{ background:var(--paper); color:var(--ink); transform:translateY(-2px); }
@media(max-width:640px){ .case-result{ display:flex; width:100%; } }

/* раунд 23 — «Продукты» на странице кейса: от заголовка до плашек
   в 2 раза меньше ◄◄◄ */
.section-other-products .section-title,
.case-about .section-title{ margin-bottom:calc(var(--title-gap) / 2); }

/* раунд 25 — тег в левом верхнем углу карточки (как на главной),
   затемнение только под текстом: пятно в углу под тегом + мягкая
   плёнка снизу под названием; центр картинки не затемняется ◄◄◄ */
.case-hero{ --hpad:clamp(24px, 5vw, 64px); }
.case-hero-bg::after{ content:none; }
.case-hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0) 50%, rgba(0,0,0,.02) 56%, rgba(0,0,0,.05) 62%,
      rgba(0,0,0,.1) 69%, rgba(0,0,0,.16) 76%, rgba(0,0,0,.23) 84%,
      rgba(0,0,0,.29) 92%, rgba(0,0,0,.33) 100%);
}
.case-hero-tags{
  position:absolute; z-index:2; top:var(--hpad); left:var(--hpad);
  display:flex; flex-wrap:wrap; gap:8px;
}
.case-hero-tag{
  display:inline-flex; align-items:center; height:28px; padding:0 13px;
  background:var(--paper); color:var(--ink); opacity:1; box-shadow:0 1px 8px rgba(0,0,0,.14);
  font-family:'Raleway', sans-serif; font-weight:700;
  font-size:14px; letter-spacing:0; text-transform:none;
  border-radius:999px; line-height:1;
}
/* широкая картинка (десктоп): пилюли на 10px выше ◄◄◄ */
@media(min-width:769px){ .case-hero-tags{ top:calc(var(--hpad) - 10px); } }
.case-hero-title{ text-shadow:0 1px 18px rgba(0,0,0,.28); }
/* название клиента ниже — нижний отступ меньше бокового ◄◄◄ */
.case-hero{ padding-bottom:calc(var(--hpad) * .6); }
@media(max-width:768px){
  .case-hero{ --hpad:20px; padding-bottom:9px; }
  .case-hero-tags{ top:15px; left:17px; gap:6px; }
  .case-hero-tag{ height:24px; padding:0 10px; font-size:12px; }
}
/* «О проекте» на всю ширину контейнера */
.case-copy{ max-width:none; }
/* переключатель направлений (Сайт / Бот / Дизайн) — те же кнопки, что фильтр кейсов */
.case-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:calc(var(--title-gap) / 2); }
.case-panel[hidden]{ display:none; }

/* ===== раунд 26 — «Что сделали»: карточки как тарифы на страницах услуг
   (ниже ростом), под ними характеристики выбранной карточки, ниже —
   «О проекте» для неё же и кнопка на результат. Выбор карточки —
   наведение/тап/свайп (site.js, «Карточки работ на странице кейса») ◄◄◄ */
.work-grid{ display:grid; grid-template-columns:repeat(var(--n,2), 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.work-card{ background:var(--paper); padding:clamp(28px, 4vw, 48px) clamp(22px, 3vw, 36px); display:flex; flex-direction:column; gap:20px; cursor:pointer; transition:background .25s, transform .2s ease, box-shadow .2s ease; }
.work-card:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,.16); z-index:3; }
.work-name{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--heading); }
.work-price{ font-family:'JetBrains Mono', monospace; font-size:clamp(20px, 2.6vw, 28px); font-weight:700; letter-spacing:-.02em; color:var(--heading); }
.work-name{ font-size:24px; }
.work-desc{ font-size:14.5px; color:var(--ink-45); line-height:1.65; }
/* «Подробнее» — как «Заказать» у тарифов: на всю ширину, видна только
   на выбранной карточке (на телефоне — всегда) */
.work-more{
  margin-top:auto; align-self:stretch;
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 28px; border:1px solid var(--btn-bg); border-radius:999px;
  font-family:'Raleway', -apple-system, sans-serif; font-size:16px; font-weight:600; letter-spacing:.02em;
  background:var(--btn-bg); color:var(--paper); cursor:pointer;
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.work-card.is-selected .work-more{ opacity:1; visibility:visible; }
.work-more:hover{ background:var(--paper); color:var(--ink); transform:translateY(-2px); }
/* выбранная карточка — та же инверсия, что у тарифов */
.work-card.is-selected{ background:#ebebeb; }
.work-card.is-selected *{ color:#1a1a1a !important; }
.work-card.is-selected .work-more{ border-color:#161616 !important; background:#161616 !important; color:#fff !important; }
html:not([data-theme="dark"]) .work-card.is-selected{ background:#161616; }
html:not([data-theme="dark"]) .work-card.is-selected *{ color:#fff !important; }
html:not([data-theme="dark"]) .work-card.is-selected .work-desc{ color:rgba(255,255,255,.7) !important; }
html:not([data-theme="dark"]) .work-card.is-selected .work-more{ border-color:#fff !important; background:#fff !important; color:#161616 !important; }
.work-dots{ display:none; }
.work-specs[hidden], .case-panel[hidden]{ display:none; }
.work-specs{ margin-top:clamp(20px, 3vw, 32px); }
.work-specs .case-facts{ margin-top:0; }
#case-about{ scroll-margin-top:90px; margin-top:var(--title-gap); margin-bottom:calc(var(--title-gap) / 2); }
@media(max-width:768px){
  .work-grid.is-carousel{
    display:flex; gap:14px; background:none; border:none;
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:12vw;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:4px 12vw 20px;
  }
  .work-grid.is-carousel::-webkit-scrollbar{ display:none; }
  .work-grid.is-carousel .work-card{ flex:0 0 76vw; scroll-snap-align:center; border:1px solid var(--line); }
  .work-grid{ grid-template-columns:1fr; }
  .work-card:hover{ transform:none; box-shadow:none; }
  .work-card:not(.is-selected) .work-more{ opacity:0; visibility:hidden; }
  .work-card.is-selected .work-more{ opacity:1; visibility:visible; }
  .work-dots{ display:flex; justify-content:center; gap:8px; margin-top:-8px; }
  .work-dot{ width:7px; height:7px; border-radius:999px; background:var(--line); transition:width .25s ease, background .25s ease; cursor:pointer; }
  .work-dot.active{ width:20px; background:var(--ink); }
}