/* ==========================================================================
   Gallery Page Styles
   Layout uses ja-dev-global utility classes — only gallery-specific rules here
   ========================================================================== */

/* Controls */
.gallery-controls .btn-custom-secondary {
	background-color: #667d9c;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 8px 20px;
	font-size: 1rem;
	font-weight: 500;
}
.gallery-controls .btn-custom-secondary:hover,
.gallery-controls .btn-custom-secondary:focus {
	background-color: #566573;
	color: #fff;
}
.gallery-controls .gallery-filter.active {
	font-weight: 700;
    background: #667d9c;
    color: #fff;
}

#gallerySearch {
	border: 1px solid #6c7a89;
	border-radius: 4px;
	padding: 8px 14px;
	font-size: 1rem;
	min-width: 200px;
}
#gallerySearch:focus {
	border-color: #566573;
	box-shadow: 0 0 0 2px rgba(108, 122, 137, 0.25);
	outline: none;
}

/* Row grid-template-columns */
.gallery-row--a { grid-template-columns: 1fr 1fr 1fr; }
.gallery-row--b { grid-template-columns: 1fr 2fr; }
.gallery-row--c { grid-template-columns: 1fr; }

/* Fade-in animation on rows */
.gallery-row {
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.gallery-row.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Hover zoom */
.gallery-item img {
	transition: transform 0.3s ease;
}
.gallery-item:hover img {
	transform: scale(1.03);
}

/* Label overlay */
.gallery-item-label {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(255, 255, 255, 0.92);
	color: #333;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 0.85rem;
	font-weight: 500;
	pointer-events: none;
}

/* Lightbox link */
.gallery-lightbox {
	display: block;
	cursor: pointer;
	text-decoration: none;
}

/* Loading spinner */
.gallery-loader {
	text-align: center;
	padding: 30px 0;
	display: none;
}
.gallery-loader.is-active {
	display: block;
}
.gallery-loader .spinner {
	display: inline-block;
	width: 36px;
	height: 36px;
	border: 3px solid #ddd;
	border-top-color: #6c7a89;
	border-radius: 50%;
	animation: gallerySpinner 0.7s linear infinite;
}
@keyframes gallerySpinner {
	to { transform: rotate(360deg); }
}

/* Responsive: stack rows on mobile */
@media screen and (max-width: 640px) {
	.gallery-row--a,
	.gallery-row--b {
		grid-template-columns: 1fr;
	}
}