/* ============================================================
   VELARY US — оформление страниц кейсов.
   Здесь только внешний вид: цвета, шрифты, кнопки.
   Все отступы и ширины — в layout.css (генерируется из макета).
   ============================================================ */

.case {
  --case-dark:    #414048;
  --case-light:   #E4E4E4;
  --case-white:   #FFFFFF;
  --case-mist:    #EDEEF1;
  --case-heading: #131210;
  --case-body:    #464646;
  --case-on-dark: #FFFFFF;
}

/* Тёмные версии кейсов из макета:
   Desktop_Softpay_Dark (4466:30443), Desktop_Aurea_Dark (4466:10339),
   Desktop_ParkNow_Dark (4466:31646). Во всех трёх одна и та же замена:
   светло-серый фон секций становится #56565D, а весь текст — белым.
   Тёмные секции (#414048) и светлая полоса #EDEEF1 остаются как есть. */
[data-theme="dark"] .case {
  --case-light:   #56565D;
  --case-white:   #56565D;
  --case-heading: #FFFFFF;
  --case-body:    #FFFFFF;
}

/* ------------------------------------------------------------
   Текст блоков (Inter SemiBold 24/59 и Inter Regular 18/28 из макета)
   ------------------------------------------------------------ */
.b__text h2,
.b__text h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 24px;
  line-height: 59px;   /* в макете строка заголовка 59px */
  color: var(--case-heading);
}
.b__text p,
.b__text li {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--case-body);
}
/* В обзорной и «до/после» секциях строка заголовка в макете ровно 50px
   (высота фрейма 2131330976), в блоках галереи — 59px. */
.b-aurea-over  .b__text h2,
.b-softpay-over .b__text h2,
.b-parknow-over .b__text h2,
.b-aurea-before .b__text h2 { line-height: 50px; }

/* 4283:50468 — единственный абзац кейса, где в макете интерлиньяж 24 */
.b__text--lh24 p { line-height: 24px; }

.b__text p + p { margin-top: 28px; }
.b__text p.is-tight + p.is-tight { margin-top: 0; }
.b__text b, .b__text strong { font-weight: 600; color: var(--case-heading); }
.b__text ul, .b__text ol { padding-left: 27px; }
.b__text ul { list-style: disc; }
.b__text ol { list-style: decimal; }

/* Тёмные секции кейса */
.is-dark .b__text h2,
.is-dark .b__text h3,
.is-dark .b__text p,
.is-dark .b__text li,
.is-dark .b__text b { color: var(--case-on-dark); }

.b__fig img { border-radius: 20px; }
.b__fig--flat img { border-radius: 0; }

/* ------------------------------------------------------------
   Обложка кейса
   ------------------------------------------------------------ */
.case-hero { position: relative; display: flex; flex-direction: column; align-items: center; }
.case-hero__head { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.case-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: 8.4px;
  text-indent: 8.4px;
  color: #FEF6EE;
  text-align: center;
  white-space: nowrap;
}
.case-hero__sub {
  font-family: 'Plus Jakarta Sans', var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 6.6px;
  text-indent: 6.6px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
.case-hero__shot {
  max-width: 100%;
  border: 9.898px solid #9AB3C8;
  border-radius: 13.842px;
  overflow: hidden;
  background: #9AB3C8;
}
.case-hero__shot img { display: block; width: 100%; height: auto; }
.case-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ------------------------------------------------------------
   Кнопка «View the project in Figma» (Button_figma, 4021:128)
   Стекло из макета: белая заливка 10 %, размытие фона σ≈1.8px,
   белая волосяная обводка 0.5px. Значения замерены по экспорту.
   ------------------------------------------------------------ */
.btn-figma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 300px;
  max-width: 100%;
  padding: 10px 20px;
  border-radius: 774.225px;
  background: var(--backdrop-subtle);   /* эффект стекла — классом .glass-* из layout.css */
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -.48px;
}
.btn-figma span { text-decoration: underline; text-underline-offset: 2px; }
.btn-figma--ink { color: #000; }
.btn-figma--plain span { text-decoration: none; }
.btn-figma__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 36.4px;
  height: 34.884px;
  border-radius: 999px;
  background: #fff;
}
.btn-figma__mark img { width: 17px; height: 24px; object-fit: contain; }

/* ------------------------------------------------------------
   Концовка кейса
   ------------------------------------------------------------ */
.case-outro { display: flex; flex-direction: column; align-items: center; }
.case-outro__scribble { width: 546px; max-width: 100%; }
.case-outro__scribble svg { display: block; width: 100%; height: auto; }
.case-outro__wordmark { width: 524px; max-width: 100%; color: var(--case-heading); }
.case-outro__wordmark svg { width: 100%; height: auto; }

.case-author { display: flex; flex-direction: column; align-items: center; }
.case-author__card { display: flex; flex-direction: column; align-items: center; }
.case-author__photo {
  border-radius: 10px;
  border: 1px solid #EDEEF1;
  background: #fff;
  overflow: hidden;
  flex: none;
}
.case-author__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-author__lines { display: flex; flex-direction: column; text-align: center; }
.case-author__lines p { font-weight: 700; font-size: 16px; line-height: 24px; }
.case-author__name { color: var(--case-heading); }
.case-author__role { color: #5B616E; }
.case-author__year { font-weight: 700; font-size: 16px; line-height: 24px; color: #5B616E; }
.case-outro__thanks { font-weight: 700; font-size: 25px; line-height: 24px; color: var(--case-heading); text-align: center; }
[data-theme="dark"] .case-author__role,
[data-theme="dark"] .case-author__year { color: #A8ADB8; }

/* Кнопка Figma поверх финальной иллюстрации (SoftPay, 4272:28581) */
.b__fig--cta { position: relative; }
.b__fig--cta .b__cta { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); z-index: 2; }

/* ------------------------------------------------------------
   Обложка SoftPay: крупный заголовок и строка «2026 / Velary Us»
   ------------------------------------------------------------ */
.case-hero__meta {
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -.48px;
  color: #fff;
  width: 100%;
}
.case-hero__bigtitle { font-weight: 700; color: #fff; text-align: center; }

/* ------------------------------------------------------------
   Обложка ParkNow
   ------------------------------------------------------------ */
.pn-hero__logo-name {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .5px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
.pn-hero__lead { font-weight: 500; color: #090A0A; }
.pn-hero__meta dt {
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: .6px;
  color: #767676;
  margin-bottom: 10px;
}
.pn-hero__meta dd { margin: 0; font-weight: 500; font-size: 18px; line-height: 26px; color: #090A0A; }
.pn-hero__shots img { width: 100%; height: auto; display: block; }