.granth-page {
	padding: 3rem 0 5rem;
	background:
		radial-gradient(ellipse at top, rgba(255, 236, 220, 0.9) 0%, transparent 55%),
		#fdf6ee;
	font-family: var(--tertiaryfont);
}

.granth-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 0.75rem;
	flex-wrap: wrap;
}

.granth-heading h2 {
	font-family: var(--tertiaryfont);
	color: #8b1c1c;
	font-size: 1.85rem;
	margin: 0;
	text-align: center;
	font-weight: 600;
}

.granth-ornament {
	width: 88px;
	height: 18px;
	background-image:
		radial-gradient(circle, #c9a227 2.2px, transparent 2.4px),
		linear-gradient(90deg, transparent 0 10px, #d4b45a 10px 78px, transparent 78px);
	background-position: 0 50%, 0 50%;
	background-size: 12px 18px, 100% 1px;
	background-repeat: repeat-x, no-repeat;
	opacity: 0.85;
}

.granth-intro {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 1.75rem;
	color: #6a5348;
	font-size: 0.98rem;
	line-height: 1.7;
}

.granth-filters {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-bottom: 1.75rem;
}

.granth-filter {
	border: 1px solid #ead7c4;
	background: #fff;
	color: #8b1c1c;
	border-radius: 999px;
	padding: 0.42rem 1.15rem;
	font-size: 0.92rem;
	cursor: pointer;
	font-family: var(--tertiaryfont);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.granth-filter:hover {
	border-color: #8b1c1c;
}

.granth-filter.is-active {
	background: #8b1c1c;
	color: #fff;
	border-color: #8b1c1c;
}

.granth-list {
	max-width: 980px;
	margin: 0 auto;
}

.granth-row {
	display: flex;
	align-items: center;
	gap: 1.15rem;
	background: #fff;
	border-radius: 14px;
	padding: 1rem 1.2rem;
	margin-bottom: 0.9rem;
	box-shadow: 0 2px 12px rgba(139, 28, 28, 0.06);
}

.granth-row.is-hidden {
	display: none !important;
}

.granth-num {
	font-family: var(--primaryfont);
	font-size: 1.55rem;
	font-weight: 600;
	color: #c9a227;
	min-width: 2.4rem;
	line-height: 1;
}

.granth-cover img {
	width: 72px;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
	display: block;
}

.granth-meta {
	flex: 1;
	min-width: 0;
	text-align: left;
}

.granth-meta h3 {
	margin: 0 0 0.2rem;
	font-size: 1.18rem;
	color: #3d2b24;
	font-weight: 600;
	line-height: 1.35;
}

.granth-type {
	display: inline-block;
	font-size: 0.82rem;
	margin-bottom: 0.3rem;
	font-family: var(--primaryfont);
}

.granth-type--original {
	color: #8b1c1c;
}

.granth-type--hindi {
	color: #c45c26;
}

.granth-meta p {
	margin: 0;
	color: #6b5a52;
	font-size: 0.9rem;
	line-height: 1.5;
}

.granth-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 148px;
}

.granth-actions a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	background: #8b1c1c;
	color: #fff !important;
	border-radius: 8px;
	padding: 0.52rem 1rem;
	font-size: 0.92rem;
	font-family: var(--primaryfont);
}

.granth-actions a:hover {
	background: #6e1414;
	color: #fff !important;
}

@media (max-width: 767px) {
	.granth-page {
		padding: 2rem 0 3.5rem;
	}

	.granth-heading h2 {
		font-size: 1.35rem;
	}

	.granth-ornament {
		width: 48px;
	}

	.granth-row {
		flex-wrap: wrap;
		align-items: flex-start;
		padding: 0.9rem;
	}

	.granth-num {
		font-size: 1.25rem;
		min-width: 2rem;
	}

	.granth-cover img {
		width: 56px;
	}

	.granth-meta {
		flex: 1 1 calc(100% - 100px);
	}

	.granth-actions {
		flex-direction: row;
		width: 100%;
		min-width: 0;
	}

	.granth-actions a {
		flex: 1;
	}
}