/* =========================
   JOIN US — WRAPPER
========================= */

.join-wrap{
  max-width: 100%;
  margin-top: 28px;
  padding: 20px 22px 18px;
  border-radius: 22px;
}

/* =========================
   JOIN US — ICONS ROW
========================= */

.join-icons{
  display: flex;
  align-items: center;
  gap: 8px;              /* расстояние между иконками */
  flex-wrap: nowrap;
}

/* =========================
   JOIN US — LINK
========================= */

.join-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  transition: transform .18s ease, filter .18s ease;
}

/* hover */
.join-icon:hover{
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
}

/* =========================
   JOIN US — ICON IMAGE
========================= */

.join-icon img,
.join-icon svg{
  width: 28px;           /* 🔥 оптимальный размер */
  height: 28px;
  display: block;
  object-fit: contain;
}

/* =========================
   DARK MODE SUPPORT
========================= */

.dark-mode .join-icon:hover{
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.75));
}

/* =========================
   MOBILE FIX
========================= */

@media (max-width: 480px){
  .join-icons{
    gap: 3px;
  }

  .join-icon img,
  .join-icon svg{
    width: 26px;
    height: 26px;
  }
}
/* =========================
   JOIN US — MOBILE FULL WIDTH
========================= */

@media (max-width: 480px) {

  .join-wrap .join-icons{
    justify-content: space-between; /* 🔥 на всю ширину */
    gap: 0;                          /* убираем лишние зазоры */
    overflow-x: visible;             /* без скролла */
  }

  .join-wrap .join-icon{
    flex: 0 0 auto;
  }

  .join-wrap .join-icon img,
  .join-wrap .join-icon svg{
    width: 24px;                     /* чуть компактнее */
    height: 24px;
  }

}
/* =========================
   JOIN US — ICON SIZE +10%
========================= */

/* DESKTOP */
.join-wrap .join-icon img,
.join-wrap .join-icon svg{
  width: 39px;     /* было ~34px */
  height: 42px;
  transition: transform .18s ease;
}

/* hover — аккуратно */
.join-wrap .join-icon:hover img,
.join-wrap .join-icon:hover svg{
  transform: scale(1.06);
}

/* =========================
   MOBILE
========================= */

@media (max-width: 480px){

  .join-wrap .join-icon img,
  .join-wrap .join-icon svg{
    width: 42px;   /* было ~24px */
    height: 42px;
  }

}