/**
* Post Grid Editor Styles
*
* CSS for both Frontend+Backend.
*/

$columns: 3;

.gmfgb-pg-grid {
	display: flex;
    flex-wrap: wrap;
	margin: 0;
	font-size: 0;
	position: relative;
	row-gap: 20px; /* Default row gap */
	column-gap: 20px; /* Default column gap */
	border: none;
	// Apply custom gap values when available
	&[data-grid-desktop][data-grid-tablet][data-grid-mobile] {
		// Row gap always 20px, column gap uses gap value
		row-gap: 20px;
		column-gap: var(--gap, 20px);
	}
	
	// Target the WordPress Query block's list container
	.wp-block-query {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: var(--gap, 20px);
		margin: 0 !important;
		padding: 0 !important;
		width: 100%;
		height: auto !important;
		
		// Ensure the list inside query block uses flexbox
		ul {
			display: flex !important;
			flex-wrap: wrap !important;
			gap: var(--gap, 20px);
			margin: 0 !important;
			padding: 0 !important;
			width: 100%;
			list-style: none !important;
		}
		
		// Ensure post template uses flexbox
		.wp-block-post-template {
			display: flex !important;
			flex-wrap: wrap !important;
			gap: var(--gap, 20px);
			margin: 0 !important;
			padding: 0 !important;
			width: 100%;
		}
	}
	
	// Responsive grid with data attributes - Higher specificity
	&[data-grid-desktop][data-grid-tablet][data-grid-mobile] {
		// Desktop styles (1024px and above)
		@media (min-width: 1024px) {
			row-gap: 20px;
			column-gap: var(--gap, 20px);
			.wp-block-post {
				width: calc((100% - (var(--gap, 20px) * (var(--grid-desktop, 2) - 1))) / var(--grid-desktop, 2)) !important;
				margin: 0 !important;
				padding: 0 !important;
				position: relative !important;
				left: unset !important;
				top: unset !important;
				flex: 0 0 calc((100% - (var(--gap, 20px) * (var(--grid-desktop, 2) - 1))) / var(--grid-desktop, 2)) !important;
				
				// Apply border styles to individual post items with higher specificity
				.gmfgb-pg-wrap {
					border-top-width: var(--border-width-desktop-top, 0px) !important;
					border-right-width: var(--border-width-desktop-right, 0px) !important;
					border-bottom-width: var(--border-width-desktop-bottom, 0px) !important;
					border-left-width: var(--border-width-desktop-left, 0px) !important;
					border-style: var(--border-type-desktop, none) !important;
					border-color: var(--border-color-desktop, #000000) !important;
					border-radius: var(--border-radius-desktop-top, 0px) var(--border-radius-desktop-right, 0px) var(--border-radius-desktop-bottom, 0px) var(--border-radius-desktop-left, 0px) !important;
					overflow: hidden;
					// Only apply border when border type is not 'none'
					&:not([style*="border-style: none"]) {
						border-top: var(--border-width-desktop-top, 0px) var(--border-type-desktop, none) var(--border-color-desktop, #000000) !important;
						border-right: var(--border-width-desktop-right, 0px) var(--border-type-desktop, none) var(--border-color-desktop, #000000) !important;
						border-bottom: var(--border-width-desktop-bottom, 0px) var(--border-type-desktop, none) var(--border-color-desktop, #000000) !important;
						border-left: var(--border-width-desktop-left, 0px) var(--border-type-desktop, none) var(--border-color-desktop, #000000) !important;
					}
				}
			}
		}

		// Tablet styles (768px to 1023px) - Includes iPad
		@media (min-width: 768px) and (max-width: 1023px) {
			row-gap: 20px;
			column-gap: var(--gap, 20px);
			.wp-block-post {
				width: calc((100% - (var(--gap, 20px) * (var(--grid-tablet, 2) - 1))) / var(--grid-tablet, 2)) !important;
				margin: 0 !important;
				padding: 0 !important;
				position: relative !important;
				left: unset !important;
				top: unset !important;
				flex: 0 0 calc((100% - (var(--gap, 20px) * (var(--grid-tablet, 2) - 1))) / var(--grid-tablet, 2)) !important;
				
				// Apply border styles to individual post items with higher specificity
				.gmfgb-pg-wrap {
					border-top-width: var(--border-width-desktop-top, 0px) !important;
					border-right-width: var(--border-width-desktop-right, 0px) !important;
					border-bottom-width: var(--border-width-desktop-bottom, 0px) !important;
					border-left-width: var(--border-width-desktop-left, 0px) !important;
					border-style: var(--border-type-desktop, none) !important;
					border-color: var(--border-color-desktop, #000000) !important;
					border-radius: var(--border-radius-desktop-top, 0px) var(--border-radius-desktop-right, 0px) var(--border-radius-desktop-bottom, 0px) var(--border-radius-desktop-left, 0px) !important;
					
					// Only apply border when border type is not 'none'
					&:not([style*="border-style: none"]) {
						border-top: var(--border-width-desktop-top, 0px) var(--border-type-desktop, none) var(--border-color-desktop, #000000) !important;
						border-right: var(--border-width-desktop-right, 0px) var(--border-type-desktop, none) var(--border-color-desktop, #000000) !important;
						border-bottom: var(--border-width-desktop-bottom, 0px) var(--border-type-desktop, none) var(--border-color-desktop, #000000) !important;
						border-left: var(--border-width-desktop-left, 0px) var(--border-type-desktop, none) var(--border-color-desktop, #000000) !important;
					}
				}
			}
		}

		// Mobile styles (below 768px) - Includes all mobile devices
		@media (max-width: 767px) {
			row-gap: 20px;
			column-gap: var(--gap, 20px);
			.wp-block-post {
				width: calc((100% - (var(--gap, 20px) * (var(--grid-mobile, 1) - 1))) / var(--grid-mobile, 1)) !important;
				margin: 0 !important;
				padding: 0 !important;
				position: relative !important;
				left: unset !important;
				top: unset !important;
				flex: 0 0 calc((100% - (var(--gap, 20px) * (var(--grid-mobile, 1) - 1))) / var(--grid-mobile, 1)) !important;
				
				// Apply border styles to individual post items with higher specificity
				.gmfgb-pg-wrap {
					border-top-width: var(--border-width-desktop-top, 0px) !important;
					border-right-width: var(--border-width-desktop-right, 0px) !important;
					border-bottom-width: var(--border-width-desktop-bottom, 0px) !important;
					border-left-width: var(--border-width-desktop-left, 0px) !important;
					border-style: var(--border-type-desktop, none) !important;
					border-color: var(--border-color-desktop, #000000) !important;
					border-radius: var(--border-radius-desktop-top, 0px) var(--border-radius-desktop-right, 0px) var(--border-radius-desktop-bottom, 0px) var(--border-radius-desktop-left, 0px) !important;
					
					// Only apply border when border type is not 'none'
					&:not([style*="border-style: none"]) {
						border-top: var(--border-width-desktop-top, 0px) var(--border-type-desktop, none) var(--border-color-desktop, #000000) !important;
						border-right: var(--border-width-desktop-right, 0px) var(--border-type-desktop, none) var(--border-color-desktop, #000000) !important;
						border-bottom: var(--border-width-desktop-bottom, 0px) var(--border-type-desktop, none) var(--border-color-desktop, #000000) !important;
						border-left: var(--border-width-desktop-left, 0px) var(--border-type-desktop, none) var(--border-color-desktop, #000000) !important;
					}
				}
			}
		}
	}
	
	// Fallback styles for blocks without data attributes (lower specificity)
	&:not([data-grid-desktop]) {
		// Default desktop styles (fallback) - 1024px and above
		@media (min-width: 1024px) {
			@for $i from 1 through $columns {
				&.grid-size-#{$i} {
					row-gap: 20px;
					column-gap: 20px;
					.wp-block-post {
						width: calc((100% - (20px * ($i - 1))) / $i);
						margin: 0;
						padding: 0;
						flex: 0 0 calc((100% - (20px * ($i - 1))) / $i);
						
						// Apply border styles to individual post items with higher specificity
						.gmfgb-pg-wrap {
							border-top-width: var(--border-width-desktop-top, 0px) !important;
							border-right-width: var(--border-width-desktop-right, 0px) !important;
							border-bottom-width: var(--border-width-desktop-bottom, 0px) !important;
							border-left-width: var(--border-width-desktop-left, 0px) !important;
							border-style: var(--border-type-desktop, none) !important;
							border-color: var(--border-color-desktop, #000000) !important;
							border-radius: var(--border-radius-desktop-top, 0px) var(--border-radius-desktop-right, 0px) var(--border-radius-desktop-bottom, 0px) var(--border-radius-desktop-left, 0px) !important;
							
							// Only apply border when border type is not 'none'
							&:not([style*="border-style: none"]) {
								border-top: var(--border-width-desktop-top, 0px) var(--border-type-desktop, none) var(--border-color-desktop, #000000) !important;
								border-right: var(--border-width-desktop-right, 0px) var(--border-type-desktop, none) var(--border-color-desktop, #000000) !important;
								border-bottom: var(--border-width-desktop-bottom, 0px) var(--border-type-desktop, none) var(--border-color-desktop, #000000) !important;
								border-left: var(--border-width-desktop-left, 0px) var(--border-type-desktop, none) var(--border-color-desktop, #000000) !important;
							}
						}
					}
				}
			}
		}

		// Tablet styles (fallback) - 768px to 1023px
		@media (min-width: 768px) and (max-width: 1023px) {
			row-gap: 20px;
			column-gap: 20px;
			.wp-block-post {
				width: calc(50% - 10px);
				margin: 0;
				padding: 0;
				flex: 0 0 calc(50% - 10px);
				
				// Apply border styles to individual post items with higher specificity
				.gmfgb-pg-wrap {
					border-top-width: var(--border-width-tablet-top, 0px) !important;
					border-right-width: var(--border-width-tablet-right, 0px) !important;
					border-bottom-width: var(--border-width-tablet-bottom, 0px) !important;
					border-left-width: var(--border-width-tablet-left, 0px) !important;
					border-style: var(--border-type-tablet, none) !important;
					border-color: var(--border-color-tablet, #000000) !important;
					border-radius: var(--border-radius-tablet-top, 0px) var(--border-radius-tablet-right, 0px) var(--border-radius-tablet-bottom, 0px) var(--border-radius-tablet-left, 0px) !important;
					
					// Only apply border when border type is not 'none'
					&:not([style*="border-style: none"]) {
						border-top: var(--border-width-tablet-top, 0px) var(--border-type-tablet, none) var(--border-color-tablet, #000000) !important;
						border-right: var(--border-width-tablet-right, 0px) var(--border-type-tablet, none) var(--border-color-tablet, #000000) !important;
						border-bottom: var(--border-width-tablet-bottom, 0px) var(--border-type-tablet, none) var(--border-color-tablet, #000000) !important;
						border-left: var(--border-width-tablet-left, 0px) var(--border-type-tablet, none) var(--border-color-tablet, #000000) !important;
					}
				}
			}
		}

		// Mobile styles (fallback) - below 768px
		@media (max-width: 767px) {
			row-gap: 20px;
			column-gap: 20px;
			.wp-block-post {
				width: 100%;
				margin: 0;
				padding: 0;
				flex: 0 0 100%;
				
				// Apply border styles to individual post items with higher specificity
				.gmfgb-pg-wrap {
					border-top-width: var(--border-width-mobile-top, 0px) !important;
					border-right-width: var(--border-width-mobile-right, 0px) !important;
					border-bottom-width: var(--border-width-mobile-bottom, 0px) !important;
					border-left-width: var(--border-width-mobile-left, 0px) !important;
					border-style: var(--border-type-mobile, none) !important;
					border-color: var(--border-color-mobile, #000000) !important;
					border-radius: var(--border-radius-mobile-top, 0px) var(--border-radius-mobile-right, 0px) var(--border-radius-mobile-bottom, 0px) var(--border-radius-mobile-left, 0px) !important;
					
					// Only apply border when border type is not 'none'
					&:not([style*="border-style: none"]) {
						border-top: var(--border-width-mobile-top, 0px) var(--border-type-mobile, none) var(--border-color-mobile, #000000) !important;
						border-right: var(--border-width-mobile-right, 0px) var(--border-type-mobile, none) var(--border-color-mobile, #000000) !important;
						border-bottom: var(--border-width-mobile-bottom, 0px) var(--border-type-mobile, none) var(--border-color-mobile, #000000) !important;
						border-left: var(--border-width-mobile-left, 0px) var(--border-type-mobile, none) var(--border-color-mobile, #000000) !important;
					}
				}
			}
		}
	}

	// Ensure default 20px gaps for any post grid without specific gap settings
	&:not([data-grid-desktop]):not([data-grid-tablet]):not([data-grid-mobile]) {
		row-gap: 20px;
		column-gap: 20px;
		
		@media (min-width: 1024px) {
			row-gap: 20px;
			column-gap: 20px;
		}
		
		@media (min-width: 768px) and (max-width: 1023px) {
			row-gap: 20px;
			column-gap: 20px;
		}
		
		@media (max-width: 767px) {
			row-gap: 20px;
			column-gap: 20px;
		}
	}

	.wp-block-post-excerpt__more-text {
		display: none !important;
	}

	.gmfgb-pg-wrap {
		position: relative;
		height: 100%;
        margin: 0 !important;
        overflow: hidden;
		&:after {
			content: "";
			width: 100%;
			height: 100%;
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			background-image: linear-gradient(
				to bottom,
				rgba(20, 20, 20, 0.5),
				rgba(20, 20, 20, 0.7)
			);
			overflow: hidden;
			z-index: 0;
			pointer-events: none;
			
			
		}
	}

	.gmfgb-pg-content {
		z-index: 1;
		position: relative;
	}

	.wp-block-group__inner-container {
		// position: relative;
	}
	.gmfgb-pg-featured-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		img {
			width: 100% !important;
			height: 100% !important;
			object-fit: cover;
			object-position: center;
		}
	}
	.gmfgb-pg-date-wrap {
		.wp-block-post-author,
		.gmfgb-pg-date {
			margin: 0;
		}
		.wp-block-group__inner-container {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 20px;
            padding: 0 !important;
		}
		.wp-block-post-author {
            align-items: center;
			&__avatar {
				width: 16px;
                display: flex;
			}
			&__content {
				color: #fff;
			}
			img {
				max-width: 100%;
                max-height: 16px;
                object-fit: contain;
			}
		}
	}
	.gmfgb-pg-link {
		&:focus,
		&:hover {
			background: transparent !important;
		}
	}

	.wp-block-post-excerpt__excerpt {
		font-size: 13px;
		line-height: 1.2;
	}

	// .gmfgb-pg-loop-wrap {
	// 	padding-bottom: 40px;
	// }

	.post-pagination {
		position: relative;
		top: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;

		.wp-block-query-pagination-numbers {
			display: flex;
			align-items: center;
			margin: 0;
		}

		.wp-block-query-pagination-previous,
		.wp-block-query-pagination-next,
		.page-numbers {
			display: flex;
			align-items: center;
			margin: 0 5px;
			padding: 5px 10px;
			background-color: #424242;
			color: #fff;
			font-weight: 400;
			border-radius: 12px;
			min-width: 40px;
			text-align: center;
			display: block;
			text-decoration: none;

			&.current,
			&:focus,
			&:hover {
				background-color: #000 !important;
			}
		}
	}

	// .gmfgb-pg-loop-wrap {
	// 	ul {
	// 		display: flex !important;
	// 		flex-wrap: wrap;
	// 		margin-bottom: 20px !important;
	// 	}
	// }

	// Frontend CTA button styles
	.gmfgb-pg-cta-button {
		position: relative;
		z-index: 10;
		margin-top: 40px;
		clear: both;
		width: 100%;
		
		.wp-block-buttons {
			position: relative;
			display: flex;
			justify-content: center;
			width: 100%;
		}
	}
	
	// Override WordPress core rule that forces border-style: solid
	.gmfgb-pg-wrap {
		&[style*="border-width"] {
			border-style: var(--border-type-desktop, none) !important;
		}
	}

	// Ensure border is removed when border type is 'none'
	&[data-border-type-desktop="none"] .wp-block-post .gmfgb-pg-wrap {
		border: none !important;
	}
	
	@media (min-width: 561px) and (max-width: 767px) {
		&[data-border-type-tablet="none"] .wp-block-post .gmfgb-pg-wrap {
			border: none !important;
		}
	}
	
	@media (min-width: 320px) and (max-width: 560px) {
		&[data-border-type-mobile="none"] .wp-block-post .gmfgb-pg-wrap {
			border: none !important;
		}
	}
}

// Isotope-specific styles for post grid
.gmfgb-pg-grid.isotope-initialized {
	display: block !important;
	row-gap: 20px !important; /* Maintain 20px row gap even with Isotope */
	column-gap: 0; /* Isotope handles column spacing internally */
	
	.wp-block-post {
		position: absolute;
		width: calc((100% - (var(--gap, 20px) * (var(--grid-desktop, 2) - 1))) / var(--grid-desktop, 2));
		margin-bottom: 20px !important; /* Add bottom margin for row spacing */
		
		// Tablet styles (768px to 1023px) - Includes iPad
		@media (min-width: 768px) and (max-width: 1023px) {
			width: calc((100% - (var(--gap, 20px) * (var(--grid-tablet, 2) - 1))) / var(--grid-tablet, 2));
			margin-bottom: 20px !important; /* Add bottom margin for row spacing */
		}
		
		// Mobile styles (below 768px) - Includes all mobile devices
		@media (max-width: 767px) {
			width: calc((100% - (var(--gap, 20px) * (var(--grid-mobile, 1) - 1))) / var(--grid-mobile, 1));
			margin-bottom: 20px !important; /* Add bottom margin for row spacing */
		}
	}
}

// Admin editor specific styles to prevent conflicts
.editor-styles-wrapper .gmfgb-pg-grid {
	// Ensure proper isolation in admin editor
	z-index: 1;
	position: relative;
	
	// Ensure gap spacing works in editor
	row-gap: 20px !important;
	column-gap: var(--gap, 20px) !important;
	
	// Responsive gap spacing for editor
	@media (min-width: 768px) and (max-width: 1023px) {
		column-gap: var(--gap, 20px) !important;
	}
	
	@media (max-width: 767px) {
		column-gap: var(--gap, 20px) !important;
	}
	
	// Prevent conflicts with media grid
	&:not(.isotope-initialized) {
		display: flex !important;
		flex-wrap: wrap !important;
		
		.wp-block-post {
			position: relative !important;
			left: unset !important;
			top: unset !important;
			width: calc((100% - (var(--gap, 20px) * (var(--grid-desktop, 2) - 1))) / var(--grid-desktop, 2)) !important;
			
			@media (min-width: 768px) and (max-width: 1023px) {
				width: calc((100% - (var(--gap, 20px) * (var(--grid-tablet, 2) - 1))) / var(--grid-tablet, 2)) !important;
			}
			
			@media (max-width: 767px) {
				width: calc((100% - (var(--gap, 20px) * (var(--grid-mobile, 1) - 1))) / var(--grid-mobile, 1)) !important;
			}
		}
	}
}

// Frontend-specific styles to ensure row gap works
body:not(.wp-admin) .gmfgb-pg-grid {
	row-gap: 20px !important;
	
	&.isotope-initialized {
		.wp-block-post {
			margin-bottom: 20px !important;
		}
	}
	
	&:not(.isotope-initialized) {
		row-gap: 20px !important;
		column-gap: var(--gap, 20px) !important;
		
		@media (min-width: 1024px) {
			row-gap: 20px !important;
			column-gap: var(--gap, 20px) !important;
		}
		
		@media (min-width: 768px) and (max-width: 1023px) {
			row-gap: 20px !important;
			column-gap: var(--gap, 20px) !important;
		}
		
		@media (max-width: 767px) {
			row-gap: 20px !important;
			column-gap: var(--gap, 20px) !important;
		}
	}
}

// Additional frontend-specific rules with higher specificity
body:not(.wp-admin) .gmfgb-pg-grid[data-grid-desktop][data-grid-tablet][data-grid-mobile] {
	row-gap: 20px !important;
	
	@media (min-width: 1024px) {
		row-gap: 20px !important;
		column-gap: var(--gap, 20px) !important;
	}
	
	@media (min-width: 768px) and (max-width: 1023px) {
		row-gap: 20px !important;
		column-gap: var(--gap, 20px) !important;
	}
	
	@media (max-width: 767px) {
		row-gap: 20px !important;
		column-gap: var(--gap, 20px) !important;
	}
}

// Anchor link styles for clickable posts
.anchor .gmfgb-pg-link::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	background: transparent;
}

.anchor .gmfgb-pg-link:focus {
	outline: none;
}

.no-anchor .gmfgb-pg-link::before {
	display: none;
}