/*
* Created by CeLa
* Copyright 2023 by CeLa 
* Fonts module styles
*/


.page-header {
	margin-bottom: 2rem;
	padding: 2rem;
	background-color: #f1f1f1;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

/*
 * Default styles
 */
.font-tags a {
	display: inline-block;
	margin: 0px 5px 5px 0px;
	padding: 3px 8px;
	background-color: var(--base-color);
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.025rem;
	font-weight: 600;
	font-size: 0.75rem;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

/*
 *  Font Categories
 */
.category-fonts {
	margin-top: 2.5rem;
}
@media(max-width: 767px){
	.category-fonts .font-item:not(:first-child) {
		margin-top: 2rem;
	}
}
@media(min-width: 768px){
	.category-fonts {
		display: grid;
		grid-gap: 2rem;
	}
}
@media(min-width: 768px) and (max-width: 991px){
	.category-fonts {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media(min-width: 992px){
	.category-fonts {
		grid-template-columns: repeat(3, 1fr);
	}
}
.category-fonts .font {}
.category-fonts .font .font-image img {
	max-width: 100%;
	height: auto;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.category-fonts .font .font-infos {}
.category-fonts .font .font-infos > * {
	font-size: .875rem;
}
.category-fonts .font .font-infos a,
.category-fonts .font .font-infos a:visited {
	text-decoration: none;
	color: var(--base-color);
}
.category-fonts .font .font-infos a:hover,
.category-fonts .font .font-infos a:active,
.category-fonts .font .font-infos a:focus {
	color: var(--pri-color);
}
.category-fonts .font .font-infos a i.bx {
	display: inline-block;
	transform: translateY(1px);
}
.category-fonts .font .font-title {
	margin-top: 15px;
}

/*
 * Font list styles
 */
@media(max-width: 767px){
	.font-list.default-layout .font-item:not(:first-child) {
		margin-top: 2rem;
	}
}
@media(min-width: 768px){
	.font-list.default-layout {
		display: grid;
		grid-gap: 2rem;
	}
}
@media(min-width: 768px) and (max-width: 991px){
	.font-list.default-layout {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media(min-width: 992px){
	.font-list.default-layout {
		grid-template-columns: repeat(4, 1fr);
	}
}
.font-list.default-layout .font-item {
	border: 1px solid #eee;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.font-list.default-layout .font-item .font-header {
	padding: 0 15px;
}
.font-list.default-layout .font-item .font-body {
	padding: 15px;
}
.font-list.default-layout .font-item .font-image img {
	max-width: 100%;
	height: auto;
}
.font-list.default-layout .font-item .font-link {
	padding: 0px 15px 15px 15px;
}
.font-list.default-layout .font-item .font-link .btn-dark {
	text-transform: uppercase;
	font-weight: 600;
}

/*
 * Font detail styles
 */
#fontCarousel .carousel-inner {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.font-details {}
@media(min-width: 768px){
	.font-details {
		display: grid;
		grid-gap: 2rem;
		grid-template-columns: repeat(2, 1fr);
	}
}
.font-details .font-image {}
.font-details .font-image img {
	max-width: 100%;
	height: auto;
}
.font-details h3.font-header {}
.font-details .font-description {}

a.btn-download,
a.btn-buy {
	text-transform: uppercase;
	letter-spacing: 0.025rem;
	font-size: 0.875rem;
	font-weight: 700;
}
a.btn-download,
a.btn-download:visited {
	background-color: var(--pri-color);
	color: #fff;
}
a.btn-download:hover,
a.btn-download:active,
a.btn-download:focus {
	background-color: var(--sec-color);
	color: #fff;
}
a.btn-buy,
a.btn-buy:visited {
	background-color: var(--pri-color);
	color: #fff;
}
a.btn-buy:hover,
a.btn-buy:active,
a.btn-buy:focus {
	background-color: var(--sec-color);
	color: #fff;
}

/* Related font sytels */
.related-fonts {}
.related-inner {
	display: grid;
	grid-gap: 2rem;
	grid-template-columns: repeat(4, 1fr);
}
.related-font .font-image {
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.related-font .font-image img {
	max-width: 100%;
	height: auto;
}

/*
 * Featured widgets
 */
.featured-widget {}
.featured-widget .widget-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 2rem;
}
.featured-widget .font {
}
.featured-widget .font .font-image {
	margin-bottom: .5rem;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	overflow: hidden;
}
.featured-widget .font .font-image img {
	max-width: 100%;
	height: auto;
}
.featured-widget .font .font-infos {
	display: flex;
	gap: 1rem;
	margin-bottom: .25rem;
}
.featured-widget .font .font-infos > * {
	/* 
	flex: 1;
	*/
	font-size: .875rem;
}
.featured-widget .font .font-infos a {
	text-decoration: none;
	color: var(--base-color);
}
.featured-widget .font .font-infos a:hover {
	color: var(--pri-color);
}
.featured-widget .font .font-infos a i.bx {
	display: inline-block;
	transform: translateY(1px);
}