/* lletsell — сторінка кейсу.
   Один макет на всі ширини: від 1280px він відтворює слайд презентації
   один в один за координатами з assets/js/case-spec.js, нижче — перебудовує
   колонки (3 → 2 → 1) і залишає текст читабельним. Слайди, у яких веб-текст
   довший за оригінальний і блоки почали б налазити один на одного, JS
   позначає класом .cs--flow — вони йдуть потоком на будь-якій ширині. */

@font-face{font-family:'CaseRubik';src:url('/assets/case-layout/font-0019-rubik-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'CaseRubik';src:url('/assets/case-layout/font-0104-rubik-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'CaseRubik';src:url('/assets/case-layout/font-0020-rubik-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'CaseRubik';src:url('/assets/case-layout/font-0168-rubik-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'CaseGeorgia';src:url('/assets/case-layout/font-0012-georgia.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'CaseGeorgia';src:url('/assets/case-layout/font-0018-georgia-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* wow.css ховає слайди нижче 1199px — там жив окремий мобільний макет.
   Тепер макет один, тож повертаємо його на всіх ширинах. */
.case-layout{background:#fff}
.case-layout__slides{display:block}
.case-layout__loading{display:none}

.cs{
  --px:1px;                 /* 1 пиксель слайда; выставляется из JS */
  --accent:#73230d;
  --panel:#e9e4dc;
  --ink:#202020;
  --cream:#e8e4db;
  --asc:.945;               /* доля кегля до базовой линии */
  position:relative;
  background:#fff;
  color:var(--ink);
  font-family:'CaseRubik',Rubik,system-ui,-apple-system,sans-serif;
  font-weight:400;
  overflow:hidden;
}
.cs + .cs{border-top:1px solid rgba(32,32,32,.12)}
.cs b,.cs strong{font-weight:700}
.cs .cs-medium{font-weight:500}
.cs :where(h1,h2,p,ul,li){margin:0}
.cs ul{list-style:none;padding:0}

/* ---------- шапка слайда ---------- */
.cs__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:var(--accent);
  color:var(--cream);
}
.cs__kind{font-family:'CaseGeorgia',Georgia,serif;font-weight:700}
.cs__niche{display:inline-flex;align-items:center;gap:.6em;text-align:right;min-width:0}
.cs__arrow{--tip-w:4px;--tip-h:6px;flex:none;position:relative;height:1px;background:currentColor;opacity:.9}
.cs__arrow::before{
  content:"";position:absolute;left:0;top:50%;
  width:0;height:0;
  border-top:calc(var(--tip-h)/2) solid transparent;
  border-bottom:calc(var(--tip-h)/2) solid transparent;
  border-right:var(--tip-w) solid currentColor;
  transform:translate(-100%,-50%);
}

/* ---------- заголовок ---------- */
.cs__title{font-family:'CaseGeorgia',Georgia,serif;font-weight:700;line-height:1.1}
.cs__desc{font-family:'CaseGeorgia',Georgia,serif;font-weight:400;line-height:1.2}
.cs__part{font-weight:700;grid-column:1 / -1}
.cs__logo{display:block;object-fit:contain;object-position:right center}

/* ---------- колонки ---------- */
.cs-col__head{font-weight:700;line-height:1.2}
.cs-col b{color:var(--emphasis-color,inherit)}
.cs-col__body>*+*{margin-top:1.2em}
.cs-col__body li{position:relative}
.cs-col--bullet li{padding-left:1.45em}
.cs-col--bullet li::before{
  content:"";position:absolute;left:0;top:.49em;
  width:.34em;height:.34em;border-radius:50%;background:currentColor;
}
.cs-col--plus li{padding-left:1.2em}
.cs-col--plus li::before{content:"+";position:absolute;left:0;font-weight:700}
.cs-col--numbered{counter-reset:cs-item}
.cs-col--numbered li{padding-left:1.5em;counter-increment:cs-item}
.cs-col--numbered li::before{content:counter(cs-item) ".";position:absolute;left:0}
.cs__rule{background:var(--rule-color,#000)}

/* ---------- отзыв ---------- */
.cs-review{background:var(--panel)}
.cs-tag{
  display:inline-block;
  background:var(--accent);
  color:#fafafa;
  line-height:1.2;
  white-space:nowrap;
}
.cs-chevron{background:var(--panel)}
.cs-portrait{
  display:block;margin:0;
  border:1px solid var(--accent);
  background:#fff;
  overflow:hidden;
}
.cs-portrait img{display:block;width:100%;height:100%;object-fit:cover}
.cs-portrait{position:relative}
.cs-link{
  display:inline-flex;align-items:center;gap:.5em;
  color:var(--accent);text-decoration:underline;text-underline-offset:.18em;
}
.cs-link__icon{
  flex:none;display:block;
  background:var(--accent);
  -webkit-mask:url('../img/case-link.png') no-repeat center/contain;
  mask:url('../img/case-link.png') no-repeat center/contain;
}
.cs-link--unavailable{cursor:default;text-decoration:none;opacity:.6}
.cs-link__icon--art{
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  -webkit-mask:none;mask:none;
}
.cs-author{line-height:1.2}
/* У потоці шматки рядків зі слайда — звичайний текст. */
.cs-line{display:inline}
.cs-quote>*+*{margin-top:1.2em}
.cs-chat{margin-top:24px;font-size:16px;line-height:1.25}
.cs-chat__author{font-size:.9em;margin:0 0 .45em 1.2em!important;font-weight:400}
.cs-chat__bubble{margin:0;padding:.8em 1.3em;border-radius:1.7em;box-shadow:0 .8em 1em #0002}
.cs-chat__bubble p+p{margin-top:.8em}
.cs-chat--blue .cs-chat__bubble{background:#0715d3;color:#fff}
.cs-chat--pink .cs-chat__bubble{background:#f2bfe4;color:#202020}
.cs-detail-link{padding:.4em .8em;background:var(--detail-bg,#0715d3);color:#fff;font-weight:700}
.cs-detail-link .cs-link__icon{display:none}

/* ============================================================
   Адаптив: звичайний потік, типографіка узгоджена з шапкою сайту
   ============================================================ */
.cs{--pad:clamp(16px,4vw,40px);--title-fs:clamp(28px,5.4vw,56px)}

/* Планка кейса йде одразу під шапкою сайту і в брендових кейсах має той
   самий колір, тож без волосяної лінії вони читаються як один блок. */
.cs__bar{
  padding:clamp(9px,1.2vw,14px) var(--pad);
  font-size:clamp(13px,1.5vw,17px);
  border-top:1px solid rgba(255,255,255,.18);
  gap:clamp(12px,2vw,24px);
}
.cs__kind{font-size:clamp(14px,1.7vw,19px)}
.cs__niche{text-align:right}
.cs__arrow{width:clamp(20px,2.4vw,34px)}

.cs__stage{padding:clamp(24px,4vw,44px) var(--pad) clamp(30px,5vw,56px)}
.cs__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(104px,26%,230px);
  grid-template-rows:auto auto;
  align-items:start;gap:clamp(14px,3vw,32px);
}
.cs__head:not(:has(.cs__logo)){grid-template-columns:minmax(0,1fr)}
.cs__head>*{min-width:0}
.cs__title,.cs__desc,.cs-author,.cs-link,.cs-col__body,.cs-quote{overflow-wrap:anywhere}
.cs__title{grid-column:1;grid-row:1;font-size:var(--title-fs);line-height:1.06}
.cs__desc{grid-column:1;grid-row:2;font-size:clamp(16px,2.4vw,28px);margin-top:.45em}
/* Логотип не дрібніє на телефоні, а його верхній край збігається з верхом
   літер заголовка, а не з рамкою рядка. */
.cs__logo{
  grid-column:2;grid-row:1 / span 2;align-self:start;
  width:100%;height:auto;
  max-height:clamp(52px,13vw,104px);
  object-fit:contain;object-position:right top;
  margin-top:calc(.3 * var(--title-fs));
}

.cs__cols{display:grid;grid-template-columns:1fr;margin-top:clamp(26px,4vw,46px)}
.cs-col{display:flex;flex-direction:column;gap:.7em;min-width:0}
/* Колонки, що стали одна під одною, розділяє горизонтальна лінія — так само,
   як на слайді їх розділяють вертикальні. */
.cs-col + .cs-col{
  margin-top:clamp(22px,2.8vw,32px);
  padding-top:clamp(22px,2.8vw,32px);
  border-top:1px solid rgba(32,32,32,.22);
}
.cs-col__head{font-size:clamp(18px,2.2vw,24px)}
.cs-col__body{font-size:clamp(15px,1.75vw,18px);line-height:1.5}
.cs__rule{display:none}

.cs-review{
  margin-top:clamp(28px,4vw,48px);
  padding:clamp(26px,3.4vw,40px) clamp(18px,3vw,36px) clamp(26px,3.4vw,40px);
  position:relative;
}
.cs-tag{
  position:absolute;top:0;left:clamp(18px,3vw,36px);
  transform:translateY(-50%);
  padding:.3em .9em;font-size:clamp(14px,1.9vw,20px);
}
.cs-chevron{display:none}
.cs-testimonial+.cs-testimonial{
  margin-top:clamp(24px,3.4vw,40px);
  padding-top:clamp(24px,3.4vw,40px);
  border-top:1px solid rgba(32,32,32,.18);
}
.cs-testimonial__head{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2.4vw,26px);align-items:start;
}
.cs-testimonial__by{min-width:0}
.cs-link{max-width:100%;min-width:0}
.cs-link>span{min-width:0}
.cs-portrait{width:clamp(96px,17vw,160px);height:clamp(96px,17vw,160px)}
.cs-author{font-size:clamp(16px,2vw,22px)}
.cs-link{font-size:clamp(13px,1.6vw,16px);margin-top:.7em}
.cs-link__icon{width:1.5em;height:1.35em}
.cs-quotes{
  margin-top:clamp(16px,2vw,24px);
  display:grid;grid-template-columns:1fr;gap:clamp(16px,2.4vw,28px);
}
.cs-quote{font-size:clamp(15px,1.75vw,18px);line-height:1.5}
.cs-quote:only-child{grid-column:1 / -1}

/* На телефоні стрілка біля ніші тільки заважає. */
@media (max-width:639px){
  .cs__arrow{display:none}
  .cs__head{grid-template-columns:minmax(0,1fr);gap:14px}
  .cs__logo{grid-column:1;grid-row:3;width:min(160px,60%);justify-self:end;margin-top:0;max-height:80px}
}

/* Планшет і вузький ноутбук: два стовпці, третій — на всю ширину під лінією. */
@media (min-width:860px){
  .cs__cols{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(30px,3.4vw,52px);
  }
  .cs-col + .cs-col{margin-top:0;padding-top:0;border-top:0}
  .cs-col:nth-child(2n){
    padding-left:clamp(30px,3.4vw,52px);
    border-left:1px solid rgba(32,32,32,.22);
    margin-left:calc(-1 * clamp(30px,3.4vw,52px));
  }
  .cs-col:nth-child(n+3){
    grid-column:1 / -1;
    margin-top:clamp(26px,3vw,38px);
    padding-top:clamp(26px,3vw,38px);
    border-top:1px solid rgba(32,32,32,.22);
  }
  .cs-quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   1 в 1 со слайдом
   ============================================================ */
@media (min-width:1280px){
  .cs:not(.cs--flow) .cs-chat{
    position:absolute;z-index:2;margin:0;left:calc(var(--x)*var(--px));
    top:calc(var(--y)*var(--px));width:calc(var(--w)*var(--px));
    font-size:calc(21 * var(--px));line-height:1.04;transform:none;
  }
  .cs:not(.cs--flow) .cs-chat__bubble{padding:.7em 1.25em}
  .cs:not(.cs--flow) .cs-detail-link{
    position:absolute;left:calc(var(--x)*var(--px));top:calc(var(--y)*var(--px));
    width:calc(var(--w)*var(--px));height:calc(var(--h)*var(--px));margin:0;justify-content:center;font-size:calc(24*var(--px));
  }
  /* Слайд відтворюється точно лише тоді, коли спека описує його цілком.
     Інакше JS ставить .cs--flow і сторінка лишається у звичайному потоці. */
  .cs:not(.cs--flow) .cs__bar{
    display:block;position:relative;padding:0;border-top:0;
    height:calc(var(--bar-h) * var(--px));
    font-size:calc(35 * var(--px));
  }
  .cs:not(.cs--flow) .cs__kind{
    position:absolute;left:calc(var(--kind-x) * var(--px));
    top:calc((var(--kind-baseline) - var(--asc) * var(--kind-size)) * var(--px));
    font-size:calc(var(--kind-size) * var(--px));line-height:1.2;
  }
  .cs:not(.cs--flow) .cs__niche{display:contents}
  .cs:not(.cs--flow) .cs__niche-text{
    position:absolute;right:calc(var(--niche-right) * var(--px));
    top:calc((var(--niche-baseline) - var(--asc) * var(--niche-size)) * var(--px));
    font-size:calc(var(--niche-size) * var(--px));line-height:1.2;
  }
  .cs:not(.cs--flow) .cs__arrow{
    --tip-w:calc(3.4 * var(--px));--tip-h:calc(2.48 * var(--px));
    position:absolute;
    left:calc(var(--arrow-x, 1865) * var(--px));
    top:calc(var(--arrow-y, 39) * var(--px));
    width:calc(var(--arrow-w, 55) * var(--px));
    height:max(.6px,calc(.75 * var(--px)));
  }
  .cs:not(.cs--flow) :is(.cs__title,.cs__desc,.cs-author,.cs-link,.cs-col__body,.cs-quote){overflow-wrap:normal}
  /* Підкреслення посилання малює лінійка зі слайда. */
  .cs:not(.cs--flow) .cs-review:not(.cs-review--flow) .cs-link{text-decoration:none}

  /* Координати у спеці — від верху слайда, разом із плашкою, тож контекстом
     позиціонування має бути сам слайд, а не сцена під плашкою. */
  .cs:not(.cs--flow) .cs__stage{
    position:static;padding:0;
    min-height:calc((1080 - var(--bar-h)) * var(--px));
  }
  .cs:not(.cs--flow) .cs__head,
  .cs:not(.cs--flow) .cs__cols,
  .cs:not(.cs--flow) .cs-col{display:contents}

  .cs:not(.cs--flow) .cs__title,
  .cs:not(.cs--flow) .cs__desc,
  .cs:not(.cs--flow) .cs__part,
  .cs:not(.cs--flow) .cs-col__head,
  .cs:not(.cs--flow) .cs-col__body,
  .cs:not(.cs--flow) .cs-review:not(.cs-review--flow) .cs-quote,
  .cs:not(.cs--flow) .cs-review:not(.cs-review--flow) .cs-author{
    position:absolute;
    left:calc(var(--x) * var(--px));
    top:calc((var(--baseline) - var(--asc) * var(--size)) * var(--px));
    width:calc(var(--w) * var(--px));
    /* Рамка тексту на слайді іноді ширша за сам слайд — обрізаємо по краю. */
    max-width:calc(100% - var(--x) * var(--px));
    font-size:calc(var(--size) * var(--px));
    line-height:var(--lh,1.2);
    margin:0;
  }
  .cs:not(.cs--flow) .cs__title{line-height:1.1}
  .cs:not(.cs--flow) .cs__title--accessible{
    position:absolute!important;width:1px!important;height:1px!important;
    padding:0!important;margin:-1px!important;overflow:hidden!important;
    clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
  }
  /* Точний режим: кожен шматок — окремий рядок, як на слайді, з тими самими
     пробілами (у деці трапляються подвійні, а HTML їх схлопує). */
  .cs:not(.cs--flow) .cs-line{display:block;white-space:pre}
  .cs:not(.cs--flow) .cs-col__body,
  .cs:not(.cs--flow) .cs-author,
  .cs:not(.cs--flow) .cs-review:not(.cs-review--flow) .cs-quote{
    white-space:pre-wrap;
  }
  /* Однорядкові назва й дескриптор на слайді не переносяться. */
  .cs:not(.cs--flow) .cs__title[data-single],
  .cs:not(.cs--flow) .cs__desc[data-single],
  .cs:not(.cs--flow) .cs-author[data-single]{width:auto;white-space:nowrap}
  .cs:not(.cs--flow) .cs__logo{
    position:absolute;margin:0;max-width:none;max-height:none;object-position:center;
    left:calc(var(--x) * var(--px));
    top:calc(var(--y) * var(--px));
    width:calc(var(--w) * var(--px));
    height:calc(var(--h) * var(--px));
    clip-path:inset(calc(var(--clip-top,0)*var(--px)) calc(var(--clip-right,0)*var(--px)) calc(var(--clip-bottom,0)*var(--px)) calc(var(--clip-left,0)*var(--px)));
  }
  .cs:not(.cs--flow) .cs__rule{
    display:block;position:absolute;
    left:calc(var(--x) * var(--px));
    top:calc(var(--y) * var(--px));
    width:max(1px, calc(var(--w) * var(--px)));
    height:max(1px, calc(var(--h) * var(--px)));
  }
  /* Відступ над абзацом — зі слайда, а не рівний для всіх. */
  .cs:not(.cs--flow) .cs-col__body>*+*,
  .cs:not(.cs--flow) .cs-col__body li+li,
  .cs:not(.cs--flow) .cs-review:not(.cs-review--flow) .cs-quote>*+*{
    margin-top:calc(var(--gap,0) * var(--px));
  }
  /* Відступ від маркера до тексту — теж зі слайда. */
  .cs:not(.cs--flow) .cs-col--bullet li,
  .cs:not(.cs--flow) .cs-col--plus li{
    padding-left:calc(var(--indent,0) * var(--px));
  }
  .cs:not(.cs--flow) .cs-col--numbered li{
    padding-left:calc(var(--indent,0) * var(--px));
  }

  /* Блок відгуку відтворюється точно лише тоді, коли слайд описує кожен
     його елемент; інакше JS ставить .cs-review--flow і панель розкладається
     звичайним потоком, залишаючись на своєму місці. */
  .cs:not(.cs--flow) .cs-review:not(.cs-review--flow){
    position:absolute;margin:0;padding:0;
    left:calc(var(--x) * var(--px));
    top:calc(var(--y) * var(--px));
    width:calc(var(--w) * var(--px));
    min-height:calc(var(--h) * var(--px));
  }
  .cs:not(.cs--flow) .cs-review:not(.cs-review--flow) .cs-testimonial,
  .cs:not(.cs--flow) .cs-review:not(.cs-review--flow) .cs-testimonial__head,
  .cs:not(.cs--flow) .cs-review:not(.cs-review--flow) .cs-testimonial__by,
  .cs:not(.cs--flow) .cs-review:not(.cs-review--flow) .cs-quotes{display:contents}
  .cs:not(.cs--flow) .cs-review:not(.cs-review--flow) .cs-tag{
    position:absolute;
    left:calc(var(--x) * var(--px));
    top:calc(var(--y) * var(--px));
    width:calc(var(--w) * var(--px));
    height:calc(var(--h) * var(--px));
    display:grid;place-items:center;
    padding:0;
    font-size:calc(var(--size) * var(--px));
    transform:none;
  }
  .cs:not(.cs--flow) .cs-review:not(.cs-review--flow) .cs-chevron{
    display:block;position:absolute;
    left:calc(var(--x) * var(--px));
    top:calc(var(--y) * var(--px));
    width:calc(var(--s) * var(--px));
    height:calc(var(--s) * var(--px));
    transform:rotate(45deg);
  }
  .cs:not(.cs--flow) .cs-review:not(.cs-review--flow) .cs-portrait img[data-framed]{
    position:absolute;
    left:calc(var(--img-x) * var(--px));
    top:calc(var(--img-y) * var(--px));
    width:calc(var(--img-w) * var(--px));
    height:calc(var(--img-h) * var(--px));
    object-fit:fill;
  }
  .cs:not(.cs--flow) .cs-review:not(.cs-review--flow) .cs-portrait{
    position:absolute;
    left:calc(var(--x) * var(--px));
    top:calc(var(--y) * var(--px));
    width:calc(var(--w) * var(--px));
    height:calc(var(--h) * var(--px));
  }
  .cs:not(.cs--flow) .cs-review:not(.cs-review--flow) .cs-link{
    position:absolute;margin:0;
    left:calc(var(--x) * var(--px));
    top:calc((var(--baseline) - var(--asc) * var(--size)) * var(--px));
    font-size:calc(var(--size) * var(--px));
    gap:calc(var(--icon-gap, 12) * var(--px));
    align-items:baseline;
  }
  .cs:not(.cs--flow) .cs-review:not(.cs-review--flow) .cs-link__icon{
    width:calc(var(--icon-w, 41) * var(--px));
    height:calc(var(--icon-h, 37) * var(--px));
    align-self:center;
  }

  .cs:not(.cs--flow) .cs-review--flow{
    position:absolute;margin:0;
    left:calc(var(--x, 54) * var(--px));
    top:calc(var(--y, 620) * var(--px));
    width:calc(var(--w, 1811) * var(--px));
    min-height:calc(var(--h, 0) * var(--px));
    padding:calc(46 * var(--px)) calc(40 * var(--px));
  }
  .cs:not(.cs--flow) .cs-review--flow .cs-tag{
    left:calc(40 * var(--px));font-size:calc(32 * var(--px));
  }
  .cs:not(.cs--flow) .cs-review--flow .cs-portrait{
    width:calc(190 * var(--px));height:calc(190 * var(--px));
  }
  .cs:not(.cs--flow) .cs-review--flow .cs-author{font-size:calc(30 * var(--px))}
  .cs:not(.cs--flow) .cs-review--flow .cs-quote{font-size:calc(22 * var(--px));line-height:1.35}
  .cs:not(.cs--flow) .cs-review--flow .cs-link{font-size:calc(21 * var(--px))}
  .cs:not(.cs--flow) .cs-review--flow .cs-quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (prefers-reduced-motion:no-preference){
  .cs-link{transition:opacity .18s ease}
}
.cs-link:hover{opacity:.75}