/* Hero — Figma `2318:2125`, плашка 1880×800, r=32, по 20 px воздуха по бокам.
   Координаты ниже — от левого верхнего угла плашки, как в дампе
   memory-bank/figma/sections/02-hero.json. */

.hero {
  position: relative;
  margin: 0 var(--pad-page); /* 20 */
  height: 50rem; /* 800 */
  border-radius: var(--r-xl); /* 32 */
  background: var(--c-brand);
  overflow: hidden;
  isolation: isolate;
}

/* Декоративные бирюзовые «волны» — три вложенные clip-path группы из макета,
   отрендерены в один PNG@2x (в SVG Figma их не отдаёт, падает с HTTP 500). */
.hero__bg {
  position: absolute;
  left: 41.1875rem; /* 659 */
  top: -4.75rem; /* -76 */
  width: 104.9375rem; /* 1679 */
  height: 76.5rem; /* 1224 */
  z-index: 0;
  pointer-events: none;
}

.hero__photo {
  position: absolute;
  left: 71.5625rem; /* 1145 */
  top: 9.75rem; /* 156 */
  width: 43.75rem; /* 700 */
  height: 72.3125rem; /* 1157 */
  /* В Figma фото лежит в дереве после текстов — морда собаки заходит
     на «лапку». Поэтому оно выше контента, а лапки-следы выше него. */
  z-index: 2;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__paws {
  position: absolute;
  left: 106.25rem; /* 1700 */
  top: 14.9375rem; /* 239 */
  width: 6.875rem; /* 110 */
  height: 8.625rem; /* 138 */
  z-index: 3;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  height: 100%;
  padding-left: var(--pad-hero); /* 222 */
  color: var(--c-on-dark);
}

/* Все блоки позиционированы абсолютно — ровно по y из макета */
.hero__title {
  position: absolute;
  top: 3.5rem; /* 56 */
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 12.5rem; /* 200 */
  line-height: 12.5rem; /* 200 */
  letter-spacing: 0.0015em; /* 0.3px при кегле 200px */
  white-space: nowrap;
}

.hero__eyebrow {
  position: absolute;
  top: 16.5rem; /* 264 */
  font-size: 1.75rem; /* 28 */
  line-height: 2.25rem; /* 36 */
  font-weight: 400;
}

.hero__rule {
  position: absolute;
  top: 20.75rem; /* 332 */
  width: 35.3125rem; /* 565 */
  height: 0.125rem; /* 2 */
  background: var(--c-on-dark);
  border: 0;
  margin: 0;
}

.hero__subtitle {
  position: absolute;
  top: 24.25rem; /* 388 */
  width: 52.375rem; /* 838 */
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 3rem; /* 48 */
  line-height: 3.5rem; /* 56 */
  letter-spacing: 0.00625em;
}

/* «того самого» — курсив Playfair, как в макете */
.hero__subtitle em {
  font-style: italic;
}

.hero__cta-note {
  position: absolute;
  top: 35.25rem; /* 564 */
  font-size: 1.75rem; /* 28 */
  line-height: 2.25rem; /* 36 */
}

.hero__cta {
  position: absolute;
  top: 39.5rem; /* 632 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem; /* 12 */
  min-width: 23.5rem; /* 376 */
  height: 4.5rem; /* 72 */
  padding-inline: 3rem; /* 48 */
  border-radius: var(--r-hero); /* 80 */
  background: var(--c-accent);
  color: var(--c-on-dark);
  font-weight: 500;
  font-size: 1.5rem; /* 24 */
  line-height: 1.5rem;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.hero__cta:hover {
  background: #c8532e;
  transform: translateY(-2px);
}

.hero__cta svg {
  width: 1.5rem; /* 24 */
  height: 1.5rem;
  fill: currentColor;
  flex-shrink: 0;
}

/* --- Адаптив ниже 1200 px: макета в Figma нет, раскладка спроектирована здесь.
   Абсолютное позиционирование снимается, блоки выстраиваются в поток. --- */
@media (max-width: 1199px) {
  .hero {
    display: flex;
    flex-direction: column;
    height: auto;
    margin: 0 1rem;
    padding: 3rem 2rem 0;
    border-radius: var(--r-lg);
  }

  /* В DOM фото идёт раньше текста (важно для приоритетной загрузки
     LCP-картинки), на узких экранах возвращаем его под текст. */
  .hero__content {
    order: 1;
  }

  .hero__photo {
    order: 2;
  }

  .hero__bg {
    left: auto;
    right: -30%;
    top: -10%;
    width: 130%;
    height: auto;
    opacity: 0.9;
  }

  .hero__paws {
    display: none;
  }

  .hero__content {
    position: static;
    height: auto;
    padding-left: 0;
    max-width: 34rem;
  }

  .hero__title,
  .hero__eyebrow,
  .hero__rule,
  .hero__subtitle,
  .hero__cta-note,
  .hero__cta {
    position: static;
    width: auto;
  }

  .hero__title {
    font-size: clamp(3rem, 11vw, 7rem);
    line-height: 1;
    white-space: normal;
  }

  .hero__eyebrow {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.5;
  }

  .hero__rule {
    margin: 1.5rem 0;
    max-width: 100%;
  }

  .hero__subtitle {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    line-height: 1.2;
  }

  .hero__cta-note {
    margin-top: 2rem;
    font-size: 1.125rem;
    line-height: 1.5;
  }

  .hero__cta {
    margin-top: 1rem;
    min-width: 0;
    height: 3.5rem;
    padding-inline: 2rem;
    font-size: 1.125rem;
  }

  .hero__photo {
    position: static;
    width: min(100%, 22rem);
    height: auto;
    margin: 2.5rem auto -0.25rem;
  }

  .hero__photo img {
    height: auto;
  }
}