/**
 * Post grid styles
 * Loads on front end and back end
 */

.uagb-post-grid {
	margin: 0 auto;
	position: relative;

	&:not( .is-grid ) .uagb-post__inner-wrap {
		background-clip: content-box !important;
	}

	.uagb-post__inner-wrap {
		transition: box-shadow 0.2s ease;
		overflow: hidden;

		.uagb-post__taxonomy {
			display: inline-block;

			&.default {
				margin: 5px 5px 5px 0;
			}

			&.highlighted {
				background: #444;
				color: #fff;
				border-radius: 2px;
				flex-direction: row;
				align-items: flex-end;
				padding: 6px 8px;
				line-height: 1;
				margin-right: 5px;
				margin-bottom: 20px;

				a {
					color: #fff;
				}
			}

			a {
				text-decoration: none;
				color: inherit;
			}
		}

		.uagb-post__image .uagb-post__image-equal-height {
			display: block;
			height: 0;
			padding-bottom: 66.67%;
			overflow: hidden;
		}
	}

	.uagb-post__load-more-wrap {
		width: 100%;
		position: absolute;
		bottom: -30px;

		.uagb-post-pagination-button {
			cursor: pointer;
		}

		a {
			color: inherit;
		}
	}

	&.is-grid {
		article {
			float: left;
			display: inline-block;
		}

		&.uagb-equal_height_inline-read-more-buttons {
			&.uagb-post__image-position-top {
				.uagb-post__text:nth-last-child( 2 ) {
					padding-bottom: 100px;
				}

				.uagb-post__text:last-child {
					position: absolute;
					bottom: 20px;
				}
			}

			&.uagb-post__image-position-background {
				.uagb-post__text:nth-last-child( 3 ) {
					padding-bottom: 100px;
				}

				.uagb-post__text:nth-last-child( 2 ) {
					position: absolute;
					bottom: 20px;
				}
			}

			&.uagb-post__image-position-top,
			&.uagb-post__image-position-background {
				.uagb-post__inner-wrap {
					position: relative;
				}
			}
		}

		&.uagb-post__image-position-top {
			.uagb-post__image {
				a {
					display: block;
					height: 0;
					overflow: hidden;
					position: relative;

					&.uagb-image-ratio-2-3 {
						padding-bottom: 66%;
					}

					&.uagb-image-ratio-9-16 {
						padding-bottom: 56.25%;
					}

					&.uagb-image-ratio-1-2 {
						padding-bottom: 50%;
					}

					&.uagb-image-ratio-1-1 {
						padding-bottom: 67%;
					}

					&.uagb-image-ratio-inherit {
						padding-bottom: 0;
						height: auto;

						img {
							position: unset !important;
						}
					}
				}

				a[class^="uagb-image-ratio-"] > img {
					position: absolute;
					height: 100%;
				}
			}
		}
	}

	&.uagb-post__items.is-masonry {
		display: flex;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	&.uagb-post__items.is-carousel {
		display: flex;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		width: 100%;
		visibility: hidden;
	}

	&.is-grid .uagb-post__inner-wrap {
		height: max-content;
	}

	&.is-grid.uagb-post__equal-height .uagb-post__inner-wrap {
		height: auto;
	}

	&.is-masonry .uagb-post__inner-wrap {
		height: auto;
	}

	.uagb-post__author span,
	.uagb-post__comment span,
	.uagb-post__taxonomy span,
	.uagb-post__date span {
		font-size: inherit;
		line-height: inherit;
		width: inherit;
		height: inherit;
		margin-right: 4px;
		vertical-align: bottom;
	}

	&.uagb-post__columns-8:not( .is-grid ) article {
		width: 12.5%;
	}

	&.uagb-post__columns-7:not( .is-grid ) article {
		width: 14.28%;
	}

	&.uagb-post__columns-6:not( .is-grid ) article {
		width: 16.66%;
	}

	&.uagb-post__columns-5:not( .is-grid ) article {
		width: 20%;
	}

	&.uagb-post__columns-4:not( .is-grid ) article {
		width: 25%;
	}

	&.uagb-post__columns-3:not( .is-grid ) article {
		width: 33.33%;
	}

	&.uagb-post__columns-2:not( .is-grid ) article {
		width: 50%;
	}

	&.uagb-post__columns-1:not( .is-grid ) article {
		width: 100%;
	}

	div[class*="columns"].is-grid {

		@media only screen and ( max-width: 600px ) {
			grid-template-columns: 1fr;
		}
	}

	.uagb-post__image {
		img {
			display: block;
			width: 100%;
			height: auto;
			max-width: 100%;
		}
	}

	.uagb-post__title {
		margin-top: 0;
		margin-bottom: 0;
		word-break: break-word;

		a {
			color: inherit;
			box-shadow: none;
			transition: 0.3s ease;
			text-decoration: none;

			&:hover {
				text-decoration: none;
			}

			&:focus {
				text-decoration: none;
			}

			&:active {
				text-decoration: none;
			}
		}
	}

	.uagb-post-grid-byline > * {
		// Adding margin-right 10px for meta.
		margin-right: 10px;
	}

	.uagb-post-grid-byline,
	.uagb-post__taxonomy {
		text-transform: capitalize;
		font-size: 14px;
		font-weight: 500;
		line-height: 23px;
		text-decoration: none;
	}

	.uagb-post-grid-byline a,
	.uagb-post-grid-byline a:focus,
	.uagb-post-grid-byline a:active {
		color: inherit;
		font-size: inherit;
		text-decoration: none;
	}

	.uagb-post__title a,
	.uagb-post__title a:focus,
	.uagb-post__title a:active {
		color: inherit;
		font-size: inherit;
	}

	.uagb-post__author,
	.uagb-post__date,
	.uagb-post__comment {
		display: inline-block;
		word-break: break-all;

		&:not( :last-child )::after {
			content: "\B7";
			vertical-align: middle;
			align-self: center;
			margin: 0 5px;
			line-height: 1;
		}
	}

	.uagb-post__comment,
	.uagb-post__taxonomy {
		display: inline-block;
	}

	.uagb-post__author a {
		box-shadow: none;

		&:hover {
			color: inherit;
			box-shadow: 0 -1px 0 inset;
		}
	}

	.uagb-post__excerpt {
		word-break: break-word;
	}

	.uagb-post__inner-wrap p {
		&:last-of-type {
			margin-bottom: 0;
		}
	}

	.uagb-post__cta {
		border: none;
		display: inline-block;
		background: none;

		.ast-outline-button {
			display: inline-flex;
		}
	}

	.uagb-post__excerpt p {
		color: inherit;
	}
}

.is-grid.uagb-post__items {
	display: grid;
}

.wp-block-uagb-post-grid .uagb-post-pagination-wrap {
	grid-column: 1 / -1;
}

.uagb-post__image-position-background {
	.uagb-post__link-complete-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 11;
	}

	&.uagb-post__image-enabled {
		.uagb-post__text {
			color: #fff;
		}
	}

	.uagb-post__text {
		opacity: 1;
		position: relative;
		z-index: 10;
		overflow: hidden;
	}

	.uagb-post__inner-wrap {
		position: relative;
		width: 100%;

		.uagb-post__taxonomy {
			&.highlighted,
			&.default {
				position: relative;
				z-index: 999;
			}
		}
	}

	.uagb-post__image img {
		position: absolute;
		width: auto;
		height: auto;
		min-width: 100%;
		max-width: none;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		min-height: 100%;
	}

	.uagb-post__image {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		overflow: hidden;
		text-align: center;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.uagb-post__image::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-color: rgba(255, 255, 255, 0.5);
	}
}

.uagb-slick-carousel {
	.is-carousel {
		padding: 0;
	}

	ul.slick-dots {
		transform: unset;
		position: relative;
		padding: unset; // To resolve an issue of dots are not in center on front-end, unseting padding of ul of slick-dots.
	}

	.slick-prev:not( :hover ):not( :active ):not( .has-background ),
	.slick-next:not( :hover ):not( :active ):not( .has-background ),
	ul.slick-dots li button:not( :hover ):not( :active ):not( .has-background ) {
		background-color: unset;
	}
}

.uagb-post-grid[data-equal-height="yes"] .uagb-post__inner-wrap {
	display: inline-block;
	height: 100%;
}

.uagb-post__arrow-outside.uagb-post-grid .slick-prev {
	left: -45px;
	z-index: 1;
}

[dir="rtl"] .uagb-post__arrow-outside.uagb-post-grid .slick-prev {
	left: -45px;
	right: auto;
}

.uagb-post__arrow-outside.uagb-post-grid .slick-next {
	right: -45px;
}

[dir="rtl"] .uagb-post__arrow-outside.uagb-post-grid .slick-next {
	left: auto;
	right: -45px;
}

.uagb-post__arrow-inside.uagb-post-grid .slick-prev {
	left: 25px;
	z-index: 1;
}

[dir="rtl"] .uagb-post__arrow-inside.uagb-post-grid .slick-prev {
	left: auto;
	right: 25px;
}

.uagb-post__arrow-inside.uagb-post-grid .slick-next {
	right: 25px;
}

[dir="rtl"] .uagb-post__arrow-inside.uagb-post-grid .slick-next {
	left: 25px;
	right: auto;
}

.uagb-post-grid.is-grid article,
.uagb-post-grid.is-masonry article,
.uagb-post-grid.is-carousel article {
	box-sizing: border-box;
}

/**
 * Post grid styles
 * Loads on front end and back end
 */

@media ( max-width: 976px ) {
	.uagb-post__arrow-outside.uagb-post-grid .slick-prev {
		left: 15px;
		z-index: 1;
	}

	[dir="rtl"] .uagb-post__arrow-outside.uagb-post-grid .slick-prev {
		left: auto;
		right: 15px;
	}

	.uagb-post__arrow-outside.uagb-post-grid .slick-next {
		right: 15px;
	}

	[dir="rtl"] .uagb-post__arrow-outside.uagb-post-grid .slick-next {
		left: 15px;
		right: auto;
	}

	:not( .is-grid ).uagb-post-grid.uagb-post__columns-tablet-1 article {
		width: 100%;
	}

	:not( .is-grid ).uagb-post-grid.uagb-post__columns-tablet-2 article {
		width: 50%;
	}

	:not( .is-grid ).uagb-post-grid.uagb-post__columns-tablet-3 article {
		width: 33.33%;
	}

	:not( .is-grid ).uagb-post-grid.uagb-post__columns-tablet-4 article {
		width: 25%;
	}

	:not( .is-grid ).uagb-post-grid.uagb-post__columns-tablet-5 article {
		width: 20%;
	}

	:not( .is-grid ).uagb-post-grid.uagb-post__columns-tablet-6 article {
		width: 16.66%;
	}

	:not( .is-grid ).uagb-post-grid.uagb-post__columns-tablet-7 article {
		width: 14.28%;
	}

	:not( .is-grid ).uagb-post-grid.uagb-post__columns-tablet-8 article {
		width: 12.5%;
	}
}

@media ( max-width: 767px ) {
	:not( .is-grid ).uagb-post-grid.uagb-post__columns-mobile-1 article {
		width: 100%;
	}

	:not( .is-grid ).uagb-post-grid.uagb-post__columns-mobile-2 article {
		width: 50%;
	}

	:not( .is-grid ).uagb-post-grid.uagb-post__columns-mobile-3 article {
		width: 33.33%;
	}

	:not( .is-grid ).uagb-post-grid.uagb-post__columns-mobile-4 article {
		width: 25%;
	}

	:not( .is-grid ).uagb-post-grid.uagb-post__columns-mobile-5 article {
		width: 20%;
	}

	:not( .is-grid ).uagb-post-grid.uagb-post__columns-mobile-6 article {
		width: 16.66%;
	}

	:not( .is-grid ).uagb-post-grid.uagb-post__columns-mobile-7 article {
		width: 14.28%;
	}

	:not( .is-grid ).uagb-post-grid.uagb-post__columns-mobile-8 article {
		width: 12.5%;
	}
}

.entry {
	.entry-content .uagb-post-grid a {
		text-decoration: none;
	}
}

.uagb-post-pagination-wrap {
	display: flex;
	width: 100%;
	flex-wrap: wrap; // To fix pagination on small devices.

	a.page-numbers,
	span.page-numbers.current {
		padding: 5px 10px;
		margin: 0;
		display: flex;
		margin-right: 4px;
		margin-bottom: 5px;
	}
}

.uagb-post-grid .uagb-post-inf-loader {
	margin: 0 auto;
	min-height: 58px;
	line-height: 58px;
	width: 160px;
	text-align: center;

	div {
		width: 18px;
		height: 18px;
		background-color: #0085ba;
		-webkit-border-radius: 100%;
		border-radius: 100%;
		display: inline-block;
		-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
		animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	}

	.uagb-post-loader-1 {
		-webkit-animation-delay: -0.32s;
		animation-delay: -0.32s;
	}

	.uagb-post-loader-2 {
		-webkit-animation-delay: -0.16s;
		animation-delay: -0.16s;
	}
}

.wp-site-blocks {
	.uagb-post__arrow-outside.uagb-post-grid {
		.slick-next {
			right: 0;
		}
		.slick-prev {
			left: 0;
		}
	}
}

@-webkit-keyframes sk-bouncedelay {
	0%,
	80%,
	100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}

	40% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes sk-bouncedelay {
	0%,
	80%,
	100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}

	40% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
