/* ================= сторінка кейсу =================
   та сама мова, що й на головній: сітка з віньєткою, картки #121212 r16,
   заголовки карток 42 Bold, описи 18 Medium білий 55%, усе з малої літери */

.case-page { overflow-x: clip; }

.clogo {
  position: fixed;
  z-index: 60;
  left: calc(64 * var(--u));
  top: calc(54 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #000;
  font-weight: 700;
  font-size: calc(28 * var(--u));
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.85);
}

/* ---- перший екран кейсу ---- */
.chero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(28 * var(--k));
  padding: calc(180 * var(--k)) var(--pad) calc(80 * var(--k));
  text-align: center;
}
.cback { font-weight: 500; font-size: calc(18 * var(--k)); color: rgba(255, 255, 255, 0.45); transition: color 0.3s ease; }
.cback:hover { color: #fff; }
.cchip { font-size: calc(28 * var(--k)); }
.ctitle {
  max-width: calc(1328 * var(--k));
  font-weight: 700;
  font-size: calc(88 * var(--k));
  line-height: 1.05;
  color: rgba(255, 255, 255, 0.9);
  text-wrap: balance;
}
.clead {
  max-width: calc(880 * var(--k));
  font-weight: 500;
  font-size: calc(18 * var(--k));
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}
.clive {
  font-weight: 700;
  font-size: calc(18 * var(--k));
  color: var(--green);
  border-bottom: 1px solid rgba(147, 211, 84, 0.4);
}

.cmeta {
  width: 100%;
  max-width: calc(1328 * var(--k));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(4 * var(--k));
  margin-top: calc(32 * var(--k));
  text-align: left;
}
.cmeta__item {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--k));
  padding: calc(28 * var(--k)) calc(36 * var(--k));
  border-radius: calc(16 * var(--k));
  background: var(--card);
}
.cmeta__label { font-weight: 500; font-size: calc(16 * var(--k)); color: rgba(255, 255, 255, 0.4); }
.cmeta__value { font-weight: 700; font-size: calc(22 * var(--k)); line-height: 1.2; color: rgba(255, 255, 255, 0.85); }

/* ---- медіа-слот: фото або відео ---- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: calc(16 * var(--k));
  background: var(--card);
}
.media img, .media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.media figcaption {
  position: absolute;
  left: calc(16 * var(--k));
  bottom: calc(16 * var(--k));
  z-index: 1;
  padding: calc(8 * var(--k)) calc(14 * var(--k));
  border-radius: calc(66 * var(--k));
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 500;
  font-size: calc(14 * var(--k));
  color: rgba(255, 255, 255, 0.75);
}
/* порожній слот */
.media.is-empty {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, #121212 0 calc(14 * var(--k)), #151515 calc(14 * var(--k)) calc(28 * var(--k)));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.media__empty { text-align: center; font-weight: 500; font-size: calc(16 * var(--k)); line-height: 1.4; color: rgba(255, 255, 255, 0.35); }
.media__empty b { display: block; margin-bottom: calc(6 * var(--k)); font-size: calc(20 * var(--k)); color: rgba(255, 255, 255, 0.6); }

.ccover { max-width: calc(1328 * var(--k)); margin: 0 auto; padding: 0; }
.ccover__media { aspect-ratio: 16 / 9; }

/* ---- секції ---- */
.csec { padding: calc(200 * var(--k)) var(--pad) 0; }
.csec.gsec { padding-bottom: calc(80 * var(--k)); }
.csec__title {
  text-align: center;
  font-weight: 700;
  font-size: calc(64 * var(--k));
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: calc(64 * var(--k));
}

/* кроки рішення — як картки портфоліо: текст 3 клітинки + медіа 6 клітинок */
.csteps { max-width: calc(1328 * var(--k)); margin: 0 auto; display: grid; gap: calc(4 * var(--k)); }
.cstep { display: grid; grid-template-columns: calc(440 * var(--k)) 1fr; gap: calc(4 * var(--k)); min-height: calc(560 * var(--k)); }
.cstep--flip { grid-template-columns: 1fr calc(440 * var(--k)); }
.cstep--flip .cstep__info { order: 2; }
.cstep__info {
  display: flex;
  flex-direction: column;
  padding: calc(36 * var(--k));
  border-radius: calc(16 * var(--k));
  background: var(--card);
}
.cstep__num { font-weight: 700; font-size: calc(42 * var(--k)); line-height: 1; color: rgba(255, 255, 255, 0.14); }
.cstep__title { margin-top: auto; font-weight: 700; font-size: calc(42 * var(--k)); line-height: 1.1; color: rgba(255, 255, 255, 0.8); }
.cstep__text { margin-top: calc(18 * var(--k)); font-weight: 500; font-size: calc(18 * var(--k)); line-height: 1.4; color: rgba(255, 255, 255, 0.55); }

/* що зроблено — картки 3 в ряд */
.cdone { list-style: none; max-width: calc(1328 * var(--k)); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(4 * var(--k)); }
.cdone__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(40 * var(--k));
  min-height: calc(220 * var(--k));
  padding: calc(36 * var(--k));
  border-radius: calc(16 * var(--k));
  background: var(--card);
}
.cdone__title { font-weight: 700; font-size: calc(42 * var(--k)); line-height: 1.1; color: rgba(255, 255, 255, 0.8); }
.cdone__text { font-weight: 500; font-size: calc(18 * var(--k)); line-height: 1.4; color: rgba(255, 255, 255, 0.55); }

/* галерея */
.cgal { max-width: calc(1328 * var(--k)); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(4 * var(--k)); }
.cgal__item { aspect-ratio: 1 / 1; }
.cgal__item--wide { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* фінал */
.cend { max-width: calc(1328 * var(--k)); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr; gap: calc(4 * var(--k)); }
.cend__note, .cend__next {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--k));
  min-height: calc(300 * var(--k));
  padding: calc(36 * var(--k));
  border-radius: calc(16 * var(--k));
  background: var(--card);
}
.cend__note p { margin-top: auto; max-width: calc(640 * var(--k)); font-weight: 500; font-size: calc(18 * var(--k)); line-height: 1.4; color: rgba(255, 255, 255, 0.55); }
.cend__next { position: relative; transition: background-color 0.35s ease; }
.cend__next-title { margin-top: auto; font-weight: 700; font-size: calc(42 * var(--k)); line-height: 1.1; color: rgba(255, 255, 255, 0.8); }
.cend__next .fcard__arrow { position: absolute; top: calc(36 * var(--k)); right: calc(36 * var(--k)); }
@media (hover: hover) { .cend__next:hover { background: var(--card-hi); } .cend__next:hover .fcard__arrow { transform: rotate(-90deg); } }

.case-page .site-footer { padding-top: calc(200 * var(--k)); }

/* ---- телефон ---- */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .clogo { left: calc(16 * var(--u)); top: calc(24 * var(--u)); font-size: calc(20 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); }
  .chero { min-height: 0; padding: calc(110 * var(--k)) var(--pad) calc(40 * var(--k)); gap: calc(16 * var(--k)); }
  .cback { font-size: calc(14 * var(--k)); }
  .cchip { font-size: calc(16 * var(--k)); }
  .ctitle { font-size: calc(36 * var(--k)); }
  .clead, .clive { font-size: calc(15 * var(--k)); }
  .cmeta { grid-template-columns: 1fr 1fr; gap: calc(6 * var(--k)); margin-top: calc(12 * var(--k)); }
  .cmeta__item { padding: calc(16 * var(--k)); border-radius: calc(12 * var(--k)); }
  .cmeta__label { font-size: calc(12 * var(--k)); }
  .cmeta__value { font-size: calc(15 * var(--k)); }
  .ccover { padding: 0 var(--pad); }
  .media { border-radius: calc(12 * var(--k)); }
  .media figcaption { font-size: calc(11 * var(--k)); }
  .media__empty { font-size: calc(12 * var(--k)); }
  .media__empty b { font-size: calc(15 * var(--k)); }
  .csec { padding-top: calc(90 * var(--k)); }
  .csec__title { font-size: calc(30 * var(--k)); margin-bottom: calc(28 * var(--k)); }
  .cstep, .cstep--flip { grid-template-columns: 1fr; min-height: 0; gap: calc(6 * var(--k)); }
  .cstep--flip .cstep__info { order: 0; }
  .cstep__info { padding: calc(22 * var(--k)); border-radius: calc(12 * var(--k)); }
  .cstep__num { font-size: calc(22 * var(--k)); }
  .cstep__title { margin-top: calc(28 * var(--k)); font-size: calc(26 * var(--k)); }
  .cstep__text { font-size: calc(14 * var(--k)); }
  .cstep__media { aspect-ratio: 16 / 11; }
  .csteps { gap: calc(28 * var(--k)); }
  .cdone { grid-template-columns: 1fr 1fr; gap: calc(6 * var(--k)); }
  .cdone__item { min-height: calc(140 * var(--k)); padding: calc(18 * var(--k)); gap: calc(16 * var(--k)); border-radius: calc(12 * var(--k)); }
  .cdone__title { font-size: calc(20 * var(--k)); }
  .cdone__text { font-size: calc(13 * var(--k)); }
  .cgal { grid-template-columns: 1fr 1fr; gap: calc(6 * var(--k)); }
  .cend { grid-template-columns: 1fr; gap: calc(6 * var(--k)); }
  .cend__note, .cend__next { min-height: calc(180 * var(--k)); padding: calc(22 * var(--k)); border-radius: calc(12 * var(--k)); }
  .cend__note p { font-size: calc(14 * var(--k)); }
  .cend__next-title { font-size: calc(26 * var(--k)); }
  .cend__next .fcard__arrow { top: calc(22 * var(--k)); right: calc(22 * var(--k)); }
  .case-page .site-footer { padding-top: calc(90 * var(--k)); }
}

/* ===== перший екран кейсу v2: бенто 9 клітинок (текст 3 + медіа 6) ===== */
.chero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: calc(28 * var(--k));
  padding: calc(160 * var(--k)) var(--pad) calc(60 * var(--k));
  text-align: left;
}
.ccrumbs {
  width: 100%;
  max-width: calc(1328 * var(--k));
  margin: 0 auto;
  display: flex;
  gap: calc(10 * var(--k));
  font-weight: 500;
  font-size: calc(18 * var(--k));
  color: rgba(255, 255, 255, 0.35);
}
.ccrumbs a { color: rgba(255, 255, 255, 0.55); transition: color 0.3s ease; }
.ccrumbs a:hover { color: #fff; }
.chero__grid {
  width: 100%;
  max-width: calc(1328 * var(--k));
  margin: 0 auto;
  display: grid;
  grid-template-columns: calc(440 * var(--k)) 1fr;
  grid-template-rows: 1fr auto;
  gap: calc(4 * var(--k));
  min-height: calc(760 * var(--k));
}
.chero__info {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24 * var(--k));
  padding: calc(36 * var(--k));
  border-radius: calc(16 * var(--k));
  background: var(--card);
}
.chero__info .cchip { font-size: calc(20 * var(--k)); transform: rotate(-2deg); }
.chero__info .ctitle { margin-top: auto; font-size: calc(56 * var(--k)); line-height: 1.05; text-align: left; text-wrap: balance; color: rgba(255, 255, 255, 0.9); }
.chero__info .clead { max-width: none; text-align: left; }
.chero__media { min-height: calc(540 * var(--k)); }
.chero .cmeta { margin-top: 0; grid-template-columns: repeat(4, 1fr); }
.chero .cmeta__item { padding: calc(22 * var(--k)) calc(24 * var(--k)); }
.chero .cmeta__value { font-size: calc(18 * var(--k)); }

@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .chero { padding: calc(100 * var(--k)) var(--pad) calc(30 * var(--k)); min-height: 0; }
  .ccrumbs { font-size: calc(13 * var(--k)); }
  .chero__grid { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; gap: calc(6 * var(--k)); }
  .chero__info { grid-row: auto; padding: calc(22 * var(--k)); border-radius: calc(12 * var(--k)); gap: calc(14 * var(--k)); }
  .chero__info .cchip { font-size: calc(14 * var(--k)); }
  .chero__info .ctitle { margin-top: calc(20 * var(--k)); font-size: calc(32 * var(--k)); }
  .chero__media { min-height: 0; aspect-ratio: 16 / 11; }
  .chero .cmeta { grid-template-columns: 1fr 1fr; }
}
.chero__info .ctitle { font-size: calc(50 * var(--k)); }

/* ===== медіа без обрізання: картинка/відео завжди цілком, у власних пропорціях ===== */
.media { display: flex; align-items: center; justify-content: center; aspect-ratio: auto !important; min-height: 0 !important; }
.media img, .media video { position: static; display: block; width: 100%; height: auto; object-fit: contain; }
.media.is-empty { aspect-ratio: 16 / 10 !important; }

.cstep { min-height: 0; }
.chero__grid { min-height: 0; }
.chero__media { min-height: 0; }

/* галерея — «кладка» у дві колонки, кожен кадр цілком */
.cgal { display: block; columns: 2; column-gap: calc(4 * var(--k)); }
.cgal__item { break-inside: avoid; margin-bottom: calc(4 * var(--k)); }
.cgal__item--wide { grid-column: auto; grid-row: auto; }
@media (max-width: 767px), (max-aspect-ratio: 4/5) { .cgal { columns: 1; } .cgal__item { margin-bottom: calc(6 * var(--k)); } }

/* ===== повноекранний перегляд фото й відео ===== */
.media:not(.is-empty) { cursor: zoom-in; }
.media:not(.is-empty)::after {
  content: "";
  position: absolute;
  top: calc(16 * var(--k));
  right: calc(16 * var(--k));
  width: calc(40 * var(--k));
  height: calc(40 * var(--k));
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 45% no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media (hover: hover) { .media:not(.is-empty):hover::after { opacity: 1; } }
.media { position: relative; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: calc(24px + 2vh) 4vw;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb__stage { max-width: 100%; max-height: 100%; display: grid; place-items: center; overflow: auto; }
.lb__stage img, .lb__stage video { display: block; max-width: 92vw; max-height: 84vh; width: auto; height: auto; border-radius: 12px; }
.lb__stage img.is-tall { max-height: none; max-width: min(92vw, 900px); }
.lb__cap { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); font: 500 14px/1.2 Onest, sans-serif; color: rgba(255, 255, 255, 0.6); white-space: nowrap; }
.lb__btn {
  position: fixed;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: 700 22px/48px Onest, sans-serif;
  text-align: center;
  transition: background-color 0.25s ease;
}
.lb__btn:hover { background: rgba(255, 255, 255, 0.22); }
.lb__close { top: 16px; right: 16px; }
.lb__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb__next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 767px) { .lb__prev, .lb__next { top: auto; bottom: 12px; transform: none; } .lb__cap { bottom: 72px; } }

/* мобілка: розміри як на головній (правило вище з 50px перебивало мобільний блок) */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .chero__info .ctitle { font-size: calc(32 * var(--k)); }
  .cstep__title { font-size: calc(24 * var(--k)); }
  .cstep__num { font-size: calc(24 * var(--k)); }
  .cmeta__value, .chero .cmeta__value { font-size: calc(16 * var(--k)); }
}

/* крок без картинки (розбір) — лише текст на всю ширину */
.cstep--text { grid-template-columns: 1fr !important; }
.cstep--text .cstep__info { max-width: none; grid-column: 1 / -1 !important; }
.cstep--text .cstep__text { max-width: calc(880 * var(--k)); }
.cend__note p a { color: rgba(255, 255, 255, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }