/* ══════════════════════════════════════════════════════════════════
   ПОРТФОЛІО: СТОРІНКА КЕЙСУ

   Працює поверх liquid.css (токени, .section, .btn, .sv-hero, .sv-stat,
   .sd-breadcrumb, .sd-intro, .sd-blocks) і services.css (sv-*). Тут лише
   те, чого немає на сторінках послуг: рамка браузера, галерея, панель
   плагіна, факти результату й компактний герой індексу робіт.
   ══════════════════════════════════════════════════════════════════ */

/* ── Герой ─────────────────────────────────────────────────────── */

/* У кейса заголовок довший за назву послуги — тримаємо два рядки. */
.cs-hero .sv-hero__title{
  font-size:clamp(38px,6.6vw,116px);
  line-height:1.08;
}

/* Індекс робіт не потребує екрана на всю висоту. */
.cs-hero--short{
  min-height:auto;
  padding-bottom:clamp(var(--sp-9),6vw,var(--sp-11));
}
.cs-hero--short .sv-hero__title{
  font-size:clamp(42px,8vw,128px);
  line-height:1.04;
}

/* ── Рамка браузера ────────────────────────────────────────────── */

.cs-browser{
  border:1px solid var(--line);
  background:var(--panel);
  overflow:hidden;
}
.cs-browser__bar{
  display:flex; align-items:center; gap:var(--sp-3);
  min-height:36px; padding:0 var(--sp-4);
  border-bottom:1px solid var(--line);
}
.cs-browser__dots{ display:flex; gap:6px; flex:0 0 auto; }
.cs-browser__dots i{
  width:7px; height:7px; border-radius:50%;
  background:rgba(242,240,235,.22);
}
.cs-browser__url{
  margin-inline:auto;
  font-size:11px; letter-spacing:.08em; color:var(--ash);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cs-browser img{ display:block; width:100%; height:auto; }
.cs-browser--crop img{
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:top center;
}

.cs-cover{
  max-width:1440px; margin:0 auto;
  padding:0 clamp(var(--sp-4),4vw,56px) clamp(var(--sp-11),9vw,var(--sp-12));
}
.cs-figure{ margin:0; }
.cs-caption{
  display:flex; justify-content:space-between; gap:var(--sp-4);
  margin-top:var(--sp-3);
  color:var(--ash); font-size:var(--fs-1); letter-spacing:.06em;
}

/* ── Плагін: текст + екран ─────────────────────────────────────── */

.cs-plugin{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(var(--sp-7),6vw,var(--sp-11)); align-items:center;
}
.cs-plugin__lead{
  margin-top:var(--sp-5);
  color:var(--ash); font-size:clamp(var(--fs-3),1.5vw,var(--fs-4));
  max-width:52ch;
}
.cs-plugin__shot .cs-browser img{
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:top center;
}

.cs-list{ margin-top:var(--sp-7); border-top:1px solid var(--line); }
.cs-list li{
  display:grid; grid-template-columns:34px 1fr; gap:var(--sp-4);
  padding:var(--sp-4) 0; border-bottom:1px solid var(--line);
}
.cs-list__num{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--fs-1); letter-spacing:.06em;
  color:var(--glass-light); padding-top:3px;
}
.cs-list__title{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-3); }
.cs-list__note{ margin-top:2px; color:var(--ash); font-size:var(--fs-2); }

/* ── Галерея ───────────────────────────────────────────────────── */

.cs-gallery{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(var(--sp-5),3vw,var(--sp-7));
}
.cs-gallery .cs-browser img{
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top center;
}

/* ── Фінальний заклик ──────────────────────────────────────────── */

.cs-cta::before{ content:'КЕЙС'; }

/* ── Результат ─────────────────────────────────────────────────── */
.cs-facts{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.cs-fact{
  padding:var(--sp-6) var(--sp-5);
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}
.cs-fact:first-child{ padding-left:0; }
.cs-fact:last-child{ border-right:0; }
.cs-fact__value{
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(var(--fs-5),2.4vw,var(--fs-6));
  letter-spacing:-.02em; line-height:1.1;
}
.cs-fact__label{
  display:block; margin-top:var(--sp-2);
  color:var(--ash); font-size:var(--fs-2);
}

.cs-live{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-5); flex-wrap:wrap;
  margin-top:var(--sp-8); padding:var(--sp-6);
  border:1px solid var(--line);
  background:rgba(242,240,235,.02);
}
.cs-live__label{
  display:block; color:var(--ash);
  font-size:var(--fs-1); letter-spacing:.14em; text-transform:uppercase;
}
.cs-live__url{
  display:block; margin-top:var(--sp-2);
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(var(--fs-4),2.2vw,var(--fs-5));
  overflow-wrap:anywhere; word-break:break-word;
}

/* ── Адаптив ───────────────────────────────────────────────────── */

@media (max-width:1000px){
  .cs-plugin{ grid-template-columns:1fr; align-items:start; }
  .cs-facts{ grid-template-columns:repeat(2,1fr); }
  .cs-fact:nth-child(2){ border-right:0; }
  .cs-fact:nth-child(3){ padding-left:0; }
}
@media (max-width:700px){
  .cs-hero .sv-hero__title{ font-size:clamp(34px,9.4vw,72px); }
  .cs-gallery{ grid-template-columns:1fr; }
  .cs-facts{ grid-template-columns:1fr; }
  .cs-fact{ padding-left:0; border-right:0; }
  .cs-browser__url{ display:none; }
  .cs-caption{ flex-direction:column; gap:var(--sp-1); }
  .cs-live{ padding:var(--sp-5); }
  .cs-live .btn{ width:100%; }
}