/* ==========================================================================
   BLOG ARCHIVE
   PREMIUM MEDICAL EDITORIAL STYLE
   ========================================================================== */

.ph-blog-page {
	--ph-blog-blue: #0b5cf6;
	--ph-blog-blue-light: #287dff;
	--ph-blog-navy: #06275f;
	--ph-blog-navy-dark: #031a48;
	--ph-blog-text: #52698f;
	--ph-blog-muted: #8091ae;
	--ph-blog-border: #dce6f5;
	--ph-blog-soft: #f4f7ff;

	position: relative;

	width: 100%;

	overflow: hidden;

	background: #ffffff;
}


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

.ph-blog-hero {
	position: relative;

	min-height: 510px;

	padding:
		190px
		0
		78px;

	overflow: hidden;

	background:
		linear-gradient(
			115deg,
			#03194d 0%,
			#062b7d 39%,
			#0b50d7 70%,
			#176fff 100%
		);

	isolation: isolate;
}


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

	top: -480px;
	right: -180px;

	width: 980px;
	height: 980px;

	border:
		1px solid
		rgba(255, 255, 255, 0.11);

	border-radius: 50%;

	content: "";
}


.ph-blog-hero::after {
	position: absolute;

	top: -380px;
	right: -80px;

	width: 730px;
	height: 730px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(89, 157, 255, 0.28),
			transparent 68%
		);

	content: "";
}


.ph-blog-hero__circle {
	position: absolute;

	border:
		1px solid
		rgba(255, 255, 255, 0.08);

	border-radius: 50%;
}


.ph-blog-hero__circle--one {
	top: 40px;
	left: -200px;

	width: 500px;
	height: 500px;
}


.ph-blog-hero__circle--two {
	right: 33%;
	bottom: -410px;

	width: 570px;
	height: 570px;
}


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

.ph-blog-hero__container {
	position: relative;
	z-index: 3;

	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		470px;

	align-items: center;

	gap: 85px;

	width: min(100% - 140px, 1600px);

	margin-inline: auto;
}


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

.ph-blog-hero__content {
	max-width: 760px;
}


.ph-blog-hero__eyebrow {
	display: inline-flex;

	align-items: center;

	gap: 9px;

	margin-bottom: 21px;

	padding:
		8px
		13px;

	border:
		1px solid
		rgba(255, 255, 255, 0.17);

	border-radius: 999px;

	background:
		rgba(255, 255, 255, 0.08);

	color:
		rgba(255, 255, 255, 0.93);

	font-size: 9px;
	font-weight: 750;

	letter-spacing: 0.14em;

	text-transform: uppercase;

	backdrop-filter: blur(10px);
}


.ph-blog-hero__eyebrow-icon {
	display: grid;

	width: 19px;
	height: 19px;

	place-items: center;
}


.ph-blog-hero__eyebrow-icon svg {
	width: 18px;
	height: 18px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}


.ph-blog-hero h1 {
	margin:
		0
		0
		18px;

	color: #ffffff;

	font-size:
		clamp(
			64px,
			5.5vw,
			92px
		);

	font-weight: 780;
	line-height: 0.94;

	letter-spacing: -4px;
}


.ph-blog-hero__content > p {
	max-width: 660px;

	margin:
		0
		0
		27px;

	color:
		rgba(255, 255, 255, 0.76);

	font-size: 15px;
	line-height: 1.7;
}


/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.ph-blog-hero__breadcrumb {
	display: flex;

	align-items: center;

	gap: 11px;

	color:
		rgba(255, 255, 255, 0.65);

	font-size: 12px;
	font-weight: 650;
}


.ph-blog-hero__breadcrumb a {
	display: inline-flex;

	align-items: center;

	gap: 7px;

	color: #ffffff;

	text-decoration: none;
}


.ph-blog-hero__breadcrumb svg {
	width: 16px;
	height: 16px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* ==========================================================================
   HERO SEARCH CARD
   ========================================================================== */

.ph-blog-hero-search-card {
	position: relative;

	padding: 30px;

	overflow: hidden;

	border:
		1px solid
		rgba(255, 255, 255, 0.18);

	border-radius: 26px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.16),
			rgba(255, 255, 255, 0.08)
		);

	box-shadow:
		0
		30px
		70px
		rgba(0, 20, 65, 0.20);

	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
}


.ph-blog-hero-search-card::before {
	position: absolute;

	top: -110px;
	right: -80px;

	width: 270px;
	height: 270px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(255, 255, 255, 0.13),
			transparent 70%
		);

	content: "";
}


.ph-blog-hero-search-card__eyebrow {
	position: relative;
	z-index: 2;

	display: block;

	margin-bottom: 5px;

	color:
		rgba(255, 255, 255, 0.69);

	font-size: 8px;
	font-weight: 800;

	letter-spacing: 0.14em;

	text-transform: uppercase;
}


.ph-blog-hero-search-card h2 {
	position: relative;
	z-index: 2;

	margin:
		0
		0
		19px;

	color: #ffffff;

	font-size: 27px;
	font-weight: 760;

	letter-spacing: -0.8px;
}


/* ==========================================================================
   HERO SEARCH FIELD
   ========================================================================== */

.ph-blog-hero-search {
	position: relative;
	z-index: 2;

	display: flex;

	align-items: center;

	gap: 9px;

	min-height: 65px;

	padding:
		7px
		7px
		7px
		18px;

	border-radius: 17px;

	background: #ffffff;

	box-shadow:
		0
		14px
		30px
		rgba(0, 29, 86, 0.10);
}


.ph-blog-hero-search__icon {
	display: grid;

	width: 25px;
	height: 25px;

	flex: 0 0 25px;

	place-items: center;

	color: #145fcf;
}


.ph-blog-hero-search__icon svg {
	width: 20px;
	height: 20px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.8;
}


.ph-blog-hero-search input {
	width: 100%;
	min-width: 0;

	height: 46px;

	border: 0;
	outline: 0;

	background: transparent;

	color: #284a80;

	font-family: inherit;
	font-size: 12px;
}


.ph-blog-hero-search input::placeholder {
	color: #8796af;
}


.ph-blog-hero-search button {
	display: inline-flex;

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

	gap: 8px;

	height: 49px;

	padding:
		0
		20px;

	border: 0;

	border-radius: 12px;

	background:
		linear-gradient(
			135deg,
			#0759ef,
			#247aff
		);

	color: #ffffff;

	box-shadow:
		0
		10px
		23px
		rgba(9, 84, 228, 0.25);

	font-size: 10px;
	font-weight: 750;

	cursor: pointer;
}


.ph-blog-hero-search button svg {
	width: 15px;
	height: 15px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.8;
}


/* ==========================================================================
   BLOG CONTENT AREA
   ========================================================================== */

.ph-blog-content {
	position: relative;

	padding:
		75px
		0
		100px;

	background:
		linear-gradient(
			180deg,
			#f4f7ff 0%,
			#ffffff 580px
		);
}


.ph-blog-content::before {
	position: absolute;

	top: 110px;
	left: -250px;

	width: 620px;
	height: 620px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(20, 96, 244, 0.05),
			transparent 70%
		);

	content: "";
}


.ph-blog-content__container {
	position: relative;
	z-index: 2;

	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		340px;

	align-items: start;

	gap: 35px;

	width: min(100% - 140px, 1600px);

	margin-inline: auto;
}


/* ==========================================================================
   BLOG HEADING
   ========================================================================== */

.ph-blog-heading {
	display: flex;

	align-items: flex-end;
	justify-content: space-between;

	gap: 25px;

	margin-bottom: 28px;
}


.ph-blog-heading__eyebrow {
	display: block;

	margin-bottom: 7px;

	color: var(--ph-blog-blue);

	font-size: 9px;
	font-weight: 800;

	letter-spacing: 0.14em;

	text-transform: uppercase;
}


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

	color: var(--ph-blog-navy);

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

	font-weight: 770;
	line-height: 1.06;

	letter-spacing: -1.5px;
}


.ph-blog-heading__actions {
	display: flex;

	align-items: center;

	gap: 8px;
}


.ph-blog-result-count {
	display: inline-flex;

	align-items: center;

	min-height: 35px;

	padding:
		0
		12px;

	border:
		1px solid
		#dae4f4;

	border-radius: 999px;

	background: #ffffff;

	color: #667c9f;

	font-size: 9px;
	font-weight: 700;
}


.ph-blog-clear {
	display: inline-flex;

	align-items: center;

	gap: 5px;

	min-height: 35px;

	padding:
		0
		12px;

	border-radius: 999px;

	background: #eaf2ff;

	color: #145fdc;

	font-size: 9px;
	font-weight: 750;

	text-decoration: none;
}


.ph-blog-clear svg {
	width: 12px;
	height: 12px;

	fill: none;
	stroke: currentColor;

	stroke-width: 2;
}


/* ==========================================================================
   BLOG GRID
   EXACTLY TWO POSTS PER ROW
   ========================================================================== */

.ph-blog-grid {
	display: grid;

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

	align-items: stretch;

	gap: 24px;
}


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

.ph-blog-card {
	position: relative;

	display: flex;
	flex-direction: column;

	min-width: 0;

	overflow: hidden;

	border:
		1px solid
		#dce5f3;

	border-radius: 23px;

	background: #ffffff;

	box-shadow:
		0
		13px
		37px
		rgba(20, 52, 113, 0.065);

	transition:
		transform
		0.4s
		cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow
		0.35s
		ease,
		border-color
		0.3s
		ease;
}


/* ==========================================================================
   BLOG IMAGE
   ========================================================================== */

.ph-blog-card__image {
	position: relative;

	display: block;

	width: 100%;
	height: 245px;

	overflow: hidden;

	background:
		linear-gradient(
			145deg,
			#eaf2ff,
			#dbe9ff
		);
}


.ph-blog-card__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform
		0.7s
		cubic-bezier(0.22, 1, 0.36, 1);
}


.ph-blog-card__image-overlay {
	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			180deg,
			transparent 45%,
			rgba(2, 26, 70, 0.28)
		);

	pointer-events: none;
}


/* ==========================================================================
   NO IMAGE
   ========================================================================== */

.ph-blog-card__placeholder {
	display: grid;

	width: 100%;
	height: 100%;

	place-items: center;

	color: #2875ef;

	background:
		linear-gradient(
			145deg,
			#edf4ff,
			#dbe8ff
		);
}


.ph-blog-card__placeholder svg {
	width: 65px;
	height: 65px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.3;
}


/* ==========================================================================
   CATEGORY BADGE
   ========================================================================== */

.ph-blog-card__category {
	position: absolute;

	left: 17px;
	bottom: 16px;

	display: inline-flex;

	align-items: center;

	min-height: 31px;

	padding:
		0
		11px;

	border:
		1px solid
		rgba(255, 255, 255, 0.28);

	border-radius: 999px;

	background:
		rgba(255, 255, 255, 0.94);

	box-shadow:
		0
		8px
		20px
		rgba(0, 25, 70, 0.10);

	color: #14478f;

	font-size: 8px;
	font-weight: 750;

	letter-spacing: 0.06em;

	text-transform: uppercase;

	backdrop-filter: blur(10px);
}


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

.ph-blog-card__body {
	display: flex;

	flex: 1;
	flex-direction: column;

	padding:
		24px
		24px
		22px;
}


.ph-blog-card__meta {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 13px;

	margin-bottom: 12px;
}


.ph-blog-card__meta span {
	display: inline-flex;

	align-items: center;

	gap: 5px;

	color: #7e8faa;

	font-size: 9px;
	font-weight: 650;
}


.ph-blog-card__meta svg {
	width: 13px;
	height: 13px;

	fill: none;
	stroke: #3b7ce9;

	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}


.ph-blog-card__title {
	margin:
		0
		0
		12px;

	color: var(--ph-blog-navy);

	font-size: 20px;
	font-weight: 760;
	line-height: 1.27;

	letter-spacing: -0.4px;
}


.ph-blog-card__title a {
	color: inherit;

	text-decoration: none;
}


.ph-blog-card__excerpt {
	margin:
		0
		0
		21px;

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

	font-size: 12px;
	line-height: 1.68;
}


.ph-blog-card__footer {
	margin-top: auto;
}


/* ==========================================================================
   READ ARTICLE
   ========================================================================== */

.ph-blog-card__read {
	display: inline-flex;

	align-items: center;

	gap: 9px;

	width: max-content;

	color: #145fdc;

	font-size: 10px;
	font-weight: 750;

	text-decoration: none;
}


.ph-blog-card__read-icon {
	display: grid;

	width: 32px;
	height: 32px;

	place-items: center;

	border-radius: 50%;

	background: #eaf2ff;

	color: #145fdc;

	transition:
		background
		0.3s
		ease,
		color
		0.3s
		ease,
		transform
		0.3s
		ease;
}


.ph-blog-card__read-icon svg {
	width: 14px;
	height: 14px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* ==========================================================================
   BLOG HOVER
   ========================================================================== */

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

	.ph-blog-card:hover {
		border-color:
			rgba(19, 97, 241, 0.25);

		box-shadow:
			0
			22px
			50px
			rgba(18, 53, 119, 0.12);

		transform:
			translateY(-5px);
	}


	.ph-blog-card:hover
	.ph-blog-card__image img {
		transform:
			scale(1.055);
	}


	.ph-blog-card:hover
	.ph-blog-card__read-icon {
		background:
			linear-gradient(
				145deg,
				#075cf4,
				#267bff
			);

		color: #ffffff;

		transform:
			translateX(3px);
	}
}


/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.ph-blog-sidebar {
	position: sticky;

	top: 105px;

	display: flex;

	flex-direction: column;

	gap: 20px;
}


/* ==========================================================================
   SIDEBAR CARD
   STRONGER PREMIUM STYLE
   ========================================================================== */

.ph-blog-sidebar-card {
	position: relative;

	padding: 23px;

	overflow: hidden;

	border:
		1px solid
		#cbd9ee;

	border-radius: 22px;

	background:
		linear-gradient(
			145deg,
			#ffffff 0%,
			#f0f5ff 100%
		);

	box-shadow:
		0
		18px
		45px
		rgba(17, 48, 108, 0.11);

	isolation: isolate;
}


.ph-blog-sidebar-card::before {
	position: absolute;

	top: -85px;
	right: -85px;

	width: 230px;
	height: 230px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(30, 104, 246, 0.16),
			transparent 70%
		);

	content: "";

	z-index: -1;
}


.ph-blog-sidebar-card::after {
	position: absolute;

	top: 25px;
	left: 0;

	width: 4px;
	height: 55px;

	border-radius:
		0
		5px
		5px
		0;

	background:
		linear-gradient(
			180deg,
			#075cf4,
			#4c90ff
		);

	content: "";
}


/* ==========================================================================
   SEARCH SIDEBAR SPECIAL
   ========================================================================== */

.ph-blog-sidebar-card--search {
	background:
		linear-gradient(
			145deg,
			#ffffff 0%,
			#edf4ff 100%
		);

	border-color: #c3d5ef;
}


/* ==========================================================================
   RECENT ARTICLES SPECIAL
   ========================================================================== */

.ph-blog-sidebar-card--recent {
	background:
		linear-gradient(
			155deg,
			#ffffff 0%,
			#f3f7ff 65%,
			#eaf2ff 100%
		);
}


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

.ph-blog-sidebar-card__heading {
	position: relative;
	z-index: 2;

	display: flex;

	align-items: center;

	gap: 12px;

	margin-bottom: 19px;
}


.ph-blog-sidebar-card__icon {
	display: grid;

	width: 46px;
	height: 46px;

	flex: 0 0 46px;

	place-items: center;

	border:
		1px solid
		#ccdaf1;

	border-radius: 13px;

	background:
		linear-gradient(
			145deg,
			#e6efff,
			#f8faff
		);

	box-shadow:
		0
		7px
		16px
		rgba(10, 84, 221, 0.08);

	color: #0b5cf6;
}


.ph-blog-sidebar-card__icon svg {
	width: 20px;
	height: 20px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}


.ph-blog-sidebar-card__heading > div > span {
	display: block;

	margin-bottom: 3px;

	color: #667fa8;

	font-size: 8px;
	font-weight: 800;

	letter-spacing: 0.14em;

	text-transform: uppercase;
}


.ph-blog-sidebar-card__heading h3 {
	margin: 0;

	color: #08275f;

	font-size: 19px;
	font-weight: 780;
	line-height: 1.1;
}


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

.ph-blog-sidebar-search {
	position: relative;
	z-index: 2;

	display: flex;

	align-items: center;

	min-height: 56px;

	padding:
		5px
		5px
		5px
		15px;

	border:
		1px solid
		#c9d8ef;

	border-radius: 14px;

	background: #ffffff;

	box-shadow:
		0
		8px
		18px
		rgba(22, 54, 114, 0.06);

	transition:
		border-color
		0.25s
		ease,
		box-shadow
		0.25s
		ease;
}


.ph-blog-sidebar-search:focus-within {
	border-color: #2771ec;

	box-shadow:
		0
		0
		0
		4px
		rgba(20, 96, 242, 0.07);
}


.ph-blog-sidebar-search input {
	width: 100%;
	min-width: 0;

	border: 0;
	outline: 0;

	background: transparent;

	color: #284879;

	font-family: inherit;
	font-size: 11px;
}


.ph-blog-sidebar-search input::placeholder {
	color: #8191ab;
}


.ph-blog-sidebar-search button {
	display: grid;

	width: 45px;
	height: 45px;

	flex: 0 0 45px;

	place-items: center;

	border: 0;

	border-radius: 11px;

	background:
		linear-gradient(
			145deg,
			#0759ef,
			#247aff
		);

	box-shadow:
		0
		10px
		23px
		rgba(10, 85, 227, 0.26);

	color: #ffffff;

	cursor: pointer;

	transition:
		transform
		0.25s
		ease;
}


.ph-blog-sidebar-search button:hover {
	transform:
		translateY(-2px);
}


.ph-blog-sidebar-search button svg {
	width: 18px;
	height: 18px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.9;
}


/* ==========================================================================
   RECENT ARTICLES
   ========================================================================== */

.ph-blog-recent {
	position: relative;
	z-index: 2;

	display: flex;

	flex-direction: column;

	gap: 8px;
}


.ph-blog-recent__item {
	display: grid;

	grid-template-columns:
		76px
		minmax(0, 1fr);

	align-items: center;

	gap: 11px;

	padding: 8px;

	border:
		1px solid
		transparent;

	border-radius: 13px;

	text-decoration: none;

	transition:
		background
		0.25s
		ease,
		border-color
		0.25s
		ease,
		transform
		0.25s
		ease;
}


.ph-blog-recent__image {
	width: 76px;
	height: 65px;

	overflow: hidden;

	border-radius: 10px;

	background: #e8f0fc;
}


.ph-blog-recent__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform
		0.45s
		ease;
}


.ph-blog-recent__placeholder {
	display: grid;

	width: 100%;
	height: 100%;

	place-items: center;

	color: #2d72e8;
}


.ph-blog-recent__placeholder svg {
	width: 23px;
	height: 23px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.6;
}


.ph-blog-recent__content {
	min-width: 0;
}


.ph-blog-recent__content h4 {
	display: -webkit-box;

	margin:
		0
		0
		5px;

	overflow: hidden;

	color: #11356f;

	font-size: 11px;
	font-weight: 730;
	line-height: 1.38;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}


.ph-blog-recent__content span {
	color: #7789a6;

	font-size: 8px;
	font-weight: 650;
}


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

	.ph-blog-recent__item:hover {
		border-color: #d9e4f4;

		background: #ffffff;

		transform:
			translateX(3px);
	}


	.ph-blog-recent__item:hover
	.ph-blog-recent__image img {
		transform:
			scale(1.055);
	}
}


/* ==========================================================================
   CATEGORIES
   ========================================================================== */

.ph-blog-categories {
	position: relative;
	z-index: 2;

	display: flex;

	flex-direction: column;

	gap: 8px;
}


.ph-blog-categories a {
	display: flex;

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

	gap: 10px;

	min-height: 47px;

	padding:
		7px
		7px
		7px
		13px;

	border:
		1px solid
		#d8e2f1;

	border-radius: 12px;

	background: #ffffff;

	color: #294777;

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

	text-decoration: none;

	transition:
		border-color
		0.25s
		ease,
		background
		0.25s
		ease,
		color
		0.25s
		ease,
		transform
		0.25s
		ease;
}


.ph-blog-categories small {
	display: grid;

	width: 31px;
	height: 31px;

	place-items: center;

	border-radius: 9px;

	background: #e8f1ff;

	color: #1761e2;

	font-size: 9px;
	font-weight: 750;
}


.ph-blog-categories a:hover {
	border-color:
		rgba(18, 96, 241, 0.28);

	background: #f4f8ff;

	color: #0b5cf6;

	transform:
		translateX(3px);
}


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

.ph-blog-pagination {
	display: flex;

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

	gap: 7px;

	margin-top: 45px;
}


.ph-blog-pagination
.page-numbers {
	display: inline-grid;

	min-width: 43px;
	height: 43px;

	padding:
		0
		10px;

	place-items: center;

	border:
		1px solid
		#dbe4f2;

	border-radius: 11px;

	background: #ffffff;

	box-shadow:
		0
		7px
		17px
		rgba(25, 56, 117, 0.04);

	color: #294b7f;

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

	text-decoration: none;

	box-sizing: border-box;
}


.ph-blog-pagination
.page-numbers.current {
	border-color: #0b5cf6;

	background:
		linear-gradient(
			145deg,
			#0759ef,
			#257aff
		);

	color: #ffffff;

	box-shadow:
		0
		10px
		22px
		rgba(12, 88, 230, 0.23);
}


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

.ph-blog-empty {
	display: flex;

	align-items: center;

	flex-direction: column;

	padding:
		75px
		35px;

	border:
		1px solid
		#dce5f3;

	border-radius: 26px;

	background:
		linear-gradient(
			145deg,
			#ffffff,
			#f5f8ff
		);

	box-shadow:
		0
		18px
		45px
		rgba(20, 53, 114, 0.07);

	text-align: center;
}


.ph-blog-empty__icon {
	display: grid;

	width: 80px;
	height: 80px;

	margin-bottom: 18px;

	place-items: center;

	border-radius: 50%;

	background: #eaf2ff;

	color: #0b5cf6;
}


.ph-blog-empty__icon svg {
	width: 38px;
	height: 38px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.6;
}


.ph-blog-empty h2 {
	margin:
		0
		0
		8px;

	color: var(--ph-blog-navy);

	font-size: 29px;
}


.ph-blog-empty p {
	max-width: 550px;

	margin:
		0
		0
		22px;

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

	font-size: 13px;
	line-height: 1.65;
}


.ph-blog-empty__button {
	display: inline-flex;

	align-items: center;

	min-height: 47px;

	padding:
		0
		21px;

	border-radius: 999px;

	background:
		linear-gradient(
			145deg,
			#0759ef,
			#2378ff
		);

	color: #ffffff;

	font-size: 10px;
	font-weight: 750;

	text-decoration: none;
}


/* ==========================================================================
   ENTRANCE ANIMATIONS
   ========================================================================== */

.ph-blog-reveal {
	opacity: 0;

	will-change:
		opacity,
		transform;

	transition:
		opacity
		0.75s
		ease,
		transform
		0.9s
		cubic-bezier(0.22, 1, 0.36, 1);
}


.ph-blog-reveal[
	data-blog-reveal="up"
] {
	transform:
		translate3d(
			0,
			28px,
			0
		);
}


.ph-blog-reveal[
	data-blog-reveal="right"
] {
	transform:
		translate3d(
			30px,
			10px,
			0
		);
}


.ph-blog-reveal.is-visible {
	opacity: 1;

	transform:
		translate3d(
			0,
			0,
			0
		);
}


/* ==========================================================================
   1440
   ========================================================================== */

@media (max-width: 1440px) {

	.ph-blog-hero__container,
	.ph-blog-content__container {
		width:
			calc(
				100% - 110px
			);
	}


	.ph-blog-hero {
		padding-top: 175px;
	}


	.ph-blog-content__container {
		grid-template-columns:
			minmax(0, 1fr)
			310px;

		gap: 28px;
	}


	.ph-blog-card__image {
		height: 220px;
	}
}


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

@media (max-width: 1024px) {

	.ph-blog-hero {
		min-height: auto;

		padding:
			155px
			0
			60px;
	}


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

		gap: 35px;

		width:
			calc(
				100% - 64px
			);
	}


	.ph-blog-hero__search {
		max-width: 650px;
	}


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

		width:
			calc(
				100% - 64px
			);
	}


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


	.ph-blog-sidebar {
		position: static;

		display: grid;

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


	.ph-blog-sidebar-card--categories {
		grid-column:
			1
			/
			-1;
	}
}


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

@media (max-width: 767px) {

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


	.ph-blog-hero__container {
		width:
			calc(
				100% - 36px
			);
	}


	.ph-blog-hero h1 {
		font-size: 50px;

		letter-spacing: -2px;
	}


	.ph-blog-hero__content > p {
		font-size: 14px;
	}


	.ph-blog-hero-search-card {
		padding: 18px;

		border-radius: 20px;
	}


	.ph-blog-hero-search {
		flex-wrap: wrap;

		padding: 9px;
	}


	.ph-blog-hero-search__icon {
		margin-left: 5px;
	}


	.ph-blog-hero-search input {
		width:
			calc(
				100% - 42px
			);
	}


	.ph-blog-hero-search button {
		width: 100%;

		margin-top: 3px;
	}


	.ph-blog-content {
		padding:
			50px
			0
			68px;
	}


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


	.ph-blog-heading {
		align-items: flex-start;

		flex-direction: column;
	}


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


	.ph-blog-card__image {
		height: 225px;
	}


	.ph-blog-sidebar {
		display: flex;

		flex-direction: column;
	}


	.ph-blog-sidebar-card--categories {
		grid-column: auto;
	}
}


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

@media (max-width: 480px) {

	.ph-blog-heading h2 {
		font-size: 31px;
	}


	.ph-blog-card {
		border-radius: 19px;
	}


	.ph-blog-card__body {
		padding:
			21px
			18px;
	}


	.ph-blog-card__image {
		height: 205px;
	}


	.ph-blog-card__title {
		font-size: 19px;
	}


	.ph-blog-sidebar-card {
		padding: 19px;

		border-radius: 19px;
	}
}


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

.ph-blog-page
a:focus-visible,

.ph-blog-page
button:focus-visible,

.ph-blog-page
input:focus-visible {
	outline:
		3px solid
		rgba(11, 92, 246, 0.28);

	outline-offset: 3px;
}


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

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

	.ph-blog-reveal {
		opacity: 1 !important;

		transform: none !important;

		transition: none !important;
	}


	.ph-blog-card,
	.ph-blog-card__image img,
	.ph-blog-recent__item,
	.ph-blog-card__read-icon {
		transition: none !important;
	}
}
/* ==========================================================================
   CATEGORY ARCHIVE ADDITIONS
   ========================================================================== */

.ph-blog-hero__description {
	max-width: 660px;

	margin:
		0
		0
		27px;

	color:
		rgba(255, 255, 255, 0.76);

	font-size: 15px;
	line-height: 1.7;
}


.ph-blog-hero__description p {
	margin: 0;
}


/* Active category */

.ph-blog-categories a.is-active {
	border-color: #0b5cf6;

	background:
		linear-gradient(
			135deg,
			#0759ef,
			#247aff
		);

	color: #ffffff;

	box-shadow:
		0
		10px
		24px
		rgba(11, 92, 246, 0.20);

	transform: none;
}


.ph-blog-categories a.is-active small {
	background:
		rgba(255, 255, 255, 0.17);

	color: #ffffff;
}


/* Category card heading should behave exactly like Blog archive cards */

.ph-blog-category-page
.ph-blog-card__title {
	margin:
		0
		0
		12px;
}


/* Category page hero heading may be longer than "Blogs" */

.ph-blog-category-page
.ph-blog-hero h1 {
	max-width: 820px;

	font-size:
		clamp(
			52px,
			4.8vw,
			84px
		);

	line-height: 0.98;

	letter-spacing: -3px;
}


@media (max-width: 767px) {

	.ph-blog-category-page
	.ph-blog-hero h1 {
		font-size: 43px;

		letter-spacing: -1.7px;
	}
}