/* Первый экран страницы кейса.
   Композиция по референсу Руслана: узкая колонка по центру страницы,
   текст в ней прижат влево — сверху строка-надзаголовок (что это, чей
   сайт, кто автор), под ней заголовок в две строки, дальше снимок
   почти во всю ширину.
   Фон страницы — общий тёмный, как на главной и портфолио. */

.case-hero {
  /* Верхнее поле держит запас под шапку: она лежит отдельным слоем
     и высоты не занимает (см. sections/header.css). */
  padding: clamp(5.5rem, 9vw, 10rem) var(--gutter) 0;
}

/* Колонка текста. Стоит по центру страницы, но строки внутри идут
   от левого края — как в референсе. */
.case-hero__meta,
.case-hero__title {
  width: var(--case-column);
  max-width: 100%;
  margin-inline: auto;
}

/* Надзаголовок: слово «Кейс», пилюля с адресом сайта и подпись автора
   с круглым фото. Весь ряд набран тем же мелким кеглем, что подпись
   имени на первом экране портфолио, — величина одна на весь сайт.
   Перенос по строкам разрешён: на узком экране подпись автора уходит
   вниз, вместо того чтобы вылезать за колонку. */
.case-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7em 0.95em;
  margin-block: 0 clamp(1.25rem, 2.6vw, 2.5rem);
  font-size: var(--subtitle-size);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Адрес сайта в пилюле: та же форма и та же тонкая обводка, что
   у кнопки контакта и переключателя языка, только без заливки —
   в референсе это контур. При наведении заливается белым, текст
   выворачивается в фон страницы, как у остальных кнопок сайта. */
.case-hero__site {
  padding: 0.3em 0.95em;
  border: 1px solid var(--color-pill-border);
  border-radius: 999px;
  /* Высота капсулы считается от кегля, а не от высоты строки: с ней
     пилюля выходила вдвое выше буквы и переставала быть капсулой. */
  line-height: 1;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.case-hero__site:hover,
.case-hero__site:focus-visible {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

.case-hero__site:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

/* Подпись автора — ровно та же, что на первом экране портфолио:
   круглое фото и имя с той же отбивкой между ними.
   От пилюли группа отбита сильнее, чем зазор в ряду: в референсе это
   отдельная группа, а не продолжение строки. */
.case-hero__author {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  margin-left: 0.7em;
  white-space: nowrap;
}

.case-hero__avatar {
  flex: none;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  object-fit: cover;
}

.case-hero__title {
  /* Отбивка до снимка: 90px на канве 1440 — вдвое больше просвета
     от надзаголовка сверху. Считается не по боксу, а по буквам:
     при line-height 0.92 бокс плотно облегает строку, и низ бокса
     лежит ниже базовой линии — этот запас уже вычтен. */
  margin-block: 0 clamp(2rem, 5.9vw, 6.5rem);
  /* Заголовок набран теми же величинами, что заголовок первого экрана
     портфолио: кегль, интерлиньяж, межбуквенное — одни на весь сайт. */
  font-size: var(--title-size);
  font-weight: 700;
  line-height: var(--title-leading);
  letter-spacing: var(--title-tracking);
}

/* Строка заданного переноса — тот же приём, что в блоках «Заявление»
   и «Ценность» на портфолио: перенос задан Русланом, а не шириной окна. */
.case-hero__line {
  display: block;
}

/* Широкий первый экран. Название кейса бывает длиннее, чем у «Экоранчо»,
   и в узкую колонку в две строки не встаёт. Кегль при этом общесайтовый
   и не меняется — шире становится сама колонка: надзаголовок и заголовок
   встают по колонке снимка, то есть левым краем в одну линию со снимком
   и карточками ниже. */
.case-hero--wide .case-hero__meta,
.case-hero--wide .case-hero__title {
  width: var(--case-media);
}

/* Перенос держат span-ы, поэтому строку не ломаем: на очень широком
   экране, где кегль упёрся в потолок clamp, она выходит вправо за
   колонку — боковые поля страницы это позволяют. */
.case-hero--wide .case-hero__line {
  white-space: nowrap;
}

/* Снимок стоит по своей колонке — чуть шире текстовой, поэтому
   выступает за рамки заголовка с обеих сторон. По этой же колонке
   идут карточки ниже (sections/case-facts.css).
   Пропорция задана жёстко, кадр обрезается по центру: снимки
   к кейсам приходят разные, а первый экран обязан держать одну
   высоту. */
.case-hero__figure {
  width: var(--case-media);
  max-width: 100%;
  margin: 0 auto;
}

.case-hero__photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--case-photo-radius);
}

@media (max-width: 767px) {
  /* На телефоне шапка встаёт в два ряда — логотип и соцсети друг под
     другом, — и запаса под неё нужно больше, чем на десктопе. */
  .case-hero {
    padding-top: 7.5rem;
  }

  /* Колонка тут ни к чему: на телефоне всё занимает полную ширину. */
  .case-hero__meta,
  .case-hero__title,
  .case-hero__figure {
    width: 100%;
  }

  /* Заданный перенос рассчитан на широкий экран: в ширину телефона
     такие строки не влезают. Возвращаем заголовок в общий поток —
     пусть переносится сам. */
  .case-hero__line,
  .case-hero--wide .case-hero__line {
    display: inline;
    white-space: normal;
  }

  /* Кадр 3:2 на телефоне вырождается в узкую полосу — ставим ближе
     к квадрату, места по высоте там достаточно. */
  .case-hero__photo {
    aspect-ratio: 4 / 3;
  }
}