@reference "tailwindcss";

@source "../templates/frontend.html";

.socialwall {
	display: flex;

	flex-wrap: wrap;

	gap: 1rem;

	position: relative;

	--x: 0px;

	--y: 0px;

	--opacity: 0;

	.socialwall-card {
		flex: 1 1 280px;

		min-width: 280px;

		max-width: 500px;

		border: 2px solid var(--nav-background);

		color: var(--color-text);

		position: relative;

		overflow: hidden;
	}

	.socialwall-post-text {
		p {
			color: var(--color-text) !important;
		}

		a {
			font-size: 16px !important;

			@media (min-width: 1024px) {
				font-size: 18px !important;
			}
		}

		color: var(--color-text) !important;

		border-top: 2px solid var(--nav-background);

		display: -webkit-box;

		-webkit-box-orient: vertical;

		font-weight: medium;

		-webkit-line-clamp: 4;

		line-height: 1.2;

		overflow: hidden;

		text-overflow: ellipsis;
	}

	.read-more {
		color: var(--color-link);
	}

	.socialpost-header {
		.linkedin-icon {
			color: var(--color-text);

			padding: 0;

			margin: 0;
		}
	}

	.img-container {
		overflow: hidden;

		display: flex;

		justify-content: center;

		align-items: center;

		.real-image {
			object-fit: contain !important;

			max-width: 100% !important;

			max-height: 100% !important;

			width: auto !important;

			height: auto !important;

			z-index: 2;
		}

		.blur-image {
			position: absolute;

			top: 0;

			left: 0;

			right: 0;

			bottom: 0;

			width: 100% !important;

			height: 100% !important;

			object-fit: cover !important;

			filter: blur(20px) !important;

			z-index: 1;
		}
	}

	.socialwall-overlay {
		position: absolute;

		top: 0;

		left: 0;

		right: 0;

		bottom: 0;

		display: flex;

		flex-wrap: wrap;

		gap: 1rem;

		pointer-events: none;

		opacity: var(--opacity);

		-webkit-mask: radial-gradient(360px 360px at var(--x) var(--y), #000 0%, transparent 60%);

		mask: radial-gradient(360px 360px at var(--x) var(--y), #000 0%, transparent 60%);

		transition: 300ms mask ease;

		will-change: mask;

		.socialwall-card-overlay {
			flex: 1 1 280px;

			min-width: 280px;

			max-width: 500px;

			border: 1px solid rgba(255, 255, 255, 0.85);

			box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85) inset;

			position: relative;

			background: transparent;

			height: 0;
		}
	}
}