/* Тизеры кейсов на /portfolio.
   Карточка — та же, что в блоке «Our work» на главной, часть от кейса Journey
   и ниже (src/components/sections/home/OurWork.astro): border 3px #f3efed,
   radius 24, padding 12, картинка radius 16, подпись Factor A Bold 24/30 +
   Literata Light 18/24. Значения держать синхронно с OurWork.astro.
   Токены (--fs-*, --color-*, --container-*) и шрифты приходят из /nav-astro.css. */

/* Контейнер как на главной: 1440 с полями 40 (24 на 1024, 16 на 768).
   У webflow здесь фиксированные 1400 без полей — перебиваем на этой странице. */
body.body-part-page .mtk-main-index {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  box-sizing: border-box;
}

/* На планшете и мобилке webflow добавляет внутренним блокам свои поля
   (40px до 991, 24px до 479) — поля держит только контейнер, как на главной. */
body.body-part-page .mtk-portfolio-new,
body.body-part-page .mtk-craft-cont { padding-left: 0; padding-right: 0; }

/* Зазор «Portfolio» → первая карточка: у webflow-флекса здесь gap 46px,
   на главной заголовок секции отбит от сетки на 32 (24 на мобилке). */
body.body-part-page .mtk-portfolio-new { gap: 32px; }

/* Трекинг: у webflow на body висит letter-spacing −0.56px, и его наследуют
   и заголовки страницы, и подписи карточек. На главной и About весь этот кит
   идёт без трекинга — обнуляем, у описания остаётся свой −0.18px (см. ниже). */
body.body-part-page .new-h2,
body.body-part-page .mtk-catalog-item-h3,
body.body-part-page .ow-card { letter-spacing: normal; }

/* ─── Заголовки страницы ────────────────────────────────────────────────── */
/* Правка АД 17.08: главный заголовок без антиквы (был Spectral 96) — основным
   шрифтом сайта, в той же паре, что заголовки About и Contacts (Factor A Bold
   80/80 → 52/56 → 44/46). Подзаголовок «Portfolio» заметно меньше главного. */
body.body-part-page .new-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 80px;
  line-height: 80px;
}
body.body-part-page .mtk-catalog-item-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-44);
  line-height: var(--lh-44);
}
@media (max-width: 768px) {
  body.body-part-page .new-h2 { font-size: 52px; line-height: 56px; }
  body.body-part-page .mtk-catalog-item-h3 { font-size: var(--fs-32); line-height: var(--lh-32); }
}
@media (max-width: 480px) {
  body.body-part-page .new-h2 { font-size: 44px; line-height: 46px; }
}

/* ─── Сетка рядов ───────────────────────────────────────────────────────── */
.ow-list { display: flex; flex-direction: column; gap: 40px; }
.ow-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

/* Тизеры в две колонки: карточки тянутся до высоты ряда, но кадр не кадрируем.
   Общая пропорция на ряд резала содержимое — у Congratz (776×594 в квадрате
   1292×1246) уезжали мокапы и текст по бокам. На главной эту развилку прошли
   так же и оставили картинки своих пропорций, а разницу по высоте отдали
   воздуху над подписью (OurWork.astro: .ow-grid1 > .ow-col > .ow-card__text). */
.ow-pair { align-items: stretch; }
/* Текст идёт сразу под картинкой: кадры в паре теперь одной высоты (см. ниже), и
   прижимать подпись к низу карточки не нужно — от этого заголовки расходились по
   вертикали, когда у одной карточки описание в одну строку, а у другой в две.
   Разница высот уходит в воздух под текстом, рамки карточек остаются равными. */

/* ─── Выравнивание пар по высоте кадра ──────────────────────────────────── */
/* Тизеры нарезаны под разные пропорции, и в паре картинки шли разной высоты.
   Подрезаем тот кадр, где потеря меньше, и всегда с той стороны, где нет
   содержания. Правила касаются только /portfolio и тизеров кейсов — на главной
   этот файл не подключён, там пары свои и трогать их не нужно.
   Пары, где расхождение 1–2px (SweepNet+RealAtom, MoneyWall+PokerSwap,
   Dunice+Foodbuddy), оставлены как есть. */

/* Пара Spherum + Congratz (тизеры кейсов): Spherum (1292×1246, 1.037) выше Congratz
   (686×623, 1.101) на 36px — режем снизу, верх кадра с телефоном остаётся.
   В паре с DeepGeo (на странице после Leverate) Spherum не кадрируем: там обе
   картинки 1.037 и высоты совпадают сами. */
.ow-pair:has(.ow-card[href="/portfolio/congratz"]) .ow-card[href="/portfolio/spherum"] .ow-card__media { aspect-ratio: 686 / 623; }
.ow-pair:has(.ow-card[href="/portfolio/congratz"]) .ow-card[href="/portfolio/spherum"] .ow-card__media img {
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Пара MTX Connect + Congratz (страница, ряд под Algorithmics): MTX (776×725, 1.070)
   на 17px выше Congratz — подрезаем MTX по бокам на 3%, у него по краям только фон
   плашек. Congratz не трогаем: это свежий тизер, снизу у него экраны приложения. */
.ow-pair:has(.ow-card[href="/portfolio/congratz"]) .ow-card[href="/portfolio/mtx-connect"] .ow-card__media { aspect-ratio: 686 / 623; }
.ow-pair:has(.ow-card[href="/portfolio/congratz"]) .ow-card[href="/portfolio/mtx-connect"] .ow-card__media img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Пара Congratz + Dunice (кейс Читай-города): Dunice (1360×1041, 1.306) шире, поэтому
   режется по горизонтали — только справа, иначе уезжают логотип и заголовок слева.
   В паре с Foodbuddy тот же Dunice не кадрируем, там пропорции совпадают. */
.ow-pair:has(.ow-card[href="/portfolio/congratz"]) .ow-card[href="/portfolio/dunice"] .ow-card__media { aspect-ratio: 686 / 623; }
.ow-pair:has(.ow-card[href="/portfolio/congratz"]) .ow-card[href="/portfolio/dunice"] .ow-card__media img {
  height: 100%;
  object-fit: cover;
  object-position: left;
}

/* Пара MTX Connect + DeepGeo: DeepGeo (1292×1246, 1.037) на 20px выше MTX (776×725,
   1.070). Подрезаем DeepGeo снизу на 3% — уходит только полоска фона под плашками
   палитры. В паре со SweepNet (кейс Logistic SaaS) DeepGeo не кадрируем: там кадры
   расходятся на 133px, и любая подрезка съедает содержание — ждёт решения АД. */
.ow-pair:has(.ow-card[href="/portfolio/mtx-connect"]) .ow-card[href="/portfolio/deepgeo"] .ow-card__media { aspect-ratio: 776 / 725; }
.ow-pair:has(.ow-card[href="/portfolio/mtx-connect"]) .ow-card[href="/portfolio/deepgeo"] .ow-card__media img {
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* ─── Карточка тизера ───────────────────────────────────────────────────── */
.ow-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 3px solid var(--color-sand);
  border-radius: 24px;
  background: var(--color-bg);
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
}
.ow-card:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
/* position:relative — под бейджи Behance, они лежат абсолютом внутри картинки */
.ow-card__media { position: relative; border-radius: 16px; overflow: hidden; line-height: 0; }
.ow-card__media img,
.ow-card__media video { width: 100%; height: auto; display: block; transition: transform 0.4s ease; }
/* Journey: пропорции видео (1280×548) уже макетных 1416×623 — кадрируем под макет */
.ow-card--vcrop .ow-card__video { aspect-ratio: 1416 / 623; height: auto; object-fit: cover; }
.ow-card:hover .ow-card__media img,
.ow-card:hover .ow-card__media video { transform: scale(1.04); }
.ow-card__text { display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 16px 16px; }
.ow-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-24-tight);
  color: var(--color-ink);
  margin: 0;
}
.ow-card__desc {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-18);
  line-height: var(--lh-18);
  letter-spacing: -0.18px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ─── 768: всё в одну колонку ───────────────────────────────────────────── */
@media (max-width: 768px) {
  body.body-part-page .mtk-portfolio-new { gap: 24px; }
  /* Правка АД 19.08: между всеми плашками тизеров на мобилке ровно 16px —
     и между рядами, и внутри пары, которая здесь схлопывается в одну колонку. */
  .ow-list { gap: 16px; }
  .ow-pair { grid-template-columns: 1fr; gap: 16px; }
  /* Широкие тизеры на узком экране вырождаются в полоску — кадрируем квадратнее.
     Тизеры с отдельной мобильной картинкой (<picture>) уже нарезаны под мобилку.
     Journey: на главной от 4/3 отказались — срезало по 20% с боков и уводило
     крайние экраны, оставили 16/9 (OurWork.astro, .ow-card--featured). Здесь так же. */
  .ow-card--vcrop .ow-card__media { aspect-ratio: 16 / 9; }
  .ow-card--vcrop .ow-card__video { height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  /* Тизер Алгоритмики (1684×1080): в анимации по бокам ~150px поля вокруг ноутбука,
     поэтому на мобилке кадрируем кадр до 4/3 — режется только пустой фон. */
  .ow-card--crop43 .ow-card__media { aspect-ratio: 4 / 3; }
  .ow-card--crop43 .ow-card__video { height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .ow-card__title { font-size: var(--fs-22); line-height: var(--lh-22); }
  /* антиква на мобилке идёт по серифной паре 16/22, а не по 16/20 (Factor) */
  .ow-card__desc { font-size: var(--fs-16); line-height: var(--lh-16-serif); }
}

@media (max-width: 430px) {
  .ow-card { padding: 8px; }
  .ow-card__text { padding: 8px 8px 12px 12px; }
}