@import "variables";

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


//
// Grid layout
//

@include media-breakpoint-up(md) {
	.card-deck {
		display: flex;
		margin-right: -$card-deck-margin / 2;
		margin-left: -$card-deck-margin / 2;
		flex-flow: row wrap;
		.card {
			margin-right: $card-deck-margin / 2;
			margin-left: $card-deck-margin / 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;
		}
	}
	.posts-list {
		&--grid-2-cols {
			.card {
				max-width: calc(100%/2 - #{$card-deck-margin});
				flex: 1 0 calc(100%/2 - #{$card-deck-margin});
			}
		}
		&--grid-3-cols {
			.card {
				max-width: calc(100%/3 - #{$card-deck-margin});
				flex: 1 0 calc(100%/3 - #{$card-deck-margin});
			}
		}
	}
}


//
// Masonry layout
//

@include media-breakpoint-up(md) {
	.card-columns {
		column-gap: $card-deck-margin;
		.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: -$card-deck-margin / 2;
			margin-left: -$card-deck-margin / 2;
			flex-flow: row wrap;
			.card {
				flex: 1 0 calc(100%/3 - #{$card-deck-margin});
				max-width: calc(100%/3 - #{$card-deck-margin});
				margin-right: $card-deck-margin / 2;
				margin-left: $card-deck-margin / 2;
				&:nth-child(7n + 1),
				&:nth-child(7n + 4) {
					flex: 1 0 calc(100%/1.5 - #{$card-deck-margin});
					max-width: calc(100%/1.5 - #{$card-deck-margin});
				}
			}
		}
	}
}


//
// 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;
			}
		}
	}
}


//
// Reset (for tablet)
//
@include media-breakpoint-between(md, lg) {
	.posts-list--grid-3-cols {
		.card {
			max-width: calc(100%/2 - #{$card-deck-margin});
			flex: 1 0 calc(100%/2 - #{$card-deck-margin});
		}
	}
	.posts-list--masonry-3-cols {
		column-count: 2;
	}
}