/* ==========================================================================
   Оболочка страницы кейса: контейнер, первый экран, паспорт проекта.
   Шапка и подвал — общие из site.css. Подключается до стилей кейсов.
   ========================================================================== */

.case-route-page { min-height: 100vh; }
/* Содержимое кейсов свёрстано под строчные картинки и видео (как в браузере по умолчанию) */
:where(.case-page) :is(img, video, svg) { display: inline; }
.case-page {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  flex: none; width: 100%; padding-inline: 64px;
}

/* ---------- Первый экран кейса ---------- */
.case-hero {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%; max-width: var(--page-max);
}
.case-hero__header {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  align-self: stretch; gap: 24px;
}
.case-hero__title { display: flex; flex-direction: column; align-items: flex-start; gap: 48px; width: 100%; padding: 0 24px 24px; overflow: hidden; }
.case-hero__heading { display: flex; flex-direction: column; width: 100%; max-width: 600px; white-space: pre-wrap; word-break: break-word; }
.case-hero__heading h1 { color: var(--text); font: 600 125px/.9 'Big Shoulders', sans-serif; text-align: left; }
.case-hero__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; padding: 0 24px; }
.case-hero__description { display: flex; flex-direction: column; width: 100%; max-width: 600px; }
.case-hero__description p { color: var(--text-muted); font: 500 16px/25.6px var(--font-text); letter-spacing: -.02em; text-align: left; text-wrap: balance; }
.case-hero__media { display: flex; justify-content: center; align-items: center; align-self: start; padding: 48px 24px; }
.case-hero__cover {
  position: relative; flex: 1 0 0; width: 1px; aspect-ratio: 1.33333; border-radius: 30px; overflow: clip;
  box-shadow: .18px .76px .78px -.36px rgba(0, 0, 0, .13), .43px 1.87px 1.92px -.71px rgba(0, 0, 0, .13), .82px 3.55px 3.64px -1.07px rgba(0, 0, 0, .13), 1.43px 6.19px 6.35px -1.43px rgba(0, 0, 0, .13), 2.49px 10.78px 11.06px -1.79px rgba(0, 0, 0, .13), 4.55px 19.74px 20.26px -2.14px rgba(0, 0, 0, .13), 9px 39px 40.03px -2.5px rgba(0, 0, 0, .13);
}

/* ---------- Паспорт проекта ---------- */
.case-passport { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: var(--page-max); }
.case-passport > .grid-star { z-index: 3; }
.case-passport__item { position: relative; display: flex; flex-direction: column; align-items: flex-start; align-self: start; gap: 8px; padding: 24px; }
.case-passport__item:not(:nth-child(4))::after { content: ''; position: absolute; inset: 0; border-right: 1px solid var(--line); pointer-events: none; }
.case-passport__mask {
  display: block; flex: none; width: 24px; height: 24px; background: var(--text);
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.case-passport__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.case-passport__label { color: var(--text); font: 600 14px/22.4px var(--font-text); letter-spacing: -.02em; white-space: pre; }
.case-passport__value { color: var(--text-muted); font: 400 14px/22.4px var(--font-text); letter-spacing: -.02em; white-space: pre; }

/* ---------- Подвал на страницах кейсов: без бегущей строки ---------- */
html[data-case-route] .footer-ticker { display: none; }

@media (max-width: 1199.98px) {
  .case-page { padding-inline: 16px; }
  .case-hero__heading h1 { font-size: 90px; }
  .case-hero__description p { font-size: 15px; line-height: 24px; }
  .case-hero__media { padding: 48px 16px; }
  .case-hero__cover { border-radius: 20px; }
  .case-passport__item { padding: 24px 16px; }
  .case-passport__value { font-size: 13px; line-height: 20.8px; }
}
@media (max-width: 809.98px) {
  .case-hero { display: flex; flex-direction: column; align-items: center; }
  .case-hero__header { justify-content: flex-start; gap: 0; width: 100%; }
  .case-hero__title { padding: 24px 16px; }
  .case-hero__heading h1 { font-size: 82px; }
  .case-hero__intro { position: relative; padding: 24px 16px 64px; }
  .case-hero__intro::after { content: ''; position: absolute; inset: 0; border-bottom: 1px solid var(--line); pointer-events: none; }
  .case-hero__description p { font-size: 14px; line-height: 22.4px; }
  .case-hero__media { align-self: stretch; padding: 64px 16px; }
  .case-passport { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-passport__item:not(:nth-child(4))::after { border-right-width: 0; }
  .case-passport__item:nth-child(odd)::after { border-right-width: 1px; }
  .case-passport__item:nth-child(-n+2)::after { border-bottom: 1px solid var(--line); }
  .case-passport__label { font-size: 13px; line-height: 20.8px; }
  .case-passport__value { font-size: 12px; line-height: 19.2px; }
}