/* Screen Image Permutations (Review) block.

   Two parts:
   1) .screenImage* — the shared component classes rendered by
      shew_render_screen_image() (inc/helpers/screen-image-render.php). Any
      future consumer of that helper (Screen + Text block, and eventually the
      Hero/Portfolio Screens refactor) needs these too, not just this demo.
   2) .screenImageDemo* — layout for this review-only block's grid of cells.
*/

/* ── Shared screen-image component ──────────────────────────────────────── */

.screenImage
{
	position: relative;
	width: 100%;
}

/* .shewMockupStage etc. — the markup contract read by
   assets/js/conditional/shared/screen-mockup-engine.js (see its header
   comment). The engine only cares about the stage + its descendants; sizing
   the stage itself (aspect-ratio, relative positioning) is this consuming
   surface's own concern — unlike Web Portfolio Screens' JS-balanced sizing
   (tied to that block's card grid), a screen image here is self-contained. */

.screenImage--mockup .shewMockupStage
{
	position: relative;
	width: 100%;
	aspect-ratio: var(--screen-image-aspect-w, 16) / var(--screen-image-aspect-h, 10);
}

.screenImage--mockup .shewMockupScreenshotMask
{
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.screenImage--mockup .shewMockupScreenshotLayer
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform-origin: 0 0;
}

.screenImage--mockup .shewMockupScrollInner
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.screenImage--mockup .shewMockupScrollInner img
{
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.screenImage--mockup .shewMockupScrollInner.is-covering img
{
	width: auto;
	height: 100%;
}

.screenImage--mockup .shewMockupScrollInner.is-contain img
{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.screenImage--mockup .shewMockupScrollInner.is-stretch img
{
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.screenImage--mockup .shewMockupLineart
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Mirror flag (shew_render_screen_image()'s 'mirror' arg) — the MAP/CLIP
   quads used for the screenshot's own corner-pin warp are mirrored in PHP
   (shew_mirror_quad_corners()), but the illustrated device bezel is separate
   SVG artwork that PHP always renders in its un-mirrored orientation; this
   flips it to match, same two-part technique as Web Portfolio Screens'
   .psMockupLineart{transform:scaleX(-1);}. Without this, the frame pointed
   one way while the screenshot warped as if facing the other. */
.screenImage--mirrored .shewMockupLineart
{
	transform: scaleX(-1);
}

.screenImage--flat
{
	aspect-ratio: var(--screen-image-ratio, 1 / 1);
	overflow: hidden;
	border-radius: var(--si-flat-radius, 0px);
	border: var(--si-flat-border-width, 0px) solid var(--si-flat-border-color, transparent);
	background: var(--si-flat-bg, transparent);
	box-shadow: var(--si-flat-shadow, none);
}

.screenImage--flat img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Top-aligned, not centered — matches the Mockup style's own default
	   crop behavior (screen-mockup-engine.js's 'cover' fit scales to the
	   frame's width and crops off whatever runs past the BOTTOM), so a tall
	   screenshot reads the same way in either style. */
	object-position: top;
}

/* ── Zoom trigger + modal (assets/js/conditional/shared/screen-image-zoom.js) ──
   Click anywhere on either style to see the source image flat and uncropped.
   Same technique/markup contract as Web Databases' own
   .screenMockupZoomTrigger/.screenMockupModal (screenMockup.css) — renamed to
   this component's own prefix since it's scoped per .screenImage instance
   rather than one block-wide stage. Trigger placement differs by style (Flat:
   sibling of its plain <img>, filling the same aspect-ratio box; Mockup:
   inside .shewMockupStage, above the lineart) but sizing/appearance here is
   shared — inset:0 covers whichever box it lands in either way.

   Colors/opacity/animation-duration below come from
   inc/screen-image-modal-tokens.php's --si-icon- and --si-modal- prefixed vars
   (group_screen_image_modal_tokens.json). The icon sits at a lowered but
   nonzero opacity AT REST (not opacity:0) so the image reads as clickable
   before any hover/focus happens — deliberately NOT a full-area darkening
   overlay on hover, which would fight the site's existing hover conventions
   elsewhere and read as a broken/loading state rather than an affordance. */

.screenImageZoomTrigger,
.screenImageZoomTrigger:hover,
.screenImageZoomTrigger:focus,
.screenImageZoomTrigger:active
{
	position: absolute;
	inset: 0;
	z-index: 3;
	padding: 0;
	/* !important: GeneratePress's own generic button:hover reset has
	   specificity (0,1,1) via the pseudo-class — that beats this plain class
	   (0,1,0) specifically DURING hover/focus/active, even though the same
	   class already wins at rest. Confirmed live: hovering over the trigger
	   filled the entire image with a solid dark grey (the theme's button
	   hover background) instead of staying transparent. */
	background: transparent !important;
	border: none;
	cursor: zoom-in;
}

.screenImageZoomTrigger svg
{
	position: absolute;
	/* Top-left, not top-right: the zoom modal's own Close button now lives
	   top-right (screenImageModalClose below) — top-left keeps this icon
	   clear of it. */
	top: 0.5rem;
	left: 0.5rem;
	display: block;
	width: var(--si-icon-width, 2.25rem);
	height: var(--si-icon-width, 2.25rem);
	padding: 0.55rem;
	box-sizing: border-box;
	background: var(--si-icon-bg, rgba(255, 255, 255, 0.85));
	color: var(--si-icon-color, #333);
	border-radius: 50%;
	opacity: 0.65;
	transform: scale(0.95);
	transition: opacity var(--si-modal-anim-duration, 0.25s) var(--si-modal-anim-ease, ease),
		transform var(--si-modal-anim-duration, 0.25s) var(--si-modal-anim-ease, ease),
		background-color var(--si-modal-anim-duration, 0.25s) var(--si-modal-anim-ease, ease);
}

.screenImage:hover .screenImageZoomTrigger svg,
.screenImageZoomTrigger:focus-visible svg
{
	opacity: 1;
	transform: scale(1);
}

.screenImageZoomTrigger:hover svg
{
	background: var(--si-icon-bg-hover, #ffffff);
}

.screenImageModal[hidden]
{
	display: none;
}

/* z-index: as high as it goes. This modal needs to sit above every other
   fixed/sticky thing on the page when open — desktop nav alone is
   z-index:1133700 (SDdesktopNavigation.css), the top logo is 90000
   (SDtoplogo.css), and WP Engine's own "Access Site" admin bar plus the
   reCAPTCHA badge (Web Databases block) both run their own very-high
   z-indexes we don't control. 1000 (the old value) lost to all of them,
   which is why nav/logo/toolbar/recaptcha visibly leaked through the modal.
   Matches the ceiling assets/css/global/components/asanaCapture.css already
   uses for the same reason. */
.screenImageModal
{
	position: fixed;
	inset: 0;
	z-index: 2147483647;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
}

.screenImageModalBackdrop
{
	position: absolute;
	inset: 0;
	background: var(--si-modal-backdrop-color, rgba(20, 22, 26, 0.85));
	opacity: 0;
	transition: opacity var(--si-modal-anim-duration, 0.25s) var(--si-modal-anim-ease, ease);
}

.screenImageModal.is-visible .screenImageModalBackdrop
{
	opacity: 1;
}

/* Dialog scrolls vertically on its own, at the image's natural width capped
   to the viewport (never upscaled past its source size) — "100% zoom" with
   the image never distorted to fill a fixed box. See screen-image-render.php's
   shew_screen_image_render_modal() header comment for why Close lives outside
   this box rather than inside it. */
.screenImageModalDialog
{
	position: relative;
	max-height: 90vh;
	overflow-y: auto;
	overflow-x: hidden;
	display: inline-block;
	opacity: 0;
	transform: scale(0.96);
	transition: opacity var(--si-modal-anim-duration, 0.25s) var(--si-modal-anim-ease, ease),
		transform var(--si-modal-anim-duration, 0.25s) var(--si-modal-anim-ease, ease);
}

.screenImageModal.is-visible .screenImageModalDialog
{
	opacity: 1;
	transform: scale(1);
}

.screenImageModalImage
{
	display: block;
	max-width: 90vw;
	width: auto;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.screenImageModalClose
{
	position: fixed;
	top: 1.5rem;
	/* Top-right, per explicit request — note the mobile nav hamburger trigger
	   (.mobileMenuTrigger, SDmobileNavigation.css) also fixes itself to this
	   corner, so on mobile the two can visually overlap while the modal is
	   open (the hamburger sits behind this modal's z-index while it's
	   visible, but check for a mis-tap/visual clash there). */
	right: 1.5rem;
	z-index: 1001;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--si-close-width, 3.25rem);
	height: var(--si-close-width, 3.25rem);
	padding: 0;
	background: var(--si-close-bg, rgba(20, 22, 26, 0.75));
	color: var(--si-close-icon-color, #ffffff);
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	opacity: 0;
	transform: scale(0.9);
	transition: opacity var(--si-modal-anim-duration, 0.25s) var(--si-modal-anim-ease, ease),
		transform var(--si-modal-anim-duration, 0.25s) var(--si-modal-anim-ease, ease),
		background-color 0.15s ease;
}

.screenImageModal.is-visible .screenImageModalClose
{
	opacity: 1;
	transform: scale(1);
}

.screenImageModalClose:hover,
.screenImageModalClose:focus-visible
{
	background: var(--si-close-bg-hover, rgba(0, 0, 0, 0.9));
}

.screenImageModalClose svg
{
	display: block;
	width: 1.75rem;
	height: 1.75rem;
}

@media (prefers-reduced-motion: reduce)
{
	.screenImageZoomTrigger svg,
	.screenImageModalBackdrop,
	.screenImageModalDialog,
	.screenImageModalClose
	{
		transition-duration: 0ms;
	}
}

/* ── Demo grid layout ────────────────────────────────────────────────────── */

.screenImageDemo
{
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	padding: 1rem 0;
}

.screenImageDemoRow__label
{
	margin: 0 0 0.75rem;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--colG, #666);
}

.screenImageDemoRow__cells
{
	display: grid;
	grid-template-columns: repeat(2, minmax(200px, 1fr));
	gap: 1.5rem;
}

.screenImageDemoCell__stage
{
	max-width: 420px;
}

/* Flat has no surrounding device illustration/whitespace like Mockup does,
   so at the same stage width it reads visually larger/taller (its
   aspect-ratio is the device's own screen ratio, not the mockup SVG's outer
   canvas ratio). Capping Flat's stage narrower brings its apparent size back
   in line with Mockup's for side-by-side comparison in this QA block. */
.screenImageDemoCell--flat .screenImageDemoCell__stage
{
	max-width: 260px;
}

.screenImageDemoCell__caption
{
	margin-top: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-size: 0.8rem;
	color: var(--colG, #666);
}

@media (max-width: 640px)
{
	.screenImageDemoRow__cells
	{
		grid-template-columns: 1fr;
	}
}