/* Переиспользуемые элементы, общие для страниц. */

/* Ссылка-папка: контур со срезанным правым верхним углом, внутри
   иконка и подпись. При наведении папка заливается белым, содержимое
   чернеет. Пришла с первого экрана главной (ссылки на проекты), теперь
   тем же элементом набрана ссылка на главную в футере — поэтому живёт
   здесь, а не в секции.
   Здесь только внешний вид: ширину и место на экране задаёт страница
   через свой класс-примесь (.hero__project, .footer__card). */
.folder {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  /* Правый паддинг больше левого — под срез угла. */
  padding: 0.8em 1.1em 0.8em 0.85em;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

/* Контур. non-scaling-stroke держит линию в 1px при любом растяжении,
   overflow: visible не даёт срезать её по краям бокса. В покое линия
   серая — не спорит с белым текстом внутри.
   Срез угла остаётся ровным, пока пропорция бокса совпадает с холстом
   контура (200 : 72), поэтому ширина задаётся классом-примесью. */
.folder__frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgba(244, 244, 244, 0.4);
  stroke-width: 1;
  transition: fill 0.3s var(--ease), stroke 0.3s var(--ease);
}

.folder:hover,
.folder:focus-visible {
  color: var(--color-bg);
}

.folder:hover .folder__frame,
.folder:focus-visible .folder__frame {
  fill: var(--color-text);
  stroke: var(--color-text);
}

/* Содержимое поверх контура: у контура position: absolute,
   без z-index он бы перекрыл текст заливкой. */
.folder__icon,
.folder__name {
  position: relative;
  z-index: 1;
}

.folder__icon {
  flex: none;
  width: 0.85em;
  height: 0.85em;
}

/* Своей рамки фокуса нет: её роль играет заливка контура. */
.folder:focus-visible {
  outline: none;
}

/* Кнопка контакта. Стиль снят с кнопки Sign Up на nodeson.com: плоская
   тёмная пилюля с тонкой светлой обводкой, без блюра и теней; справа
   тумблер из трёх точек. При наведении заливается белым.
   Здесь только внешний вид — положение на экране задаёт страница
   через свой класс-примесь (.hero__talk, .intro__cta). */
.talk {
  display: inline-flex;
  align-items: center;
  /* Ширина фиксированная: иначе более длинная русская подпись
     растягивает кнопку и двигает соседей. Зазор до тумблера
     подстраивается сам. */
  justify-content: space-between;
  width: 12.75em;
  gap: 1em;
  padding: 0.73em 0.93em 0.73em 1.2em;
  border-radius: 999px;
  background-color: #161616;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--color-text);
  font-size: var(--subtitle-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.talk:hover,
.talk:focus-visible {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

.talk:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

/* Тумблер: полупрозрачная светлая капсула, внутри три точки —
   две приглушённые и белая справа. Пропорции сняты с референса:
   капсула ~2 : 1, точка — треть её высоты. */
.talk__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.22em;
  width: 2.5em;
  height: 1.2em;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.14);
  transition: background-color 0.3s var(--ease);
}

.talk__dot {
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.42);
  transition: background-color 0.3s var(--ease);
}

.talk__dot:last-child {
  background-color: #f0f0f0;
}

/* На белой заливке светлый тумблер пропал бы — инвертируем его. */
.talk:hover .talk__toggle,
.talk:focus-visible .talk__toggle {
  background-color: rgba(6, 6, 6, 0.14);
}

.talk:hover .talk__dot,
.talk:focus-visible .talk__dot {
  background-color: rgba(6, 6, 6, 0.42);
}

.talk:hover .talk__dot:last-child,
.talk:focus-visible .talk__dot:last-child {
  background-color: var(--color-bg);
}