/* ===== страница кейса (Young Con 2026 и другие) ===== */

.case-wrap {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 19px;
  /* .hero-nav внутри — position:absolute; отсюда точка отсчёта, а padding-top компенсирует высоту хедера */
  position: relative;
  padding-top: calc(var(--nav-h, 110px) + 19px);
}

/* --- назад + факты --- */
.case-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.case-back {
  display: flex;
  align-items: center;
  gap: clamp(24px, 7vw, 100px);
  padding: 12px 0;
  cursor: pointer;
}

.case-back img {
  display: block;
  width: 47px;
  height: 13px;
}

.case-back span {
  font-family: "GT America Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

.case-facts {
  width: min(100%, 532px);
  font-family: "GT America Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
}

.case-facts-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 0;
  border-bottom: 1px solid #000;
}

.case-facts-row a { cursor: pointer; }

/* первая строка ниже остальных — текст вровень со словом «Назад» рядом */
.case-facts-row--first {
  padding: 13px 0 25px;
}

/* подчёркивание при наведении — только текст, стрелка .case-facts-arrow не входит */
.case-facts-row--first a:not(.case-facts-arrow) {
  position: relative;
}

.case-facts-row--first a:not(.case-facts-arrow)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.case-facts-row--first a:not(.case-facts-arrow):hover::after {
  transform: scaleX(1);
}

.case-facts-arrow img {
  display: block;
  width: 12px;
  height: 12px;
}

.case-facts-value-multi {
  text-align: right;
  line-height: 1.4;
}

/* двухстрочное значение — та же высота строки, что у однострочной (64px) */
.case-facts-row:has(.case-facts-value-multi) {
  padding-top: calc(24px - (2.8em - 15px) / 2);
  padding-bottom: calc(24px - (2.8em - 15px) / 2);
}

.case-facts-tags {
  border-bottom: none;
  align-items: flex-start;
  padding-top: 20px;
  padding-bottom: 0;
}

.case-facts-tags ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}

/* --- заголовок --- */
.case-title {
  margin: clamp(36px, 6.5vw, 96px) 0 clamp(50px, 9vw, 130px);
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
  color: #000;
}

.case-title-main {
  font-family: "Panama", serif;
  font-weight: normal;
  font-size: clamp(44px, 7.35vw, 100px);
  letter-spacing: -0.06em;
  line-height: 1;
}

.case-title-year {
  font-family: "PP Editorial New", serif;
  font-weight: 200;
  font-size: clamp(38px, 6.32vw, 86px);
  letter-spacing: -0.04em;
  line-height: 1;
}

/* --- о проекте --- */
.case-about {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid #000;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-bottom: 31px; /* + 19px flex-gap у .case-wrap = 50px до коллажа */
}

.case-about-label {
  font-family: "GT America Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

.case-about-text {
  margin: 0;
  width: min(100%, 532px);
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 19px;
  line-height: 21px;
  text-align: justify;
  text-transform: uppercase;
}

/* --- коллаж фото кейса (десктоп ≥1101px: позиции в % из inline style= в HTML) --- */
.case-canvas {
  position: relative;
  /* z-index:0 — свой stacking context, чтобы z-index стрелок карусели не утекал на страницу */
  z-index: 0;
  width: 100%;
}

/* высота коллажа у каждого кейса своя */
.case-canvas--young-con { aspect-ratio: 1360 / 3445.355; }
.case-canvas--yandex     { aspect-ratio: 1360 / 1873; }
.case-canvas--thothex    { aspect-ratio: 1360 / 2627; }
.case-canvas--eng-flow   { aspect-ratio: 1360 / 2070; }

.case-canvas > * {
  position: absolute;
}

/* обёртки (.case-gallery/.case-card-group и т.п.) — display:contents, но для селекторов
   дерево прежнее, и .case-canvas > * их детей не видит — поэтому absolute дублируем по классам */
.case-canvas .case-photo,
.case-canvas .case-caption {
  position: absolute;
}

.case-canvas .case-card-meta {
  position: absolute;
}

.case-gallery,
.case-photo-pair,
.case-photo-offset,
.case-card-group,
.case-merch-gallery,
.case-merch-row {
  display: contents;
}

.case-photo {
  overflow: hidden;
}

.case-photo--rounded {
  border-radius: 20px;
}

.case-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-caption {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  font-family: "GT America Mono", monospace;
  font-size: clamp(13px, 1.4vw, 19px);
  line-height: 1.1;
  text-transform: uppercase;
  color: #000;
}

.case-caption-num {
  flex-shrink: 0;
  letter-spacing: -0.0882em;
}

.case-caption-text {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  text-align: justify;
  line-height: 1.1;
}

.case-chevron {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- заключительный текст + стрелка наверх --- */
.case-outro-note {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: var(--gap-section);
  /* relative + z-index:0: блок заходит на низ коллажа, и без этого .case-canvas забирает клики
   по стрелке «наверх». Именно 0, не 1 — хедер (.hero-nav) должен оставаться сверху */
  position: relative;
  z-index: 0;
}

.case-outro-text {
  margin: 0;
  font-family: "GT America Mono", monospace;
  font-size: 12px;
  line-height: 16px;
  text-align: justify;
  text-transform: uppercase;
}

/* позиция/ширина итогового текста — своя на каждой странице */
.case-outro-text--young-con { margin-left: 20.294%; width: 50%; }
.case-outro-text--yandex    { margin-left: 5.85%;  width: 27.04%; }
.case-outro-text--thothex   { margin-left: 0;      width: 39.12%; }
.case-outro-text--eng-flow  { margin-left: 0;      width: 39.12%; }

/* Yandex/eng flow, десктоп: итоговый текст внутри коллажа (absolute), подъём --outro-lift
   и margin-top у eng flow считает js/case-cards.js */
@media (min-width: 1101px) {
  .case-wrap--yandex .case-outro-note,
  .case-wrap--eng-flow .case-outro-note {
    position: relative;
    justify-content: flex-end;
  }
  .case-wrap--yandex .case-outro-note {
    margin-top: 0;
  }
  .case-wrap--yandex .case-outro-text--yandex,
  .case-wrap--eng-flow .case-outro-text--eng-flow {
    position: absolute;
    bottom: var(--outro-lift, 0px);
  }
  .case-wrap--yandex .case-outro-text--yandex {
    left: 5.85%;
    margin-left: 0;
  }
  .case-wrap--eng-flow .case-outro-text--eng-flow {
    left: 0;
  }
}

/* Young Con, десктоп: 80px от низа последнего фото до текста. % у margin считается от ширины,
   а высота коллажа ей пропорциональна (aspect-ratio) — поэтому верно на любой ширине */
@media (min-width: 1101px) {
  .case-wrap--young-con .case-outro-note {
    margin-top: calc(61px - 15.332%);
  }
}

.case-totop {
  flex-shrink: 0;
  width: 24px;
  height: 14px;
  cursor: pointer;
}

/* --- футер (переиспользует .contacts из main.css) --- */
.case-footer-wrap {
  max-width: 1360px;
  margin: 50px auto 0;
}

.case-footer-wrap .contacts {
  margin-top: 40px;
}

/* --- карточки кейса (Yandex и другие "карточные" страницы) --- */
.case-card-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-card-divider {
  height: 1px;
  background: #000;
  width: 100%;
}

.case-card-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: "GT America Mono", monospace;
  font-size: 12px;
  line-height: 1.3;
  text-transform: uppercase;
}

.case-card-title {
  flex: 1 1 auto;
  min-width: 0;
}

.case-card-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.case-card-link img {
  display: block;
  width: 12px;
  height: 12px;
}

/* подчёркивание «ссылка» — на <span>, чтобы линия не шла под иконкой */
.case-card-link span {
  position: relative;
}

.case-card-link span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.case-card-link:hover span::after {
  transform: scaleX(1);
}

.case-card-tags {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
  color: #2a9fff;
}

.case-card-tag-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  text-align: right;
  white-space: nowrap;
}

.case-card-tag-group--row {
  flex-direction: row;
  gap: 10px;
}

.case-card-tag-single {
  white-space: nowrap;
  align-self: flex-start;
}

/* --- карусель (карточка Yandex Cloud) --- */
.case-carousel img[data-slide] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* неактивные слайды за правым краем; скрипт в yandex.html двигает их inline-стилем
   с !important (чтобы перебить мобильные !important ниже) */
  transform: translateX(100%);
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
  display: block;
}

.case-carousel img[data-slide].active {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .case-carousel img[data-slide] {
    transition: none;
  }
}

.case-carousel-arrow {
  position: absolute;
  display: block;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
}

.case-carousel-arrow img {
  display: block;
  width: 100%;
  height: 100%;
}


/* ===== выезд карточек при скролле (класс вешает js/case-cards.js) =====
   Селектор потомковый, не `>`: элементы бывают внутри display:contents-обёрток. */
.case-canvas--card-reveal .case-photo,
.case-canvas--card-reveal .case-card-meta,
.case-canvas--card-reveal .case-caption {
  opacity: 0;
  transform: translate(var(--card-reveal-x, 0px), 26px) rotate(var(--card-reveal-r, 0deg)) scale(0.95);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--card-reveal-delay, 0s);
  pointer-events: none;
}

.case-canvas--card-reveal .case-photo.is-revealed,
.case-canvas--card-reveal .case-card-meta.is-revealed,
.case-canvas--card-reveal .case-caption.is-revealed {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg) scale(1);
  pointer-events: auto;
}

/* ===== ≤1100: коллаж превращается в обычный список; !important — перебить inline style= ===== */
@media (max-width: 1100px) {
  .case-top { flex-direction: column; gap: 32px; }
  .case-facts { width: 100%; }

  .case-title { margin: 40px 0 48px; }

  .case-about { flex-direction: column; align-items: flex-start; gap: 16px; }

  .case-canvas {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .case-canvas .case-photo,
  .case-canvas .case-caption {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }
  .case-photo img { aspect-ratio: auto; }
  .case-caption { margin-bottom: 4px; }

  .case-outro-note { flex-direction: column; align-items: flex-start; gap: 16px; }
  .case-outro-text { margin-left: 0; width: 100%; }

  .case-card-meta { margin-bottom: 4px; }
  .case-card-row { flex-direction: column; gap: 12px; }
  .case-card-tags { justify-content: flex-start; }
  .case-card-tag-group { align-items: flex-start; text-align: left; }

  /* карусель: по умолчанию стопкой без стрелок (у Yandex ниже — снова карусель) */
  .case-carousel-arrow { display: none !important; }
  .case-carousel {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
  }
  .case-carousel img[data-slide] {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
}

/* ритм 60px между блоками (вместе с flex-gap 19px у .case-wrap) */
@media (max-width: 1100px) {
  .case-top { margin-bottom: 41px; }
  .case-about { margin-bottom: 41px; }
}

/* ===== ≤1100: Young Con и общие правила мобильного макета ===== */
@media (max-width: 1100px) {

  .case-wrap { padding-top: calc(var(--nav-h, 110px) + 12px); }

  .case-facts-row--first { padding: 24px 0; }

  .case-title { margin: 59px 0 20px; }
  .case-title-main { font-size: 64px; }
  .case-title-year { font-size: 58px; }

  .case-about {
    gap: 20px;
    padding-top: 8px;
    padding-bottom: 20px;
  }
  .case-about-text { font-size: 16px; }

  /* по левому краю: justify в узкой колонке даёт огромные пробелы */
  .case-caption { gap: 12px; font-size: 16px; }
  .case-caption-text { text-align: left; }

  /* --- коллаж: обычный поток, каждая галерея — свой flex-столбец --- */
  .case-canvas {
    display: flex;
    flex-direction: column;
    gap: 60px;
  }
  .case-gallery {
    /* static обязателен: .case-canvas > * делает её absolute, и галереи схлопываются в точку */
    position: static;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .case-gallery--1 { gap: 40px; }
  .case-gallery--2 { gap: 20px; }
  .case-gallery--3 { gap: 24px; }
  .case-gallery--4 { gap: 24px; }

  .case-canvas .case-photo,
  .case-canvas .case-caption {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }

  /* (2) экраны сцен — пары в ряд; высота ряда 150/350 ширины колонки (не aspect-ratio —
   фото с height:100% распирали ряд). Пропорции фото — в style= в young-con.html */
  .case-photo-pair {
    display: flex;
    gap: 12px;
    width: 100%;
    height: max(150px, calc((100vw - 2 * clamp(20px, 2.78vw, 40px)) * 150 / 350));
  }
  .case-canvas .case-photo-pair .case-photo {
    width: auto !important;
    height: 100% !important;
  }

  /* (4) баннеры хедлайнеров — смещённая сетка, правое фото по центру высоты */
  .case-photo-offset {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
  }
  .case-canvas .case-photo-offset .case-photo {
    width: auto !important;
    height: auto !important;
  }

  /* --- на телефоне стрелки «наверх» нет --- */
  .case-outro-note { margin-top: 60px; }
  .case-outro-text--young-con { margin-left: 0; width: 100%; }
  .case-totop { display: none; }
}

/* ===== ≤1100: Yandex ===== */
@media (max-width: 1100px) {

  .case-wrap--yandex .case-facts-row--first { padding: 13px 0 24px; }

  .case-wrap--yandex .case-about { gap: 16px; }

  /* relative — точка отсчёта для стрелок карусели (они рядом с фото, а не внутри) */
  .case-wrap--yandex .case-card-group {
    container-type: inline-size; /* для top стрелок карусели (50cqw) */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }

  .case-wrap--yandex .case-canvas .case-photo,
  .case-wrap--yandex .case-canvas .case-card-meta {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }

  /* рамка у фото — только на мобильном */
  .case-wrap--yandex .case-canvas .case-photo {
    border: 1px solid rgba(20, 20, 20, 0.12);
  }

  .case-wrap--yandex .case-card-meta { gap: 15px; }

  .case-wrap--yandex .case-card-row {
    flex-direction: row;
    justify-content: space-between;
  }

  .case-wrap--yandex .case-card-tags {
    gap: 10px;
    justify-content: flex-end;
  }

  .case-wrap--yandex .case-card-tag-group {
    gap: 10px;
    align-items: flex-end;
    text-align: right;
  }

  .case-wrap--yandex .case-card-tag-group--flat {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .case-wrap--yandex .case-card-tag-group--row {
    flex-direction: column;
  }

  /* --- карусель Yandex Cloud: на мобильном остаётся каруселью со стрелками --- */
  .case-wrap--yandex .case-canvas .case-photo.case-carousel {
    /* не position:relative — инлайн left/top из десктопа сдвинули бы карусель;
   contain:layout делает её точкой отсчёта для слайдов, не трогая left/top */
    display: block !important;
    aspect-ratio: 1 / 1;
    contain: layout;
  }
  .case-wrap--yandex .case-carousel img[data-slide] {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto;
    transform: translateX(100%) !important;
  }
  .case-wrap--yandex .case-carousel img[data-slide].active {
    transform: none !important;
  }
  .case-wrap--yandex .case-carousel-arrow {
    display: block !important;
    position: absolute !important;
    /* половина высоты квадратной карусели = 50cqw от ширины .case-card-group (контейнер) */
    top: 50cqw !important;
    transform: translateY(-50%);
    width: 10px !important;
    height: 18.8px !important;
  }
  .case-wrap--yandex .case-carousel-prev { left: -17px !important; }
  .case-wrap--yandex .case-carousel-next { left: auto !important; right: -17px !important; }

  .case-outro-text--yandex { margin-left: 0; width: 100%; }
}

/* ===== ≤1100: Thothex (галереи мерча и экранов — .case-merch-gallery/.case-merch-row) ===== */
@media (max-width: 1100px) {

  .case-wrap--thothex .case-title { margin: 16px 0 20px; }

  .case-wrap--thothex .case-facts-row--first { padding: 13px 0 24px; }

  .case-wrap--thothex .case-about { gap: 16px; }

  .case-wrap--thothex .case-card-group {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }
  .case-wrap--thothex .case-card-group--gallery { gap: 16px; }

  .case-wrap--thothex .case-canvas .case-photo,
  .case-wrap--thothex .case-canvas .case-card-meta {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }

  /* --- мудборд мерча: ряды 2+3+2+2, 3:4; --tall — чуть выше --- */
  .case-wrap--thothex .case-merch-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  .case-wrap--thothex .case-merch-row {
    display: flex;
    gap: 12px;
    width: 100%;
  }
  .case-wrap--thothex .case-canvas .case-merch-row .case-photo {
    width: auto !important;
    height: auto !important;
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 3 / 4;
  }
  /* та же специфичность, что выше — побеждает по порядку */
  .case-wrap--thothex .case-canvas .case-merch-row--tall .case-photo {
    aspect-ratio: 3277 / 4096;
  }

  /* --- экраны приложения: 2+2, скругление только на мобильном; app-5 скрыт --- */
  .case-wrap--thothex .case-merch-gallery--visiom { gap: 16px; }
  .case-wrap--thothex .case-canvas .case-merch-gallery--visiom .case-photo {
    aspect-ratio: 131 / 284;
    border-radius: 13px;
  }
  .case-wrap--thothex .case-mobile-hide { display: none !important; }

  .case-wrap--thothex .case-card-row {
    flex-direction: row;
    justify-content: space-between;
  }
  .case-wrap--thothex .case-card-tags {
    gap: 10px;
    justify-content: flex-end;
  }
  .case-wrap--thothex .case-card-tag-group {
    gap: 10px;
    align-items: flex-end;
    text-align: right;
  }
  .case-wrap--thothex .case-card-tag-group--flat {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .case-wrap--thothex .case-card-meta { gap: 15px; }
}

/* ===== ≤1100: eng flow ===== */
@media (max-width: 1100px) {

  .case-wrap--eng-flow .case-title { margin: 16px 0 20px; }

  .case-wrap--eng-flow .case-facts-row--first { padding: 13px 0 24px; }

  .case-wrap--eng-flow .case-about { gap: 16px; }

  .case-wrap--eng-flow .case-card-group {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }

  .case-wrap--eng-flow .case-canvas .case-photo,
  .case-wrap--eng-flow .case-canvas .case-card-meta {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }

  .case-wrap--eng-flow .case-card-meta { gap: 15px; }

  .case-wrap--eng-flow .case-card-row {
    flex-direction: row;
    justify-content: space-between;
  }
  .case-wrap--eng-flow .case-card-tags {
    gap: 10px;
    justify-content: flex-end;
  }
  .case-wrap--eng-flow .case-card-tag-group {
    gap: 10px;
    align-items: flex-end;
    text-align: right;
  }
  .case-wrap--eng-flow .case-card-tag-group--flat {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
}

/* ===== ≤1100: порядок блоков — назад → заголовок → факты → о проекте → работы.
   .case-top растворяется (display:contents), порядок через order. Стоит после
   постраничных правил — перебивает .case-wrap--… .case-title. ===== */
@media (max-width: 1100px) {
  .case-wrap > .case-top {
    display: contents;
  }
  .case-wrap > .case-top > .case-back { order: 1; align-self: flex-start; }
  .case-wrap > .case-title {
    order: 2;
    margin: 21px 0 0;
  }
  .case-wrap > .case-top > .case-facts {
    order: 3;
    margin-top: 21px;
  }
  .case-wrap > .case-about {
    order: 4;
    margin-top: 21px;
  }
  .case-wrap > .case-canvas { order: 5; }
  .case-wrap > .case-outro-note { order: 6; }
}

/* ===== ≤1100: подписи карточек; префикс .case-wrap — перебить постраничные правила ===== */
@media (max-width: 1100px) {
  .case-wrap .case-card-link { margin-top: 10px; }

  /* --wide: длинный заголовок во всю ширину, теги одной строкой справа на уровне «ссылки» */
  .case-wrap .case-card-row--wide {
    display: block;
    position: relative;
  }
  .case-wrap .case-card-row--wide .case-card-tags {
    position: absolute;
    right: 0;
    bottom: 0;
    gap: 10px;
  }
  .case-wrap .case-card-row--wide .case-card-tag-group { display: contents; }
  .case-wrap .case-card-row--wide .case-card-tag-group > :first-child { order: 0; }
  .case-wrap .case-card-row--wide .case-card-tag-group > :last-child { order: 1; }

  /* --rows: группы тегов строками друг под другом, прижаты вправо */
  .case-wrap .case-card-tags--rows {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  .case-wrap .case-card-tags--rows .case-card-tag-single { align-self: flex-end; }
}

/* узкие подписи: условие по ширине самой подписи (@container на .case-card-meta),
   а не экрана — на планшете подписи в колонках. Там теги --wide уходят строкой ниже */
@media (max-width: 1100px) {
  .case-wrap .case-card-meta { container-type: inline-size; }
}
@container (max-width: 319px) {
  .case-wrap .case-card-row--wide .case-card-tags {
    position: static;
    margin-top: 10px;
    justify-content: flex-end;
  }
}

/* --tags-top: теги absolute в правом верхнем углу строки, чтобы не сжимать заголовок */
@media (max-width: 1100px) {
  .case-wrap .case-card-row--tags-top {
    display: block;
    position: relative;
  }
  .case-wrap .case-card-row--tags-top .case-card-tags {
    position: absolute;
    top: 0;
    right: 0;
  }
}
@container (max-width: 329px) {
  .case-wrap .case-card-row--tags-top .case-card-tags {
    position: static;
    margin-top: 10px;
    justify-content: flex-end;
  }
}
/* у eng flow заголовок длиннее — теги переносятся раньше */
@container (max-width: 349px) {
  .case-wrap--eng-flow .case-card-row--tags-top .case-card-tags {
    position: static;
    margin-top: 10px;
    justify-content: flex-end;
  }
}

/* ===== 481–1100: планшетные отличия от телефона ===== */
@media (min-width: 481px) and (max-width: 1100px) {
  .case-title-main { font-size: clamp(64px, 11vw, 110px); }
  .case-title-year { font-size: clamp(58px, 10vw, 100px); }


  .case-about-text { width: 100%; font-size: 19px; line-height: 21px; }

  /* на планшете стрелка «наверх» снова есть */
  .case-outro-note {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }
  .case-wrap .case-outro-text { width: min(100%, 600px); margin-left: 0; }
  .case-totop { display: block; }

  /* !important — перебивает инлайн flex из young-con.html */
  .case-gallery--2 .case-photo-pair:last-child .case-photo:first-child { flex: 4 1 0 !important; }
  .case-gallery--2 .case-photo-pair:last-child .case-photo:last-child { flex: 3 1 0 !important; }

  .case-photo-offset .case-photo:first-child { flex: 0 0 calc((100% - 24px) * 0.45) !important; }
  .case-photo-offset .case-photo:last-child { flex: 1 1 0 !important; }
}

/* ===== 740–1100: карточки в две колонки, галереи Thothex — на всю ширину ===== */
@media (min-width: 740px) and (max-width: 1100px) {
  .case-canvas--yandex,
  .case-canvas--thothex,
  .case-canvas--eng-flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px 24px;
    align-items: start;
  }
  .case-canvas--thothex .case-card-group--gallery { grid-column: 1 / -1; }

  /* мудборд — сетка 3×3, ряды растворяются */
  .case-wrap--thothex .case-merch-gallery:not(.case-merch-gallery--visiom) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .case-wrap--thothex .case-merch-gallery:not(.case-merch-gallery--visiom) .case-merch-row {
    display: contents;
  }
  .case-wrap--thothex .case-canvas .case-merch-row--tall .case-photo { aspect-ratio: 3 / 4; }

  .case-wrap--thothex .case-merch-gallery--visiom { flex-direction: row; }
  .case-wrap--thothex .case-merch-gallery--visiom .case-merch-row { flex: 1 1 0; min-width: 0; }
}