/**
 * Social Media Feed Styles
 */

/* Feed Container */
.social-media-feed {
	max-width: 600px;
	margin: 0 auto;
	grid-template-columns: 1fr !important;
}

/* Card Styles */
.social-media-card {
	break-inside: avoid;
	display: flex;
	flex-direction: column;
}

/* Embed Card */
.social-media-card__embed {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}

/* Custom Card */
.social-media-card__custom {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}

/* Embed Responsive Wrapper */
.social-embed-wrapper {
	overflow: hidden;
}

.social-embed-wrapper iframe {
	max-width: 100% !important;
	width: 100% !important;
	border: none;
}

/* YouTube/Video iframe aspect ratio */
.social-embed-wrapper iframe[src*="youtube"],
.social-embed-wrapper iframe[src*="youtu.be"] {
	aspect-ratio: 16/9;
	height: auto;
}

/* Instagram Embed Fix */
.social-embed-wrapper .instagram-media {
	min-width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}

/* Facebook Embed Fix */
.social-embed-wrapper .fb-post,
.social-embed-wrapper .fb-video {
	width: 100% !important;
}

.social-embed-wrapper .fb-post > span,
.social-embed-wrapper .fb-video > span {
	width: 100% !important;
}

/* Twitter/X Embed Fix */
.social-embed-wrapper .twitter-tweet {
	margin: 0 auto !important;
}

/* YouTube Embed Fix */
.social-embed-wrapper .wp-block-embed__wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.social-embed-wrapper .wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Video Player */
.social-media-card__video video {
	max-height: 400px;
}

/* Image Hover Effect */
.social-media-card__image img {
	transition: transform 0.3s ease;
}

.social-media-card:hover .social-media-card__image img {
	transform: scale(1.02);
}

/* Content Text */
.social-media-card__content {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.social-media-card__content a {
	color: #2563eb;
	text-decoration: none;
}

.social-media-card__content a:hover {
	text-decoration: underline;
}

/* Platform Badge Animation */
.social-media-card .rounded-full {
	transition: transform 0.2s ease;
}

.social-media-card:hover .rounded-full {
	transform: scale(1.1);
}

/* Loading State */
.social-media-card.loading {
	opacity: 0.7;
	pointer-events: none;
}

/* Masonry Layout Alternative (if needed) */
@supports (grid-template-rows: masonry) {
	.social-media-feed.masonry {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: masonry;
		gap: 1.5rem;
	}
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.social-media-feed {
		grid-template-columns: 1fr !important;
	}

	.social-media-card__video video {
		max-height: 300px;
	}
}

/* Dark Mode Support (if theme supports it) */
@media (prefers-color-scheme: dark) {
	.social-media-card {
		background-color: #1f2937;
		color: #f3f4f6;
	}
}

/* Print Styles */
@media print {
	.social-media-feed {
		display: block;
	}

	.social-media-card {
		break-inside: avoid;
		page-break-inside: avoid;
		margin-bottom: 1rem;
	}

	.social-embed-wrapper iframe {
		display: none;
	}
}
