/* ===== Сторінка для дизайн-студій і архітекторів (ТЗ №144) =====

   Своє в partner.css не покладеш — то файл сусідньої сторінки, а
   в styles.css сторінкове не місце; звідси цей файл. Усе, що сторінка
   бере в сусідів (відступи анкети, стрічки кадрів, класи order__*),
   лишається в їхніх файлах — тут тільки те, чого в них немає. */

/* Заголовок цієї сторінки довший за решту на сайті: 1363 px проти
   871 на головній і 991 на партнерстві, при контейнері 1120. Від
   1440 px заголовки героїв стоять в один рядок (white-space: nowrap
   у styles.css), і цей за правий край екрана виїжджав. Дозволяємо
   йому перенос — саме тут, решти сторінок правило не стосується:
   їхні заголовки в рядок вміщаються, і міняти їм поведінку немає
   підстав. На вужчих екранах заголовок переносився і без цього. */
@media (min-width: 1440px) {
  .designers-hero .hero__title {
    white-space: normal;
  }
}

/* Точка кадрування героя (ТЗ №145). Смуга широка — 4000 × 1450, 2.76:1, —
   а полоса героя на телефоні, навпаки, вертикальна (390 × 464), тому
   на вузькому екрані видно менше третини ширини знімка. Головне в кадрі —
   дві білі панелі (x 2514..3200 по вихіднику), і 81 % по горизонталі
   дібрані так, щоб вони лишалися в кадрі саме там, де його обрізає
   найсильніше. На широких екранах полоса показується майже вся, і число
   там ні на що не впливає.

   75 % по вертикалі працює лише на протилежному боці — на низьких
   широких вікнах (на кшталт 2560 × 768), де смуга стає такою плоскою,
   що ріже вже не ширину, а висоту. Панелі лежать у нижній половині
   смуги, і центр доводиться опускати. За кадрування cover переповнення
   йде по одній осі, тому кожне з двох чисел відповідає за свій випадок
   і одне одному не заважає. */
.designers-hero img {
  object-position: 81% 75%;
}

/* ── Затемнення під заголовком (ТЗ №146) ──────────────────────────────
   У ТЗ №145 тут стояла сила 0.68 до штатного градієнта. Вийшло погано:
   штатний градієнт зникає аж на правому краї кадру, а панелі стоять
   на 62–80 % ширини — і діставалося саме їм. Сила тут не допоможе,
   міняти треба не її, а те, де градієнт закінчується.

   Беремо прийом головної — темно ліворуч, прозоро праворуч, — але
   стискаємо спад: до 62 % ширини затемнення сходить нанівець цілком,
   і вся права частина кадру з панелями лишається чистою. Ліворуч
   щільність та сама, що була (0.67 на початку), тож заголовку там
   нічого не змінилося.

   Заголовок займає 11–65 % ширини, тобто його останні літери вже
   виходять на чистий кадр — так і задумано в ТЗ. Тримає їх тінь
   нижче: вона коштує нічого і не заважає знімку, на відміну
   від суцільної заливки. */
@media (min-width: 501px) {
  .designers-hero.page-hero--titled::before {
    background: linear-gradient(
      90deg,
      rgba(15, 17, 21, 0.67) 0%,
      rgba(15, 17, 21, 0.6) 25%,
      rgba(15, 17, 21, 0.38) 42%,
      rgba(15, 17, 21, 0.14) 54%,
      rgba(15, 17, 21, 0) 62%
    );
  }
}

/* На телефоні сайт міняє горизонтальний градієнт на рівну заливку:
   текст іде на всю ширину, і праворуч йому нема на чому триматися.
   Але рівна заливка накриває і панелі, а вони на вузькому екрані
   займають нижню половину кадру — саме те, заради чого знімок узято.

   Тому тут градієнт теж є, просто зверху вниз: щільний там, де текст,
   і сходить нанівець до низу кадру, лишаючи панелі світлими.

   Правка до ТЗ №146. Спершу текст був піднятий угору, щоб розвести
   його з панелями. Від цього відмовилися: на решті сторінок сайту
   заголовок героя стоїть по центру, і однаковість тут важливіша.
   Текст повернувся на штатне місце, трохи вище середини (31–59 %
   висоти), і нижнім рядком лягає на верх панелей — так і задумано.

   Градієнт під це подовжений: щільність тримається до 58 %, де
   кінчається текст, і відразу по тому обривається — до 73 % уже
   нічого немає. Крутий спад тут коштує дешево, а віддає багато:
   панелі починаються на 58 % і закінчуються на 84 %, тож затемнення
   зачіпає хіба що їхній верхній край.

   Самі числа дібрані найменші з тих, що тримають текст: 0.48 замість
   0.66, які стояли спершу. Запас лишається великий — 8:1 у заголовка
   при потрібних 3:1 і стільки ж у рядка під ним при потрібних 4.5:1, —
   а знімок при цьому не глухне. Панелі втрачають 16 % яскравості
   замість 38 % на важчому варіанті. */
@media (max-width: 500px) {
  /* Вирівнювання по центру — штатне, своє тут не задаємо. Відступ
     знизу піднімає текст на половину свого значення: центрування
     рахується по внутрішній коробці, і вона стає нижчою. */
  .designers-hero.page-hero--titled {
    padding-bottom: 48px;
  }
  .designers-hero.page-hero--titled::before {
    background: linear-gradient(
      180deg,
      rgba(15, 17, 21, 0.48) 0%,
      rgba(15, 17, 21, 0.45) 42%,
      rgba(15, 17, 21, 0.38) 58%,
      rgba(15, 17, 21, 0.1) 67%,
      rgba(15, 17, 21, 0) 73%
    );
  }
}

/* Тінь під буквами замість зайвого затемнення. Прийом на сайті не
   новий — він був закладений у .hero__title ще на головній і лежить
   там закоментованим. Тут він потрібен по ділу: кінець заголовка
   виходить на чистий кадр, і тримати його має щось, що не псує знімок.

   Два шари: ближній відділяє букву від тла, дальній створює навколо
   неї ледь помітне потемніння. Обидва мʼякі — на темному боці кадру
   тіні не видно зовсім, вона працює тільки там, де тло світле. */
.designers-hero .hero__title,
.designers-hero .page-hero__lead {
  text-shadow:
    0 1px 2px rgba(11, 12, 15, 0.45),
    0 2px 14px rgba(11, 12, 15, 0.55);
}

/* ── Розділи зі стрічкою (ТЗ №146) ────────────────────────────────────
   Абзаци на сайті відступів між собою не мають — їх дає контекст,
   і там, де абзаци йдуть поспіль (юридичні сторінки, вступ партнерства),
   правило своє в кожного. Тут контекст свій: рядок тексту, під ним
   посилання, під ним стрічка кадрів. Без просвітів посилання злипається
   з текстом, а стрічка підпирає посилання. */
.designers-block .muted + p {
  margin-top: 10px;
}
/* Відступ під вступним рядком у розділів зі стрічками. */
.designers-block .photo-gallery {
  margin-top: 26px;
}
/* ТЗ №165. А сітка моделей відсунута далі — 48 px замість 26.
   У ТЗ №164 обидва місця були зрівняні, і виявилося, що однакове число
   тут не дає однакового враження: стрічка під фразою починається
   суцільним кадром, а сітка — дрібним рядком підпису, і при тому самому
   відступі він підпирає фразу. Ритм у блоків різний, тому й число
   своє — при загальному просторі розділу 48 px читаються як пауза,
   а не як дірка. */
.model-grid {
  margin-top: 48px;
}

/* ── Чотири кроки лінією (ТЗ №150, перероблено ТЗ №162 і ТЗ №163) ─────
   Кроки як станції на одній лінії: на комп'ютері лінія горизонтальна,
   на телефоні вертикальна. До цього тут був рівний ряд зі стрілками
   (ТЗ №150), потім доріжка з сірих плашок (ТЗ №162) — обидва варіанти
   відхилені, їхні стилі прибрані цілком.

   ЗАОКРУГЛЕННЯ. Кружки — свідомий виняток із правила сайта «без
   заокруглень» (ТЗ №106): це не плашка, а знак станції, і без кола
   він не читається. Інших заокруглень тут немає.

   КОЛЬОРИ свої не заводимо: лінія, обведення й заливка кінцевої —
   var(--text), заливка кружків — var(--bg-light). */
.designers-steps {
  position: relative;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

/* Станція. Кружок однаковий на обох розкладках, міняється тільки
   те, де він стоїть. */
.designers-steps__num {
  position: relative;
  /* Над лінією: інакше вона перекреслювала б номер. */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 2px solid var(--text);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  /* ТЗ №169. Залито — стан за умовчанням, тобто стан без скрипта.
     Білий кружок умикає тільки клас steps-js, і сторінка ставить його
     синхронно в <head>. Порядок саме такий, а не навпаки: якби
     умовчанням було біле, то без скрипта кружки лишилися б білими
     назавжди, а з відкладеним скриптом блок устиг би промалюватися
     чорним і побілішати на очах. */
  background: var(--text);
  color: var(--bg-light);
}
.steps-js .designers-steps__num {
  background: var(--bg-light);
  color: var(--text);
  /* Міняється тільки заливка, тому в переході рівно два властивості:
     all зачепив би й рамку з розміром. */
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}
/* Станція, до якої дійшли. Клас вішає ui.js. */
.steps-js .designers-steps__num.is-on {
  background: var(--text);
  color: var(--bg-light);
}
/* Анімації в системі вимкнені — одразу кінцевий стан, без переходів.
   Правило стоїть після обох попередніх, тому перебиває і is-on,
   і білий початковий стан. */
@media (prefers-reduced-motion: reduce) {
  .steps-js .designers-steps__num {
    background: var(--text);
    color: var(--bg-light);
    transition: none;
  }
}

.designers-steps__title {
  margin: 0;
  font-size: 16px;
}
.designers-steps__text {
  margin: 4px 0 0;
}

@media (min-width: 701px) {
  /* Чотири рівні колонки на всю ширину тексту розділу. */
  .designers-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  /* Лінія йде за кружками, по їхньому вертикальному центру — це 20 px
     від верху списку, бо кружок 40 px і стоїть першим у кроці.

     По горизонталі — від центра першого кружка до центра четвертого.
     Ліворуч це рівно 20 px. Праворуч: колонка завширшки
     (100% - 3×24px)/4, тобто 25% - 18px, а центр кружка в ній — ще
     20 px від лівого краю колонки; звідси 25% - 38px від правого краю. */
  .designers-steps::before {
    content: "";
    position: absolute;
    top: 19px;
    left: 20px;
    right: calc(25% - 38px);
    height: 2px;
    background: var(--text);
  }

  .designers-steps__body {
    margin-top: 16px;
  }
}

@media (max-width: 700px) {
  /* Станція ліворуч, текст праворуч; лінія йде вниз по центру колонки
     станцій до наступного кружка. */
  .designers-steps__item {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 16px;
  }
  .designers-steps__item + .designers-steps__item {
    margin-top: 28px;
  }
  /* Заголовок стає на рівень центра кружка: кружок 40 px, рядок
     заголовка ≈ 22 px, отже від верху — приблизно 9 px. */
  .designers-steps__body {
    padding-top: 9px;
  }
  /* Відрізок від низу свого кружка до верху наступного: 28 px
     проміжку між кроками. У останнього кроку його немає — вести
     нема куди. */
  .designers-steps__item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 40px;
    bottom: -28px;
    left: 19px;
    width: 2px;
    background: var(--text);
  }
}


/* ── Стик двох білих блоків (ТЗ №174) ─────────────────────────────────
   ТЗ №175. ЗАРАЗ ЦЕ ПРАВИЛО НЕ СПРАЦЬОВУЄ НІ РАЗУ: кроки переїхали
   між рушникосушарки й файли, стали сірими, і двох білих смуг підряд
   на сторінці більше немає — усі стики тепер зі зміною кольору, де
   подвійне поле й задумане. Правило лишається, бо порядок блоків
   тут уже мінявся двічі, і наступна перестановка може зібрати таку
   пару знову — тоді дірка не вернеться молча. Нижче — чому воно
   взагалі з'явилося.

   Три розділи сторінки йшли підряд на білому: рушникосушарки, файли
   і кроки. Межі між ними немає — лінію-роздільник сайт між смугами
   одного кольору не малює навмисно, — а поля секцій складаються:
   48 px знизу у верхньої плюс 48 px згори в нижньої. На зміні кольору
   ці 96 px читаються як пауза, на суцільному білому — як дірка.

   Ділимо навпіл: по 24 px з кожного боку, разом ті самі 48 px, що
   просить ТЗ. Саме ділимо, а не знімаємо верхнє поле зовсім: за якорем
   «3D-моделі» і «Як ми працюємо зі студіями» сторінка ставить верхній
   край блока рівно під смугу розділів, і без верхнього поля заголовок
   упирався б у неї.

   Правило загальне за формою, але живе в designers.css, а цей файл
   підключає тільки ця сторінка. Загальним на весь сайт його робити
   не можна: таких пар на сайті десять на пʼяти сторінках, і в двох
   із них подвійний зазор поставлений навмисно — це дві серії на
   /hybrid, про що сказано в styles.css коло --series-gap. Ще в трьох
   між смугами одного кольору лінія все-таки є, її малює блок питань.

   :has() тут до місця: він і читається як намір — «біла смуга,
   за якою йде біла». Браузери його знають давно, а сітка моделей
   нижче по цьому ж файлу спирається на grid-auto-flow, який молодший.
   Не знає — зазор просто лишається колишнім. */
.section--light:has(+ .section--light) {
  padding-bottom: 24px;
}
.section--light + .section--light {
  padding-top: 24px;
}

/* ── Список 3D-моделей, розділ «Файли для проєкту» (ТЗ №153) ───────────
   Правка до ТЗ №153. Спершу це були плитки «знімок зверху, підписи під
   ним», і дев'ять таких плиток у сітці читалися кашею. Тепер формат
   рядка документа: знімок ліворуч, текст праворуч.

   Ні рамки, ні тіні, ні тла, ні кнопки — як і було задумано: поряд на
   сторінці вже стоять карточки каталогу і коробка анкети, і третій вид
   обрамлення тут зайвий. Блок тримається на знімках і на вирівнюванні. */

/* Порядок у розмітці — телефонний: дев'ять рядків підряд. На комп'ютері
   grid-auto-flow: column розкладає їх по стовпцях зверху вниз, тому
   перші три опиняються в першому стовпці, наступні три в другому
   і останні три в третьому — саме так, як просить ТЗ, і без другої
   розмітки під широкий екран.

   Три явні ряди роблять і друге: висоту ряду задає найвища позиція
   з трьох стовпців, тому позиції з однаковим номером стоять на одній
   висоті самі собою, без subgrid. */
.model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 26px 24px;
  /* Верхнього відступу тут навмисно немає: його задає спільне правило
     вище, одне на сітку і на стрічки (ТЗ №164). Писати margin тут не
     можна — правило стоїть нижче по файлу і просто загасило б спільне. */
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

/* Знімок і текст рівняються по верхньому краю: у рушникосушарок кадр
   вузький і високий, у панелей широкий і низький, і центрування
   розкидало б їхні підписи по різній висоті. */
.model-grid__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Квадратна рамка однакової ширини в усіх позицій — саме вона й тримає
   спільну вертикаль, від якої в стовпці починаються і назви, і кубики.
   Знімок вписується цілком: рушникосушарки витягнуті по-різному,
   обрізати їх по спільній рамці не можна. Тла в рамки немає — усі
   дев'ять знімків зняті на білому, і смуга розділу теж біла. */
.model-grid__photo {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.model-grid__photo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.model-grid__body {
  min-width: 0;
}
.model-grid__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  /* ТЗ №172. Назва не переноситься зовсім. Доти вона ламалася
     як «HYBRID 375» / «· чорна», і замість переносу блок тепер
     перемикається на один стовпець — межа нижче. */
  white-space: nowrap;
}
.model-grid__dims {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
/* ТЗ №170. «Для всіх кольорів» у рушникосушарок. Там, де плитки стоять
   стовпцями, підпис завжди йде власним рядком під розміром: колонка
   вузька, і в рядок він усе одно не вміщався — переносився то так,
   то інак, і розділовий знак «·» лишався висіти в кінці рядка. */
.model-grid__note {
  display: block;
}
.model-grid__files {
  margin-top: 6px;
}
/* Рядок файлу повторює рядок документа з карточки товару: той самий
   значок тим самим прийомом (маска по currentColor), та сама відбивка
   тексту від нього. Відрізняється тільки положення — у карточці значок
   стоїть на рядку заввишки з абзац, тут рядок дрібніший. */
.model-grid__file {
  display: block;
  position: relative;
  padding-left: 22px;
  font-size: 12px;
  line-height: 1.6;
}
.model-grid__file + .model-grid__file {
  margin-top: 2px;
}
.model-grid__file .card-docs__icon {
  top: 2px;
  width: 15px;
  height: 15px;
}

/* ТЗ №172. У блока файлів своя межа, 780 px, а не спільна 701 px.
   Причина проста: назва тепер нерозривна, і три стовпці мають сенс
   лише поки вона в стовпець уміщається.

   Де взялося число. Найдовша назва — «HYBRID 420 · чорна», 127,3 px.
   Місце під неї в плитці — це стовпець сітки мінус знімок (80 px)
   і проміжок (12 px), а стовпець — це (container--text − 2 × 24) / 3,
   де container--text на цих ширинах дорівнює 92vw. Заміром: на 768 px
   місця 127,5 px, на 766 px — 126,7, тобто межа лежить рівно на 768.
   Ставимо 780: на ній запас 3,9 px, і його з'їсть хіба що різниця
   відмальовки шрифта між браузерами, а 0,2 px запасу на 768 з'їла б
   будь-яка.

   На цю саму межу перенесено все, що в блоці було привʼязане до 701:
   проміжки між групами по три і положення підпису «для всіх кольорів»
   (ТЗ №170). Блок перемикається цілком, а не частинами.

   Решти сторінки це не стосується: смуга кроків, виключка абзацу
   в плашці й загальна межа сайту лишилися на 701 px. */
@media (max-width: 779px) {
  /* Один стовпець із дев'яти рядків — у тому самому порядку, що
     в розмітці. */
  .model-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 22px 0;
  }

  /* ТЗ №170. В один стовпець підпис повертається в рядок розміру через
     «·»: рядок тут широкий, і власний рядок під розміром виглядав би
     обірваним. */
  .model-grid__note {
    display: inline;
  }
  .model-grid__note::before {
    content: " · ";
  }

  /* ТЗ №170. Три групи по три — білі панелі, чорні панелі,
     рушникосушарки, — і між групами вдвічі більше повітря, ніж
     усередині: 22 px проміжку плюс стільки ж поля. Ні лінії, ні
     іншого розділювача: групи й так читаються знімками.

     Рахунок іде по третіх позиціях, і це та сама умова, на якій
     тримається розкладка на комп'ютері: там grid-template-rows:
     repeat(3, auto) розкладає ті самі дев'ять позицій по трьох
     стовпцях. Зміниться склад — правити треба обидва місця. */
  .model-grid__item:nth-child(3n + 1):not(:first-child) {
    margin-top: 22px;
  }
}


/* ── Смуга під героєм (ТЗ №155, перезібрана в ТЗ №158) ─────────────────
   Свого оформлення в неї немає: тло, колонка, заголовок і текст
   приходять готовими з блока «Як гріє HYBRID» на /hybrid — ті самі
   section--dark, section--fabric, container--text, центрований
   section__head і feature__text. До ТЗ №158 тут стояв свій великий
   жирний набір із підібраними під нього шириною і кеглем; усе це
   прибрано.

   Лишилося одне правило, і воно потрібне по ділу: абзац під
   центрованим заголовком короткий, і ліва виключка читалася б як збій.
   Прийом і привід ті самі, що в .feedback .section__head p у styles.css,
   де під центрованим заголовком стоїть такий самий короткий рядок.

   ТЗ №159. На телефоні абзац лишається з лівою виключкою: там він уже
   не короткий рядок, а три рядки на всю ширину, і центрування рваного
   з обох боків стовпчика читається гірше за звичайний текст. Заголовок
   по центру і на телефоні — як у «Як гріє HYBRID».

   ТЗ №172. Межа тут 701 px — спільна межа сайту. Доти вона збігалася
   з межею сітки моделей нижче по файлу, але та поїхала на 780 px:
   у блока файлів тепер своя межа, від довжини назв. Виключка абзацу
   з довжиною назв нічого спільного не має, тому лишається де була. */
@media (min-width: 701px) {
  .designers-claim .feature__text {
    text-align: center;
  }
}