/* ===========================
   Case Whales / Early Bird — pixel perfect
   Figma: node 774:6387 «Home V2», фрейм 1440
   База: case.css, здесь только дельта под этот макет.
   Все rem считаны от 1rem = 16px на ширине 1440 (см. html font-size в style.css).
   =========================== */

/* ---- Header (Figma: padding 32px 80px, логотип 24.889px) ---- */

@media (min-width: 769px) {
  .page-case--whales .header__container {
    padding: 2rem 5rem;
  }

  .page-case--whales .header__logo {
    font-size: 1.5556rem;
  }
}

/* ---- Hero (Figma: padding 40px 80px, картинка 1280×453) ---- */

.page-case--whales .case__hero {
  padding: 0;
}

.page-case--whales .case__cover {
  width: 100%;
  height: auto;
  aspect-ratio: 2560 / 906;
  object-fit: cover;
  border-radius: 0;
}

@media (min-width: 769px) {
  .page-case--whales .case__hero {
    padding: 2.5rem 5rem;
  }
}

/* ---- Колонка контента (Figma: 800px, отступ сверху 16px, шаг секций 64px) ---- */

.page-case--whales .case__content {
  padding: 1rem;
  gap: 3rem;
}

@media (min-width: 769px) {
  .page-case--whales .case__content {
    padding: 1rem 0;
    gap: 4rem;
  }
}

/* ---- Заголовок кейса ---- */

.page-case--whales .case__title {
  font-weight: 800;
  color: var(--color-navy);
}

@media (min-width: 769px) {
  .page-case--whales .case__back-btn {
    left: -3.9375rem;
    border-radius: 0.577rem;
  }
}

/* ---- Секции: шаг 16px, у «широких» — 24px ---- */

.page-case--whales .case__section {
  gap: 1rem;
}

@media (min-width: 769px) {
  .page-case--whales .case__section {
    gap: 1rem;
  }
}

.page-case--whales .case__section--wide-gap {
  gap: 1.5rem;
}

@media (min-width: 769px) {
  .page-case--whales .case__section--wide-gap {
    gap: 1.5rem;
  }
}

/* ---- Типографика ---- */

.page-case--whales .case__heading {
  font-size: 1.25rem;
  color: var(--color-navy);
}

@media (min-width: 769px) {
  .page-case--whales .case__heading {
    font-size: 1.5rem;
  }
}

.page-case--whales .case__text {
  color: var(--color-navy);
}

/* Подзаголовок внутри «Исследований»: 18px Semibold */
.page-case--whales .case__subheading {
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #000000;
}

/* Подзаголовок внутри «Доработки решений»: 18px Medium */
.page-case--whales .case__insight-label {
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--color-navy);
  margin: 0;
}

/* ---- Блок «подзаголовок + текст» ---- */

.page-case--whales .case__block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.page-case--whales .case__block--tight {
  gap: 0.75rem;
}

/* Текст + картинка внутри блока (Figma 774:7618) */
.page-case--whales .case__block--media {
  gap: 1rem;
}

/* Группа «текстовый блок + картинка» в «Исследованиях» (Figma 774:6422) */
.page-case--whales .case__group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ---- Плашка проблемы (Figma: rgba(248,60,77,.1), radius 24, padding 24) ---- */

.page-case--whales .case__problem {
  margin: 0;
  padding: 1rem;
  border-radius: 1rem;
  background-color: rgba(248, 60, 77, 0.1);
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-navy);
}

@media (min-width: 769px) {
  .page-case--whales .case__problem {
    padding: 1.5rem;
    border-radius: 1.5rem;
  }
}

/* ---- Маркированный список ---- */

.page-case--whales .case__bullets {
  margin: 0;
  padding: 0 0 0 1.5rem;
  list-style: disc;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-navy);
}

/* ---- Нумерованные гипотезы (Figma: номер вынесен на 23px влево) ---- */

.page-case--whales .case__hypotheses {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: hypothesis;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page-case--whales .case__hypothesis-item {
  counter-increment: hypothesis;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page-case--whales .case__hypothesis-item::before {
  content: counter(hypothesis) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: #353442;
}

.page-case--whales .case__hypothesis-text {
  margin: 0;
  /* отступ под номер задаём тексту, а не пункту: тогда картинка внутри пункта
     раскрывается на всю ширину экрана без асимметрии по краям */
  padding-left: 1.4375rem;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: #353442;
}

@media (min-width: 769px) {
  .page-case--whales .case__hypothesis-item::before {
    left: -1.4375rem;
  }

  .page-case--whales .case__hypothesis-text {
    padding-left: 0;
  }
}

/* ---- Картинки во всю ширину макета (Figma: 1280px при колонке 800px) ---- */

/* На мобильном — во всю ширину экрана через компенсацию паддинга колонки,
   без 100vw: тот бы добавил ширину скроллбара и вызвал горизонтальный скролл. */
.page-case--whales .case__figure--bleed {
  margin-left: -1rem;
  margin-right: -1rem;
}

.page-case--whales .case__figure--bleed img {
  border-radius: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 465;
  object-fit: cover;
}

@media (min-width: 769px) {
  .page-case--whales .case__figure--bleed {
    width: 80rem;
    margin-left: calc(50% - 40rem);
    margin-right: 0;
  }
}

/* ---- Карточки результатов (Figma: 10px между карточками) ---- */

.page-case--whales .case__ab-results {
  gap: 0.625rem;
}

.page-case--whales .case__ab-row {
  gap: 0.625rem;
}

/* Первая карточка в паре: номер сверху, текст прижат к низу */
.page-case--whales .case__ab-card--split {
  gap: 0;
  justify-content: space-between;
}

/* ---- «Спасибо» + навигация (Figma: кнопки 390×52, зазор 20px) ---- */

.page-case--whales .case__thanks {
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
}

@media (min-width: 769px) {
  .page-case--whales .case__thanks {
    padding: 0;
  }
}

.page-case--whales .case__nav-buttons {
  gap: 0.75rem;
}

@media (min-width: 769px) {
  .page-case--whales .case__nav-buttons {
    gap: 1.25rem;
  }
}

.page-case--whales .case__nav-btn {
  box-sizing: border-box;
  height: 3.25rem;
  gap: 0.5rem;
  padding: 0 1.25rem;
  justify-content: center;
}

.page-case--whales .case__nav-btn svg {
  width: 1.5625rem;
  height: 1.5625rem;
  flex-shrink: 0;
}

/* ---- Без покачивания картинок при наведении ---- */

.page-case--whales .case__content .case__figure {
  transition: none;
}

.page-case--whales .case__content .case__figure:hover,
.page-case--whales .case__content .case__figure:focus-within {
  animation: none;
  transform: none;
}