.social-grid{
  display:flex; justify-content:center; gap:40px; margin-top:20px; flex-wrap:wrap;
}

/* klikany „kafelek” z dwiema warstwami tła */
.social-icon{
  width:90px; height:90px; display:block; position:relative;
  transform:translateZ(0); /* lepsze wygładzanie */
}

.social-icon::before,
.social-icon::after{
  content:""; position:absolute; inset:0;
  background-position:center; background-size:contain; background-repeat:no-repeat;
  transition:opacity .25s ease, transform .2s ease;
}

/* warstwa czarna (domyślnie widoczna) */
.social-icon::before{ background-image: var(--img-black); opacity:1; }

/* warstwa kolorowa (pokazywana na hover) */
.social-icon::after{ background-image: var(--img-color); opacity:0; }

/* efekt hover: kolor + lekkie powiększenie */
.social-icon:hover::after{ opacity:1; }
.social-icon:hover::before{ opacity:0; }
.social-icon:hover{ transform:scale(1.06); }

/* Preferencje dostępności: bez animacji, jeśli użytkownik tego chce */
@media (prefers-reduced-motion: reduce){
  .social-icon::before, .social-icon::after{ transition:none; }
  .social-icon:hover{ transform:none; }
}

/* Ukryty wizualnie, ale dostępny dla czytników ekranu i wyszukiwarek (np. H1 na stronie głównej, gdzie slider nie zostawia miejsca na widoczny nagłówek) */
.visually-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Podkreślenie H1 w stylu "aside h3" (style.css:247) - pomarańczowa linia na długości tekstu, dalej szara */
.h1-line{
    border-bottom: 1px solid #dfdfdf;
}
.h1-line span{
    display: inline-block;
    margin-bottom: -1px;
    padding-bottom: 8px;
    border-bottom: 2px solid #ff8400;
}