/* =========================================================
   DIGBANG — HOME TODAY RECIPE
========================================================= */


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

.db-home-recipes {
	width: 100%;

	margin: 88px 0 0;

	padding: 0;

	direction: rtl;
}


/* =========================================================
   INNER
   411.88 + 33.12 + 875 = 1320
========================================================= */

.db-home-recipes__inner {
	display: grid;

	grid-template-columns: 411.88px 875px;

	column-gap: 33.12px;

	align-items: end;

	width: 1320px;
	max-width: calc(100% - 120px);

	height: 557px;

	margin: 0 auto;

	padding: 0;

	box-sizing: border-box;

	direction: ltr;
}


/* =========================================================
   CONTENT
========================================================= */

.db-home-recipes__content {
	width: 875px;

	min-width: 0;

	margin: 0;
	padding: 0;

	direction: rtl;

	box-sizing: border-box;
}


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

.db-home-recipes__header {
	width: 100%;

	margin: 0;
	padding: 0;

	text-align: right;
}


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

.db-home-recipes__title {
	margin: 0;

	color: #000000;

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

	text-align: right;
}


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

.db-home-recipes__description {
	margin: 4px 0 0;

	color: #000000;

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

	text-align: right;
}


/* =========================================================
   VIEW ALL BUTTON
========================================================= */

.db-home-recipes__more {
	display: inline-flex;

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

	gap: 6px;

	width: 120.17px;
	height: 35.28px;

	margin: 24px 0 0;

	padding: 0;

	box-sizing: border-box;

	color: #FFFFFF;
	background: #CC5200;

	border: 1px solid #CC5200;
	border-radius: 5.23px;

	font-family: "Vazirmatn", sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;

	text-decoration: none;

	transition:
		background-color .2s ease,
		color .2s ease,
		border-color .2s ease;
}


.db-home-recipes__more:hover,
.db-home-recipes__more:focus-visible {
	color: #CC5200;

	background: #FFFFFF;

	border-color: #CC5200;
}


.db-home-recipes__more-icon {
	display: inline-flex;

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

	font-size: 16px;
	line-height: 1;
}


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

.db-home-recipes__grid {
	display: grid;

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

	column-gap: 25px;
	row-gap: 25px;

	width: 875px;

	margin: 48px 0 0;

	padding: 0;

	align-items: start;

	box-sizing: border-box;
}


/* =========================================================
   RECIPE CARD
   فقط داخل سکشن هوم
========================================================= */

.db-home-recipes .db-recipe-card {
	width: 275px;
}


.db-home-recipes .db-recipe-card__body {
	width: 275px;
}


/* =========================================================
   VISUAL
========================================================= */

.db-home-recipes__visual {
	position: relative;

	width: 411.88px;
	height: 557px;

	margin: 0;
	padding: 0;

	align-self: end;

	overflow: hidden;

	box-sizing: border-box;
}


/* =========================================================
   VISUAL IMAGE
========================================================= */

.db-home-recipes__image {
	position: absolute;

	left: 0;
	bottom: -56px;

	display: block;

	width: 411.88px;
	height: auto;

	max-width: none;

	margin: 0;
	padding: 0;
}


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

@media (max-width: 1399px) {

	.db-home-recipes__inner {
		grid-template-columns:
			minmax(250px, 300px)
			minmax(0, 1fr);

		column-gap: 32px;

		align-items: end;

		width: calc(100% - 64px);
		max-width: none;

		height: auto;
	}


	.db-home-recipes__content {
		width: 100%;
	}


	.db-home-recipes__visual {
		width: 100%;
		height: auto;

		align-self: end;
	}


	.db-home-recipes__image {
		width: 100%;
		height: auto;

		max-width: 100%;
		max-height: none;

		align-self: flex-end;
	}


	.db-home-recipes__grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));

		width: 100%;

		column-gap: 24px;
	}


	.db-home-recipes .db-recipe-card,
	.db-home-recipes .db-recipe-card__body {
		width: 100%;
	}

}


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

@media (max-width: 767px) {

	.db-home-recipes {
		margin-top: 56px;
	}


	.db-home-recipes__inner {
		display: flex;

		flex-direction: column;

		width: calc(100% - 32px);

		height: auto;

		margin: 0 auto;

		direction: rtl;
	}


	.db-home-recipes__content {
		width: 100%;
	}


	.db-home-recipes__title {
		font-size: 24px;
	}


	.db-home-recipes__description {
		font-size: 14px;
	}


	.db-home-recipes__more {
		margin-top: 20px;
	}


	.db-home-recipes__grid {
		display: flex;

		width: 100%;

		margin-top: 32px;

		gap: 16px;

		overflow-x: auto;
		overflow-y: hidden;

		padding: 8px 0 16px;

		scrollbar-width: none;

		-webkit-overflow-scrolling: touch;
	}


	.db-home-recipes__grid::-webkit-scrollbar {
		display: none;
	}


	.db-home-recipes .db-recipe-card {
		flex: 0 0 240px;

		width: 240px;
	}


	.db-home-recipes .db-recipe-card__body {
		width: 240px;
	}


	.db-home-recipes__visual {
		width: 260px;
		height: auto;

		max-width: 80%;

		margin: 32px auto 0;

		align-self: center;
	}


	.db-home-recipes__image {
		width: 100%;
		height: auto;

		max-width: 100%;
		max-height: none;
	}

}