/* Orion Gallery Page — gallery.html "Our Gallery" section.
   Breakpoints: sm=640, md=769, lg=992, xl=1199, 1xl=1380, 2xl=1752.
   Reuses orion-gallery.css (.orion-gm__*) + orion-gallery.js (Magnific). */

.orion-galleryp {
	width: 100%;
	background: #fff;
	overflow: hidden;
}

/* HTML .container + py-[34/38/60/70] */
.orion-galleryp__container {
	width: 100%;
	margin: 0 auto;
	padding: 34px 16px;
	box-sizing: border-box;
}
@media (min-width: 640px) {
	.orion-galleryp__container { max-width: 640px; padding-top: 38px; padding-bottom: 38px; }
}
@media (min-width: 769px) {
	.orion-galleryp__container { max-width: 769px; padding-top: 60px; padding-bottom: 60px; }
}
@media (min-width: 992px) {
	.orion-galleryp__container { max-width: 992px; padding-top: 70px; padding-bottom: 70px; }
}
@media (min-width: 1199px) { .orion-galleryp__container { max-width: 1199px; } }
@media (min-width: 1380px) { .orion-galleryp__container { max-width: 1380px; } }
@media (min-width: 1752px) { .orion-galleryp__container { max-width: 1752px; } }

/* HTML: <h1 class="h2"> — uses global h2 schedule (not h1).
   Soft sizes so Elementor Typography can override; family/weight locked below. */
html body h1.orion-galleryp__title,
h1.orion-galleryp__title {
	margin: 0 0 20px;
	text-align: center;
	font-family: "El Messiri", var(--orion-font-heading, serif);
	font-weight: 500;
	color: #000;
	font-size: 26px;
	line-height: 36px;
	letter-spacing: normal;
	text-transform: none;
}
@media (min-width: 640px) {
	html body h1.orion-galleryp__title,
	h1.orion-galleryp__title {
		margin-bottom: 24px;
		text-align: start;
		font-size: 30px;
		line-height: 40px;
	}
}
@media (min-width: 769px) {
	html body h1.orion-galleryp__title,
	h1.orion-galleryp__title {
		margin-bottom: 32px;
		font-size: 35px;
		line-height: 40px;
	}
}
@media (min-width: 992px) {
	html body h1.orion-galleryp__title,
	h1.orion-galleryp__title { margin-bottom: 40px; }
}
@media (min-width: 1199px) {
	html body h1.orion-galleryp__title,
	h1.orion-galleryp__title {
		font-size: 40px;
		line-height: 50px;
	}
}
@media (min-width: 1380px) {
	/* HTML 1xl:mb-[50px] */
	html body h1.orion-galleryp__title,
	h1.orion-galleryp__title {
		margin-bottom: 50px;
		font-size: 46px;
		line-height: 55px;
	}
}
@media (min-width: 1752px) {
	html body h1.orion-galleryp__title,
	h1.orion-galleryp__title {
		margin-bottom: 60px;
		font-size: 60px;
		line-height: 70px;
	}
}

.orion-galleryp__wrap {
	overflow: hidden;
	user-select: none;
}

/* gap-5 / md:gap-6 / xl:gap-7 / 2xl:gap-9 */
.orion-galleryp__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 640px) {
	.orion-galleryp__grid { grid-template-columns: repeat(8, 1fr); gap: 20px; }
}
@media (min-width: 769px) {
	.orion-galleryp__grid { grid-template-columns: repeat(12, 1fr); gap: 24px; }
}
@media (min-width: 1199px) { .orion-galleryp__grid { gap: 28px; } }
@media (min-width: 1752px) { .orion-galleryp__grid { gap: 36px; } }

.orion-galleryp__item {
	grid-column: span 1;
	display: block;
	overflow: hidden;
	border-radius: 0;
	position: relative;
}
@media (min-width: 640px) { .orion-galleryp__item { grid-column: span var(--gsm, 4); } }
@media (min-width: 769px) { .orion-galleryp__item { grid-column: span var(--gmd, 4); } }

/*
 * HTML .gallery-slide-img:
 *   sm:h-[250] md:h-[300] xl:h-[350] 1xl:h-[380] 2xl:h-[450]
 * Mobile (<640): natural height (max-[640px]:h-full / no fixed height).
 */
.orion-galleryp .orion-gm__item .orion-gm__img,
.orion-galleryp__img {
	width: 100%;
	height: auto;
	object-fit: cover;
	max-width: none;
	display: block;
}
@media (min-width: 640px) {
	.orion-galleryp .orion-gm__item .orion-gm__img,
	.orion-galleryp__img { height: 250px; }
}
@media (min-width: 769px) {
	.orion-galleryp .orion-gm__item .orion-gm__img,
	.orion-galleryp__img { height: 300px; }
}
@media (min-width: 1199px) {
	.orion-galleryp .orion-gm__item .orion-gm__img,
	.orion-galleryp__img { height: 350px; }
}
@media (min-width: 1380px) {
	.orion-galleryp .orion-gm__item .orion-gm__img,
	.orion-galleryp__img { height: 380px; }
}
@media (min-width: 1752px) {
	.orion-galleryp .orion-gm__item .orion-gm__img,
	.orion-galleryp__img { height: 450px; }
}

/* Load More — mt-9 / md:mt-12 / lg:mt-15 / 1xl:mt-17 / 2xl:mt-20 */
.orion-galleryp__load {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}
@media (min-width: 769px)  { .orion-galleryp__load { margin-top: 48px; } }
@media (min-width: 992px)  { .orion-galleryp__load { margin-top: 60px; } }
@media (min-width: 1380px) { .orion-galleryp__load { margin-top: 68px; } }
@media (min-width: 1752px) { .orion-galleryp__load { margin-top: 80px; } }

.orion-galleryp__load-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
}

/* Spinner hidden until .is-loading — same pattern as blog listing. */
.orion-galleryp__load-spinner,
.orion-galleryp__load-btn .animate-spin {
	display: none;
	flex-shrink: 0;
	width: 21px;
	height: 21px;
}

.orion-galleryp__load-btn.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

.orion-galleryp__load-btn.is-loading .orion-galleryp__load-spinner,
.orion-galleryp__load-btn.is-loading .animate-spin {
	display: inline-block;
	animation: orion-galleryp-spin 0.8s linear infinite;
}

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

.orion-galleryp__load-error {
	color: #c0392b;
	font-size: 14px;
	text-align: center;
	margin: 12px 0 0;
}

.orion-galleryp__load-done {
	color: #666;
	font-size: 14px;
	text-align: center;
	margin: 12px 0 0;
}