/* ==========================================================================
   Gallery page (/gallery) — service-filtered grid of admin-managed
   Gallery rows. Filter chips + panel switching reuse care.css's
   .care-selector / .care-panel; only the card grid is defined here.
   ========================================================================== */

.gpage-panel {
	padding: var(--space-5);
}

.gpage-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-4);
}

.gpage-card {
	position: relative;
	margin: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--glass-border);
	background: var(--glass-bg);
	align-self: start;
}

/* Natural image height — these are composed before/after boards, so
   cropping to a fixed card ratio cuts off half the result. */
.gpage-card img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.5s var(--ease-soft);
}

.gpage-card:hover img {
	transform: scale(1.04);
}

.gpage-card figcaption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	background: linear-gradient(0deg, rgba(13, 13, 13, 0.85), transparent);
}

.gpage-card__title {
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--color-white);
}

.gpage-card__service {
	font-size: var(--fs-xs);
	color: var(--color-gold-light);
	white-space: nowrap;
}

.gpage-empty {
	text-align: center;
	color: var(--color-gray-dim);
	padding: var(--space-6) 0;
}

@media (max-width: 640px) {
	.gpage-panel {
		padding: var(--space-3);
	}

	.gpage-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-2);
	}
}