/* Блок «Сотрудничество» на странице «О нас» (about.html) — на всю ширину, в синей паре раздела сотрудничества
   (--blue / --blue-dark, как collaboration/*.html). Пять вариантов для выбора — archive/about-collab-variants.html;
   на живой странице стоит вариант 4 (.cb--4). Фото — assets/img/collab/ (страницы сотрудничества). */
.cb { position: relative; overflow: hidden; padding: var(--space-11) 0; background: var(--blue-dark); color: var(--cream); }
.cb .wrap { position: relative; z-index: 1; max-width: 1120px; }
.cb .eyebrow { margin-bottom: var(--space-3); color: var(--yellow, #f3c45d); font-family: var(--hand); font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.cb .eyebrow::before { display: none; }
.cb h2 { margin: 0 0 var(--space-5); color: var(--cream); font-family: var(--display); font-weight: 600; font-size: clamp(32px, 4vw, 52px); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.cb p { max-width: 54ch; margin: 0 0 var(--space-7); color: rgba(245, 231, 211, .84); font-size: clamp(16px, 1.4vw, 19px); line-height: var(--lh-normal); }
/* направления — ссылки-чипы на подстраницы */
.cb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 var(--space-8); padding: 0; list-style: none; }
.cb-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1.5px solid rgba(245, 231, 211, .35); border-radius: 999px; color: var(--cream); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s; }
.cb-chips a:hover { border-color: var(--yellow, #f3c45d); color: var(--yellow, #f3c45d); }
/* фото в синем тоне раздела: яркость снимка поверх синего (luminosity) — как тонированные фото на страницах сотрудничества */
.cb-photo { position: relative; margin: 0; overflow: hidden; border-radius: 22px; background: var(--blue); }
.cb-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(1.08); mix-blend-mode: luminosity; }
.cb-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10, 27, 63, .45)); pointer-events: none; }

/* 1 — текст слева, фото справа */
.cb--1 { background: linear-gradient(135deg, var(--blue-dark) 0%, #1c2d5a 60%, var(--blue) 140%); }
.cb--1 .cb-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-10); align-items: center; }
.cb--1 .cb-photo { aspect-ratio: 4 / 5; max-height: 520px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }

/* 2 — фото-обложка раздела на весь фон, текст поверх слева */
.cb--2 { min-height: 520px; display: flex; align-items: center; background: var(--blue-dark) url('../assets/img/collab/hub-hero.webp') right center / cover no-repeat; }
.cb--2::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 27, 63, .96) 0%, rgba(10, 27, 63, .82) 42%, rgba(10, 27, 63, .1) 100%); }
.cb--2 > .wrap { flex: none; }
.cb--2 .cb-copy { max-width: 560px; }

/* 3 — заголовок + четыре направления плитками-ссылками */
.cb--3 .cb-head { display: grid; grid-template-columns: 1fr auto; gap: var(--space-7); align-items: end; margin-bottom: var(--space-8); }
.cb--3 .cb-head p { margin-bottom: 0; }
.cb--3 .cb-head > .ui-btn-primary { justify-self: start; }
.cb-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.cb-tile { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 18px; background: var(--blue); color: var(--cream); text-decoration: none; }
.cb-tile img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(1.08); mix-blend-mode: luminosity; transition: transform .5s var(--ease); }
.cb-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10, 27, 63, .9)); }
.cb-tile span { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; font-size: 18px; font-weight: 700; }
.cb-tile span small { display: block; margin-top: 4px; color: rgba(245, 231, 211, .75); font-size: 13px; font-weight: 500; }
.cb-tile:hover img { transform: scale(1.05); }

/* 4 — коллаж из трёх фото раздела */
.cb--4 { background: linear-gradient(120deg, var(--blue) -20%, var(--blue-dark) 70%); }
.cb--4 .cb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: center; }
.cb-collage { position: relative; height: 420px; }
.cb-collage .cb-photo { position: absolute; width: 46%; aspect-ratio: 286 / 388; border: 6px solid var(--cream); border-radius: 16px; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6); }
.cb-collage .cb-photo::after { display: none; }
/* эти три снимка уже в синем тоне — без фильтра */
.cb-collage .cb-photo img { filter: none; mix-blend-mode: normal; }
.cb-collage .cb-photo:nth-child(1) { left: 2%; top: 6%; transform: rotate(-6deg); }
.cb-collage .cb-photo:nth-child(2) { left: 30%; top: 0; z-index: 2; transform: rotate(3deg); }
.cb-collage .cb-photo:nth-child(3) { right: 0; bottom: 0; width: 58%; aspect-ratio: 350 / 238; transform: rotate(-2deg); z-index: 3; }

/* 5 — компактная лента по центру: круглые фото направлений как ссылки */
.cb--5 { padding: var(--space-10) 0; background: var(--blue); text-align: center; }
.cb--5 h2, .cb--5 p { margin-inline: auto; }
.cb--5 p { max-width: 60ch; }
.cb--5 .eyebrow { color: var(--cream); opacity: .9; }
.cb-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-7); margin: 0 0 var(--space-8); padding: 0; list-style: none; }
.cb-faces a { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--cream); font-size: 15px; font-weight: 700; text-decoration: none; }
.cb-faces .cb-photo { width: 104px; height: 104px; border-radius: 50%; border: 3px solid rgba(245, 231, 211, .85); background: var(--blue-dark); transition: transform .2s var(--ease), border-color .2s; }
.cb-faces .cb-photo::after { display: none; }
.cb-faces a:hover .cb-photo { transform: translateY(-3px); border-color: var(--yellow, #f3c45d); }
.cb-faces a:hover { color: var(--yellow, #f3c45d); }

/* подпись варианта на странице-архиве */
.cb-note { margin: 0; padding: 12px 22px; background: var(--paper); color: var(--cocoa); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-top: 1px solid var(--line); }

@media (max-width: 860px) {
  .cb { padding: var(--space-10) 0; }
  .cb--1 .cb-grid, .cb--4 .cb-grid, .cb--3 .cb-head { grid-template-columns: 1fr; gap: var(--space-7); }
  .cb--1 .cb-photo { aspect-ratio: 16 / 10; }
  .cb--2 { min-height: 0; background-position: 70% center; }
  .cb--2::before { background: linear-gradient(180deg, rgba(10, 27, 63, .92), rgba(10, 27, 63, .8)); }
  .cb-tiles { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .cb-collage { height: 320px; max-width: 460px; }
}
@media (max-width: 520px) {
  .cb-faces { gap: var(--space-5); }
  .cb-faces .cb-photo { width: 84px; height: 84px; }
  .cb-collage { height: 260px; }
}
@media (prefers-reduced-motion: reduce) { .cb-tile img, .cb-faces .cb-photo { transition: none; } }