/* ======================= */
/* Case page */
/* ======================= */

.hero-image {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: 50% 50%; /* совпадает с transition-image */
  opacity: 1;
  transition: opacity 1200ms var(--ease);
  display: block;
  position: relative;
  z-index: 1;
}

.case-hero--image-fade .hero-image {
  opacity: 0;
}

.case-hero--image-fade.is-image-ready .hero-image {
  opacity: 1;
}

.case-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 1200ms var(--ease);
  pointer-events: none;
  z-index: 1;
}

.case-hero--has-video .hero-image {
  opacity: 0;
  transition: opacity 1200ms var(--ease);
  z-index: 0;
}

.case-hero--has-video.is-poster-ready .case-hero__poster {
  opacity: 1;
  z-index: 1;
}

.case-hero--has-video.is-video-ready .hero-image {
  opacity: 1;
}

.case-hero--has-video.is-video-ready .case-hero__poster {
  opacity: 0;
}

.case-hero {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--case-hero-bg, #111);
}

.case-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--case-hero-overlay, transparent);
  opacity: 1;
  pointer-events: none;
  z-index: 2;
}

.case-hero.case-hero--spa-overlay::after {
  opacity: 0;
  transition: opacity 800ms var(--ease);
}

.case-hero.case-hero--spa-overlay.is-overlay-visible::after {
  opacity: 1;
}
.case-hero__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
}

.case-hero__inner {
  padding-bottom: clamp(5rem, 14vh, 9rem);
  color: #fff;
}

.case-hero__title {
  font-size: clamp(3.3rem, 10vw, 10rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}

.case-hero__brief {
  color: #fff;
  max-width: 52ch;
  font-size: var(--type-body-size);
}

.case-hero__title.reveal--case-hero,
.case-hero__brief.reveal--case-hero {
  --reveal-y: 28px;
  --reveal-opacity: 1.2s;
  --reveal-move: 2s;
}

.case-hero__title,
.case-hero__brief,
.case-hero__inner .casebrief,
.case-hero__inner .casebrief__desc {
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.1),
    0 0 30px rgba(0, 0, 0, 0.2);
}

.casebrief {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--vr) * 0.65) calc(var(--vr) * 2);
  margin: 0;
  font-size: 1rem;
  line-height: var(--type-body-line);
  color: var(--text-muted);
}

.casebrief__group {
  display: inline-block;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  text-transform: uppercase;
}

.casebrief__term,
.casebrief__desc {
  display: inline;
  margin: 0;
}

.casebrief__term {
  color: var(--text-muted);
  margin-right: calc(var(--vr) * 0.45);
}

.casebrief__desc {
  color: var(--text);
}

.casebrief__group--link {
  transform: translateY(0.4em);
}

.casebrief__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: inherit;
  line-height: inherit;
  text-decoration: none;
}

.casebrief__link:hover {
  color: var(--accent);
}

.casebrief__link-icon {
  width: 1.35em;
  height: 1.35em;
  flex: 0 0 auto;
  background: currentColor;
  mask: url("/assets/i/link.svg") center / contain no-repeat;
}

.layout--single,
.layout--two,
.layout--three,
.layout--half {
  --a-start: 2;
  --a-span: 6;
  --b-start: 1;
  --b-span: 12;
  --c-start: 1;
  --c-span: 12;
}

.layout--two {
  --a-start: 2;
  --a-span: 4;
  --b-start: 6;
  --b-span: 4;
}

.layout--three {
  --a-start: 2;
  --a-span: 3;
  --b-start: 5;
  --b-span: 3;
  --c-start: 8;
  --c-span: 3;
}

.layout--half {
  --a-start: 2;
  --a-span: 5;
  --b-start: 7;
  --b-span: 5;
}

.layout__a,
.layout__b,
.layout__c,
.layout__stats {
  min-width: 0;
}

.layout__a {
  grid-column: var(--a-start) / span var(--a-span);
}

.layout__b {
  grid-column: var(--b-start) / span var(--b-span);
}

.layout__c {
  grid-column: var(--c-start) / span var(--c-span);
}

.layout__stats {
  grid-column: 2 / span 10;
}

.case-post__body .grid12.layout--single > .layout__a > .quote_item {
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 1025px) {
  .case-post__body .grid12.layout--single > .layout__a:has(> .quote_item) {
    grid-column: 2 / span 9;
    --a-span: 9;
  }
}

.case-post__body .grid12.layout--single > .layout__a > .quote_item .quote,
.case-post__body .grid12.layout--single > .layout__a > .quote_item .subquote {
  --quote-shift: calc(
    (100% + var(--grid-gap, 24px)) / var(--a-span, 6) - var(--grid-gap, 24px)
  );
  margin-left: calc(-1 * var(--quote-shift));
}

.case-post__body .grid12.layout--single > .layout__a > .quote_item .quote {
  text-indent: calc(var(--quote-shift) - 1rem);
}

.case-post__body .grid12.layout--single > .layout__a > .quote_item .subquote {
  text-indent: 0;
  padding-left: var(--quote-shift);
}

.case-post__body .grid12.layout--half > .layout__a > .quote_item,
.case-post__body .grid12.layout--half > .layout__b > .quote_item {
  margin-left: 0;
  margin-right: 0;
}

.case-post__body .grid12.layout--half > .layout__a > .quote_item .quote,
.case-post__body .grid12.layout--half > .layout__b > .quote_item .quote {
  margin-left: 0;
  text-indent: 0;
  font-size: var(--content-body-size);
  line-height: var(--type-body-line);
  letter-spacing: normal;
  font-style: italic;
}

.case-post__body .quote_item .subquote--with-avatar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  row-gap: 8px;
  margin-left: 0;
  text-indent: 0;
}

.case-post__body .quote_item .subquote--with-avatar .subquote__avatar {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 50%;
  object-fit: cover;
}

.case-post__body .quote_item .subquote--with-avatar > span {
  min-width: 0;
}

.case-post__body .quote_item .subquote--with-avatar > .content-lazy-wrap {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 50%;
  background: transparent;
  overflow: hidden;
}

.case-post__body
  .quote_item
  .subquote--with-avatar
  > .content-lazy-wrap
  .subquote__avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 1280px) {
  .layout--single {
    --a-start: 2;
    --a-span: 8;
  }

  .layout--two {
    --a-start: 2;
    --a-span: 5;
    --b-start: 7;
    --b-span: 5;
  }

  .layout--three {
    --a-start: 1;
    --a-span: 4;
    --b-start: 5;
    --b-span: 4;
    --c-start: 9;
    --c-span: 4;
  }
}

.case-intro__meta-row {
  margin-bottom: var(
    --section-gap-size,
    clamp(calc(var(--vr) * 2), 8vw, calc(var(--vr) * 4))
  );
}

.case-intro__meta-row + .grid12.layout--single {
  row-gap: 0;
  --a-start: 2;
  --a-span: 10;
}

.case-post .content .lead {
  max-width: 56ch;
}

.case-post__body.content .case-intro .lead {
  margin-bottom: 0;
}

.case-intro__content-row {
  margin-top: var(
    --section-gap-size,
    clamp(calc(var(--vr) * 2), 8vw, calc(var(--vr) * 4))
  );
  row-gap: var(--grid-gap, 24px);
  align-items: start;
}

.case-post__body.content {
  max-width: none;
  margin: 0 0 10rem;
}

.case-post__content-section.content__light {
  padding-top: 0;
}

.case-related.content__light {
  padding-top: 0;
  padding-bottom: clamp(4rem, 7vw, 7rem);
}

.case-related__title {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  font-size: var(--type-title-section-size);
  line-height: var(--type-title-section-line);
  font-weight: var(--type-title-section-weight);
  letter-spacing: var(--type-title-section-tracking);
}

.case-post__body .grid12 {
  --grid-gap: clamp(32px, 3vw, 48px);
}

.case-post__body .stats-list {
  list-style: none;
  margin: calc(var(--vr) * 2) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(16px, 2vw, 24px);
}

.case-post__body .stats-list-item {
  grid-column: span 3;
  height: 100%;
  min-width: 0;
  min-height: clamp(12.5rem, 14vw, 15.5rem);
  padding: 30px;
  border-radius: 30px;
  background: #fff;
  color: var(--text);
  display: grid;
  grid-template-rows: clamp(4.8rem, 6vw, 6.2rem) minmax(0, 1fr);
  row-gap: calc(var(--vr) * 1.1);
  align-items: flex-start;
}

.case-post__body .stats-list-item b {
  display: block;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.case-post__body .stats-list-item b span {
  font-size: 0.7em;
  opacity: 0.3;
  margin-left: 0.1em;
  line-height: 1.2;
}

.case-post__body .stats-list-item p {
  margin: 0;
  font-size: var(--type-body-sm-size);
}

.case-post__body .stats-list > .stats-list-item + .stats-list-item {
  margin-top: 0;
}

@media (max-width: 1280px) {
  .case-post__body .stats-list-item {
    grid-column: span 4;
  }
}

.case-post__body .aspect__square {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.case-post__body .aspect-inside {
  position: absolute;
  inset: 0;
}

.case-post__body .parallax-box {
  --parallax-box-bg: #f7f6f5;
  --parallax-base-primary: 0px;
  --parallax-base-secondary: 0px;
  --parallax-y-primary: 0px;
  --parallax-y-secondary: 0px;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
  background: var(--parallax-box-bg);
}

.case-post__body .parallax-box__primary,
.case-post__body .parallax-box__secondary {
  position: absolute;
  top: 0;
  display: block;
  height: auto;
  max-width: none;
  border-radius: 0;
  will-change: transform;
}

.case-post__body .parallax-box__primary {
  left: 0;
  width: 66.6667%;
  transform: translate3d(
    0,
    calc(var(--parallax-base-primary) + var(--parallax-y-primary)),
    0
  );
}

.case-post__body .parallax-box__secondary {
  right: 0;
  width: 60%;
  transform: translate3d(
    0,
    calc(var(--parallax-base-secondary) + var(--parallax-y-secondary)),
    0
  );
}

.case-post__body .parallax-box.parallax-box--reverse .parallax-box__primary {
  left: auto;
  right: 0;
}

.case-post__body .parallax-box.parallax-box--reverse .parallax-box__secondary {
  left: 0;
  right: auto;
  box-shadow: 30px 5px 50px rgba(0, 0, 0, 0.12);
}

.case-post__body .embed-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: rgb(50, 50, 50);
}

.case-post__body .embed-container > iframe,
.case-post__body .embed-container > .videoplayer,
.case-post__body .embed-container > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.case-post__body .embed-container > iframe,
.case-post__body .embed-container > video {
  border: 0;
  display: block;
}

.case-post__body .videoplayer {
  overflow: hidden;
  cursor: pointer;
}

.case-post__body .videoplayer__thumb {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.case-post__body .videoplayer__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transform: scale(1.05);
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.72, 0.16, 0.345, 0.875);
}

.case-post__body .videoplayer-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #000;
  z-index: 3;
  cursor: pointer;
}

.case-post__body .videoplayer-button svg {
  fill: currentColor;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 28px;
  margin: -14px 0 0 -10px;
  z-index: 2;
  display: inline-block;
}

.case-post__body .videoplayer-button .btn__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  background-color: #fff;
  border-radius: 50%;
  z-index: 1;
  transition: transform 0.38s cubic-bezier(0.74, 0.07, 0.34, 0.96);
  transform: scale(1);
}

.case-post__body .videoplayer:hover .videoplayer__thumb img,
.case-post__body .videoplayer:focus-within .videoplayer__thumb img {
  transform: scale(1);
  opacity: 0.7;
}

.case-post__body .videoplayer:hover .videoplayer-button .btn__bg,
.case-post__body .videoplayer:focus-within .videoplayer-button .btn__bg {
  transform: scale(1.2);
}

.case-post__body .videoplayer-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 6px;
  border-radius: 50%;
}

.case-post__body .video-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
}

.case-post__body .video-container__placeholder,
.case-post__body .video-container__poster,
.case-post__body .video-container__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.case-post__body .video-container__placeholder {
  opacity: 1;
  transition: opacity 420ms var(--ease);
}

.case-post__body .video-container__poster {
  display: block;
  object-fit: cover;
  opacity: 0;
  transition: opacity 460ms var(--ease);
}

.case-post__body .video-container__media {
  display: block;
  object-fit: cover;
  opacity: 0;
  background: #fff;
  transition: opacity 700ms var(--ease);
}

.case-post__body .video-container.has-poster .video-container__poster {
  opacity: 1;
}

.case-post__body .video-container.has-poster .video-container__placeholder,
.case-post__body .video-container.is-playing .video-container__placeholder {
  opacity: 0;
}

.case-post__body .video-container.is-playing .video-container__media {
  opacity: 1;
}

.case-post__body .video-container.is-playing .video-container__poster {
  opacity: 0;
}
.margins {
  margin-top: clamp(calc(var(--vr) * 2), 8vw, calc(var(--vr) * 4));
  margin-bottom: clamp(calc(var(--vr) * 2), 8vw, calc(var(--vr) * 4));
}
.section-gap {
  --section-gap-size: clamp(calc(var(--vr) * 2), 8vw, calc(var(--vr) * 4));
  margin-top: 0;
  margin-bottom: 0;
}
.section-gap + .section-gap {
  margin-top: var(--section-gap-size);
}
.case-post__body > .section-gap:first-child {
  margin-top: var(--section-gap-size);
}

.case-post__body > .section-gap.case-intro:first-child {
  margin-top: calc(var(--section-gap-size) / 2);
}
.case-post__body > .section-gap:last-child {
  margin-bottom: var(--section-gap-size);
}
.paddings {
  padding-top: clamp(calc(var(--vr) * 2), 8vw, calc(var(--vr) * 4));
  padding-bottom: clamp(calc(var(--vr) * 2), 8vw, calc(var(--vr) * 4));
}
.images-set {
  padding: clamp(calc(var(--vr) * 2), 8vw, calc(var(--vr) * 4)) 0;
}
.images-set:not(.images-set__wide) > .container {
  width: min(1000px, calc(100vw - 16vw));
  margin-left: auto;
  margin-right: auto;
}
.images-set .grid {
  gap: clamp(calc(var(--vr) * 2), 8vw, calc(var(--vr) * 4));
}
.images-set .grid > [data-col] {
  border-radius: 0;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.content .images-set .grid > [data-col].reveal {
  --reveal-y: 0px;
}
.images-set .grid > [data-col] > img,
.images-set .grid > [data-col] > .content-lazy-wrap,
.images-set .grid > [data-col] > .video-container {
  border-radius: 0;
}
.content .images-set .grid > [data-col] img,
.content .images-set .grid > [data-col] .content-lazy-wrap,
.content .images-set .grid > [data-col] .video-container,
.content .images-set .grid > [data-col] .video-container__placeholder,
.content .images-set .grid > [data-col] .video-container__poster,
.content .images-set .grid > [data-col] .video-container__media {
  border-radius: 0;
}

.case-awards {
  margin: 48px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
}

.case-awards__item {
  position: relative;
  flex: 1 1 min(340px, 100%);
  max-width: 340px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
  padding-bottom: 0;
}

.case-awards__image {
  width: 100px;
  height: 100px;
  flex: 0 0 100px;
  border-radius: 8px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-awards__logo {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* Keep awards icons independent from generic .content img styles. */
.content .case-awards .case-awards__logo {
  width: 50px;
  height: 50px;
  max-width: 50px;
  border-radius: 0;
}

.case-awards__title {
  font-size: 14px;
  line-height: 1.35;
}

.case-awards__title b {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}
@media (max-width: 1024px) {
  .layout--single,
  .layout--two,
  .layout--three,
  .layout--half {
    --a-start: 1;
    --a-span: 12;
    --b-start: 1;
    --b-span: 12;
    --c-start: 1;
    --c-span: 12;
  }

  .layout__stats {
    grid-column: 1 / -1;
  }

  .case-intro__meta-row + .grid12.layout--single {
    --a-start: 1;
    --a-span: 12;
  }

  .case-post__body .grid12.layout--single > .layout__a > .quote_item .quote,
  .case-post__body .grid12.layout--single > .layout__a > .quote_item .subquote {
    margin-left: 0;
    text-indent: 0;
    padding-left: 0;
  }

  .case-post__body .stats-list-item {
    grid-column: span 6;
  }
}

@media (max-width: 990px) {
  .case-post__body .grid12 {
    --grid-gap: 24px;
  }
  .case-post__body.content {
    margin-bottom: 6rem;
  }
  .case-awards__item {
    flex-basis: min(340px, 100%);
    padding-bottom: 0;
  }
  .images-set > .container {
    width: min(1000px, calc(100vw - 12vw));
  }

  .images-set .grid > [data-col] {
    border-radius: 0;
  }
  .case-post__body .embed-container {
    border-radius: 6px;
  }
  .case-post__body .video-container {
    border-radius: 6px;
  }
}

@media (max-width: 640px) {
  .case-post__body .stats-list-item {
    grid-column: span 12;
  }
  .case-hero__inner {
    width: min(52rem, calc(100vw - 12vw));
    padding-bottom: clamp(4rem, 8vh, 6rem);
  }
  .case-hero__brief {
    font-size: var(--type-body-sm-size);
  }
  .case-awards {
    margin: 32px 0;
  }
  .case-awards__item {
    gap: 16px;
    padding-bottom: 0;
  }
  .case-awards__title {
    font-size: 13px;
  }

  .case-related__title {
    font-size: var(--type-title-section-size-mobile);
  }
}

@media (max-width: 375px) {
  .images-set > .container {
    width: min(1000px, calc(100vw - 8vw));
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-hero .hero-image,
  .case-hero--has-video .hero-image,
  .case-hero__poster,
  .case-post__body .video-container__placeholder,
  .case-post__body .video-container__poster,
  .case-post__body .video-container__media {
    transition: none;
  }

  .case-post__body .parallax-box {
    --parallax-y-primary: 0px;
    --parallax-y-secondary: 0px;
  }
}