/* ==========================================================================
   Posts Listing block
   ========================================================================== */

.lc-block-posts-listing {
	margin-block-start: 0 !important;
	margin-block-end: var(--wp--preset--spacing--xx-large) !important;

	.lc-block-posts-listing__container {
		max-width: var(--wp--style--global--wide-size);
		margin: 0 auto;
	}

	.lc-block-posts-listing__header {
		margin-bottom: var(--wp--preset--spacing--large);
		text-align: center;

		/* Mobile styles */
		@media (max-width: 768px) {
			margin-bottom: var(--wp--preset--spacing--medium);
		}
	}

	.lc-block-posts-listing__title {
		margin: 0;
		font-family: var(--wp--preset--font-family--ivypresto-display);
		font-size: var(--wp--preset--font-size--heading-2);
		font-weight: 300;
		line-height: 1.3;
		letter-spacing: 1px;
		color: var(--wp--preset--color--neutral-10);

		/* Tablet styles */
		@media (max-width: 1024px) {
			font-size: var(--wp--preset--font-size--heading-3);
		}

		/* Mobile styles */
		@media (max-width: 768px) {
			font-size: var(--wp--preset--font-size--heading-3);
		}
	}

	.lc-block-posts-listing__grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--wp--preset--spacing--medium);
		margin-bottom: var(--wp--preset--spacing--large);

		/* Large tablet styles - 3 columns */
		@media (max-width: 1200px) {
			grid-template-columns: repeat(3, 1fr);
		}

		/* Tablet styles - 2 columns */
		@media (max-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
			gap: var(--wp--preset--spacing--small);
		}

		/* Mobile styles - 1 column */
		@media (max-width: 480px) {
			grid-template-columns: 1fr;
			gap: var(--wp--preset--spacing--small);
		}
	}

	.lc-block-posts-listing__empty {
		text-align: center;
		padding: var(--wp--preset--spacing--x-large) 0;
		color: var(--wp--preset--color--neutral-30);
		
		p {
			margin: 0;
			font-size: var(--wp--preset--font-size--body-large);
		}
	}

	/* Pagination styles */
	.lc-block-posts-listing__pagination {
		margin-top: var(--wp--preset--spacing--x-large);
		text-align: center;

		.pagination {
			display: inline-block;
		}

		.pagination__list {
			display: flex;
			list-style: none;
			margin: 0;
			padding: 0;
			gap: var(--wp--preset--spacing--x-small);
			justify-content: center;
			flex-wrap: wrap;
		}

		.pagination__item {
			margin: 0;

			a,
			span {
				display: block;
				padding: var(--wp--preset--spacing--x-small) var(--wp--preset--spacing--small);
				text-decoration: none;
				border: 1px solid var(--wp--preset--color--neutral-40);
				border-radius: 4px;
				color: var(--wp--preset--color--neutral-10);
				font-size: var(--wp--preset--font-size--body-small);
				line-height: 1;
				min-width: 44px;
				text-align: center;
				transition: all 0.2s ease;

				&:hover {
					background-color: var(--wp--preset--color--primary-10);
					border-color: var(--wp--preset--color--primary-10);
					color: white;
				}
			}

			/* Current page styling */
			.current {
				background-color: var(--wp--preset--color--primary-10);
				border-color: var(--wp--preset--color--primary-10);
				color: white;
				cursor: default;

				&:hover {
					background-color: var(--wp--preset--color--primary-10);
					border-color: var(--wp--preset--color--primary-10);
				}
			}

			/* Dots styling */
			.dots {
				border: none;
				background: none;
				color: var(--wp--preset--color--neutral-30);
				cursor: default;

				&:hover {
					background: none;
					border: none;
					color: var(--wp--preset--color--neutral-30);
				}
			}
		}

		/* Mobile pagination adjustments */
		@media (max-width: 768px) {
			margin-top: var(--wp--preset--spacing--large);

			.pagination__item {
				a,
				span {
					padding: var(--wp--preset--spacing--xx-small) var(--wp--preset--spacing--x-small);
					min-width: 36px;
					font-size: var(--wp--preset--font-size--body-x-small);
				}
			}
		}
	}
}