/**
 * Premium Blog Archive.
 *
 * @package DrSanhithaPurushotham
 */


/* ==================================================
   VARIABLES
================================================== */

.blog-archive {
	--blog-navy: #08213e;
	--blog-navy-dark: #06182e;

	--blog-text: #44536a;
	--blog-muted: #778497;

	--blog-teal: #008f98;
	--blog-teal-dark: #00747c;

	--blog-gold: #c9943b;
	--blog-gold-light: #dfbc77;

	--blog-cream: #faf5ed;
	--blog-white: #ffffff;

	width: 100%;

	background:
		#ffffff;

	color:
		var(--blog-text);
}


.blog-archive *,
.blog-archive *::before,
.blog-archive *::after {
	box-sizing: border-box;
}


.blog-archive__container {
	width:
		min(
			calc(100% - 80px),
			1360px
		);

	margin-inline: auto;
}


/* ==================================================
   HERO
================================================== */

.blog-hero {
	position: relative;

	overflow: hidden;

	padding:
		76px
		0
		70px;

	background:
		linear-gradient(
			135deg,
			#fbf7f0 0%,
			#f5eee3 100%
		);
}


.blog-hero::before {
	position: absolute;

	top: 0;
	right: 0;
	left: 0;

	height: 1px;

	background:
		rgba(201, 148, 59, .30);

	content: "";
}


.blog-hero__content {
	position: relative;

	z-index: 2;

	max-width: 760px;
}


/* ==================================================
   HERO EYEBROW
================================================== */

.blog-hero__eyebrow {
	display: flex;

	margin-bottom: 14px;

	align-items: center;

	gap: 13px;
}


.blog-hero__eyebrow > span {
	width: 48px;
	height: 1px;

	background:
		var(--blog-gold);
}


.blog-hero__eyebrow p {
	margin: 0;

	color:
		var(--blog-teal-dark);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 11px;
	font-weight: 700;

	letter-spacing: 2.7px;

	text-transform: uppercase;
}


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

.blog-hero__title {
	max-width: 760px;

	margin: 0;

	color:
		var(--blog-navy);

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size:
		clamp(
			52px,
			6vw,
			78px
		);

	font-weight: 700;

	line-height: .95;

	letter-spacing: -1.4px;
}


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

.blog-hero__description {
	max-width: 680px;

	margin:
		21px
		0
		0;

	color:
		var(--blog-text);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 15px;

	line-height: 1.75;
}


/* ==================================================
   HERO DIVIDER
================================================== */

.blog-hero__divider {
	display: flex;

	width: 220px;

	margin-top: 27px;

	align-items: center;

	gap: 9px;
}


.blog-hero__divider span {
	height: 1px;

	flex: 1;

	background:
		linear-gradient(
			90deg,
			transparent,
			var(--blog-gold)
		);
}


.blog-hero__divider span:last-child {
	background:
		linear-gradient(
			90deg,
			var(--blog-gold),
			transparent
		);
}


.blog-hero__divider i {
	width: 8px;
	height: 8px;

	background:
		var(--blog-gold);

	transform:
		rotate(45deg);
}


/* ==================================================
   HERO ORNAMENT
================================================== */

.blog-hero__ornament {
	position: absolute;

	top: 50%;

	right: -90px;

	width: 470px;
	height: 470px;

	pointer-events: none;

	transform:
		translateY(-50%);
}


.blog-hero__ring {
	position: absolute;

	top: 50%;
	left: 50%;

	border:
		1px solid
		rgba(201, 148, 59, .30);

	border-radius: 50%;

	transform:
		translate(-50%, -50%);
}


.blog-hero__ring--1 {
	width: 300px;
	height: 300px;
}


.blog-hero__ring--2 {
	width: 365px;
	height: 365px;
}


.blog-hero__ring--3 {
	width: 430px;
	height: 430px;
}


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

.blog-listing {
	padding:
		52px
		0
		80px;

	background:
		#ffffff;
}


/* ==================================================
   TOOLBAR
================================================== */

.blog-toolbar {
	display: flex;

	margin-bottom: 40px;

	align-items: center;

	justify-content: space-between;

	gap: 30px;
}


/* ==================================================
   CATEGORY FILTERS
================================================== */

.blog-toolbar__categories {
	display: flex;

	min-width: 0;

	align-items: center;

	gap: 8px;

	flex-wrap: wrap;
}


.blog-category-link {
	display: inline-flex;

	min-height: 39px;

	padding:
		0
		15px;

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

	border:
		1px solid
		#dce1e5;

	border-radius: 999px;

	background:
		#ffffff;

	color:
		var(--blog-text);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 11px;

	font-weight: 600;

	text-decoration: none;

	transition:
		color 200ms ease,
		background-color 200ms ease,
		border-color 200ms ease,
		transform 200ms ease;
}


.blog-category-link:hover,
.blog-category-link:focus-visible,
.blog-category-link.is-active {
	border-color:
		var(--blog-teal);

	background:
		var(--blog-teal);

	color:
		#ffffff;
}


/* ==================================================
   SEARCH
================================================== */

.blog-toolbar__search {
	flex:
		0 0 330px;
}


.blog-search {
	position: relative;

	display: flex;

	width: 100%;

	height: 46px;

	align-items: center;

	border:
		1px solid
		#d8dfe3;

	border-radius: 999px;

	background:
		#ffffff;

	overflow: hidden;
}


.blog-search__icon {
	display: flex;

	width: 43px;

	flex:
		0 0 43px;

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

	color:
		var(--blog-teal);
}


.blog-search__icon svg {
	width: 19px;
	height: 19px;
}


.blog-search input {
	width: 100%;
	height: 100%;

	min-width: 0;

	padding: 0;

	border: 0;

	outline: 0;

	background: transparent;

	color:
		var(--blog-navy);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 12px;
}


.blog-search input::placeholder {
	color:
		#909aa6;
}


.blog-search button {
	height: 38px;

	margin-right: 4px;

	padding:
		0
		16px;

	border: 0;

	border-radius: 999px;

	background:
		var(--blog-navy);

	color:
		#ffffff;

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 10px;

	font-weight: 700;

	cursor: pointer;
}


/* ==================================================
   FEATURED ARTICLE
================================================== */

.blog-featured {
	display: grid;

	margin-bottom: 58px;

	grid-template-columns:
		minmax(0, 1.12fr)
		minmax(0, .88fr);

	overflow: hidden;

	border:
		1px solid
		rgba(201, 148, 59, .25);

	border-radius: 22px;

	background:
		linear-gradient(
			135deg,
			#fffefa,
			#faf5ed
		);

	box-shadow:
		0
		18px
		48px
		rgba(15, 33, 49, .08);
}


/* ==================================================
   FEATURED IMAGE
================================================== */

.blog-featured__image {
	position: relative;

	display: block;

	min-height: 430px;

	overflow: hidden;

	background:
		#e9f0ef;
}


.blog-featured__image-file {
	position: absolute;

	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 650ms
		cubic-bezier(.22, 1, .36, 1);
}


.blog-featured__image:hover
.blog-featured__image-file {
	transform:
		scale(1.035);
}


.blog-featured__placeholder {
	display: flex;

	width: 100%;
	height: 100%;

	min-height: 430px;

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

	background:
		linear-gradient(
			135deg,
			#e8f4f3,
			#f6ecde
		);

	color:
		var(--blog-teal);
}


.blog-featured__placeholder svg {
	width: 90px;
	height: 90px;
}


/* ==================================================
   FEATURED BADGE
================================================== */

.blog-featured__badge {
	position: absolute;

	top: 22px;
	left: 22px;

	display: inline-flex;

	min-height: 33px;

	padding:
		0
		13px;

	align-items: center;

	border:
		1px solid
		rgba(255, 255, 255, .55);

	border-radius: 999px;

	background:
		rgba(8, 33, 62, .88);

	backdrop-filter:
		blur(8px);

	color:
		#f3d18d;

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 9px;

	font-weight: 700;

	letter-spacing: 1.2px;

	text-transform: uppercase;
}


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

.blog-featured__content {
	display: flex;

	padding:
		44px
		45px;

	flex-direction: column;

	align-items: flex-start;

	justify-content: center;
}


/* ==================================================
   BLOG META
================================================== */

.blog-card__meta {
	display: flex;

	align-items: center;

	gap: 10px;

	color:
		var(--blog-muted);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 9px;

	font-weight: 600;

	letter-spacing: .8px;

	text-transform: uppercase;
}


.blog-card__category {
	color:
		var(--blog-teal-dark);

	font-weight: 700;

	text-decoration: none;
}


.blog-card__category:hover {
	color:
		var(--blog-gold);
}


.blog-card__meta-divider {
	display: block;

	width: 4px;
	height: 4px;

	border-radius: 50%;

	background:
		var(--blog-gold);
}


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

.blog-featured__title {
	margin:
		18px
		0
		0;

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size:
		clamp(
			34px,
			3.4vw,
			48px
		);

	font-weight: 700;

	line-height: 1.02;
}


.blog-featured__title a {
	color:
		var(--blog-navy);

	text-decoration: none;
}


.blog-featured__title a:hover {
	color:
		var(--blog-teal-dark);
}


/* ==================================================
   FEATURED EXCERPT
================================================== */

.blog-featured__excerpt {
	margin-top: 18px;

	color:
		var(--blog-text);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 13px;

	line-height: 1.7;
}


.blog-featured__excerpt p {
	margin: 0;
}


/* ==================================================
   PREMIUM READ MORE
================================================== */

.blog-read-more {
	display: inline-flex;

	min-height: 47px;

	margin-top: 25px;

	padding:
		4px
		5px
		4px
		18px;

	align-items: center;

	gap: 14px;

	border:
		1px solid
		var(--blog-gold);

	border-radius: 999px;

	color:
		var(--blog-navy);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 11px;

	font-weight: 700;

	text-decoration: none;

	transition:
		background-color 220ms ease,
		color 220ms ease,
		transform 220ms ease;
}


.blog-read-more__icon {
	display: flex;

	width: 37px;
	height: 37px;

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

	border-radius: 50%;

	background:
		var(--blog-navy);

	color:
		#ffffff;
}


.blog-read-more__icon svg {
	width: 16px;
	height: 16px;
}


.blog-read-more:hover {
	background:
		var(--blog-gold);

	transform:
		translateY(-2px);
}


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

.blog-section-heading {
	display: flex;

	margin-bottom: 27px;

	align-items: flex-end;

	gap: 25px;
}


.blog-section-heading > div:first-child {
	flex:
		0 0 auto;
}


.blog-section-heading__eyebrow {
	display: block;

	margin-bottom: 4px;

	color:
		var(--blog-teal);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 9px;

	font-weight: 700;

	letter-spacing: 2px;

	text-transform: uppercase;
}


.blog-section-heading h2 {
	margin: 0;

	color:
		var(--blog-navy);

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size:
		clamp(
			32px,
			3vw,
			42px
		);

	font-weight: 700;

	line-height: 1;
}


.blog-section-heading__line {
	height: 1px;

	flex: 1;

	margin-bottom: 6px;

	background:
		linear-gradient(
			to right,
			rgba(201, 148, 59, .45),
			transparent
		);
}


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

.blog-grid {
	display: grid;

	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);

	gap:
		30px
		24px;
}


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

.blog-card {
	display: flex;

	min-width: 0;

	overflow: hidden;

	flex-direction: column;

	border:
		1px solid
		#e4e7e8;

	border-radius: 16px;

	background:
		#ffffff;

	box-shadow:
		0
		8px
		26px
		rgba(15, 38, 56, .045);

	transition:
		border-color 260ms ease,
		box-shadow 260ms ease,
		transform 260ms ease;
}


@media (hover: hover) and (pointer: fine) {

	.blog-card:hover {
		border-color:
			rgba(201, 148, 59, .36);

		box-shadow:
			0
			17px
			38px
			rgba(15, 38, 56, .08);

		transform:
			translateY(-5px);
	}
}


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

.blog-card__image {
	position: relative;

	display: block;

	aspect-ratio: 16 / 9;

	overflow: hidden;

	background:
		#edf3f2;
}


.blog-card__image-file {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 600ms
		cubic-bezier(.22, 1, .36, 1);
}


.blog-card:hover
.blog-card__image-file {
	transform:
		scale(1.04);
}


.blog-card__placeholder {
	display: flex;

	width: 100%;
	height: 100%;

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

	background:
		linear-gradient(
			135deg,
			#e9f4f3,
			#f8efe4
		);

	color:
		var(--blog-teal);
}


.blog-card__placeholder svg {
	width: 66px;
	height: 66px;
}


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

.blog-card__body {
	display: flex;

	padding:
		23px
		22px
		22px;

	flex: 1;

	flex-direction: column;

	align-items: flex-start;
}


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

.blog-card__title {
	margin:
		13px
		0
		0;

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size: 25px;

	font-weight: 700;

	line-height: 1.12;
}


.blog-card__title a {
	color:
		var(--blog-navy);

	text-decoration: none;
}


.blog-card__title a:hover {
	color:
		var(--blog-teal-dark);
}


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

.blog-card__excerpt {
	margin-top: 13px;

	color:
		var(--blog-text);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 12px;

	line-height: 1.65;
}


.blog-card__excerpt p {
	margin: 0;
}


/* ==================================================
   CARD READ MORE
================================================== */

.blog-card__link {
	display: inline-flex;

	margin-top: auto;

	padding-top: 20px;

	align-items: center;

	gap: 7px;

	color:
		var(--blog-gold);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 10px;

	font-weight: 700;

	letter-spacing: .4px;

	text-decoration: none;

	text-transform: uppercase;
}


.blog-card__link svg {
	width: 16px;
	height: 16px;

	transition:
		transform 200ms ease;
}


.blog-card__link:hover svg {
	transform:
		translateX(4px);
}


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

.blog-pagination {
	margin-top: 58px;
}


.blog-pagination .nav-links {
	display: flex;

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

	gap: 7px;

	flex-wrap: wrap;
}


.blog-pagination .page-numbers {
	display: inline-flex;

	min-width: 42px;
	height: 42px;

	padding:
		0
		11px;

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

	border:
		1px solid
		#dfe3e5;

	border-radius: 9px;

	background:
		#ffffff;

	color:
		var(--blog-navy);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size: 11px;

	font-weight: 600;

	text-decoration: none;
}


.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover {
	border-color:
		var(--blog-teal);

	background:
		var(--blog-teal);

	color:
		#ffffff;
}


.blog-pagination .prev,
.blog-pagination .next {
	padding:
		0
		16px;
}


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

.blog-empty {
	max-width: 600px;

	margin:
		70px
		auto;

	text-align: center;
}


.blog-empty__icon {
	display: flex;

	width: 80px;
	height: 80px;

	margin:
		0
		auto
		20px;

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

	border-radius: 50%;

	background:
		#eaf5f4;

	color:
		var(--blog-teal);
}


.blog-empty__icon svg {
	width: 45px;
	height: 45px;
}


.blog-empty h2 {
	margin: 0;

	color:
		var(--blog-navy);

	font-family:
		"Cormorant Garamond",
		Georgia,
		serif;

	font-size: 38px;
}


.blog-empty p {
	margin:
		12px
		0
		0;

	font-size: 13px;
}


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

@media screen and (max-width: 1050px) {

	.blog-archive__container {
		width:
			calc(100% - 60px);
	}


	.blog-hero {
		padding:
			60px
			0;
	}


	.blog-hero__ornament {
		right: -200px;

		opacity: .65;
	}


	.blog-toolbar {
		align-items: stretch;

		flex-direction: column;
	}


	.blog-toolbar__search {
		width: 100%;

		max-width: 430px;

		flex: none;
	}


	.blog-featured {
		grid-template-columns: 1fr;
	}


	.blog-featured__image,
	.blog-featured__placeholder {
		min-height: 390px;
	}


	.blog-featured__content {
		padding:
			36px;
	}


	.blog-grid {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}
}


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

@media screen and (max-width: 680px) {

	.blog-archive__container {
		width:
			calc(100% - 30px);
	}


	.blog-hero {
		padding:
			46px
			0
			48px;
	}


	.blog-hero__title {
		font-size: 48px;
	}


	.blog-hero__description {
		margin-top: 16px;

		font-size: 13px;
	}


	.blog-hero__ornament {
		right: -290px;

		opacity: .4;
	}


	.blog-listing {
		padding:
			37px
			0
			55px;
	}


	.blog-toolbar {
		margin-bottom: 30px;
	}


	.blog-toolbar__categories {
		flex-wrap: nowrap;

		overflow-x: auto;

		padding-bottom: 5px;

		scrollbar-width: none;
	}


	.blog-toolbar__categories::-webkit-scrollbar {
		display: none;
	}


	.blog-category-link {
		flex:
			0 0 auto;
	}


	.blog-toolbar__search {
		max-width: none;
	}


	.blog-featured {
		margin-bottom: 42px;

		border-radius: 16px;
	}


	.blog-featured__image,
	.blog-featured__placeholder {
		min-height: 250px;
	}


	.blog-featured__content {
		padding:
			27px
			21px
			29px;
	}


	.blog-featured__title {
		font-size: 34px;
	}


	.blog-featured__excerpt {
		font-size: 12px;
	}


	.blog-section-heading {
		margin-bottom: 22px;

		align-items: flex-start;
	}


	.blog-section-heading h2 {
		font-size: 32px;
	}


	.blog-section-heading__line {
		display: none;
	}


	.blog-grid {
		grid-template-columns: 1fr;

		gap: 20px;
	}


	.blog-card__title {
		font-size: 24px;
	}


	.blog-pagination {
		margin-top: 42px;
	}


	.blog-pagination .prev,
	.blog-pagination .next {
		font-size: 0;
	}


	.blog-pagination .prev span,
	.blog-pagination .next span {
		font-size: 14px;
	}
}


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

@media screen and (max-width: 390px) {

	.blog-archive__container {
		width:
			calc(100% - 24px);
	}


	.blog-hero__title {
		font-size: 43px;
	}


	.blog-featured__image,
	.blog-featured__placeholder {
		min-height: 220px;
	}
}


/* ==================================================
   ACCESSIBILITY
================================================== */

.blog-archive a:focus-visible,
.blog-archive button:focus-visible,
.blog-archive input:focus-visible {
	outline:
		3px solid
		rgba(0, 143, 152, .35);

	outline-offset: 3px;
}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

	.blog-archive *,
	.blog-archive *::before,
	.blog-archive *::after {
		transition: none !important;
	}
}