/* POSTS */

.POSTS::before,
.POSTS::after {
	content: "";
	display: block;
	overflow: hidden;
}

/* filter */ 

.POSTS .filter {
	float: none;
	margin: 0 0 var(--s7);
	overflow: hidden;
}

.POSTS .filter ul {
	padding: 0;
	list-style: none;
}

.POSTS .filter .filter-category input {
	opacity: 0;
    margin-left: var(--ns3);
}

.POSTS .filter .filter-category {
	display: inline-block;
	padding: var(--s3);
	background: var(--gray-100);
	font-weight: 700;
	border-radius: var(--s2);
	position: relative;
	transition: all .25s;
}


.POSTS .filter .filter-category:hover,
.POSTS .filter .filter-category.alt-active,
.POSTS .filter .filter-category.focused {
	background: var(--mint);
}


.POSTS .filter label {
	cursor: pointer;
	display: inline-block;
	width: 100%;
	height: 100%;
}

.POSTS .filter .search {
	position: relative;
}

.POSTS .filter input[type="text"] {
    width: 91%;
    padding: var(--s3);
    border: 1px solid var(--gray-200);
    font-size: 16rem;
    border-radius: var(--s2);
    transition: box-shadow 0.25s;
    line-height: 1.5;
}

.POSTS .filter input[type="text"]::placeholder {
	color: var(--gray-300);
	font-size: 16rem;
}

.POSTS .filter .search .b-button {
	padding: var(--s2);
	margin-left: var(--ns5);
	position: absolute;
	right: var(--s2);
	top: 7px;
	line-height: 1.3;
	color: var(--mint);
	font-size: 16rem;
}

.POSTS .filter button {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

@media screen and (max-width: 960px) {
	.POSTS .filter input[type="text"] {width: -webkit-fill-available;}
	.POSTS .filter .search .b-button {right: var(--s2);}
}

.POSTS .post {
	position: relative;
}

.POSTS .image-container {
	position: relative;
	margin-bottom: var(--s6);
}

.POSTS .image .b-img {
	border-radius: var(--s3);
	overflow: hidden;
}

.POSTS[data-numpost="2"] .image .b-img {
	aspect-ratio: 16/9!important;
}

.POSTS .categories-container {
	position: absolute;
	top: 0;
	right: 0;

	padding: 0 0  var(--s2) var(--s2);
	background: var(--white);
	border-radius: 0 0 0 var(--s3);
}

.POSTS .categories {
	display: inline-block;
	font-size: 16rem;
	font-weight: 600;
	line-height: 1.3;
	background: var(--mint);
	color: var(--deep-indigo);
	padding: var(--s1) var(--s2);
	border-radius: var(--s1);
	position: relative;
}

.POSTS .categories::before {
	content: '';
	position: absolute;
	top: -12rem;
	left: -33rem;
	width: var(--s5);
	height: var(--s5);
	background: url(../../assets/images/posts-pseudo.svg) no-repeat center / 100%;
	/* background-size: 32rem 32rem; */
	transform: rotate(-180deg);
}

.POSTS .categories::after {
	content: '';
	position: absolute;
	bottom: -33rem;
	right: -11rem;
	width: var(--s5);
	height: var(--s5);
	background: url(../../assets/images/posts-pseudo.svg) no-repeat center / 100%;
	/* background-size: 32rem 32rem; */
	transform: rotate(-90deg) scaleX(-1);
}

.b-section[data-background="2"] .POSTS .categories-container {background: var(--deep-indigo);}
.b-section[data-background="2"] .POSTS .categories::before, 
.b-section[data-background="2"] .POSTS .categories::after {
	background: url(../../assets/images/posts-pseudo-dark.svg) no-repeat center / 100%;
}

.POSTS .content a::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.POSTS .read-time {
	display: none;
}

.POSTS .meta {
	margin-top: var(--ps);
}

.POSTS .post .b-button {
	position: static;
	margin-top: var(--s5);
}

.POSTS .post:hover .b-button {
	color: var(--indigo);
}

.POSTS .post:hover .b-button svg path {
	transform: translateX(0);
}

.b-section[data-background="2"] .POSTS a {color: var(--white);}
.b-section[data-background="2"] .POSTS .post:hover .b-button {
	color: var(--mint);
}

.POSTS .pagination {
	margin: var(--s7) 0 0;
}

.POSTS .screen-reader-text {
	display: none;
}

.POSTS .b-button svg:nth-child(2) {display: none;}

/* ajax load more */

.POSTS .alm-listing {
	display: flex;
	flex-wrap: wrap;
	margin: var(--ns3) var(--ns3) var(--ns6);
}

.POSTS .alm-item {
	padding: var(--s3) var(--s3) var(--s6);
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 33.333333%;
}

.POSTS .ajax-load-more-wrap[data-total-posts="0"] .alm-listing:empty::before {content: "No results found."; padding: 0 var(--s3);}
.POSTS .alm-btn-wrap {text-align: center; overflow: hidden;}
.POSTS .alm-load-more-btn {margin-top: var(--s7); padding: var(--s3);}
.POSTS .alm-load-more-btn.done {display: none;}
.POSTS .posts.alt-hide-button .alm-load-more-btn.more {display: none;}

@media screen and (min-width: 961px) {
	.POSTS .filter .b-column:last-child {width: auto; flex-grow: 1;}
	.POSTS[data-numpost="2"] .alm-item {width: 50%;}
}

@media screen and (max-width: 960px) {
	.POSTS .filter {margin: 0 0 var(--s5);}
	.POSTS .image {margin-bottom: var(--s3);}
	.POSTS .image-container {margin-bottom: 0;}
	.POSTS .alm-listing {margin: var(--ns1) var(--ns1) var(--ns4);}
	.POSTS .alm-item {width: 100%; padding: var(--s1) var(--s1) var(--s6);}
	.POSTS .alm-load-more-btn {margin-top: var(--s5);}
}


/* ARCHIVE */ 

.POSTS[data-variant='1'] .b-column {padding: 0;}

.POSTS[data-variant='1'] .filter {
	position: sticky;
	top: var(--s7);
	background: var(--white);
	padding: var(--s5);
	border-radius: var(--s3) 0 0 var(--s3);
}

.POSTS[data-variant='1'] .filter h5 {
	margin-top: 0;
	margin-bottom: var(--s4);
}

.POSTS[data-variant='1'] .filter .search {
	margin-bottom: var(--s5);
}

.POSTS[data-variant='1'] .filter input[type="text"] {
	width: 88%;
}

.POSTS[data-variant='1'] .filter .search .b-button {
	right: var(--s3);
}

.POSTS[data-variant='1']  .filter .filter-category {
	display: block;
	margin-bottom: var(--s2);
}

@media screen and (max-width: 960px) {
	.POSTS[data-variant='1'] .filter {border-radius: var(--s3);}
}

/* first post */ 

.POSTS[data-variant="1"] .alm-item:first-child {
	width: 100%;
}

.POSTS[data-variant='1'] .alm-item:first-child .post {
	background: var(--melrose);
	border-radius: 0 0 var(--s3) var(--s3);
}

.POSTS[data-variant='1'] .alm-item:first-child  .image-container {
	margin-bottom: 0;
}

.POSTS[data-variant='1'] .alm-item:first-child .image .b-img {
	border-radius: 0;
	aspect-ratio: 16/8!important;
}

.POSTS[data-variant='1'] .alm-item:first-child .content {
	padding: var(--s5) var(--s7);
}

.POSTS[data-variant="1"] .alm-item:first-child  .read-time {
	display: block;
	font-weight: 600;
}


@media screen and (min-width: 961px) {
	.POSTS[data-variant='1'] .alm-item:first-child .content h3 {
		font-size: 52rem;
		margin-top: var(--s5);
	}
	
	.POSTS[data-variant='1'] .alm-item:first-child .content p {
		font-size: 20rem;
	}
	.POSTS[data-variant='1'] .alm-item:first-child .categories-container {
		background: var(--deep-indigo);
	}
	
	.POSTS[data-variant="1"] .alm-item:first-child .categories::before,
	.POSTS[data-variant="1"] .alm-item:first-child .categories::after {
		background: url(../../assets/images/posts-pseudo-dark.svg) no-repeat center / 100%;
	}


	.POSTS[data-variant='1'] .alm-item:not(:first-child) {width: 50%;}
}

@media screen and (max-width: 960px) {
	.POSTS[data-variant='1'] .alm-item:first-child .post {border-radius: var(--s3) 0 var(--s3) var(--s3);}
	.POSTS[data-variant='1'] .alm-item:first-child .image {margin-bottom: 0;}
	.POSTS[data-variant='1'] .alm-item:first-child .image .b-img {border-radius: var(--s3) 0 0 0;}
	.POSTS[data-variant='1'] .alm-item:first-child .content {padding: var(--s4);}
	.POSTS[data-variant='1'] .alm-item:first-child .content h3 {margin-top: 0;}
	
	
}


/* SPORTS */ 

.b-page.sport .POSTS .categories {background: var(--yellow);}

.b-page.sport .POSTS .filter .filter-category:hover, 
.b-page.sport .POSTS .filter .filter-category.alt-active, 
.b-page.sport .POSTS .filter .filter-category.focused {background: var(--yellow);}

.b-page.sport .POSTS .filter .search .b-button {background: var(--deep-indigo); color: var(--white);}
.b-page.sport .POSTS[data-variant='1'] .alm-item:first-child .post {background: var(--yellow);}