/**
 * Instagram Feed Caption Addon Styles
 */

.sbi_caption_addon {
	padding: 12px 15px !important;
	background: #11345B !important;
	display: block !important;
	padding-top: 30px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	position: relative !important;
	z-index: 1 !important;
}

.sbi_caption_title {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #fff !important;
	margin-bottom: 6px !important;
	line-height: 1.4 !important;
	display: block !important;
}

.sbi_caption_excerpt {
	font-size: 14px !important;
	color: #fff !important;
	line-height: 1.5 !important;
	margin: 0 0 15px 0 !important;
	display: block !important;
}

.sbi_caption_link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 16px !important;
	background: rgba(255, 255, 255, 0.1) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	border-radius: 4px !important;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	transition: all 0.3s ease !important;
	margin-top: 10px !important;
}

.sbi_caption_link:hover {
	background: rgba(255, 255, 255, 0.2) !important;
	border-color: rgba(255, 255, 255, 0.5) !important;
	transform: translateY(-1px) !important;
}

.sbi_caption_link svg {
	width: 14px !important;
	height: 14px !important;
	fill: currentColor !important;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
	.sbi_caption_addon {
		background: #1a1a1a;
		border-top-color: #2a2a2a;
	}

	.sbi_caption_title {
		color: #f5f5f5;
	}

	.sbi_caption_excerpt {
		color: #a8a8a8;
	}
}

/* Responsive Anpassungen */
@media (max-width: 640px) {
	.sbi_caption_addon {
		padding: 10px 12px;
	}

	.sbi_caption_title {
		font-size: 14px;
		margin-bottom: 4px;
	}

	.sbi_caption_excerpt {
		font-size: 13px;
	}
}

/* Integration mit verschiedenen Instagram Feed Layouts */
.sbi_item {
	position: relative;
	overflow: hidden;
}

/* Für Feeds mit Hover-Effekten */
.sbi_item:hover .sbi_caption_addon {
	opacity: 1 !important;
}

/* Für Grid-Layouts */
#sb_instagram.sbi_grid_layout .sbi_caption_addon {
	position: relative !important;
	width: 100% !important;
}

/* Für Masonry-Layouts */
#sb_instagram.sbi_masonry .sbi_caption_addon {
	position: relative !important;
	width: 100% !important;
}

/* Für Carousel-Layouts */
#sb_instagram.sbi_carousel .sbi_caption_addon {
	position: relative !important;
	width: 100% !important;
}

/* Stelle sicher dass die Caption im Item sichtbar ist */
.sbi_item .sbi_caption_addon {
	opacity: 1 !important;
	visibility: visible !important;
}

#sb_instagram img {
    border-radius: 15px;
}