/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */

@import "common";

.wp-block-vanpariyar-instagram-post-grid {
	margin: 2rem 0;
	width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	.instagram-follower-count {
		font-weight: 600;
		margin-bottom: 1rem;
		font-size: 1.1rem;
		color: $black;
	}

	.wp-block-gallery {
		display: grid !important; // Force grid to override Gutenberg defaults
		width: 100%;
		gap: 12px;
		margin: 0 auto;
		padding: 0;
		list-style: none;

		&.columns-1 { grid-template-columns: repeat(1, 1fr); }
		&.columns-2 { grid-template-columns: repeat(2, 1fr); }
		&.columns-3 { grid-template-columns: repeat(3, 1fr); }
		&.columns-4 { grid-template-columns: repeat(4, 1fr); }
		&.columns-5 { grid-template-columns: repeat(5, 1fr); }
		&.columns-6 { grid-template-columns: repeat(6, 1fr); }
		&.columns-7 { grid-template-columns: repeat(7, 1fr); }
		&.columns-8 { grid-template-columns: repeat(8, 1fr); }

		.blocks-gallery-grid {
			display: contents;
			padding: 0;
			margin: 0;
		}

		.blocks-gallery-item {
			margin: 0 !important;
			padding: 0 !important;
			width: 100% !important;
			list-style: none;
			position: relative;
			overflow: hidden;
			border-radius: 4px;
			background: $bg-accent;

			figure {
				margin: 0;
				height: 100%;
				width: 100%;
			}

			img {
				display: block;
				width: 100% !important;
				height: auto;
				max-width: 100%;
				object-fit: cover;
				transition: transform 0.4s ease;

				&:hover {
					transform: scale(1.08);
				}
			}
		}

		&.is-cropped .blocks-gallery-item {
			aspect-ratio: 1 / 1;

			img {
				height: 100% !important;
			}
		}
	}

	// Placeholder styling
	.instagram-placeholder {
		background: $gray-light;
		border: 1px solid $gray-medium;
		padding: 2.5rem;
		text-align: center;
		border-radius: 8px;
		width: 100%;
		box-sizing: border-box;

		h3 {
			margin-top: 0;
			color: $black;
			font-size: 1.25rem;
		}

		p {
			color: $gray-dark;
		}
	}
}

// Responsive adjustments
@media (max-width: 782px) {
	.wp-block-vanpariyar-instagram-post-grid .wp-block-gallery {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px;
	}
}

@media (max-width: 480px) {
	.wp-block-vanpariyar-instagram-post-grid .wp-block-gallery {
		grid-template-columns: repeat(1, 1fr) !important;
	}
}