/* Animasi shimmer */
@keyframes shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

.skeleton {
	background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	border-radius: 6px;
	display: block;
}

.skeleton-card {
	pointer-events: none;
}

.skeleton-thumb {
	width: 100%;
	height: 200px;
}

.skeleton-title {
	width: 65%;
	height: 20px;
	margin: 12px 0 8px;
}

.skeleton-text {
	width: 100%;
	height: 14px;
	margin-bottom: 6px;
}

.skeleton-text.short {
	width: 45%;
}

/* Transisi halus saat konten muncul */
#real-posts {
	opacity: 0;
	transition: opacity 0.4s ease;
}

#real-posts.is-visible {
	opacity: 1;
	visibility: visible !important;
	position: static !important;
}

#the-home {
	.container {
		.real-posts {
			display: grid;
			gap: 1.5rem;

			@media (min-width: 540px) {
				grid-template-columns: repeat(2, 1fr);
			}

			@media (min-width: 1440px) {
				grid-template-columns: repeat(3, 1fr);
			}

			.post-card {
				position: relative;

				@media (min-width: 1024px) {
					width: 100%;
					aspect-ratio: 16 / 9;
					overflow: hidden;
				}

				.post-thumbnail {
					width: 100%;

					@media (min-width: 1024px) {
						height: 100%;
					}

					img {
						width: 100%;
						height: auto;

						@media (min-width: 1024px) {
							height: 100%;
							object-fit: cover;
						}
					}
				}

				.post-content {
					padding: 1rem;
					@media (min-width: 1024px) {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: auto;
						z-index: 1;
						background-color: var(--cp-1);
						background-color: var(--cp-warning);
						transition: 0.5s ease-in-out all;
					}
					@media (min-width: 1440px) {
						width: 85%;
					}

					h3 {
						font-size: 1.1rem;
						@media (min-width: 1024px) {
							font-size: 1rem;
							padding-right: 1rem;
						}
						@media (min-width: 1440px) {
							font-size: 0.95rem;
							font-weight: 500;
							margin-right: 1rem;
						}
						a {
							display: block;
							@media (min-width: 1024px) {
								padding-right: 1rem;
								color: var(--cp-bg-primary);
							}
						}
					}
				}
			}
		}
	}
}