/* =========================================================
   DIGBANG — RECIPE CATEGORY PAGE
========================================================= */


/* =========================================================
   PAGE
========================================================= */

.db-recipe-category-page {
	width: 100%;

	margin: 0;
	padding: 0;

	direction: rtl;
}


/* =========================================================
   SECTION
========================================================= */

.db-recipe-category-page__section {
	width: 100%;

	padding: 72px 0 96px;
}


/* =========================================================
   INNER
========================================================= */

.db-recipe-category-page__inner {
	width: 1320px;
	max-width: calc(100% - 120px);

	margin: 0 auto;

	box-sizing: border-box;
}


/* =========================================================
   HEADER
========================================================= */

.db-recipe-category-page__header {
	width: 100%;

	margin: 0 0 48px;

	text-align: right;
}


/* =========================================================
   TITLE
========================================================= */

.db-recipe-category-page__title {
	margin: 0;

	color: #3D3631;

	font-family: "Vazirmatn", sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.db-recipe-category-page__description {
	max-width: 760px;

	margin-top: 8px;

	color: #8E7D71;

	font-family: "Vazirmatn", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.9;
}


.db-recipe-category-page__description p {
	margin: 0;
}


/* =========================================================
   GRID
========================================================= */

.db-recipe-category-page__grid {
	display: grid;

	grid-template-columns: repeat(4, 275px);

	column-gap: 73.33px;
	row-gap: 48px;

	width: 1320px;

	margin: 0;
	padding: 0;

	align-items: start;

	box-sizing: border-box;
}


/* =========================================================
   CARD
========================================================= */

.db-recipe-category-page .db-recipe-card {
	width: 275px;
}


/* =========================================================
   PAGINATION
========================================================= */

.db-recipe-category-page__pagination {
	display: flex;

	justify-content: center;

	width: 100%;

	margin-top: 64px;
}


.db-recipe-category-page__pagination .nav-links {
	display: flex;

	align-items: center;

	gap: 8px;
}


.db-recipe-category-page__pagination .page-numbers {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-width: 36px;
	height: 36px;

	padding: 0 10px;

	color: #8E7D71;
	background: #FFFFFF;

	border: 1px solid #F6EDDE;
	border-radius: 8px;

	font-family: "Vazirmatn", sans-serif;
	font-size: 14px;
	font-weight: 500;

	text-decoration: none;

	box-sizing: border-box;
}


.db-recipe-category-page__pagination .page-numbers.current {
	color: #FFFFFF;
	background: #CC5200;

	border-color: #CC5200;
}


.db-recipe-category-page__pagination a.page-numbers:hover {
	color: #CC5200;

	border-color: #CC5200;
}


/* =========================================================
   EMPTY
========================================================= */

.db-recipe-category-page__empty {
	margin: 0;

	color: #8E7D71;

	font-family: "Vazirmatn", sans-serif;
	font-size: 18px;
	font-weight: 400;

	text-align: center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

	.db-recipe-category-page__inner {
		width: calc(100% - 64px);
		max-width: none;
	}


	.db-recipe-category-page__grid {
		grid-template-columns: repeat(3, 275px);

		justify-content: space-between;

		width: 100%;

		column-gap: 24px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.db-recipe-category-page__section {
		padding: 48px 0 64px;
	}


	.db-recipe-category-page__inner {
		width: calc(100% - 32px);
	}


	.db-recipe-category-page__header {
		margin-bottom: 32px;
	}


	.db-recipe-category-page__title {
		font-size: 24px;
	}


	.db-recipe-category-page__description {
		font-size: 14px;
	}


	.db-recipe-category-page__grid {
		display: flex;

		flex-direction: column;

		align-items: center;

		width: 100%;

		gap: 24px;
	}


	.db-recipe-category-page .db-recipe-card {
		width: 240px;
	}


	.db-recipe-category-page__pagination {
		margin-top: 40px;
	}

}