/*
 * Categories CSS - Module Styles
 * Version 1.0
 * Created by CeLa
 * © Copyright by CeLa
 */
 
.categories .categories-inner .header {
	padding: 2rem;
}
.categories .categories-inner .header > h2 {
	margin-bottom: 1.5rem;
}
.categories {}
.categories .categories-inner {
	margin-top: var(--gutter-lg);
}
/* Default style */
.categories.default-style .categories-inner .category {
}
@media(min-width: 768px){
	.categories.default-style .categories-inner .category {
		display: flex;
	}	
	.categories.default-style .categories-inner .category > * {
		flex: 1;
	}
}
.categories.default-style .categories-inner .category:not(:first-child) {
	margin-top: var(--gutter-md);
}
.categories.default-style .categories-inner .category figure.image {
	border: 1px solid var(--base-grey);
	-webkit-border-radius: var(--radius-md);
	-moz-border-radius: var(--radius-md);
	border-radius: var(--radius-md);
	overflow: hidden;
}
@media(min-width: 768px){
	.categories.default-style .categories-inner .category figure.image {
		max-width: calc(100% / 3);
	}
	.categories.default-style .categories-inner .category .body {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
}

.categories.default-style .categories-inner .category .body {
	padding: var(--gutter-md);
}
.categories.default-style .categories-inner .category .body > h3 {}
.categories.default-style .categories-inner .category .body > .content {
	margin-top: var(--gutter-sm);	
}
.categories.default-style .categories-inner .category .body > .link {
	margin-top: var(--gutter-sm);
}

/*
 * Category Details
 */
.category-detail {
	background-color: var(--light-blue);
	-webkit-border-radius: var(--radius-md);
	-moz-border-radius: var(--radius-md);
	border-radius: var(--radius-md);
	border: 1px solid var(--medium-blue);
	overflow: hidden;
}
@media(min-width: 768px){
	.category-detail {
		display: flex;
	}
	.category-detail > * {
		flex: 1;
	}
}
.category-detail .body {
	display: flex;
	justify-content: center;
	flex-direction: column;

	padding: var(--gutter-md);
}
.category-detail .body .description {
}

/*
 * Advertisements style
 */
.advertisements {
}
.advertisements .advertisement .sub-heading {
	color: var(--thd-color);
}
.advertisements .advertisement .body .features .location i,
.advertisements .advertisement .body .features .begin-date i {
	color: var(--thd-color);
}
/* List style */
.advertisements.list-style {
}
@media(min-width: 992px){
	.advertisements.list-style .advertisement {
		display: grid;
		grid-template-columns: calc(100%/3) 120px 1fr;
		gap: var(--gutter-md);
	}
}
.advertisements.list-style .advertisement:not(:first-child) {
	margin-top: var(--gutter-md);
}
.advertisements.list-style .advertisement > * {}
.advertisements.list-style .advertisement figure.image {
	position: relative;
	height: 100%;
	border: 1px solid var(--base-grey);
	-webkit-border-radius: var(--radius-sm);
	-moz-border-radius: var(--radius-sm);
	border-radius: var(--radius-sm);
	overflow: hidden;
	z-index: 99;
}
.advertisements.list-style .advertisement figure.brand a {
	display: inline-block;
}
@media(max-width: 991px){
	.advertisements.list-style .advertisement figure.brand {
		position: relative;
		text-align: center;
		margin-top: -59px;
		z-index: 101;
	}
	.advertisements.list-style .advertisement figure.brand a img {
		max-width: 120px;
		height: auto;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		border: 1px solid var(--base-grey);
	}
}
@media(min-width: 992px){
	.advertisements.list-style .advertisement figure.image {
		position: relative;
		z-index: 99;
	}
	.advertisements.list-style .advertisement figure.image img {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		object-fit: cover;
		z-index: 100;
	}
	.advertisements.list-style .advertisement figure.brand {
		position: relative;
		height: 100%;
		border: 2px dotted var(--base-grey);
		-webkit-border-radius: var(--radius-sm);
		-moz-border-radius: var(--radius-sm);
		border-radius: var(--radius-sm);
	}
	.advertisements.list-style .advertisement figure.brand a {
		position: absolute;
		top: 50%;
		width: 100%;
		height: auto;
		transform: translateY(-50%);
	}
}
.advertisements.list-style .advertisement .body {
	padding: var(--gutter-md) 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.advertisements.list-style .advertisement .body .description {
	margin-top: var(--gutter-sm);
}
.advertisements.list-style .advertisement .body .link {
	margin-top: var(--gutter-sm);
}
/* Grid style */
@media(max-width: 767px){
	.advertisements.grid-style .advertisement:not(:first-child) {
		margin-top: var(--gutter-md);
	}
}
@media(min-width: 768px){
	.advertisements.grid-style {
		display: grid;
		grid-gap: var(--gutter-md);
	}
}
@media(min-width: 768px) and (max-width: 991px){
	.advertisements.grid-style {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media(min-width: 992px){
	.advertisements.grid-style {
		grid-template-columns: repeat(3, 1fr);
	}	
}
.advertisements.grid-style .advertisement {
	display: flex;
	justify-content: center;
	flex-direction: column;
	border: 1px solid var(--base-grey);
	-webkit-border-radius: var(--radius-md);
	-moz-border-radius: var(--radius-md);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.advertisements.grid-style .advertisement .image {
	order: 1;
}
.advertisements.grid-style .advertisement .body {
	padding: var(--gutter-md);
	order: 3;
}
.advertisements.grid-style .advertisement .brand {
	order: 2;
	text-align: center;
	margin-top: -50px;
}
.advertisements.grid-style .advertisement .brand > img {
	max-width: 100px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 1px solid var(--base-grey);
}
.advertisements.grid-style .advertisement .body .description {
	margin-top: var(--gutter-sm);
}
.advertisements.grid-style .advertisement .body .link {
	margin-top: var(--gutter-sm);
}