/* Orion Blog Listing (home.php / archive.php / author.php) — matches
   blogs.html / blog-2.html / blog-3.html header + toolbar + load-more.
   Breakpoints: sm=640, md=769, lg=992, xl=1199, 1xl=1380, 2xl=1752.

   Section padding mirrors HTML:
   py-[34px] sm:py-[38px] md:py-[60px] xl:py-[70px] */

.orion-blog-listing-page {
	padding: 0 0 34px;
}
@media (min-width: 640px) { .orion-blog-listing-page { padding: 0 0 38px; } }
@media (min-width: 769px) { .orion-blog-listing-page { padding: 0 0 60px; } }
@media (min-width: 1199px) { .orion-blog-listing-page { padding: 0 0 70px; } }

/* HTML .container always uses px-4 (16px). theme style.css drops to
   --orion-spacing-sm (8px) below 769px — restore 16px on the blog page. */
.orion-blog-listing-page .container,
.orion-blog-listing__header .container,
.orion-blog-listing > .container {
	padding-left: 16px;
	padding-right: 16px;
}

/* Keep legacy header class working when page wrapper is absent (archives). */
.orion-blog-listing__header {
	padding: 0;
	margin: 0;
}

.orion-blog-listing__header .container {
	margin-bottom: 28px;
}
@media (min-width: 640px) { .orion-blog-listing__header .container { margin-bottom: 34px; } }
@media (min-width: 769px) { .orion-blog-listing__header .container { margin-bottom: 40px; } }

/* HTML: title + intro sit in a w-fit wrapper so intro's 80% max-width
   resolves against the heading cluster, not the full container. */
.orion-blog-listing__heading {
	width: fit-content;
	max-width: 100%;
}

/* HTML author/category `h2.title` — El Messiri medium, h2 fluid schedule.
   !important beats Global Typography flat H1 size/weight (same specificity otherwise). */
html body h1.orion-blog-listing__title,
h1.orion-blog-listing__title {
	margin: 0 0 8px !important;
	width: fit-content;
	max-width: none;
	font-family: "El Messiri", var(--orion-font-heading, sans-serif) !important;
	font-weight: 500 !important;
	font-size: 26px !important;
	line-height: 36px !important;
	color: #000;
	text-transform: none !important;
	letter-spacing: normal !important;
}
@media (min-width: 640px) {
	html body h1.orion-blog-listing__title,
	h1.orion-blog-listing__title {
		font-size: 30px !important;
		line-height: 40px !important;
		margin-bottom: 12px !important;
	}
}
@media (min-width: 769px) {
	html body h1.orion-blog-listing__title,
	h1.orion-blog-listing__title {
		font-size: 35px !important;
		line-height: 40px !important;
		margin-bottom: 16px !important;
	}
}
@media (min-width: 1199px) {
	html body h1.orion-blog-listing__title,
	h1.orion-blog-listing__title {
		font-size: 40px !important;
		line-height: 50px !important;
	}
}
@media (min-width: 1380px) {
	html body h1.orion-blog-listing__title,
	h1.orion-blog-listing__title {
		font-size: 46px !important;
		line-height: 55px !important;
	}
}
@media (min-width: 1752px) {
	html body h1.orion-blog-listing__title,
	h1.orion-blog-listing__title {
		font-size: 60px !important;
		line-height: 70px !important;
	}
}

html body .orion-blog-listing__intro,
.orion-blog-listing__intro {
	max-width: 100%;
	margin: 0;
	color: #464343 !important;
	font-family: Lexend, var(--orion-font-body, sans-serif) !important;
	font-size: 14px !important;
	font-weight: 300 !important;
	line-height: 23px !important;
}
@media (min-width: 640px) {
	.orion-blog-listing__intro { max-width: 80%; }
}
/* HTML intro has no sm:text-* — body/p size holds until larger breakpoints. */
@media (min-width: 992px) {
	html body .orion-blog-listing__intro,
	.orion-blog-listing__intro { font-size: 15px !important; line-height: 25px !important; }
}
@media (min-width: 1199px) {
	html body .orion-blog-listing__intro,
	.orion-blog-listing__intro { line-height: 26px !important; }
}
@media (min-width: 1380px) {
	html body .orion-blog-listing__intro,
	.orion-blog-listing__intro { line-height: 28px !important; }
}
@media (min-width: 1752px) {
	html body .orion-blog-listing__intro,
	.orion-blog-listing__intro { max-width: 65%; font-size: 18px !important; line-height: 32px !important; }
}

/* category.html header cluster: lg:mb-[50px] md:mb-10 sm:mb-[34px] mb-7 */
.orion-category-page .orion-blog-listing__header .container {
	margin-bottom: 28px;
}
@media (min-width: 640px) { .orion-category-page .orion-blog-listing__header .container { margin-bottom: 34px; } }
@media (min-width: 769px) { .orion-category-page .orion-blog-listing__header .container { margin-bottom: 40px; } }
@media (min-width: 992px) { .orion-category-page .orion-blog-listing__header .container { margin-bottom: 50px; } }

/* category.html grid gaps:
   gap-[25px] sm:gap-x-8 md:gap-6 lg:gap-8
   xl:gap-x-[65px] 1xl:gap-x-[70px] 2xl:gap-x-[75px]
   + lg:grid-cols-3 */
.orion-category-page .orion-lb__grid {
	column-gap: 25px;
	row-gap: 25px;
}
@media (min-width: 640px) {
	.orion-category-page .orion-lb__grid {
		column-gap: 32px;
		row-gap: 25px;
	}
}
@media (min-width: 769px) {
	.orion-category-page .orion-lb__grid {
		column-gap: 24px;
		row-gap: 24px;
	}
}
@media (min-width: 992px) {
	.orion-category-page .orion-lb__grid {
		grid-template-columns: repeat(3, 1fr);
		column-gap: 32px;
		row-gap: 32px;
	}
}
@media (min-width: 1199px) {
	.orion-category-page .orion-lb__grid { column-gap: 65px; }
}
@media (min-width: 1380px) {
	.orion-category-page .orion-lb__grid { column-gap: 70px; }
}
@media (min-width: 1752px) {
	.orion-category-page .orion-lb__grid { column-gap: 75px; }
}

/* author.html header: flex items-center justify-between md:flex-row flex-col
   lg:mb-[50px] mb-10 relative md:text-left text-center */
.orion-author-header__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	position: relative;
}
@media (min-width: 769px) {
	.orion-author-header__row {
		flex-direction: row;
		align-items: center;
		text-align: left;
	}
}

.orion-author-page .orion-blog-listing__header .container {
	margin-bottom: 40px;
}
@media (min-width: 992px) {
	.orion-author-page .orion-blog-listing__header .container { margin-bottom: 50px; }
}

.orion-author-page .orion-blog-listing__title {
	width: auto;
	max-width: 100%;
}

/* author.html intro: md:max-w-[90%] lg:max-w-[80%] 2xl:max-w-[65%] */
.orion-author-header__bio {
	max-width: 100%;
}
@media (min-width: 769px) {
	.orion-author-header__bio { max-width: 90%; }
}
@media (min-width: 992px) {
	.orion-author-header__bio { max-width: 80%; }
}
@media (min-width: 1752px) {
	.orion-author-header__bio { max-width: 65%; }
}

.orion-author-header__social {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 14px;
	margin-top: 25px;
	flex-shrink: 0;
}
@media (min-width: 640px) {
	.orion-author-header__social { gap: 15px; }
}
@media (min-width: 769px) {
	.orion-author-header__social { margin-top: 0; }
}
@media (min-width: 1380px) {
	.orion-author-header__social { gap: 18px; }
}

/* HTML: !p-1 btn btn-primary rounded-full 35/40/50 */
.orion-author-header__social-link.btn,
.orion-author-header__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	min-width: 35px;
	padding: 4px;
	border-radius: 9999px;
	flex-shrink: 0;
	overflow: hidden;
	box-sizing: border-box;
	text-decoration: none;
}
@media (min-width: 1199px) {
	.orion-author-header__social-link.btn,
	.orion-author-header__social-link {
		width: 40px;
		height: 40px;
		min-width: 40px;
	}
}
@media (min-width: 1752px) {
	.orion-author-header__social-link.btn,
	.orion-author-header__social-link {
		width: 50px;
		height: 50px;
		min-width: 50px;
	}
}

.orion-author-header__social-link svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
@media (min-width: 640px) {
	.orion-author-header__social-link svg.orion-author-x,
	.orion-author-header__social-link[href*="x.com"] svg {
		width: 19px;
		height: 19px;
	}
}
@media (min-width: 1199px) {
	.orion-author-header__social-link svg {
		width: 20px;
		height: 20px;
	}
	.orion-author-header__social-link[href*="x.com"] svg {
		width: 22px;
		height: 22px;
	}
}
@media (min-width: 1752px) {
	.orion-author-header__social-link svg {
		width: 22px;
		height: 22px;
	}
}

.orion-author-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
}

.orion-author-header__avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.orion-blog-listing.orion-lb,
.orion-blog-listing-page .orion-lb {
	margin-bottom: 0;
}
.orion-blog-listing__toolbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	padding-bottom: 22px;
	margin-bottom: 25px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.149);
	position: relative;
}
@media (min-width: 640px) {
	.orion-blog-listing__toolbar {
		align-items: center;
		flex-wrap: nowrap;
		gap: 18px;
		padding-bottom: 24px;
	}
}
@media (min-width: 769px) { .orion-blog-listing__toolbar { margin-bottom: 28px; } }
@media (min-width: 992px) { .orion-blog-listing__toolbar { margin-bottom: 36px; } }
@media (min-width: 1199px) {
	.orion-blog-listing__toolbar { padding-bottom: 28px; margin-bottom: 44px; }
}

/* HTML: md:block hidden — typography matches theme `p, .p`:
   text-sm / leading-[23px]
   lg:text-[15px] lg:leading-[25px]
   xl:leading-[26px]
   1xl:leading-7
   2xl:text-lg 2xl:leading-8 */
.orion-blog-listing__browse-label {
	display: none;
	margin: 0;
	color: #000;
	font-family: Lexend, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 23px;
	text-transform: none;
	cursor: default;
	text-align: start;
}
@media (min-width: 640px) {
	.orion-blog-listing__browse-label { text-align: center; }
}
@media (min-width: 769px) {
	.orion-blog-listing__browse-label { display: block; }
}
@media (min-width: 992px) {
	.orion-blog-listing__browse-label {
		font-size: 15px;
		line-height: 25px;
	}
}
@media (min-width: 1199px) {
	.orion-blog-listing__browse-label { line-height: 26px; }
}
@media (min-width: 1380px) {
	.orion-blog-listing__browse-label { line-height: 28px; }
}
@media (min-width: 1752px) {
	.orion-blog-listing__browse-label {
		font-size: 18px;
		line-height: 32px;
	}
}

/* Category filter — HTML: md:w-auto w-full */
.orion-blog-filter {
	position: relative;
	width: 100%;
}
@media (min-width: 769px) {
	.orion-blog-filter { width: auto; }
}

/* HTML button: flex items-center w-full md:justify-center justify-between */
.orion-blog-filter__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 4px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: #000;
	font-family: Lexend, sans-serif;
}
@media (min-width: 769px) {
	.orion-blog-filter__toggle {
		justify-content: center;
		width: auto;
	}
}

/* HTML inner <p> — same `p, .p` schedule as browse label */
.orion-blog-filter__label {
	margin: 0;
	color: #000;
	font-family: Lexend, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 23px;
	text-align: start;
}
@media (min-width: 992px) {
	.orion-blog-filter__label {
		font-size: 15px;
		line-height: 25px;
	}
}
@media (min-width: 1199px) {
	.orion-blog-filter__label { line-height: 26px; }
}
@media (min-width: 1380px) {
	.orion-blog-filter__label { line-height: 28px; }
}
@media (min-width: 1752px) {
	.orion-blog-filter__label {
		font-size: 18px;
		line-height: 32px;
	}
}

/* HTML: <span class="ml-1 font-normal"> — black, weight 400 (NOT primary/bold) */
.orion-blog-filter__current {
	margin-left: 4px;
	color: #000;
	font-weight: 400;
}

/* HTML chevron: h-4 w-4 SVG */
.orion-blog-filter__chevron {
	display: block;
	width: 16px;
	height: 16px;
	margin-left: 4px;
	flex-shrink: 0;
	color: currentColor;
	transition: transform 0.2s ease;
	transform-origin: center;
}

.orion-blog-filter.is-open .orion-blog-filter__chevron {
	transform: rotate(180deg);
}

/* HTML menu:
   absolute right-0 + mt-[23px]/md:mt-[28.5px]
   max-w-[350px] w-full bg-white shadow-[0_3px_10px_0_rgba(0,0,0,0.15)]
   xl:px-[30px] sm:py-[7px] md:px-6 px-4 */
.orion-blog-filter__menu {
	display: none;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 40;
	width: 100%;
	max-width: 350px;
	margin: 23px 0 0;
	padding: 0 16px;
	background: #fff;
	box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
}
@media (min-width: 640px) {
	.orion-blog-filter__menu { padding-top: 7px; padding-bottom: 7px; }
}
@media (min-width: 769px) {
	.orion-blog-filter__menu {
		width: 350px;
		margin-top: 28.5px;
		padding-left: 24px;
		padding-right: 24px;
	}
}
@media (min-width: 1199px) {
	.orion-blog-filter__menu {
		padding-left: 30px;
		padding-right: 30px;
	}
}

.orion-blog-filter.is-open .orion-blog-filter__menu {
	display: block;
}

.orion-blog-filter__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.orion-blog-filter__list > li {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.orion-blog-filter__list > li:last-child {
	border-bottom: none;
}

/* HTML option: block 2xl:py-[16px] py-3 p text-black hover:text-primary-900 text-start */
.orion-blog-filter__option {
	display: block;
	width: 100%;
	padding: 12px 0;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	color: #000;
	font-family: Lexend, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 23px;
}
@media (min-width: 992px) {
	.orion-blog-filter__option {
		font-size: 15px;
		line-height: 25px;
	}
}
@media (min-width: 1199px) {
	.orion-blog-filter__option { line-height: 26px; }
}
@media (min-width: 1380px) {
	.orion-blog-filter__option { line-height: 28px; }
}
@media (min-width: 1752px) {
	.orion-blog-filter__option {
		font-size: 18px;
		line-height: 32px;
		padding-top: 16px;
		padding-bottom: 16px;
	}
}

.orion-blog-filter__option:hover,
.orion-blog-filter__option:focus-visible {
	color: var(--orion-primary, var(--orion-primary));
}

/* Blog Grid columns — Card Grid (style2) only, desktop+. */
@media (min-width: 1199px) {
	.orion-blog-listing .orion-lb2__grid {
		grid-template-columns: repeat(var(--orion-blog-grid-columns, 3), 1fr);
	}
}

/* Style2 listing cards: unlayered overrides so they beat Tailwind @layer
   AND the shared style1 .orion-lb__card / .orion-lb__meta / .orion-lb__item-title rules. */
.orion-blog-listing .blog-box.orion-lb__card,
.orion-lb--style2 .blog-box.orion-lb__card,
.blogs-2 .blog-box.orion-lb__card {
	border-bottom: 0;
	padding-bottom: 0;
	background-color: #f5f6f6;
}

.orion-blog-listing .blogs-2 .blog-box .blog-date.orion-lb__meta,
.blogs-2 .blog-box .blog-date.orion-lb__meta {
	margin: 0 0 12px;
	font-weight: 600;
	color: var(--orion-primary, var(--orion-primary));
	text-transform: uppercase;
}
@media (min-width: 640px) {
	.orion-blog-listing .blogs-2 .blog-box .blog-date.orion-lb__meta,
	.blogs-2 .blog-box .blog-date.orion-lb__meta { margin-bottom: 16px; }
}
@media (min-width: 1199px) {
	.orion-blog-listing .blogs-2 .blog-box .blog-date.orion-lb__meta,
	.blogs-2 .blog-box .blog-date.orion-lb__meta { margin-bottom: 20px; }
}

.orion-blog-listing .blogs-2 .blog-box .blog-title.orion-lb__item-title,
.blogs-2 .blog-box .blog-title.orion-lb__item-title {
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 1px solid #e2e2e2;
	font-family: "El Messiri", var(--orion-font-heading, sans-serif) !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	line-height: 28px !important;
	color: #000;
	text-transform: none !important;
}
@media (min-width: 769px) {
	.orion-blog-listing .blogs-2 .blog-box .blog-title.orion-lb__item-title,
	.blogs-2 .blog-box .blog-title.orion-lb__item-title {
		margin-bottom: 20px;
		padding-bottom: 20px;
		font-size: 22px !important;
	}
}
@media (min-width: 1199px) {
	.orion-blog-listing .blogs-2 .blog-box .blog-title.orion-lb__item-title,
	.blogs-2 .blog-box .blog-title.orion-lb__item-title {
		font-size: 24px !important;
		line-height: 32px !important;
	}
}
@media (min-width: 1380px) {
	.orion-blog-listing .blogs-2 .blog-box .blog-title.orion-lb__item-title,
	.blogs-2 .blog-box .blog-title.orion-lb__item-title { line-height: 36px !important; }
}
@media (min-width: 1752px) {
	.orion-blog-listing .blogs-2 .blog-box .blog-title.orion-lb__item-title,
	.blogs-2 .blog-box .blog-title.orion-lb__item-title {
		font-size: 30px !important;
		line-height: 42px !important;
	}
}

.orion-blog-listing .orion-lb2__excerpt,
.orion-lb2__excerpt {
	margin: 0;
	color: #464343;
	font-family: Lexend, sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 23px;
}
@media (min-width: 992px) {
	.orion-blog-listing .orion-lb2__excerpt,
	.orion-lb2__excerpt { font-size: 15px; line-height: 25px; }
}
@media (min-width: 1199px) {
	.orion-blog-listing .orion-lb2__excerpt,
	.orion-lb2__excerpt { line-height: 26px; }
}
@media (min-width: 1380px) {
	.orion-blog-listing .orion-lb2__excerpt,
	.orion-lb2__excerpt { line-height: 28px; }
}
@media (min-width: 1752px) {
	.orion-blog-listing .orion-lb2__excerpt,
	.orion-lb2__excerpt { font-size: 18px; line-height: 32px; }
}

/* Excerpt for style1 ("Simple List") */
.orion-lb__excerpt {
	margin: 8px 0 0;
	color: #9CA3AF;
}

/* "Read More" link */
.orion-lb__readmore,
.orion-lb2__readmore {
	display: inline-block;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--orion-primary, var(--orion-primary));
	text-decoration: underline;
	text-underline-offset: 3px;
}

.orion-lb__readmore:hover,
.orion-lb2__readmore:hover {
	color: var(--orion-primary-dark, var(--orion-primary, var(--orion-primary)));
}

/* Load more — HTML: 2xl:mt-20 1xl:mt-17 lg:mt-15 md:mt-12 mt-9
   (= 36 / 48 / 60 / 68 / 80). Icon stays visible like the reference. */
.orion-blog-listing__load-more-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 36px;
}
@media (min-width: 769px) { .orion-blog-listing__load-more-wrap { margin-top: 48px; } }
@media (min-width: 992px) { .orion-blog-listing__load-more-wrap { margin-top: 60px; } }
@media (min-width: 1380px) { .orion-blog-listing__load-more-wrap { margin-top: 68px; } }
@media (min-width: 1752px) { .orion-blog-listing__load-more-wrap { margin-top: 80px; } }

/* Loader icon — hidden by default; only visible while AJAX is in flight. */
.orion-blog-listing__load-more .animate-spin {
	display: none;
	width: 21px;
	height: 21px;
	flex-shrink: 0;
}

.orion-blog-listing__load-more.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

.orion-blog-listing__load-more.is-loading .animate-spin {
	display: inline-block;
	animation: orion-blog-lm-spin 0.8s linear infinite;
}

@keyframes orion-blog-lm-spin {
	to { transform: rotate(360deg); }
}

.orion-blog-listing__load-more-error {
	color: #c0392b;
	font-size: 14px;
	text-align: center;
}

.orion-blog-listing__load-more-done {
	color: #666;
	font-size: 14px;
	text-align: center;
}

.orion-blog-listing__empty {
	text-align: center;
	color: #666;
	padding: 60px 0;
}

@media (max-width: 768px) {
	.orion-blog-filter__menu {
		left: 0;
		right: 0;
		max-width: none;
	}
}