/* CSS post / portfolio grid 
--------------------------------------------------- */
.bt_bb_css_post_grid {								/*  */
	--accent-color: #00ff00;									/*  */
	--dark-color: #000000;									/*  */
	--light-color: #ffffff;	
	
	--post-pf-grid-gap-small: .5em;								/* Small post / portflio grid gallery gap */
	--post-pf-grid-gap-normal: 1em;								/* Normal post / portflio grid gallery gap */
	--post-pf-grid-gap-large: 2em;								/* Large post / portflio grid gallery gap */
	--post-pf-grid-title-lines: 2;								/* Number of lines for post / portfolio title */
	--post-pf-grid-excerpt-lines: 3;							/* Number of lines for post / portfolio excerpt */
	--post-pf-grid-padding: 40px;								/*  */
	
	--post-pf-soft-radius: 5px;
	--post-pf-hard-radius: 20px;

	/* Loader */
	/* border: 10px solid red; */
	.bt_bb_post_grid_loader {
		margin-top: 2em;
		border: 3px solid rgba(0,0,0,0.2);
		border-top: 3px solid var(--dark-color);
	}
	.bt_bb_css_post_grid_content {
		display: grid;
		a {
			color: inherit;
			box-shadow: none;
			&:hover { color: inherit; }
		}
		.bt_bb_grid_sizer {
			display: none;
		}
		.bt_bb_grid_item {
			width: 100%;
			display: flex;
			.bt_bb_grid_item_inner {
				display: flex;
				flex-direction: column;
				min-width: 100%;
			}
			&.bt_bb_tile_format_21 {
				grid-column: auto/span 2;
			}
			&.bt_bb_tile_format_12 {
				grid-row: auto/span 2;
			}
			&.bt_bb_tile_format_22 {
				grid-column: auto/span 2;
				grid-row: auto/span 2;
			}
		}
	}
	.bt_bb_grid_item {
		transition: 200ms ease all;
		.bt_bb_grid_item_inner {
			border-radius: var(--post-pf-border-radius);
			overflow: hidden;
		}
	}
	.bt_bb_css_post_grid_button_holder {
			text-align: center;
			padding-top: 1em;
			display: none;
	}
	&.bt_bb_auto_loading_load_more_loading.bt_bb_grid_first_load_passed {
		.bt_bb_css_post_grid_button_holder {
			display: block;
		}
	}
	&.bt_bb_grid_loading.bt_bb_auto_loading_load_more_loading.bt_bb_grid_first_load_passed {
		.bt_bb_css_post_grid_button_holder {
			display: none;
		}
	}
	
	/* Columns */
	
	&.bt_bb_columns_1 {
		.bt_bb_css_post_grid_content {
			grid-template-columns: 1fr;
		}
	}
	&.bt_bb_columns_2 {
		.bt_bb_css_post_grid_content {
			grid-template-columns: 1fr 1fr;
			&:not(:has(.bt_bb_grid_item:nth-child(3))) {
				&:has(.bt_bb_tile_format_12) {
					.bt_bb_tile_format_12 {
						grid-row: auto/auto;
					}
				}
			}
			&:not(:has(.bt_bb_grid_item:nth-child(2))) {
				&:has(.bt_bb_tile_format_22) {
					.bt_bb_tile_format_22 {
						grid-row: auto/auto;
					}
				}
			}
		}
	}
	&.bt_bb_columns_3 {
		.bt_bb_css_post_grid_content {
			grid-template-columns: 1fr 1fr 1fr;
			&:not(:has(.bt_bb_grid_item:nth-child(4))) {
				&:has(.bt_bb_tile_format_12) {
					.bt_bb_tile_format_12 {
						grid-row: auto/auto;
					}
				}
			}
			&:not(:has(.bt_bb_grid_item:nth-child(3))) {
				&:has(.bt_bb_tile_format_22) {
					.bt_bb_tile_format_22 {
						grid-row: auto/auto;
					}
				}
			}
		}
	}
	&.bt_bb_columns_4 {
		.bt_bb_css_post_grid_content {
			grid-template-columns: 1fr 1fr 1fr 1fr;
			&:not(:has(.bt_bb_grid_item:nth-child(5))) {
				&:has(.bt_bb_tile_format_12) {
					.bt_bb_tile_format_12 {
						grid-row: auto/auto;
					}
				}
			}
			&:not(:has(.bt_bb_grid_item:nth-child(4))) {
				&:has(.bt_bb_tile_format_22) {
					.bt_bb_tile_format_22 {
						grid-row: auto/auto;
					}
				}
			}
		}
	}
	&.bt_bb_columns_5 {
		.bt_bb_css_post_grid_content {
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
			&:not(:has(.bt_bb_grid_item:nth-child(6))) {
				&:has(.bt_bb_tile_format_12) {
					.bt_bb_tile_format_12 {
						grid-row: auto/auto;
					}
				}
			}
			&:not(:has(.bt_bb_grid_item:nth-child(5))) {
				&:has(.bt_bb_tile_format_22) {
					.bt_bb_tile_format_22 {
						grid-row: auto/auto;
					}
				}
			}
		}
	}
	&.bt_bb_columns_6 {
		.bt_bb_css_post_grid_content {
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
			&:not(:has(.bt_bb_grid_item:nth-child(7))) {
				&:has(.bt_bb_tile_format_12) {
					.bt_bb_tile_format_12 {
						grid-row: auto/auto;
					}
				}
			}
			&:not(:has(.bt_bb_grid_item:nth-child(6))) {
				&:has(.bt_bb_tile_format_22) {
					.bt_bb_tile_format_22 {
						grid-row: auto/auto;
					}
				}
			}
		}
	}
	
	/* Roundness */
	
	&.bt_bb_shape_square  .bt_bb_grid_item {
		border-radius: 0;
	}
	&.bt_bb_shape_rounded  .bt_bb_grid_item {
		overflow: hidden;
		border-radius: var(--post-pf-soft-radius);
	}
	&.bt_bb_shape_round .bt_bb_grid_item {
		overflow: hidden;
		border-radius: var(--post-pf-hard-radius);
	}

	
	/* Gaps */
	
	&.bt_bb_gap_small {
		.bt_bb_css_post_grid_content {
			grid-gap: calc(var(--post-pf-grid-gap-small) * 2);
		}
		.bt_bb_css_post_grid_button_holder {
			padding-top: calc(var(--post-pf-grid-gap-small) * 2);
		}
	}
	&.bt_bb_gap_normal {
		.bt_bb_css_post_grid_content {
			grid-gap: calc(var(--post-pf-grid-gap-normal) * 2);
		}
		.bt_bb_css_post_grid_button_holder {
			padding-top: calc(var(--post-pf-grid-gap-normal) * 2);
		}
	}
	&.bt_bb_gap_large {
		.bt_bb_css_post_grid_content {
			grid-gap: calc(var(--post-pf-grid-gap-large) * 2);
		}
		.bt_bb_css_post_grid_button_holder {
			padding-top: calc(var(--post-pf-grid-gap-large) * 2);
		}
	}
	
}

/* Responsive */


.bt_bb_css_post_grid {
	.bt_bb_grid_item {
		&.bt_bb_tile_format_21 {
			container-name: bt_bb_container_21;
			container-type: inline-size;
		}
		&.bt_bb_tile_format_12 {
			container-name: bt_bb_container_21;
			container-type: inline-size;
		}
		&.bt_bb_tile_format_22 {
			container-name: bt_bb_container_22;
			container-type: inline-size;
		}
	}
}

@media (max-width: 992px) {
	.bt_bb_css_post_grid {
		&.bt_bb_columns_5,
		&.bt_bb_columns_6 {
			.bt_bb_css_post_grid_content {
				grid-template-columns: 1fr 1fr 1fr;
				.bt_bb_grid_item {
					&.bt_bb_tile_format_21 {
						grid-column: auto/auto;
					}
					&.bt_bb_tile_format_12 {
						grid-row: auto/auto;
					}
					&.bt_bb_tile_format_22 {
						grid-column: auto/span 2;
						grid-row: auto/auto;
					}
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.bt_bb_css_post_grid {
		&.bt_bb_columns_3,
		&.bt_bb_columns_4,
		&.bt_bb_columns_5,
		&.bt_bb_columns_6 {
			.bt_bb_css_post_grid_content {
				grid-template-columns: 1fr 1fr;
				.bt_bb_grid_item {
					&.bt_bb_tile_format_21 {
						grid-column: auto/auto;
					}
					&.bt_bb_tile_format_12 {
						grid-row: auto/auto;
					}
					&.bt_bb_tile_format_22 {
						grid-column: auto/span 2;
						grid-row: auto/auto;
					}
				}
			}
		}
	}
}

@media (max-width: 580px) {
	.bt_bb_css_post_grid {
		&.bt_bb_columns_2,
		&.bt_bb_columns_3,
		&.bt_bb_columns_4,
		&.bt_bb_columns_5,
		&.bt_bb_columns_6 {
			.bt_bb_css_post_grid_content {
				grid-template-columns: 1fr;
				.bt_bb_grid_item {
					&.bt_bb_tile_format_21 {
						grid-column: auto/auto;
					}
					&.bt_bb_tile_format_12 {
						grid-row: auto/auto;
					}
					&.bt_bb_tile_format_22 {
						grid-column: auto/auto;
						grid-row: auto/auto;
					}
				}
			}
		}
	}
}


@media (min-width: 768px) {
	.bt_bb_css_post_grid {
		.bt_bb_grid_item {
			&.bt_bb_tile_format_21 {
				.bt_bb_grid_item_inner {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;
					.bt_bb_grid_item_post_thumbnail {
						position: absolute;
						inset: 0;
						z-index: 1;
						a {
							&:before {
								display: none;
							}
						}
					}
					.bt_bb_grid_item_post_content {
						z-index: 2;
						background: rgba(0,0,0,0.5);
						color: #ffffff;
						flex-basis: 100%;
						max-width: 100%;
						margin: 1.5em;
						.bt_bb_grid_item_post_title {
							color: inherit;
						}
					}
				}
			}
		}
	}
}

@container (min-width: 36em) {
	.bt_bb_css_post_grid {
		.bt_bb_grid_item {
			&.bt_bb_tile_format_21 {
				.bt_bb_grid_item_inner {
					.bt_bb_grid_item_post_content {
						flex-basis: 50%;
						max-width: 50%;
					}
				}
			}
		}
	}
}
