/* =========================================================
   РАЗДЕЛ «ДИЗАЙНЕР»
   Подключается после inner-styles.css.
   ========================================================= */


/* =========================================================
   ПЕРЕМЕННЫЕ
   Раздел использует тёмную тему.
   ========================================================= */

.designer-page,
.designer-main,
.designer-project-main {
  --designer-text: #d5d5d5;
  --designer-muted: #a0a0a0;
  --designer-border: rgba(255, 255, 255, 0.12);

  --designer-accent: var(--accent-on-dark, #b5decc);
  --designer-accent-rgb: var(--accent-on-dark-rgb, 181, 222, 204);

  --designer-primary: var(--primary, #099197);
}


/* =========================================================
   СТРАНИЦА ОТДЕЛЬНОГО ПРОЕКТА
   ========================================================= */

.designer-project-main {
  min-width: 0;
  padding: 48px 24px 80px;
}

.designer-project-main .designer-project-container {
  width: 100%;
  max-width: 1220px;
  min-width: 0;
  margin: 0 auto;
}


/* Ссылка назад */

.designer-project-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  min-height: 44px;
  max-width: 100%;
  margin-bottom: 32px;

  color: var(--designer-muted);
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;

  transition: color 0.2s ease;
}

.designer-project-back:hover,
.designer-project-back:focus-visible {
  color: var(--designer-accent);
}

.designer-project-back:focus-visible {
  outline: 2px solid var(--designer-accent);
  outline-offset: 5px;
}


/* Название проекта и краткое описание */

.designer-project-header {
  margin-bottom: 32px;
}

.designer-project-title {
  margin: 0;

  color: var(--designer-text);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 600;
  line-height: 1.2;

  overflow-wrap: anywhere;
}

.designer-project-lead {
  margin: 18px 0 0;

  color: var(--designer-muted);
  font-size: 16px;
  line-height: 1.8;

  overflow-wrap: anywhere;
}


/* Вступление из поля «Содержимое» */

.designer-project-intro {
  margin-bottom: 44px;

  color: var(--designer-muted);
  font-size: 16px;
  line-height: 1.85;

  overflow-wrap: anywhere;
}


/* =========================================================
   ТЕКСТОВОЕ СОДЕРЖИМОЕ
   Общие правила для вступлений и редакторского HTML.
   ========================================================= */

.designer-project-intro p,
.designer-page-content p,
.designer-page-description p {
  margin: 0 0 20px;

  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.designer-project-intro ul,
.designer-project-intro ol,
.designer-page-content ul,
.designer-page-content ol,
.designer-page-description ul,
.designer-page-description ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

.designer-project-intro li + li,
.designer-page-content li + li,
.designer-page-description li + li {
  margin-top: 8px;
}

.designer-project-intro h2,
.designer-page-content h2 {
  margin: 32px 0 16px;

  color: var(--designer-text);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.4;
}

.designer-project-intro h3,
.designer-page-content h3 {
  margin: 26px 0 12px;

  color: var(--designer-text);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.designer-project-intro strong,
.designer-project-intro b,
.designer-page-content strong,
.designer-page-content b {
  color: var(--designer-text);
  font-weight: 600;
}

.designer-project-intro a,
.designer-page-content a,
.designer-page-description a {
  color: var(--designer-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.designer-project-intro a:hover,
.designer-page-content a:hover,
.designer-page-description a:hover {
  text-decoration-thickness: 2px;
}

.designer-project-intro a:focus-visible,
.designer-page-content a:focus-visible,
.designer-page-description a:focus-visible {
  outline: 2px solid var(--designer-accent);
  outline-offset: 4px;
}

.designer-project-intro img,
.designer-page-content img {
  display: block;
  max-width: 100%;
  height: auto;
}

.designer-project-intro > :first-child,
.designer-page-content > :first-child,
.designer-page-description > :first-child {
  margin-top: 0;
}

.designer-project-intro > :last-child,
.designer-page-content > :last-child,
.designer-page-description > :last-child {
  margin-bottom: 0;
}


/* =========================================================
   СЕТКА МАТЕРИАЛОВ ПРОЕКТА
   ========================================================= */

.designer-project-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  /* Сохраняем порядок записей MIGX */
  grid-auto-flow: row;

  column-gap: 24px;
  row-gap: 36px;
  align-items: start;

  min-width: 0;
}

.designer-project-block {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
}


/* По умолчанию — четверть ширины */

.designer-project-block--image {
  grid-column: span 1;
}

.designer-project-block--image[data-layout="half"] {
  grid-column: span 2;
}

.designer-project-block--image[data-layout="full"] {
  grid-column: 1 / -1;
}


/* Изображения сохраняют пропорции */

.designer-project-image-wrap {
  display: block;
  min-width: 0;
  overflow: hidden;

  border: 1px solid var(--designer-border);
  border-radius: 12px;
}

.designer-project-image-wrap:focus-visible {
  outline: 2px solid var(--designer-accent);
  outline-offset: 5px;
}

.designer-project-image {
  display: block;
  width: 100%;
  height: auto;
}


/* Подписи */

.designer-project-image-info {
  padding: 14px 2px 0;
}

.designer-project-image-title {
  margin: 0;

  color: var(--designer-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;

  overflow-wrap: anywhere;
}

.designer-project-image-description {
  margin: 0;

  color: var(--designer-muted);
  font-size: 14px;
  line-height: 1.8;

  white-space: pre-line;
  overflow-wrap: anywhere;
}

.designer-project-image-title
+ .designer-project-image-description {
  margin-top: 10px;
}


/* =========================================================
   ПОЛНОШИРИННЫЕ ТЕКСТОВЫЕ БЛОКИ
   ========================================================= */

.designer-project-block--heading {
  grid-column: 1 / -1;
  padding-top: 16px;
}

.designer-project-block--heading:first-child {
  padding-top: 0;
}

.designer-project-heading {
  margin: 0;

  color: var(--designer-text);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;

  overflow-wrap: anywhere;
}

.designer-project-heading-text {
  margin: 0;

  color: var(--designer-muted);
  font-size: 16px;
  line-height: 1.85;

  white-space: pre-line;
  overflow-wrap: anywhere;
}

.designer-project-heading
+ .designer-project-heading-text {
  margin-top: 16px;
}


/* =========================================================
   ОБЩАЯ СТРАНИЦА «ДИЗАЙНЕР»
   ========================================================= */

.designer-main {
  box-sizing: border-box;
  min-width: 0;
  padding: clamp(54px, 7vw, 84px) 24px 96px;
}

.designer-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1220px;
  min-width: 0;
  margin: 0 auto;
}

.designer-page-intro {
  margin-bottom: clamp(42px, 6vw, 64px);
}


/* Главный заголовок — бирюзовый */

.designer-page-title {
  margin: 0;

  color: var(--designer-primary);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;

  overflow-wrap: anywhere;
}

.designer-page-description,
.designer-page-content {
  color: var(--designer-muted);
  font-size: 16px;
  line-height: 1.85;

  overflow-wrap: anywhere;
}

.designer-page-description {
  margin: 20px 0 0;
}

.designer-page-content {
  margin-bottom: 48px;
}

.designer-project-list {
  display: flex;
  flex-direction: column;
  gap: 64px;

  min-width: 0;
}


/* =========================================================
   ОБЗОРНЫЙ БЛОК ПРОЕКТА
   ========================================================= */

.designer-overview-section {
  min-width: 0;
  padding-bottom: 48px;

  border-bottom: 1px solid var(--designer-border);
}

.designer-overview-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.designer-overview-header {
  margin-bottom: 20px;
}


/* Название слева, переход к проекту справа */

.designer-overview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.designer-overview-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;

  color: var(--designer-text);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.2px;

  overflow-wrap: anywhere;
}

.designer-overview-title a {
  color: var(--designer-text);
  text-decoration: none;

  transition: color 0.2s ease;
}

.designer-overview-title a:hover,
.designer-overview-title a:focus-visible {
  color: var(--designer-accent);
}

.designer-overview-description {
  max-width: 760px;
  margin: 14px 0 0;

  color: var(--designer-muted);
  font-size: 15px;
  line-height: 1.8;

  overflow-wrap: anywhere;
}


/* Светло-зелёная ссылка с треугольником */

.designer-overview-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;

  box-sizing: border-box;
  min-height: 44px;
  max-width: 100%;

  color: var(--designer-accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;

  transition: transform 0.2s ease;
}

.designer-overview-link:visited,
.designer-overview-link:hover,
.designer-overview-link:focus-visible {
  color: var(--designer-accent);
}


/* Треугольник вместо текстовой стрелки */

.designer-overview-link-arrow {
  display: block;
  flex: 0 0 auto;

  width: 0;
  height: 0;

  border-top: 5px solid transparent;
  border-right: 0;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;

  transition: transform 0.2s ease;
}


/* Видимый фокус при навигации клавиатурой */

.designer-overview-title a:focus-visible,
.designer-overview-link:focus-visible,
.designer-collage:focus-visible {
  outline: 2px solid var(--designer-accent);
  outline-offset: 6px;
}


/* Движение ссылки только при наведении мышью */

@media (hover: hover) and (pointer: fine) {
  .designer-overview-link:hover {
    transform: translateX(4px);
  }

  .designer-overview-link:hover
  .designer-overview-link-arrow {
    transform: translateX(2px);
  }
}


/* =========================================================
   КОЛЛАЖ
   ========================================================= */

.designer-collage {
  position: relative;
  isolation: isolate;

  display: block;

  width: 100%;
  max-width: 1080px;
  aspect-ratio: 16 / 10;
  margin: 0 auto;

  color: inherit;
  text-decoration: none;
  overflow: visible;
}


/* Прозрачная область размещения изображения */

.designer-collage__item {
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  padding: 0;
  border: 0;

  background: transparent;
  overflow: visible;

  transform: rotate(var(--angle, 0deg));
  transform-origin: center;
  opacity: 1;

  pointer-events: none;
}


/*
   Изображение сохраняет исходные пропорции.
   Подсветка применяется к самому изображению.
*/

.designer-collage__item img {
  position: relative;
  z-index: 1;

  display: block;
  flex: 0 1 auto;
  min-width: 0;

  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;

  padding: 0;
  border: 0;
  border-radius: 6px;

  background: transparent;
  object-fit: contain;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);

  /* Мягкое светло-зелёное свечение */
  filter:
    drop-shadow(
      0 0 7px rgba(var(--designer-accent-rgb), 0.22)
    )
    drop-shadow(
      0 0 18px rgba(var(--designer-accent-rgb), 0.14)
    )
    drop-shadow(
      0 0 34px rgba(var(--designer-accent-rgb), 0.08)
    );
}


/* =========================================================
   ПОЗИЦИИ КОЛЛАЖА
   ========================================================= */


/* 1. Главное изображение */

.designer-collage__item[data-position="1"] {
  left: 27%;
  top: 16%;
  width: 42%;
  height: 64%;
  z-index: 3;

  --angle: -3deg;
  --enter-x: -35px;
  --enter-y: 45px;
  --enter-angle: -10deg;
  --delay: 0ms;
}


/* 2. Слева сверху */

.designer-collage__item[data-position="2"] {
  left: 0.5%;
  top: 6%;
  width: 34%;
  height: 50%;
  z-index: 2;

  --angle: -8deg;
  --enter-x: -65px;
  --enter-y: -35px;
  --enter-angle: -15deg;
  --delay: 70ms;
}


/* 3. Справа сверху */

.designer-collage__item[data-position="3"] {
  left: 65%;
  top: 2.5%;
  width: 30%;
  height: 56%;
  z-index: 4;

  --angle: 8deg;
  --enter-x: 60px;
  --enter-y: -40px;
  --enter-angle: 16deg;
  --delay: 140ms;
}


/* 4. Слева снизу */

.designer-collage__item[data-position="4"] {
  left: 2.5%;
  top: 53.5%;
  width: 31%;
  height: 41%;
  z-index: 4;

  --angle: 5deg;
  --enter-x: -55px;
  --enter-y: 45px;
  --enter-angle: -8deg;
  --delay: 210ms;
}


/* 5. Справа снизу */

.designer-collage__item[data-position="5"] {
  left: 60.5%;
  top: 52.5%;
  width: 32%;
  height: 44%;
  z-index: 5;

  --angle: -7deg;
  --enter-x: 55px;
  --enter-y: 45px;
  --enter-angle: 9deg;
  --delay: 280ms;
}


/* 6. Снизу по центру */

.designer-collage__item[data-position="6"] {
  left: 37.5%;
  top: 66%;
  width: 28%;
  height: 33%;
  z-index: 6;

  --angle: 6deg;
  --enter-x: 15px;
  --enter-y: 65px;
  --enter-angle: 15deg;
  --delay: 350ms;
}


/* Если выбрано одно изображение */

.designer-collage[data-count="1"] .designer-collage__item {
  left: 15%;
  top: 10%;
  width: 70%;
  height: 80%;

  --angle: -3deg;
  --delay: 0ms;
}


/* =========================================================
   АНИМАЦИЯ КОЛЛАЖА
   Классы is-animated и is-pending управляются JavaScript.
   ========================================================= */

.designer-collage.is-animated .designer-collage__item {
  transition:
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 650ms ease;

  transition-delay: var(--delay, 0ms);
}

.designer-collage.is-pending .designer-collage__item {
  opacity: 0;

  transform:
    translate(
      var(--enter-x, 0px),
      var(--enter-y, 40px)
    )
    rotate(var(--enter-angle, 0deg));
}


/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================= */

@media (max-width: 767px) {

  /* Страница отдельного проекта */

  .designer-project-main {
    padding: 32px 16px 56px;
  }

  .designer-project-back {
    margin-bottom: 24px;
  }

  .designer-project-header {
    margin-bottom: 24px;
  }

  .designer-project-lead,
  .designer-project-intro {
    font-size: 15px;
  }

  .designer-project-intro {
    margin-bottom: 32px;
  }


  /* Все материалы проекта — одной колонкой */

  .designer-project-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .designer-project-grid > .designer-project-block {
    grid-column: 1 / -1;
  }

  .designer-project-block--heading {
    padding-top: 12px;
  }

  .designer-project-heading {
    font-size: 20px;
  }

  .designer-project-heading-text {
    font-size: 15px;
    line-height: 1.8;
  }


  /* Общая страница */

  .designer-main {
    padding: 46px 16px 70px;
  }

  .designer-page-intro {
    margin-bottom: 38px;
  }

  .designer-page-title {
    font-size: clamp(26px, 5vw, 34px);
  }

  .designer-page-description,
  .designer-page-content {
    font-size: 15px;
    line-height: 1.8;
  }

  .designer-project-list {
    gap: 40px;
  }

  .designer-overview-section {
    padding-bottom: 36px;
  }

  .designer-overview-heading {
    gap: 16px;
  }

  .designer-overview-title {
    font-size: 22px;
  }

  .designer-overview-description {
    font-size: 14px;
  }

  .designer-overview-link {
    gap: 7px;
    font-size: 13px;
  }

  .designer-overview-link-arrow {
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-left-width: 6px;
  }


  /* Квадратная область композиции на телефоне */

  .designer-collage {
    aspect-ratio: 1 / 1;
  }


  /* Более мягкая подсветка на маленьком экране */

  .designer-collage__item img {
    border-radius: 5px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);

    filter:
      drop-shadow(
        0 0 5px rgba(var(--designer-accent-rgb), 0.18)
      )
      drop-shadow(
        0 0 13px rgba(var(--designer-accent-rgb), 0.11)
      )
      drop-shadow(
        0 0 24px rgba(var(--designer-accent-rgb), 0.06)
      );
  }


  /* Небольшое смещение вместо большого разлёта */

  .designer-collage.is-pending .designer-collage__item {
    transform:
      translateY(14px)
      rotate(var(--angle, 0deg));
  }
}


/* =========================================================
   УЗКИЕ ЭКРАНЫ
   ========================================================= */

@media (max-width: 560px) {
  .designer-overview-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .designer-overview-link {
    align-self: flex-end;

    white-space: normal;
    text-align: right;
    overflow-wrap: anywhere;
  }
}


/* =========================================================
   УМЕНЬШЕНИЕ ДВИЖЕНИЯ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .designer-project-back,
  .designer-overview-title a,
  .designer-overview-link,
  .designer-overview-link-arrow,
  .designer-collage.is-animated .designer-collage__item {
    transition: none;
  }

  .designer-overview-link:hover,
  .designer-overview-link:hover
  .designer-overview-link-arrow {
    transform: none;
  }

  .designer-collage.is-pending .designer-collage__item {
    opacity: 1;
    transform: rotate(var(--angle, 0deg));
  }
}