/* =========================================================
   MODUŁ: Avatar Smart Prosumenta
   ========================================================= */

.sp-avatar {
	--spav-glow:          #D4A017;
	--spav-ring1:         #1A2540;
	--spav-ring2:         #D4A017;
	--spav-circle-border: #D4A017;
	--spav-circle-bg:     #F8F3E0;
	--spav-caption-color: #1A2540;
	--spav-caption-size:  14px;
	--spav-caption-weight: 700;

	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	max-width: 100%;
	font-family: var(--sp-font);
}

.sp-avatar__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.sp-avatar__link {
	display: inline-block;
	border-bottom: none;
	text-decoration: none;
}

/* ===== ROZMIARY ===== */
.sp-avatar--size-small { width: 140px; }
.sp-avatar--size-medium { width: 260px; }
.sp-avatar--size-large { width: 420px; }
.sp-avatar--size-full { width: 100%; max-width: 100%; }

@media (max-width: 600px) {
	.sp-avatar--size-large { width: 320px; max-width: 100%; }
	.sp-avatar--size-medium { width: 220px; max-width: 100%; }
}

/* ===== EFEKT: CIRCLE (okrągła ramka) ===== */
.sp-avatar__circle {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--spav-circle-bg);
	border: 4px solid var(--spav-circle-border);
	box-shadow: 0 10px 30px rgba(0,0,0,.12);
	position: relative;
}
.sp-avatar__circle .sp-avatar__img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* ===== EFEKT: GLOW (poświata) ===== */
.sp-avatar--effect-glow .sp-avatar__img,
.sp-avatar--effect-glow .sp-avatar__circle {
	filter: drop-shadow(0 0 24px var(--spav-glow))
			drop-shadow(0 0 8px var(--spav-glow));
}

.sp-avatar--effect-glow-pulse .sp-avatar__img,
.sp-avatar--effect-glow-pulse .sp-avatar__circle {
	animation: sp-avatar-pulse 3s ease-in-out infinite;
}
@keyframes sp-avatar-pulse {
	0%, 100% {
		filter: drop-shadow(0 0 16px var(--spav-glow))
				drop-shadow(0 0 6px var(--spav-glow));
	}
	50% {
		filter: drop-shadow(0 0 32px var(--spav-glow))
				drop-shadow(0 0 12px var(--spav-glow));
	}
}

/* ===== EFEKT: GRADIENT RING ===== */
.sp-avatar__ring {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	padding: 6px;
	background: conic-gradient(from 135deg, var(--spav-ring1), var(--spav-ring2), var(--spav-ring1));
	box-shadow: 0 20px 60px rgba(26,37,64,.20);
	position: relative;
}
.sp-avatar__ring::before {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: conic-gradient(from 135deg, var(--spav-ring1), var(--spav-ring2), var(--spav-ring1));
	filter: blur(20px);
	opacity: .35;
	z-index: -1;
}
.sp-avatar__ring-inner {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	background: var(--spav-circle-bg);
	position: relative;
}
.sp-avatar__ring-inner .sp-avatar__img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* ===== EFEKT: FLOAT (unosi się góra-dół) ===== */
.sp-avatar--effect-float .sp-avatar__img,
.sp-avatar--effect-float .sp-avatar__circle,
.sp-avatar--effect-float .sp-avatar__ring {
	animation: sp-avatar-float 6s ease-in-out infinite;
}
@keyframes sp-avatar-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

/* ===== EFEKT: HOVER ZOOM ===== */
.sp-avatar--effect-hover-zoom .sp-avatar__img,
.sp-avatar--effect-hover-zoom .sp-avatar__circle,
.sp-avatar--effect-hover-zoom .sp-avatar__ring {
	transition: transform .35s cubic-bezier(.4,.0,.2,1);
}
.sp-avatar--effect-hover-zoom:hover .sp-avatar__img,
.sp-avatar--effect-hover-zoom:hover .sp-avatar__circle,
.sp-avatar--effect-hover-zoom:hover .sp-avatar__ring {
	transform: scale(1.05);
}

/* ===== CAPTION ===== */
.sp-avatar__caption {
	font-family: inherit;
	font-size: var(--spav-caption-size);
	font-weight: var(--spav-caption-weight);
	color: var(--spav-caption-color);
	text-align: center;
	letter-spacing: .04em;
	margin: 0;
}
.sp-avatar__caption--upper {
	text-transform: uppercase;
	letter-spacing: .1em;
}