/* Orion Latest Blogs — matches the real blog section markup exactly,
   using this project's real breakpoints:
   sm=640, md=769, lg=992, xl=1199, 1xl=1380, 2xl=1752. */

.orion-lb {
	width: 100%;
	position: relative;
	z-index: 1;
	margin-bottom: 32px;
}
@media (min-width: 769px) { .orion-lb { margin-bottom: 50px; } }
@media (min-width: 992px) { .orion-lb { margin-bottom: 60px; } }
@media (min-width: 1380px) { .orion-lb { margin-bottom: 80px; } }
@media (min-width: 1752px) { .orion-lb { margin-bottom: 100px; } }


/* Layout 1 sits in index.html's wide ".container", not index-2.html's
   narrower ".container-2", so restate that schedule for this section only. */
@media (min-width: 640px)  { .orion-lb__container { max-width: 640px; } }
@media (min-width: 769px)  { .orion-lb__container { max-width: 769px; } }
@media (min-width: 992px)  { .orion-lb__container { max-width: 992px; } }
@media (min-width: 1199px) { .orion-lb__container { max-width: 1199px; } }
@media (min-width: 1380px) { .orion-lb__container { max-width: 1380px; } }
@media (min-width: 1752px) { .orion-lb__container { max-width: 1752px; } }

/* Header */
.orion-lb__header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 28px;
}
@media (min-width: 640px) { .orion-lb__header { flex-direction: row; align-items: center; justify-content: space-between; } }
@media (min-width: 1199px) { .orion-lb__header { margin-bottom: 36px; } }
@media (min-width: 1380px) { .orion-lb__header { margin-bottom: 44px; } }

.orion-lb__header-left { min-width: 0; }

/* HTML global h2 schedule (beats Customizer --orion-h2-size).
   text-[26px] sm:text-3xl md:text-[35px] xl:text-4xl(40) 1xl:text-[46px] 2xl:text-5xl(60) */
html body h2.orion-lb__title,
html body h2.orion-lb3__title,
html body h2.orion-lb4__title,
h2.orion-lb__title,
h2.orion-lb3__title,
h2.orion-lb4__title {
	margin: 0;
	color: #000;
	font-family: var(--orion-font-heading, "El Messiri", serif) !important;
	font-size: 26px !important;
	line-height: 36px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}
html body h2.orion-lb__title,
html body h2.orion-lb3__title,
h2.orion-lb__title,
h2.orion-lb3__title {
	font-weight: 400 !important; /* index.html / index-3: font-normal */
}
html body h2.orion-lb4__title,
h2.orion-lb4__title {
	font-weight: 500 !important; /* index-4: default h2 font-medium */
}
@media (min-width: 640px) {
	html body h2.orion-lb__title,
	html body h2.orion-lb3__title,
	html body h2.orion-lb4__title,
	h2.orion-lb__title,
	h2.orion-lb3__title,
	h2.orion-lb4__title { font-size: 30px !important; line-height: 40px !important; }
}
@media (min-width: 769px) {
	html body h2.orion-lb__title,
	html body h2.orion-lb3__title,
	html body h2.orion-lb4__title,
	h2.orion-lb__title,
	h2.orion-lb3__title,
	h2.orion-lb4__title { font-size: 35px !important; line-height: 40px !important; }
}
@media (min-width: 1199px) {
	html body h2.orion-lb__title,
	html body h2.orion-lb3__title,
	html body h2.orion-lb4__title,
	h2.orion-lb__title,
	h2.orion-lb3__title,
	h2.orion-lb4__title { font-size: 40px !important; line-height: 50px !important; }
}
@media (min-width: 1380px) {
	html body h2.orion-lb__title,
	html body h2.orion-lb3__title,
	html body h2.orion-lb4__title,
	h2.orion-lb__title,
	h2.orion-lb3__title,
	h2.orion-lb4__title { font-size: 46px !important; line-height: 55px !important; }
}
@media (min-width: 1752px) {
	html body h2.orion-lb__title,
	html body h2.orion-lb3__title,
	html body h2.orion-lb4__title,
	h2.orion-lb__title,
	h2.orion-lb3__title,
	h2.orion-lb4__title { font-size: 60px !important; line-height: 70px !important; }
}

p.orion-lb__description {
	margin: 8px 0 0;
	color: #464343;
	font-family: var(--orion-font-body, Lexend, sans-serif) !important;
	font-weight: 300 !important;
	font-size: 14px !important;
	line-height: 23px !important;
	width: 100%;
}
@media (min-width: 640px) { p.orion-lb__description { width: 96%; } }
@media (min-width: 769px) { p.orion-lb__description { width: 88%; } }
@media (min-width: 992px) {
	p.orion-lb__description {
		width: 71%;
		font-size: 15px !important;
		line-height: 25px !important;
	}
}
@media (min-width: 1199px) {
	p.orion-lb__description {
		width: 62%;
		margin-top: 10px;
		line-height: 26px !important;
	}
}
@media (min-width: 1380px) {
	p.orion-lb__description {
		width: 62%;
		margin-top: 12px;
		line-height: 28px !important;
	}
}
@media (min-width: 1752px) {
	p.orion-lb__description {
		width: 60%;
		font-size: 18px !important;
		line-height: 30px !important;
	}
}

/* Explore button layout only — padding/typography/colors via Elementor Style → Button.
   Responsive padding below is a fallback when Elementor button_padding is unset. */
.orion-lb__explore-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	white-space: nowrap;
	text-align: start;
	letter-spacing: normal;
	padding: 5px 16px;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 640px)  { .orion-lb__explore-btn { padding: 8px 20px; } }
@media (min-width: 1199px) { .orion-lb__explore-btn { padding: 10px 28px; } }
@media (min-width: 1380px) { .orion-lb__explore-btn { padding: 10px 34px; } }
@media (min-width: 1752px) { .orion-lb__explore-btn { padding: 12px 40px; } }

.orion-lb__explore-wrap--desktop { display: none; flex-shrink: 0; }
@media (min-width: 640px) { .orion-lb__explore-wrap--desktop { display: block; } }
.orion-lb__explore-wrap--mobile { display: block; margin-top: 30px; }
@media (min-width: 640px) { .orion-lb__explore-wrap--mobile { display: none; } }

/* Swiper */
.orion-lb-swiper { width: 100%; overflow: hidden; }

/* Swiper's own ".swiper-slide{height:100%}" gives the slide a definite height,
   which stops it stretching, so cards with shorter titles end up shorter and
   their bottom rules no longer line up. The reference cancels it with "!h-auto". */
.orion-lb-swiper .orion-lb__slide { height: auto; }

.orion-lb__card {
	display: block;
	height: 100%;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	padding-bottom: 20px;
}
@media (min-width: 1752px) { .orion-lb__card { padding-bottom: 25px; } }

.orion-lb__image-box {
	position: relative;
	overflow: hidden;
}
.orion-lb__image-box::before { content: ''; display: block; padding-top: 108%; }
@media (min-width: 640px) { .orion-lb__image-box::before { padding-top: 112%; } }
@media (min-width: 1752px) { .orion-lb__image-box::before { padding-top: 110%; } }

/* Compound selector needed to beat Elementor's global
   ".elementor img{height:auto;max-width:100%}" reset (0,1,1 specificity). */
.orion-lb__image-box .orion-lb__image-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	max-width: none;
}

.orion-lb__expand {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.8);
	color: #000;
	display: none;
	align-items: center;
	justify-content: center;
}
.orion-lb__expand svg { width: 37px; height: auto; flex-shrink: 0; }
@media (min-width: 640px) {
	.orion-lb__expand { width: 62px; height: 62px; }
	.orion-lb__expand svg { width: 55px; }
}
@media (min-width: 992px) { .orion-lb__expand { top: 20px; right: 20px; } }
@media (min-width: 1199px) {
	.orion-lb__expand { width: 68px; height: 68px; }
	.orion-lb__expand svg { width: 60px; }
}
@media (min-width: 1752px) {
	.orion-lb__expand { width: 85px; height: 85px; }
	.orion-lb__expand svg { width: 69px; }
}
.orion-lb__card:hover .orion-lb__expand { display: flex; }
.orion-lb__expand:hover { background-color: #fff; color: var(--orion-primary); }

.orion-lb__info { margin-top: 16px; }
@media (min-width: 769px) { .orion-lb__info { margin-top: 24px; } }
@media (min-width: 1380px) { .orion-lb__info { margin-top: 26px; } }
@media (min-width: 1752px) { .orion-lb__info { margin-top: 42px; } }

/* The reference's first card carries a different margin schedule from the rest
   ("xl:mt-5" against "1xl:mt-[26px] md:mt-6"); reproduced here rather than
   normalised, since the HTML is the source of truth. */
@media (min-width: 769px)  { .orion-lb__slide:first-child .orion-lb__info { margin-top: 16px; } }
@media (min-width: 1199px) { .orion-lb__slide:first-child .orion-lb__info { margin-top: 20px; } }
@media (min-width: 1752px) { .orion-lb__slide:first-child .orion-lb__info { margin-top: 42px; } }

/* Style1 cards — HTML `p.h6.text-primary-900.font-medium` */
html body p.orion-lb__meta,
html body p.orion-lb__meta.h6,
.orion-lb--style1 .orion-lb__meta.h6,
.orion-lb__meta.h6,
.orion-lb__meta {
	margin: 0 0 12px;
	color: var(--orion-primary);
	font-family: var(--orion-font-body, Lexend, sans-serif) !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	line-height: 23px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
@media (min-width: 640px) {
	html body p.orion-lb__meta,
	html body p.orion-lb__meta.h6,
	.orion-lb--style1 .orion-lb__meta.h6,
	.orion-lb__meta.h6,
	.orion-lb__meta {
		font-size: 16px !important;
		line-height: 23px !important;
	}
}
@media (min-width: 992px) {
	html body p.orion-lb__meta,
	html body p.orion-lb__meta.h6,
	.orion-lb--style1 .orion-lb__meta.h6,
	.orion-lb__meta.h6,
	.orion-lb__meta {
		font-size: 17px !important;
		line-height: 25px !important;
	}
}
@media (min-width: 1199px) {
	html body p.orion-lb__meta,
	html body p.orion-lb__meta.h6,
	.orion-lb--style1 .orion-lb__meta.h6,
	.orion-lb__meta.h6,
	.orion-lb__meta {
		font-size: 18px !important;
		line-height: 32px !important;
	}
}
@media (min-width: 1752px) {
	html body p.orion-lb__meta,
	html body p.orion-lb__meta.h6,
	.orion-lb--style1 .orion-lb__meta.h6,
	.orion-lb__meta.h6,
	.orion-lb__meta {
		margin-bottom: 20px;
		font-size: 22px !important;
		line-height: 32px !important;
	}
}

/* Post title matches HTML `h5.font-medium.h4` fluid schedule */
html body h5.orion-lb__item-title,
.orion-lb__item-title {
	margin: 0;
	font-family: var(--orion-font-heading, "El Messiri", serif) !important;
	font-weight: 500 !important;
	color: #000;
	font-size: 20px !important;
	line-height: 28px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
@media (min-width: 769px) {
	html body h5.orion-lb__item-title,
	.orion-lb__item-title { font-size: 22px !important; }
}
@media (min-width: 1199px) {
	html body h5.orion-lb__item-title,
	.orion-lb__item-title { font-size: 24px !important; line-height: 32px !important; }
}
@media (min-width: 1380px) {
	html body h5.orion-lb__item-title,
	.orion-lb__item-title { line-height: 36px !important; }
}
@media (min-width: 1752px) {
	html body h5.orion-lb__item-title,
	.orion-lb__item-title { font-size: 30px !important; line-height: 42px !important; }
}
/* The reference recolours the title and the expand circle on hover with no
   transition, so the theme's global anchor easing is cancelled here. */
.orion-lb__item-title a { color: inherit; text-decoration: none; transition: none; }
.orion-lb__expand { transition: none; }
.orion-lb__card:hover .orion-lb__item-title a { color: var(--orion-primary); }

.orion-lb__no-posts { text-align: center; padding: 60px 20px; color: #666; font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
	.orion-lb__expand,
	.orion-lb__item-title a { transition: none; }
}

/* Style1 grid mode — blog-2.html static listing grid (same card design as
   the slider). Gaps: gap-x-[25px]/gap-y-7, sm:gap-x-8/gap-y-8,
   md:gap-y-10, lg:gap-y-12 + 3-col, xl:gap-x-11, 1xl:gap-x-[70px]/gap-y-14,
   2xl:gap-x-[75px]. */
.orion-lb__grid {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 25px;
	row-gap: 28px;
}
@media (min-width: 640px) { .orion-lb__grid { grid-template-columns: repeat(2, 1fr); column-gap: 32px; row-gap: 32px; } }
@media (min-width: 769px) { .orion-lb__grid { row-gap: 40px; } }
@media (min-width: 992px) { .orion-lb__grid { grid-template-columns: repeat(3, 1fr); column-gap: 32px; row-gap: 48px; } }
@media (min-width: 1199px) { .orion-lb__grid { column-gap: 44px; } }
@media (min-width: 1380px) { .orion-lb__grid { column-gap: 70px; row-gap: 56px; } }
@media (min-width: 1752px) { .orion-lb__grid { column-gap: 75px; } }

/* Style1 date label — HTML `p.h6.text-primary-900 … font-medium`
   with mb-3 / xl:mb-4 / 2xl:mb-5. Unlayered so it beats base `p` + layered `.h6`. */
.orion-lb__grid .orion-lb__meta {
	margin: 0 0 12px;
	font-weight: 500;
	font-size: 15px;
	line-height: 23px;
	color: var(--orion-primary, var(--orion-primary));
}
@media (min-width: 640px) {
	.orion-lb__grid .orion-lb__meta { font-size: 16px; line-height: 24px; }
}
@media (min-width: 992px) {
	.orion-lb__grid .orion-lb__meta { font-size: 17px; line-height: 26px; }
}
@media (min-width: 1199px) {
	.orion-lb__grid .orion-lb__meta {
		font-size: 18px;
		line-height: 32px;
		margin-bottom: 16px;
	}
}
@media (min-width: 1752px) {
	.orion-lb__grid .orion-lb__meta {
		font-size: 22px;
		line-height: 32px;
		margin-bottom: 20px;
	}
}

/* Load More (shared markup/animation pattern across all 3 blog layouts) */
.orion-lb__load-more-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 40px;
}
@media (min-width: 992px) { .orion-lb__load-more-wrap { margin-top: 60px; } }

.orion-lb__load-more .animate-spin { display: none; }
.orion-lb__load-more.is-loading .animate-spin { display: inline-block; animation: orion-lb-spin 0.8s linear infinite; }
.orion-lb__load-more:disabled { opacity: 0.7; cursor: not-allowed; }

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

.orion-lb__load-more-error { color: #d9534f; text-align: center; margin: 0; }
.orion-lb__load-more-done { color: #666; text-align: center; margin: 0; }

/* ============================================================
   Layout 2 — "Card Grid" (index-2.html "Our News & Blogs" section)
   The shared component classes (.blogs-2, .blog-box, .blog-img-before,
   .blog-content-box, .blog-date, .blog-title, plus .project-custom-arrow/
   .arrow-slider already used by the Projects/Testimonial widgets) are real
   hand-authored classes already compiled in orion-tailwind.css and reused
   here as-is; only the pieces unique to this widget are defined below.
   ============================================================ */

.orion-lb2__header {
	display: flex;
	flex-direction: column;
	margin: 0 0 28px;
}
@media (min-width: 640px) { .orion-lb2__header { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: 34px; } }
@media (min-width: 769px) { .orion-lb2__header { margin-bottom: 40px; } }
@media (min-width: 1752px) { .orion-lb2__header { margin-bottom: 50px; } }

.orion-lb2__header-left { width: fit-content; }

.orion-lb2__sub-title { margin-bottom: 14px; width: fit-content; }
@media (min-width: 769px) { .orion-lb2__sub-title { margin-bottom: 20px; } }
@media (min-width: 992px) { .orion-lb2__sub-title { margin-bottom: 24px; } }
@media (min-width: 1752px) { .orion-lb2__sub-title { margin-bottom: 28px; } }

html body .orion-lb--style2 h2.orion-lb__title,
.orion-lb--style2 .orion-lb__title {
	margin-bottom: 10px;
	width: fit-content;
	font-weight: 500 !important; /* index-2.html bare h2.title */
}
@media (min-width: 640px) { .orion-lb--style2 .orion-lb__title { margin-bottom: 12px; } }
@media (min-width: 769px) { .orion-lb--style2 .orion-lb__title { margin-bottom: 16px; } }

p.orion-lb2__description {
	margin: 0;
	max-width: 100%;
	width: 100%;
	color: #464343;
	font-family: Lexend, sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 23px;
}
@media (min-width: 640px) { p.orion-lb2__description { max-width: 80%; } }
@media (min-width: 992px) {
	p.orion-lb2__description { max-width: 58%; font-size: 15px; line-height: 25px; }
}
@media (min-width: 1199px) { p.orion-lb2__description { line-height: 26px; } }
@media (min-width: 1380px) { p.orion-lb2__description { line-height: 28px; } }
@media (min-width: 1752px) { p.orion-lb2__description { font-size: 18px; line-height: 32px; } }

.orion-lb2__nav-wrap {
	display: none;
	gap: 8px;
	position: relative;
	margin-bottom: 0;
}
@media (min-width: 640px) { .orion-lb2__nav-wrap { display: flex; margin-bottom: 12px; } }

.orion-lb2__nav-wrap--mobile { display: flex; margin-top: 20px; }
@media (min-width: 640px) { .orion-lb2__nav-wrap--mobile { display: none; } }

.orion-lb2__nav-btn::after { content: none; }
.orion-lb2__nav-btn svg { width: 100%; height: 100%; }

.orion-lb2-swiper { width: 100%; overflow: visible; padding-right: 0; }
/* HTML markup lists pr utilities, but the live index-2 computed style is 0 —
   peek comes from slidesPerView 2.5, not padding. Keep padding at 0. */

/* Reset the Style-1 list-divider look for the shared .orion-lb__card class
   when reused here — style2's real card look comes entirely from .blog-box. */
.orion-lb--style2 .orion-lb__card { border-bottom: 0; padding-bottom: 0; }

.orion-lb2__img-link { position: absolute; inset: 0; display: block; }
.orion-lb2__img { width: 100%; height: 100% !important; object-fit: cover; max-width: none; }

/* Blog card hover — gentle image zoom (overflow clipped by .blog-img-before). */
.blog-box .blog-img-before {
	overflow: hidden;
}
.blog-box .blog-img-before img,
.blog-box .orion-lb2__img {
	transition: transform 0.45s ease;
	transform: scale(1);
	will-change: transform;
}
.blog-box:hover .blog-img-before img,
.blog-box:hover .orion-lb2__img,
.blog-box:focus-within .blog-img-before img,
.blog-box:focus-within .orion-lb2__img {
	transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
	.blog-box .blog-img-before img,
	.blog-box .orion-lb2__img {
		transition: none;
	}
	.blog-box:hover .blog-img-before img,
	.blog-box:hover .orion-lb2__img,
	.blog-box:focus-within .blog-img-before img,
	.blog-box:focus-within .orion-lb2__img {
		transform: none;
	}
}

/* Color/hover-color for .blog-title a comes from the shared
   item_title_color / item_title_hover_color controls, which already target
   .orion-lb__item-title a / .orion-lb__card:hover .orion-lb__item-title a
   — both classes are also applied to this layout's title link and card. */
.orion-lb--style2 .blog-title a { text-decoration: none; transition: color .3s ease; }

.orion-lb2__excerpt {
	margin: 0;
	/* Color/type from Elementor (card2_excerpt_*); responsive fallback below. */
	font-family: Lexend, sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 23px;
}
@media (min-width: 992px) { .orion-lb2__excerpt { font-size: 15px; line-height: 25px; } }
@media (min-width: 1199px) { .orion-lb2__excerpt { line-height: 26px; } }
@media (min-width: 1380px) { .orion-lb2__excerpt { line-height: 28px; } }
@media (min-width: 1752px) { .orion-lb2__excerpt { font-size: 18px; line-height: 32px; } }

/* Style2 blog titles match HTML h4 + .blog-title border schedule. */
.orion-lb--style2 .blog-box {
	background-color: #f5f6f6;
	height: 100%;
}
.orion-lb--style2 .blog-title,
.orion-lb--style2 .orion-lb__item-title {
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	/* Responsive type — Elementor item_title_typo overrides when set. */
	font-family: "El Messiri", sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 28px;
}
@media (min-width: 769px) {
	.orion-lb--style2 .blog-title,
	.orion-lb--style2 .orion-lb__item-title {
		margin-bottom: 20px;
		padding-bottom: 20px;
		font-size: 22px;
	}
}
@media (min-width: 1199px) {
	.orion-lb--style2 .blog-title,
	.orion-lb--style2 .orion-lb__item-title { font-size: 24px; line-height: 32px; }
}
@media (min-width: 1380px) {
	.orion-lb--style2 .blog-title,
	.orion-lb--style2 .orion-lb__item-title { line-height: 36px; }
}
@media (min-width: 1752px) {
	.orion-lb--style2 .blog-title,
	.orion-lb--style2 .orion-lb__item-title { font-size: 30px; line-height: 42px; }
}

/* Style2 grid mode — blogs.html static listing grid (same .blog-box card
   design as the slider, real grid-cols/gap schedule from the reference). */
.orion-lb2__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 25px;
}
@media (min-width: 640px) { .orion-lb2__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 769px) { .orion-lb2__grid { gap: 24px; } }
@media (min-width: 992px) { .orion-lb2__grid { gap: 32px; } }
@media (min-width: 1199px) { .orion-lb2__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1752px) { .orion-lb2__grid { gap: 42px; } }

/* ===== Layout 3 (Expanding Cards — Home Style 3) =====
   Matches the real "News Blog & Articles" section from index-3.html
   exactly, using this project's real breakpoints:
   sm=640, md=769, lg=992, xl=1199, 1xl=1380, 2xl=1752.
   .container/.btn/.btn-primary are real hand-authored classes already
   compiled in orion-tailwind.css and reused directly. */

.orion-lb3 {
	width: 100%;
	margin-bottom: 32px;
}
@media (min-width: 769px)  { .orion-lb3 { margin-bottom: 50px; } }
@media (min-width: 992px)  { .orion-lb3 { margin-bottom: 60px; } }
@media (min-width: 1380px) { .orion-lb3 { margin-bottom: 80px; } }
@media (min-width: 1752px) { .orion-lb3 { margin-bottom: 100px; } }

.orion-lb3__panel {
	background-color: #EFEFEF;
	padding: 32px 0;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}
@media (min-width: 640px)  { .orion-lb3__panel { padding: 40px 0; border-top-left-radius: 50px; border-top-right-radius: 50px; } }
@media (min-width: 769px)  { .orion-lb3__panel { padding: 56px 0; } }
@media (min-width: 992px)  { .orion-lb3__panel { border-top-left-radius: 70px; border-top-right-radius: 70px; } }
@media (min-width: 1199px) { .orion-lb3__panel { padding: 64px 0; border-top-left-radius: 90px; border-top-right-radius: 90px; } }
@media (min-width: 1380px) { .orion-lb3__panel { padding: 80px 0; } }

/* Plain variant — the real standalone blog-3.html listing page has no gray
   panel background/rounded corners (that treatment is only for the
   home-page-embedded teaser section); real padding schedule measured from
   that page directly. */
.orion-lb3__panel--plain {
	background-color: transparent;
	padding: 34px 0;
	border-radius: 0;
}
@media (min-width: 640px)  { .orion-lb3__panel--plain { padding: 38px 0; } }
@media (min-width: 769px)  { .orion-lb3__panel--plain { padding: 60px 0; } }
@media (min-width: 1199px) { .orion-lb3__panel--plain { padding: 70px 0; } }

/* Real .container schedule, scoped — the bare .container class is reset
   to max-width:none by a legacy ".elementor-page .container" rule in
   style.css, so this widget uses its own class instead. */
.orion-lb3__inner {
	width: 100%;
	margin: 0 auto;
	padding: 0 16px;
}
@media (min-width: 640px)  { .orion-lb3__inner { max-width: 640px; } }
@media (min-width: 769px)  { .orion-lb3__inner { max-width: 769px; } }
@media (min-width: 992px)  { .orion-lb3__inner { max-width: 992px; } }
@media (min-width: 1199px) { .orion-lb3__inner { max-width: 1199px; } }
@media (min-width: 1380px) { .orion-lb3__inner { max-width: 1380px; } }
@media (min-width: 1752px) { .orion-lb3__inner { max-width: 1752px; } }

.orion-lb3__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	text-align: center;
}
@media (min-width: 769px)  { .orion-lb3__header { flex-direction: row; align-items: center; text-align: left; } }
@media (min-width: 1199px) { .orion-lb3__header { margin-bottom: 40px; } }
@media (min-width: 1380px) { .orion-lb3__header { margin-bottom: 44px; } }
@media (min-width: 1752px) { .orion-lb3__header { margin-bottom: 55px; } }

/* .orion-lb3__title size/weight: shared HTML h2 schedule above */

p.orion-lb3__description {
	margin: 8px 0 0;
	color: #464343; /* HTML text-gray-400 */
	font-weight: 300;
	width: 100%;
}
@media (min-width: 769px)  { p.orion-lb3__description { margin-top: 10px; width: 95%; } }
@media (min-width: 992px)  { p.orion-lb3__description { width: 87%; } }
@media (min-width: 1199px) { p.orion-lb3__description { width: 70%; } }
@media (min-width: 1752px) { p.orion-lb3__description { width: 57%; } }

.orion-lb3__btn-wrap--desktop { display: none; }
@media (min-width: 769px) { .orion-lb3__btn-wrap--desktop { display: block; } }

.orion-lb3__btn-wrap--mobile { display: flex; margin-top: 32px; }
@media (min-width: 769px) { .orion-lb3__btn-wrap--mobile { display: none; } }

.orion-lb3__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 640px)  { .orion-lb3__grid { gap: 20px; } }
@media (min-width: 769px)  { .orion-lb3__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .orion-lb3__grid { display: flex; } }
@media (min-width: 1199px) { .orion-lb3__grid { gap: 24px; } }
@media (min-width: 1752px) { .orion-lb3__grid { gap: 32px; } }

.orion-lb3__card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 20px;
	transition: flex .5s ease-in-out;
}
@media (min-width: 992px)  { .orion-lb3__card { flex: 1; border-radius: 30px; } }
@media (min-width: 992px)  { .orion-lb3__card--featured { flex: 3; } }
@media (min-width: 1199px) { .orion-lb3__card { border-radius: 40px; } }

/* Beat Elementor `.elementor img { height: auto }` (0,1,1) so cards keep
   the fixed HTML heights instead of collapsing to aspect-ratio / 0 before load. */
.orion-lb3__card .orion-lb3__img {
	display: block;
	width: 100%;
	height: 240px;
	max-width: none;
	object-fit: cover;
}
@media (min-width: 640px)  { .orion-lb3__card .orion-lb3__img { height: 340px; } }
@media (min-width: 1199px) { .orion-lb3__card .orion-lb3__img { height: 430px; } }
@media (min-width: 1380px) { .orion-lb3__card .orion-lb3__img { height: 460px; } }
@media (min-width: 1752px) { .orion-lb3__card .orion-lb3__img { height: 600px; } }

.orion-lb3__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 16px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 40%, transparent 100%);
}
@media (min-width: 992px)  { .orion-lb3__overlay { padding: 20px; } }
@media (min-width: 1199px) { .orion-lb3__overlay { padding: 28px; } }
@media (min-width: 1380px) { .orion-lb3__overlay { padding: 32px; } }
@media (min-width: 1752px) { .orion-lb3__overlay { padding: 40px; } }

.orion-lb3__card--featured .orion-lb3__overlay {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
}
@media (min-width: 992px) {
	/* Mirrors the real "hover swaps the featured card" JS behavior from
	   custom.js using :has() instead: hovering any card in the grid shrinks
	   every card to flex:1 and dims its overlay, then the hovered card
	   itself is pushed back to flex:3 with the lighter featured-style
	   overlay and its text revealed — so the hovered card always ends up
	   playing the "featured" role, exactly like the JS class-swap did. */
	.orion-lb3__grid:has(.orion-lb3__card:hover) .orion-lb3__card:not(:hover) {
		flex: 1;
	}
	.orion-lb3__grid:has(.orion-lb3__card:hover) .orion-lb3__card:not(:hover) .orion-lb3__overlay {
		background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 40%, transparent 100%);
	}
	.orion-lb3__grid .orion-lb3__card:hover {
		flex: 3;
	}
	.orion-lb3__grid .orion-lb3__card:hover .orion-lb3__overlay {
		background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
	}
}

.orion-lb3__arrow {
	align-self: flex-end;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (min-width: 640px)  { .orion-lb3__arrow { width: 55px; height: 55px; } }
@media (min-width: 1199px) { .orion-lb3__arrow { width: 70px; height: 70px; } }
@media (min-width: 1752px) { .orion-lb3__arrow { width: 85px; height: 85px; } }

.orion-lb3__arrow svg {
	width: 40px;
	height: 40px;
	color: #000;
}
@media (min-width: 640px)  { .orion-lb3__arrow svg { width: 55px; height: 55px; } }
@media (min-width: 992px)  { .orion-lb3__arrow svg { width: 63px; height: 63px; } }
@media (min-width: 1752px) { .orion-lb3__arrow svg { width: 69px; height: 69px; } }

html body h6.orion-lb3__date,
.orion-lb3__date {
	margin: 0 0 12px;
	font-family: var(--orion-font-body, Lexend, sans-serif) !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	line-height: 1.375 !important;
	color: #fff;
	text-transform: none !important;
}
@media (min-width: 640px)  {
	html body h6.orion-lb3__date,
	.orion-lb3__date { font-size: 16px !important; line-height: 22px !important; }
}
@media (min-width: 992px)  {
	html body h6.orion-lb3__date,
	.orion-lb3__date { font-size: 17px !important; margin-bottom: 16px; }
}
@media (min-width: 1199px) {
	html body h6.orion-lb3__date,
	.orion-lb3__date { font-size: 18px !important; line-height: 32px !important; margin-bottom: 20px; }
}
@media (min-width: 1752px) {
	html body h6.orion-lb3__date,
	.orion-lb3__date { font-size: 22px !important; margin-bottom: 28px; }
}

html body h3.orion-lb3__card-title,
.orion-lb3__card-title {
	margin: 0;
	color: #fff;
	font-family: var(--orion-font-heading, "El Messiri", serif) !important;
	font-weight: 300 !important; /* HTML font-light */
	font-size: 20px !important;
	line-height: 25px !important;
	text-transform: none !important;
}
@media (min-width: 640px)  {
	html body h3.orion-lb3__card-title,
	.orion-lb3__card-title { font-size: 26px !important; line-height: 30px !important; }
}
@media (min-width: 992px)  {
	html body h3.orion-lb3__card-title,
	.orion-lb3__card-title { font-size: 30px !important; line-height: 40px !important; }
}
@media (min-width: 1380px) {
	html body h3.orion-lb3__card-title,
	.orion-lb3__card-title { font-size: 38px !important; line-height: 44px !important; }
}
@media (min-width: 1752px) {
	html body h3.orion-lb3__card-title,
	.orion-lb3__card-title { font-size: 45px !important; line-height: 50px !important; }
}

.orion-lb3__text {
	color: #fff;
	transition: opacity .3s ease;
	width: 100%;
}
@media (min-width: 640px) {
	.orion-lb3__text { margin: 10px; width: auto; }
}
@media (min-width: 992px) {
	/* Default: only the featured card shows date/title. On hover, hide text on
	   every non-hovered card (including featured) and reveal the hovered one.
	   The reveal rule must match/exceed the hide rule's specificity — a prior
	   "hide all .orion-lb3__text while :has(:hover)" selector beat the reveal. */
	.orion-lb3__grid:not(.orion-lb3__grid--static) .orion-lb3__card:not(.orion-lb3__card--featured) .orion-lb3__text { opacity: 0; }
	.orion-lb3__grid:not(.orion-lb3__grid--static):has(.orion-lb3__card:hover) .orion-lb3__card:not(:hover) .orion-lb3__text { opacity: 0; }
	.orion-lb3__grid:not(.orion-lb3__grid--static):has(.orion-lb3__card:hover) .orion-lb3__card:hover .orion-lb3__text { opacity: 1; }
}

/* Style3 grid mode — blog-3.html static listing grid: a real 2-column grid
   (not the home-section's flex-grow "featured card" row), so the
   flex:1/3 hover-grow effect from .orion-lb3__grid is neutralized here;
   only the first card's permanently-visible text overlay (--featured) and
   image hover-reveal on the rest are kept. Compound selector (2 classes)
   is used so it wins over the single-class slider rules regardless of
   source order. */
.orion-lb3__grid.orion-lb3__grid--static {
	display: grid;
	grid-template-columns: 1fr;
	gap: 25px;
}
@media (min-width: 769px)  { .orion-lb3__grid.orion-lb3__grid--static { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 992px)  { .orion-lb3__grid.orion-lb3__grid--static { gap: 32px; } }
@media (min-width: 1199px) { .orion-lb3__grid.orion-lb3__grid--static { gap: 60px; } }
@media (min-width: 1380px) { .orion-lb3__grid.orion-lb3__grid--static { column-gap: 80px; row-gap: 62px; } }

.orion-lb3__grid.orion-lb3__grid--static .orion-lb3__card,
.orion-lb3__grid.orion-lb3__grid--static .orion-lb3__card--featured {
	flex: none;
}

/* Blog listing page already provides .container + page padding — strip the
   home-widget inner container / plain-panel padding so blog-3.html widths match. */
.orion-blog-listing .orion-lb3__panel--plain {
	padding: 0;
	margin: 0;
}
.orion-blog-listing .orion-lb3__inner {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* On the static listing, non-featured overlays stay readable on touch/small
   screens; desktop matches HTML lg:opacity-0 until hover. */
@media (min-width: 992px) {
	.orion-lb3__grid--static .orion-lb3__card:not(.orion-lb3__card--featured) .orion-lb3__text {
		opacity: 0;
	}
	.orion-lb3__grid--static .orion-lb3__card:hover .orion-lb3__text,
	.orion-lb3__grid--static .orion-lb3__card:focus-visible .orion-lb3__text {
		opacity: 1;
	}
}

/* ── Layout 4 — index-4.html "Our Latest Blogs" (featured + list) ──────
   Real breakpoints: sm=640, md=769, lg=992, xl=1199, 1xl=1380, 2xl=1752. */

/*
 * Same Elementor mobile flex-wrap collapse as team (see orion-team.css):
 * keep the parent e-con from shrinking below the featured+list content.
 */
.e-con.e-flex:has(> .elementor-widget-orion-latest-blogs) {
	--flex-wrap: nowrap;
	flex-wrap: nowrap;
}
.elementor-widget-orion-latest-blogs > .elementor-widget-container {
	height: auto;
}

.orion-lb4 {
	width: 100%;
	margin-bottom: 32px;
}
@media (min-width: 769px)  { .orion-lb4 { margin-bottom: 50px; } }
@media (min-width: 992px)  { .orion-lb4 { margin-bottom: 60px; } }
@media (min-width: 1380px) { .orion-lb4 { margin-bottom: 80px; } }
@media (min-width: 1752px) { .orion-lb4 { margin-bottom: 100px; } }

.orion-lb4__container {
	width: 100%;
	margin: 0 auto;
	padding: 0 16px;
}
@media (min-width: 640px)  { .orion-lb4__container { max-width: 640px; } }
@media (min-width: 769px)  { .orion-lb4__container { max-width: 769px; } }
@media (min-width: 992px)  { .orion-lb4__container { max-width: 992px; } }
@media (min-width: 1199px) { .orion-lb4__container { max-width: 1199px; } }
@media (min-width: 1380px) { .orion-lb4__container { max-width: 1380px; } }
@media (min-width: 1752px) { .orion-lb4__container { max-width: 1752px; } }

.orion-lb4__header {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 28px;
}
@media (min-width: 640px)  { .orion-lb4__header { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: 34px; } }
@media (min-width: 769px)  { .orion-lb4__header { margin-bottom: 40px; } }
@media (min-width: 992px)  { .orion-lb4__header { margin-bottom: 50px; } }

h2.orion-lb4__title {
	margin: 0 0 8px;
}
@media (min-width: 640px)  { h2.orion-lb4__title { margin-bottom: 12px; } }
@media (min-width: 769px)  { h2.orion-lb4__title { margin-bottom: 16px; } }

p.orion-lb4__description {
	margin: 0;
	color: #464343;
	width: 100%;
	font-family: "Lexend", sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 23px;
}
@media (min-width: 992px)  { p.orion-lb4__description { font-size: 15px; line-height: 25px; } }
@media (min-width: 1199px) { p.orion-lb4__description { line-height: 26px; } }
@media (min-width: 1380px) { p.orion-lb4__description { line-height: 28px; } }
@media (min-width: 1752px) { p.orion-lb4__description { font-size: 18px; line-height: 32px; } }
@media (min-width: 640px)  { p.orion-lb4__description { max-width: 88%; } }
@media (min-width: 769px)  { p.orion-lb4__description { max-width: 80%; } }
@media (min-width: 992px)  { p.orion-lb4__description { max-width: 58%; } }

.orion-lb4__btn-wrap { display: none; }
@media (min-width: 640px) { .orion-lb4__btn-wrap { display: block; } }

.orion-lb4__row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 24px;
	width: 100%;
}
@media (min-width: 640px)  { .orion-lb4__row { gap: 32px; } }
@media (min-width: 769px)  { .orion-lb4__row { gap: 40px; } }
@media (min-width: 992px)  { .orion-lb4__row { flex-direction: row; } }
@media (min-width: 1199px) { .orion-lb4__row { gap: 50px; } }
@media (min-width: 1380px) { .orion-lb4__row { gap: 65px; } }

.orion-lb4__featured {
	width: 100%;
	background-color: #F6F6F6;
	height: 100%;
}
@media (min-width: 992px) { .orion-lb4__featured { width: 47%; } }

.orion-lb4__featured-img-link { display: block; position: relative; overflow: hidden; }
.orion-lb4__featured-img-link::before { content: ''; display: block; padding-top: 47.45%; }
/* Compound selector beats Elementor `.elementor img { height: auto }`. */
.orion-lb4__featured-img-link .orion-lb4__featured-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	display: block;
	max-width: none;
}

.orion-lb4__featured-body { padding: 20px 12px 24px; }
@media (min-width: 640px)  { .orion-lb4__featured-body { padding: 24px; } }
@media (min-width: 1199px) { .orion-lb4__featured-body { padding: 40px; } }

@media (max-width: 639px) {
	.orion-lb4__list { gap: 26px; }
}

.orion-lb4__meta {
	text-transform: uppercase;
	color: var(--orion-primary);
	font-weight: 600;
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 18px;
}
@media (min-width: 640px)  { .orion-lb4__meta { font-size: 14px; line-height: 21px; } }
@media (min-width: 769px)  { .orion-lb4__meta { margin-bottom: 18px; } }
@media (min-width: 1199px) { .orion-lb4__meta { margin-bottom: 26px; } }

.orion-lb4__list .orion-lb4__meta { margin-bottom: 10px; }
@media (min-width: 640px)  { .orion-lb4__list .orion-lb4__meta { margin-bottom: 8px; } }
@media (min-width: 1199px) { .orion-lb4__list .orion-lb4__meta { margin-bottom: 12px; } }
@media (min-width: 1752px) { .orion-lb4__list .orion-lb4__meta { margin-bottom: 18px; } }

html body h3.orion-lb4__featured-title,
.orion-lb4__featured-title {
	margin: 0 0 12px;
	font-family: var(--orion-font-heading, "El Messiri", serif) !important;
	font-size: 22px !important;
	font-weight: 500 !important;
	line-height: 30px !important;
	text-transform: none !important;
}
@media (min-width: 640px)  {
	html body h3.orion-lb4__featured-title,
	.orion-lb4__featured-title { font-size: 26px !important; line-height: 32px !important; }
}
@media (min-width: 769px)  {
	html body h3.orion-lb4__featured-title,
	.orion-lb4__featured-title { margin-bottom: 16px; font-size: 30px !important; line-height: 38px !important; }
}
@media (min-width: 1199px) {
	html body h3.orion-lb4__featured-title,
	.orion-lb4__featured-title { margin-bottom: 28px; font-size: 30px !important; line-height: 40px !important; }
}
@media (min-width: 1380px) {
	html body h3.orion-lb4__featured-title,
	.orion-lb4__featured-title { font-size: 36px !important; line-height: 40px !important; }
}
@media (min-width: 1752px) {
	html body h3.orion-lb4__featured-title,
	.orion-lb4__featured-title { font-size: 45px !important; line-height: 60px !important; }
}
.orion-lb4__featured-title a { color: inherit; font-weight: inherit; transition: color 0.2s ease-in-out; }
.orion-lb4__featured:hover .orion-lb4__featured-title a { color: var(--orion-primary); }

.orion-lb4__featured-excerpt {
	margin: 0;
	color: #464343;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	padding-top: 16px;
	font-family: "Lexend", sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 23px;
}
@media (min-width: 769px)  { .orion-lb4__featured-excerpt { padding-top: 24px; line-height: 25px; font-size: 15px; } }
@media (min-width: 1199px) { .orion-lb4__featured-excerpt { padding-top: 30px; } }
@media (min-width: 1752px) { .orion-lb4__featured-excerpt { font-size: 18px; line-height: 32px; } }

.orion-lb4__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}
@media (min-width: 992px)  { .orion-lb4__list { width: 53%; } }
@media (min-width: 1199px) { .orion-lb4__list { gap: 40px; } }
@media (min-width: 1752px) { .orion-lb4__list { gap: 45px; } }

.orion-lb4__item {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
@media (min-width: 640px) { .orion-lb4__item { flex-direction: row; gap: 24px; } }
@media (min-width: 1199px) { .orion-lb4__item { gap: 30px; } }
@media (min-width: 1380px) { .orion-lb4__item { gap: 36px; } }

.orion-lb4__item-img-link { display: block; flex-shrink: 0; width: 100%; height: 160px; overflow: hidden; }
@media (min-width: 640px)  { .orion-lb4__item-img-link { width: 32%; height: 160px; } }
@media (min-width: 1199px) { .orion-lb4__item-img-link { height: 187px; } }
@media (min-width: 1752px) { .orion-lb4__item-img-link { height: 240px; } }
.orion-lb4__item-img { width: 100%; height: 100% !important; object-fit: cover; display: block; max-width: none; }

.orion-lb4__item-body { margin: auto 0; }
/* HTML: text-xl xl:text-[26px] 2xl:text-3xl + font-semibold on link */
html body h4.orion-lb4__item-title,
.orion-lb4__item-title {
	margin: 0 0 6px;
	font-family: var(--orion-font-heading, "El Messiri", serif) !important;
	font-size: 20px !important;
	line-height: 28px !important;
	font-weight: 600 !important;
	text-transform: none !important;
}
@media (min-width: 1199px) {
	html body h4.orion-lb4__item-title,
	.orion-lb4__item-title { font-size: 26px !important; line-height: 36px !important; margin-bottom: 10px; }
}
@media (min-width: 1752px) {
	html body h4.orion-lb4__item-title,
	.orion-lb4__item-title { font-size: 30px !important; line-height: 42px !important; margin-bottom: 14px; }
}
.orion-lb4__item-title a { color: #111827; font-weight: 600 !important; transition: color 0.2s ease-in-out; }
.orion-lb4__item:hover .orion-lb4__item-title a { color: var(--orion-primary); }

.orion-lb4__item-excerpt {
	margin: 4px 0 0;
	color: #464343;
	font-family: "Lexend", sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 23px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (min-width: 992px)  { .orion-lb4__item-excerpt { font-size: 15px; line-height: 25px; } }
@media (min-width: 1752px) { .orion-lb4__item-excerpt { font-size: 18px; line-height: 32px; } }