/*
 * CSS-иконки через mask-image (Plan_003 п. 0.1.3).
 *
 * Принцип:
 *   - SVG-иконка хранится как data-URI (или /svg/*.svg) в маске,
 *   - background-color управляет цветом — иконка перекрашивается через CSS,
 *   - DOM остаётся чистым (нет тысячи <svg> в длинных списках).
 *
 * Использование:
 *   <span class="icon icon--arrow-right" />
 *
 * ВАЖНО. Этот файл — только для ОДНОЦВЕТНЫХ иконок (любой единый цвет, силуэт).
 * Многоцветные SVG (бренд-иконки, мессенджеры Telegram/Max, иллюстрации с
 * градиентами) сюда добавлять НЕЛЬЗЯ — mask-image делает из них монохромный
 * силуэт и теряет оригинальные цвета. Для цветных подключаем SVG как
 * <img src="/svg/name.svg" alt="" aria-hidden="true"> — файл сам сохранит
 * свои градиенты и заливки. См. Plan_001 и CLAUDE.md (раздел «Иконки»).
 */

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Пример. Реальные иконки добавляются через генератор из SVG → data-URI. */
.icon--arrow-right {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");
}

/*
 * Декоративные углы (используются в Desktop Menu и др.):
 *   .icon--ugol-tl — верхний-левый угол
 *   .icon--ugol-br — нижний-правый угол
 *
 * Базовые: viewBox 125×125, цвет задаётся через background-color (mask-color).
 * Применение: ставим width/height явно у элемента-носителя.
 */
.icon--ugol-tl {
  -webkit-mask-image: url("/svg/ugol_tl.svg");
          mask-image: url("/svg/ugol_tl.svg");
}

.icon--ugol-br {
  -webkit-mask-image: url("/svg/ugol_br.svg");
          mask-image: url("/svg/ugol_br.svg");
}

/*
 * Функциональные иконки, используемые в шапке/секциях главной.
 * Все — CSS mask; цвет задаётся background-color на элементе.
 */
.icon--logo        { -webkit-mask-image: url("/svg/logo.svg");        mask-image: url("/svg/logo.svg"); }
.icon--search      { -webkit-mask-image: url("/svg/search.svg");      mask-image: url("/svg/search.svg"); }
.icon--user        { -webkit-mask-image: url("/svg/user.svg");        mask-image: url("/svg/user.svg"); }
.icon--phone       { -webkit-mask-image: url("/svg/phone.svg");       mask-image: url("/svg/phone.svg"); }
.icon--flower1     { -webkit-mask-image: url("/svg/flower1.svg");     mask-image: url("/svg/flower1.svg"); }
.icon--play        {
    -webkit-mask-image: url("/svg/play.svg");
            mask-image: url("/svg/play.svg");
}
.icon--arrow-left  { -webkit-mask-image: url("/svg/arrow-left.svg");  mask-image: url("/svg/arrow-left.svg"); }
.icon--arrow-right { -webkit-mask-image: url("/svg/arrow-right.svg"); mask-image: url("/svg/arrow-right.svg"); }