/* Orion Our Gallery — matches the real "Our Gallery (marquee sliders)"
   section from index-2.html exactly, using this project's real breakpoints:
   sm=640, md=769, lg=992, xl=1199, 1xl=1380, 2xl=1752. */

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

.orion-gallery__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	margin: 0 0 12px;
}
@media (min-width: 640px) {
	.orion-gallery__head { flex-direction: row; align-items: center; gap: 16px; margin-bottom: 20px; }
}
@media (min-width: 769px) { .orion-gallery__head { margin-bottom: 28px; } }
@media (min-width: 1380px) { .orion-gallery__head { margin-bottom: 32px; } }
@media (min-width: 1752px) { .orion-gallery__head { margin-bottom: 40px; } }

/* HTML bare h2 — full h2 schedule */
html body h2.orion-gallery__title,
h2.orion-gallery__title {
	margin: 0;
	font-family: var(--orion-font-heading, "El Messiri", serif) !important;
	font-weight: 500 !important;
	font-size: 26px !important;
	line-height: 36px !important;
	text-transform: none !important;
}
@media (min-width: 640px) {
	html body h2.orion-gallery__title,
	h2.orion-gallery__title { font-size: 30px !important; line-height: 40px !important; }
}
@media (min-width: 769px) {
	html body h2.orion-gallery__title,
	h2.orion-gallery__title { font-size: 35px !important; line-height: 40px !important; }
}
@media (min-width: 1199px) {
	html body h2.orion-gallery__title,
	h2.orion-gallery__title { font-size: 40px !important; line-height: 50px !important; }
}
@media (min-width: 1380px) {
	html body h2.orion-gallery__title,
	h2.orion-gallery__title { font-size: 46px !important; line-height: 55px !important; }
}
@media (min-width: 1752px) {
	html body h2.orion-gallery__title,
	h2.orion-gallery__title { font-size: 60px !important; line-height: 70px !important; }
}

.orion-gallery__cta--desktop { display: none; }
@media (min-width: 640px) { .orion-gallery__cta--desktop { display: block; flex-shrink: 0; } }

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

/* ---- Marquee rows ---- */
.orion-gm__row-outer { overflow: hidden; -webkit-user-select: none; user-select: none; }
.orion-gm__row-outer--2 { margin-top: 8px; }
@media (min-width: 640px) { .orion-gm__row-outer--2 { margin-top: 20px; } }
@media (min-width: 769px) { .orion-gm__row-outer--2 { margin-top: 28px; } }
@media (min-width: 1380px) { .orion-gm__row-outer--2 { margin-top: 36px; } }

.orion-gm__row {
	display: flex;
	width: max-content;
	animation: orion-gm-scroll var(--gm-duration, 40s) linear infinite;
}
.orion-gallery[data-pause="yes"] .orion-gm__row:hover { animation-play-state: paused; }
.orion-gm__row[data-direction="right"] { animation-direction: reverse; }

.orion-gm__track {
	display: flex;
	align-items: stretch;
	flex-shrink: 0;
	gap: 8px;
}
@media (min-width: 640px) { .orion-gm__track { gap: 20px; } }
@media (min-width: 769px) { .orion-gm__track { gap: 28px; } }
@media (min-width: 1380px) { .orion-gm__track { gap: 36px; } }

.orion-gm__item {
	position: relative;
	display: block;
	flex-shrink: 0;
}

/* Compound selector needed to beat Elementor's global
   ".elementor img{height:auto;max-width:100%}" reset (0,1,1 specificity). */
.orion-gm__item .orion-gm__img {
	display: block;
	width: auto;
	height: 180px;
	object-fit: cover;
	max-width: none;
}
@media (min-width: 640px) { .orion-gm__item .orion-gm__img { height: 250px; } }
@media (min-width: 769px) { .orion-gm__item .orion-gm__img { height: 300px; } }
@media (min-width: 1199px) { .orion-gm__item .orion-gm__img { height: 350px; } }
@media (min-width: 1380px) { .orion-gm__item .orion-gm__img { height: 380px; } }
@media (min-width: 1752px) { .orion-gm__item .orion-gm__img { height: 450px; } }

.orion-gm__expand {
	pointer-events: none;
	display: none;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 32px;
	height: 32px;
	border-radius: 9999px;
	background-color: rgba(255, 255, 255, 0.8);
	color: #000;
}
@media (min-width: 640px) { .orion-gm__expand { width: 55px; height: 55px; } }
@media (min-width: 1199px) { .orion-gm__expand { width: 65px; height: 65px; } }
@media (min-width: 1752px) { .orion-gm__expand { width: 80px; height: 80px; } }
.orion-gm__item:hover .orion-gm__expand { display: flex; }

.orion-gm__expand svg {
	width: 40px;
	height: auto;
	flex-shrink: 0;
}
@media (min-width: 640px) { .orion-gm__expand svg { width: 55px; } }
@media (min-width: 1199px) { .orion-gm__expand svg { width: 63px; } }
@media (min-width: 1752px) { .orion-gm__expand svg { width: 69px; } }

@media (prefers-reduced-motion: reduce) {
	.orion-gm__row { animation: none; }
}

@keyframes orion-gm-scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ---- Lightbox ----
   Powered by Magnific Popup (enqueued in functions.php) instead of a
   hand-built .orion-gm__lightbox — that markup and its CSS are gone.
   This skin re-creates the reference site's lightbox design (see
   orion-2/assets/src/pages/gallery.html + assets/src/js/custom.js):
   blurred dark overlay, top-left "Back Now" close button, top-right
   fullscreen toggle, large side chevrons, and a bottom thumbnail strip
   (the strip is built by assets/js/orion-gallery.js since Magnific
   Popup has no built-in thumbnail feature).
   .mfp-bg/.orion-mfp-* are appended to <body> once, shared by every
   gallery on the page — not scoped inside any widget's {{WRAPPER}} —
   so this skin lives globally here rather than per-widget. */
.mfp-bg {
	background: #000;
	opacity: 0.8;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.orion-mfp .mfp-container { padding: 20px; }
@media (min-width: 640px) { .orion-mfp .mfp-container { padding: 40px; } }

.orion-mfp .mfp-figure { box-shadow: none; }
.orion-mfp .mfp-figure:after { display: none; }
.orion-mfp .mfp-close { display: none; }

.orion-mfp .mfp-img {
	max-height: 90vh;
	object-fit: contain;
	padding: 0;
}
@media (min-width: 640px)  { .orion-mfp .mfp-img { max-height: 60vh; } }
@media (min-width: 1199px) { .orion-mfp .mfp-img { max-height: 70vh; } }

.orion-mfp .mfp-bottom-bar { margin-top: 8px; top: auto; }
.orion-mfp .mfp-title { color: #fff; text-align: center; padding-right: 0; }
.orion-mfp .mfp-counter { display: none; }

/* ---- Top bar: Back / Fullscreen ---- */
.orion-mfp-back,
.orion-mfp-fullscreen {
	position: fixed;
	top: 20px;
	z-index: 1046;
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	cursor: pointer;
	color: #fff;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}
.orion-mfp-back:hover,
.orion-mfp-fullscreen:hover { opacity: 1; }

/* The WP admin toolbar is fixed at the very top with z-index:99999 —
   higher than anything in this lightbox — so for logged-in users it was
   sitting directly on top of these buttons (both occupy the same
   top:20px band). Push them below it instead of trying to out-z-index it. */
body.admin-bar .orion-mfp-back,
body.admin-bar .orion-mfp-fullscreen { top: 52px; }
@media screen and (max-width: 782px) {
	body.admin-bar .orion-mfp-back,
	body.admin-bar .orion-mfp-fullscreen { top: 66px; }
}

.orion-mfp-back {
	left: 20px;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.orion-mfp-back svg { flex-shrink: 0; }

.orion-mfp-fullscreen { right: 20px; }
@media (min-width: 640px)  { .orion-mfp-fullscreen svg { width: 20px; height: 20px; } }
@media (min-width: 1380px) { .orion-mfp-fullscreen svg { width: 24px; height: 24px; } }

/* ---- Prev / next chevrons ---- */
.orion-mfp .mfp-arrow {
	width: 30px;
	height: 30px;
	margin: 0;
	opacity: 1;
}
@media (min-width: 640px)  { .orion-mfp .mfp-arrow { width: 50px; height: 50px; } }
@media (min-width: 1752px) { .orion-mfp .mfp-arrow { width: 60px; height: 60px; } }
.orion-mfp .mfp-arrow:before,
.orion-mfp .mfp-arrow:after { display: none; content: none; border: none; }
.orion-mfp .mfp-arrow-left { left: 12px; }
.orion-mfp .mfp-arrow-right { right: 12px; }
@media (min-width: 640px) {
	.orion-mfp .mfp-arrow-left { left: 32px; }
	.orion-mfp .mfp-arrow-right { right: 32px; }
}
.orion-mfp-chevron { display: block; width: 100%; height: 100%; }
.orion-mfp-chevron svg { display: block; width: 100%; height: 100%; }
.orion-mfp .mfp-arrow-right .orion-mfp-chevron { transform: scaleX(-1); }

/* ---- Thumbnail strip ---- */
.orion-mfp-thumbs {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1046;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 16px;
	justify-content: flex-start;
}
@media (min-width: 640px) { .orion-mfp-thumbs { justify-content: center; } }
.orion-mfp-thumb {
	width: 80px;
	height: 80px;
	flex-shrink: 0;
	object-fit: cover;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color 0.2s ease;
}
.orion-mfp-thumb.is-active { border-color: #fff; }

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