/* Web Screen and Text block.

   The .screenImage* component classes rendered by shew_render_screen_image()
   (inc/helpers/screen-image-render.php) live in screenImageDemo.css, loaded
   as a second stylesheet by this block's block.json-driven token (see
   inc/blocks/register.php's manifest entry) — one shared copy, not
   duplicated here.

   Background-band structure (full-bleed independent of block width) mirrors
   Web Portfolio Screens (portfolioScreens.css). The two-column layout itself
   mirrors the Hero "Web Mockup" style instead (hero-web-mockup.css's
   .heroWebMockup / .heroWebMockup-text / .mockupStage) — flex-basis in
   fixed px, not a 50/50 percentage split: a percentage split left the image
   stranded with empty space on both sides of its own max-width cap inside an
   oversized column, pushing the text far away from it. Fixed px bases let
   each side size to its own content instead. */

.webScreenAndText
{
	position: relative;
	padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2rem);
	container-type: inline-size;
	container-name: webScreenAndText;
}

.webScreenAndTextBg
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: 0;
	pointer-events: none;
}

.webScreenAndTextLayout
{
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	max-width: var(--content-max-width, 1400px);
	margin: 0 auto;
}

.webScreenAndText.alignfull .webScreenAndTextLayout
{
	max-width: min(1900px, 92vw);
}

.webScreenAndText__media
{
	flex: 1 1 420px;
	width: 100%;
	max-width: 640px;
	min-width: 0;
	margin: 0 auto;
}

.webScreenAndText__text
{
	flex: 1 1 360px;
	min-width: 280px;
}

/* Layout field (wst_position) — swaps sides via row-reverse, not `order`
   (markup stays image-then-text always). With `order` the text became the
   first flex item, so whenever the row wrapped (e.g. ~783–900px, above the
   column breakpoint) the text stacked above the image. row-reverse only
   flips the horizontal direction — the image stays the first item, so it
   always lands on top once stacked, at any width. */
.webScreenAndText--textFirst .webScreenAndTextLayout
{
	flex-direction: row-reverse;
}

/* Explicit sizing, not a bare H3 — this block's column can be much narrower
   than a full page-header context (as low as ~280px, min-width above), and
   a bare heading tag inherits whatever font-size the surrounding page/theme
   context happens to set for H3 there, which isn't guaranteed to fit; giving
   it its own clamp (same technique as the Hero styles' --hero-*-size vars)
   keeps it predictable regardless of where the block is placed. */
.webScreenAndText__subhead
{
	margin: 0 0 0.75rem;
	font-size: clamp(1.25rem, 2.4vw, 1.95rem);
	font-weight: 700;
	line-height: 1.2;
}

.webScreenAndText__body
{
	max-width: 42ch;
	color: inherit;
}

/* Stacked (wrapped) tier — once the row can no longer fit both flex-bases
   (420 + 360 + gap ≈ 844px of layout width) the text drops below the image
   onto its own line. Match the image's own width there (same 640px cap,
   centered the same way) and drop the 42ch body cap, so the copy block
   lines up flush with both edges of the screen above it. A container query,
   not a viewport one — the wrap point depends on the block's own width
   (content column / Wide / Full), not the window. Harmless if it fires a
   few px early while still side-by-side: the text column is well under
   640px there, so the max-width/auto margins have no free space to act on. */
@container webScreenAndText (max-width: 844px)
{
	.webScreenAndText__text
	{
		width: 100%;
		max-width: 640px;
		margin-inline: auto;
	}

	.webScreenAndText__body
	{
		max-width: none;
	}
}

@media (max-width: 782px)
{
	.webScreenAndTextLayout,
	.webScreenAndText--textFirst .webScreenAndTextLayout
	{
		flex-direction: column;
		gap: 1.5rem;
		text-align: center;
	}

	/* In a column, the desktop px flex-bases (420px / 360px) become minimum
	   heights, padding each side with empty space below its content —
	   size to content instead. */
	.webScreenAndText__media,
	.webScreenAndText__text
	{
		flex: 0 0 auto;
	}

	.webScreenAndText__body > :last-child
	{
		margin-bottom: 0;
	}

	.webScreenAndText__body
	{
		margin: 0 auto;
	}
}