/* ── Gallery explicit-content blur guard ─────── */

.gallery-page__item img,
.gallery-card__thumb:not(.gallery-card__thumb--coming-soon) > img {
	filter: blur(24px);
	transition: filter 0.4s ease;
	pointer-events: none;
	user-select: none;
}

.gallery-page__item,
.gallery-card__thumb:not(.gallery-card__thumb--coming-soon) {
	position: relative;
	overflow: hidden;
}

.gallery-page__item::after,
.gallery-card__thumb:not(.gallery-card__thumb--coming-soon)::after {
	content: 'Click to view';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(5, 79, 125, 0.3);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	z-index: 5;
	transition: background 0.2s ease, opacity 0.35s ease;
}

.gallery-page__item:hover::after {
	background: rgba(5, 79, 125, 0.48);
}

.gallery-card:hover .gallery-card__thumb:not(.gallery-card__thumb--coming-soon)::after {
	background: rgba(5, 79, 125, 0.48);
}

/* ── Revealed state ──────────────────────────── */

.gallery-revealed .gallery-page__item img,
.gallery-revealed .gallery-card__thumb > img {
	filter: none;
	pointer-events: auto;
	user-select: auto;
}

.gallery-revealed .gallery-page__item::after,
.gallery-revealed .gallery-card__thumb::after {
	opacity: 0;
	pointer-events: none;
}

/* ── Revealed state: procedure-details cue ───────
   Repurposes the guard overlay (::after) after reveal.
   Desktop: photo blurs and the label rises from the bottom on hover.
   Touch devices: persistent caption strip (no hover exists). */

.gallery-revealed .gallery-page__item::after {
	content: "Read This Patient's Procedure Details";
	inset: auto 0 0 0;
	padding: 12px 16px;
	background: rgba(5, 79, 125, 0.88);
	font-size: 0.8rem;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-align: center;
	pointer-events: none;
}

@media (hover: hover) {
	.gallery-revealed .gallery-page__item::after {
		opacity: 0;
		transform: translateY(100%);
		transition: transform 0.28s ease, opacity 0.28s ease;
	}

	.gallery-revealed .gallery-page__item:hover::after,
	.gallery-revealed .gallery-page__item:focus-visible::after {
		opacity: 1;
		transform: translateY(0);
	}

	.gallery-revealed .gallery-page__item:hover img,
	.gallery-revealed .gallery-page__item:focus-visible img {
		filter: blur(5px);
	}
}

@media (hover: none) {
	.gallery-revealed .gallery-page__item::after {
		content: "Tap to read this patient's procedure details";
		opacity: 1;
		font-size: 0.72rem;
		padding: 9px 12px;
	}
}

/* ── Mobile/tablet gutters ───────────────────────
   Page-content styles set `padding: 1.5rem 0 3rem` on the wrappers,
   so content runs edge-to-edge below the 1200px max-width. Doubled
   class beats the inline page <style> on specificity. */
@media (max-width: 991px) {
	.gallery-page.gallery-page,
	.gallery-index.gallery-index {
		padding-left: 20px;
		padding-right: 20px;
	}
}