@import "../grid/variables";

.card {
	display: block;
	@include word-wrap;
}

//
// Grid layout
//
@media (min-width: 420px) {
	.card-deck {
		display: flex;
		margin-right: -$grid-gutter-width / 2;
		margin-left: -$grid-gutter-width / 2;
		flex-flow: row wrap;

		.card {
			margin-right: $grid-gutter-width / 2;
			margin-left: $grid-gutter-width / 2;
			flex: 1 0 0;
			display: flex;
			flex-direction: column;
			-webkit-display: flex;
			-webkit-flex-direction: column;
			-webkit-justify-content: space-between;
			justify-content: space-between;

			&.sticky {
				.home & {
					display: block;
					max-width: calc(100% - #{$grid-gutter-width});
					flex: none;
				}
			}
		}
	}
	.posts-list {
		&--grid-2-cols {
			.card {
				max-width: calc(100% / 2 - #{$grid-gutter-width});
				flex: 1 0 calc(100% / 2 - #{$grid-gutter-width});
			}
		}
		&--grid-3-cols {
			.card {
				max-width: calc(100% / 2 - #{$grid-gutter-width});
				flex: 1 0 calc(100% / 2 - #{$grid-gutter-width});
			}
			@include media-breakpoint-up(xl) {
				.card {
					max-width: calc(100% / 3 - #{$grid-gutter-width});
					flex: 1 0 calc(100% / 3 - #{$grid-gutter-width});
				}
			}
		}
	}
}

//
// Masonry layout
//

@media (min-width: 420px) {
	.card-columns {
		column-gap: $grid-gutter-width;
		.card {
			display: inline-block;
			width: 100%; // Don't let them exceed the column width
		}
	}
	.posts-list--masonry-2-cols {
		column-count: 2;
	}
	.posts-list--masonry-3-cols {
		column-count: 3;
	}
}

//
// Vertical Justify layout
//

@include media-breakpoint-up(md) {
	.posts-list {
		&--vertical-justify {
			display: flex;
			margin-right: -$grid-gutter-width / 2;
			margin-left: -$grid-gutter-width / 2;
			flex-flow: row wrap;
			.card {
				flex: 1 0 calc(100% / 3 - #{$grid-gutter-width});
				max-width: calc(100% / 3 - #{$grid-gutter-width});
				margin-right: $grid-gutter-width / 2;
				margin-left: $grid-gutter-width / 2;
				&:nth-child(7n + 1),
				&:nth-child(7n + 4) {
					flex: 1 0 calc(100% / 1.5 - #{$grid-gutter-width});
					max-width: calc(100% / 1.5 - #{$grid-gutter-width});
				}
			}
		}
	}
}

//
// Reset (when two sidebars)
//

@include media-breakpoint-up(md) {
	.card-deck {
		&.two-sidebars {
			display: block;
			margin-right: auto;
			margin-left: auto;
			.card {
				display: block;
				max-width: 100%;
				margin-right: auto;
				margin-left: auto;
				flex: none;
			}
		}
	}
	.card-columns {
		&.two-sidebars {
			column-gap: normal;
			column-count: auto;
			.card {
				display: block;
			}
		}
	}
}