/* Ikony kont spółki w stopkach (shared/_social_links). Ładuje go layout
   marketing (landing.css) i application (aplikacja klienta), bo partial
   stoi w obu stopkach.

   Pliki w images/zewnetrzne/social to Bootstrap Icons 1.11.3 (MIT),
   jedna ścieżka 16 x 16. Kształt daje maska, kolor `currentColor` linku,
   więc ta sama ikona jest biała na atramencie i szara w aplikacji.
   Ścieżki url() Propshaft przepisuje na pliki z digestem.

   Bez resetu marginesu listy: robi go już landing.css i preflight
   Tailwinda, a reguła tutaj (arkusz bez @layer) przebiłaby utilities
   stopki aplikacji (mt-2, lg:-ml-2.5) i .footer-social z landing.css. */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Pole kliku 40 px (minimum dotyku na telefonie), ikona 20 px. Gdy lista
   stoi przy lewej krawędzi tekstu, stopka cofa ją o 10 px, żeby ikona
   (nie pole kliku) trzymała linię. */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: color 150ms ease-out;
}

.social-ikona {
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.social-ikona--instagram { mask-image: url("/assets/zewnetrzne/social/instagram-97d25712.svg"); }
.social-ikona--facebook { mask-image: url("/assets/zewnetrzne/social/facebook-5b9d4617.svg"); }
.social-ikona--linkedin { mask-image: url("/assets/zewnetrzne/social/linkedin-c41acb1e.svg"); }
.social-ikona--x { mask-image: url("/assets/zewnetrzne/social/x-e2675716.svg"); }
.social-ikona--youtube { mask-image: url("/assets/zewnetrzne/social/youtube-f20cc150.svg"); }