/*
 * Save control inside Envira's lightbox.
 *
 * Positioned absolutely so envirabox's own sizing maths is untouched — it
 * measures the image, not this.
 */

.sgp-lb-bar {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX( -50% );
	/* envirabox stacks #envirabox-content at 988021, so anything lower is
	   painted under the photo and never receives a click. The script raises
	   this further at runtime if Envira ever changes the number. */
	z-index: 988030;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: calc( 100% - 32px );
	pointer-events: none;
}

/*
 * display: flex above beats the browser's own [hidden] rule, so dismissing the
 * control needs saying explicitly.
 */

.sgp-lb-bar[hidden] {
	display: none !important;
}

/* Each half only appears on the kind of device it suits. */

.sgp-lb-bar .sgp-lb-btn,
.sgp-lb-bar .sgp-lb-hint {
	display: none;
}

.sgp-lb-bar.sgp-has-btn .sgp-lb-btn {
	display: inline-block;
	pointer-events: auto;
}

.sgp-lb-bar.sgp-has-hint .sgp-lb-hint {
	display: inline-block;
}

.sgp-lb-btn {
	appearance: none;
	border: 1px solid rgba( 255, 255, 255, 0.28 );
	background: rgba( 0, 0, 0, 0.62 );
	color: #fff;
	font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	text-decoration: none;
	padding: 11px 18px;
	border-radius: 999px;
	white-space: nowrap;
	backdrop-filter: blur( 6px );
	transition: background 0.15s ease, border-color 0.15s ease;
}

.sgp-lb-btn:hover,
.sgp-lb-btn:focus {
	background: rgba( 0, 0, 0, 0.85 );
	border-color: rgba( 255, 255, 255, 0.55 );
	color: #fff;
	text-decoration: none;
}

.sgp-lb-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.sgp-lb-hint {
	background: rgba( 0, 0, 0, 0.62 );
	color: rgba( 255, 255, 255, 0.92 );
	font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	padding: 9px 15px;
	border-radius: 999px;
	text-align: center;
	backdrop-filter: blur( 6px );
}

/*
 * On a touch screen the control is only a line of text, and the photo is what
 * matters — a caption sitting across it is in the way, and on a small screen
 * it covers a real share of the picture. Anchor it to the bottom of the
 * viewport instead, clear of the image entirely.
 *
 * The bar keeps pointer-events: none throughout, so the long press the hint is
 * describing still reaches the photo even where they overlap.
 */

@media ( pointer: coarse ) {
	.sgp-lb-bar {
		position: fixed;
		bottom: max( 18px, env( safe-area-inset-bottom, 0px ) );
		max-width: calc( 100% - 24px );
		flex-direction: column;
		gap: 7px;
	}

	/* Comfortably tappable, and clear of the swipe area at the edges. */
	.sgp-lb-btn {
		padding: 14px 26px;
		font-size: 15px;
	}
}

/*
 * Phone layout for the lightbox itself.
 *
 * envirabox sizes and positions its frame from JavaScript, writing inline
 * top/left/width/height in *document* coordinates and recalculating on every
 * window resize. Two things follow on a phone:
 *
 *   - Pinch-zooming pans the document, and the frame goes with it, so the
 *     photo wanders off while you are trying to look at it.
 *   - Its 40px margin and 15px frame eat 110px of a 375px screen, leaving the
 *     photo about 60% of the width.
 *
 * Declaring the layout here instead fixes both: !important outranks the inline
 * styles, so the frame stays put no matter how often envirabox recalculates,
 * and the photo gets the width back.
 */

@media ( pointer: coarse ) {
	#envirabox-wrap {
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate( -50%, -50% );
		width: auto !important;
		height: auto !important;
		max-width: 100vw;
		padding: 0 !important;
	}

	#envirabox-outer,
	#envirabox-content {
		width: auto !important;
		height: auto !important;
	}

	/* The heavy white frame is desktop chrome; on a phone it is just lost width. */
	#envirabox-content {
		border-width: 4px !important;
	}

	/*
	 * Sized against the viewport rather than by envirabox's measurements, so a
	 * landscape shot fills 90% of the width and a portrait one is capped by
	 * height instead of overflowing.
	 */
	#envirabox-img {
		width: auto !important;
		height: auto !important;
		max-width: 90vw !important;
		/*
		 * 74% of the height normally, but never so tall that the save control
		 * has nowhere to sit — which is what happens on a phone held sideways,
		 * where 74vh is most of the screen.
		 */
		max-height: min( 74vh, calc( 100vh - 132px ) ) !important;
	}

	/*
	 * The frame no longer has a fixed size, so the arrows need anchoring.
	 *
	 * They also default to 36% of the width each, which leaves barely a
	 * quarter of the photo in the middle — and a long press anywhere else
	 * grabs an arrow instead of the picture. Narrower still gives a 70px-wide,
	 * full-height tap target for paging, while handing most of the photo back.
	 */
	#envirabox-left,
	#envirabox-right {
		height: 100% !important;
		width: 22% !important;
	}
}

/*
 * Keep the native long press available on the photo.
 *
 * It is the fallback wherever the share sheet is missing, and themes or
 * galleries sometimes set touch-callout: none globally to discourage saving —
 * which silently removes the only way to get a picture into the camera roll
 * on iOS.
 */

#envirabox-img {
	-webkit-touch-callout: default;
	-webkit-user-select: auto;
	user-select: auto;
}

@media ( max-width: 600px ) {
	.sgp-lb-hint {
		font-size: 12.5px;
		padding: 8px 13px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sgp-lb-btn {
		transition: none;
	}
}