/* ================================================
   SJ Social – blok mediów społecznościowych
   v1.10.0 | Autor: Światło Jogi
   ================================================ */

/* ── Wrapper bloku ──────────────────────────────── */
.sj-social-block {
	display:        flex !important;
	flex-direction: column !important;
	align-items:    center !important;   /* domyślnie centrum */
	width:          100%;
	margin:         1.5em 0;
	box-sizing:     border-box;
}

/* ── Wyrównanie poziome (align-items przy flex-column) ── */
.sj-social-block.sj-social-align-left   { align-items: flex-start !important; }
.sj-social-block.sj-social-align-center { align-items: center     !important; }
.sj-social-block.sj-social-align-right  { align-items: flex-end   !important; }

/* ── Nagłówek ───────────────────────────────────── */
.sj-social-heading {
	font-family:    'Roboto Condensed', sans-serif !important;
	font-weight:    600 !important;
	font-size:      0.9em !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color:          #555555 !important;
	margin:         0 0 10px 0 !important;
	padding:        0 !important;
	line-height:    1.3 !important;
}

.sj-social-align-left   .sj-social-heading { text-align: left   !important; }
.sj-social-align-center .sj-social-heading { text-align: center !important; }
.sj-social-align-right  .sj-social-heading { text-align: right  !important; }

/* ── Rząd ikon z liniami dekoracyjnymi ─────────── */
.sj-social-inner {
	display:        flex !important;
	flex-direction: row !important;
	align-items:    center !important;
	flex-wrap:      nowrap !important;
	gap:            8px;
}

/* Linia z cieniem po lewej i prawej */
.sj-social-inner::before,
.sj-social-inner::after {
	content:     '';
	display:     block;
	width:       80px;
	height:      1px;
	background:  #b8b8b8;
	box-shadow:  0 1px 2px rgba(0, 0, 0, 0.15);
	flex-shrink: 0;
}

/* ── Ikona ──────────────────────────────────────── */
.sj-social-icon {
	color:           #222222 !important;
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	flex-direction:  row !important;
	width:           44px !important;
	height:          44px !important;
	min-width:       44px !important;
	min-height:      44px !important;
	border-radius:   8px !important;
	border:          2px solid #222222 !important;
	background:      transparent !important;
	text-decoration: none !important;
	flex-shrink:     0;
	box-sizing:      border-box;
	transition:      background 0.2s ease, border-color 0.2s ease,
	                 color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.sj-social-icon svg {
	width:       22px !important;
	height:      22px !important;
	fill:        currentColor !important;
	display:     block !important;
	flex-shrink: 0;
}

/* ── Hover: brand kolory ────────────────────────── */
.sj-social-facebook:hover { background: #1877F2 !important; border-color: #1877F2 !important; color: #fff !important; transform: translateY(2px); box-shadow: 0 4px 14px rgba(24,119,242,.40); }
.sj-social-twitter:hover  { background: #000000 !important; border-color: #000000 !important; color: #fff !important; transform: translateY(2px); box-shadow: 0 4px 14px rgba(0,0,0,.30);       }
.sj-social-linkedin:hover { background: #0A66C2 !important; border-color: #0A66C2 !important; color: #fff !important; transform: translateY(2px); box-shadow: 0 4px 14px rgba(10,102,194,.40); }
.sj-social-whatsapp:hover { background: #25D366 !important; border-color: #25D366 !important; color: #fff !important; transform: translateY(2px); box-shadow: 0 4px 14px rgba(37,211,102,.40); }
.sj-social-email:hover     { background: #D80000 !important; border-color: #D80000 !important; color: #fff !important; transform: translateY(2px); box-shadow: 0 4px 14px rgba(216,0,0,.40);     }
.sj-social-instagram:hover { background: #E1306C !important; border-color: #E1306C !important; color: #fff !important; transform: translateY(2px); box-shadow: 0 4px 14px rgba(225,48,108,.40); }
.sj-social-pinterest:hover { background: #E60023 !important; border-color: #E60023 !important; color: #fff !important; transform: translateY(2px); box-shadow: 0 4px 14px rgba(230,0,35,.40);   }

/* ── Edytor Gutenberga ──────────────────────────── */
.sj-social-editor-preview { padding: 12px 0; }

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 480px) {
	.sj-social-inner::before,
	.sj-social-inner::after { width: 30px; }
	.sj-social-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
	.sj-social-icon svg { width: 20px !important; height: 20px !important; }
	.sj-social-heading { font-size: 0.8em !important; }
}