/* =========================================================
 * Section Backgrounds (inc/section-background.php)
 *
 * Layers inside a block's existing full-bleed bg div:
 *   base color/gradient → photo → tint(s) → texture → scrim
 * The PHP helper sets values as CSS variables only; every visual
 * rule lives here.
 * ======================================================= */

/* Brand roles, set per page on the section wrapper. Missing roles fall back
   to the site palette; the pale and warm grounds are mixed from the roles. */
.shew-sbg-section
{
	--sbg-dark: var(--sbg-brand-dark, var(--colA));
	--sbg-accent: var(--sbg-brand-accent, var(--colC));
	--sbg-light: var(--sbg-brand-light, color-mix(in srgb, var(--sbg-dark) 25%, #ffffff));
	--sbg-pale: color-mix(in srgb, var(--sbg-light) 55%, #ffffff);
	--sbg-warm: color-mix(in srgb, var(--sbg-accent) 15%, #f7f3ee);
}

/* Web Portfolio Screens — the background covers the whole block, device
   included. Its own JS (balanceDevice) hugs the background to the card grid
   with inline top/height so the device overflows on purpose; with a section
   background that overflow would land on white, so the background spans the
   block instead, and sectionBackground.js pads the block to contain the
   device (--sbg-fit-extra). */
.shew-sbg-section > .portfolioScreensBlockBg
{
	top: 0 !important;
	bottom: 0 !important;
	height: auto !important;
}

/* Neighboring background sections butt together — a block's own Margin
   Above/Below would otherwise show as a white stripe between two grounds. */
.shew-sbg-section + .shew-sbg-section
{
	margin-top: 0 !important;
}

.shew-sbg-section:has(+ .shew-sbg-section)
{
	margin-bottom: 0 !important;
}

.shew-sbg-section.portfolioScreensBlock
{
	padding-top: calc(clamp(1.5rem, 4vw, 3rem) + var(--sbg-fit-extra, 0px));
	padding-bottom: calc(clamp(1.5rem, 4vw, 3rem) + var(--sbg-fit-extra, 0px));
}

.shew-sbg
{
	overflow: hidden;
	isolation: isolate;
	background: var(--sbg-base, transparent);
}

.shew-sbg > *
{
	position: absolute;
	inset: 0;
}

.shew-sbg__media IMG
{
	position: absolute;
	inset: -20px;
	width: calc(100% + 40px);
	height: calc(100% + 40px);
	max-width: none;
	object-fit: cover;
	object-position: var(--sbg-focal, 50% 50%);
	filter: blur(var(--sbg-blur, 0px)) saturate(var(--sbg-saturate, 1)) contrast(var(--sbg-contrast, 1)) grayscale(var(--sbg-grayscale, 0));
}

.shew-sbg__tint
{
	background: var(--sbg-tint, transparent);
	opacity: var(--sbg-tint-opacity, 0);
	mix-blend-mode: var(--sbg-tint-blend, normal);
}

.shew-sbg__tint--2
{
	background: var(--sbg-tint2, transparent);
	opacity: var(--sbg-tint2-opacity, 0);
	mix-blend-mode: var(--sbg-tint2-blend, normal);
}

.shew-sbg__texture
{
	opacity: var(--sbg-texture, 0);
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Shade — a soft light glow behind the device on photo and dark grounds, so
   the black line art reads. Centered on the device side. (Was a dark glow
   for white line art until 2026-10-06, when line art became always black.) */
.shew-sbg__shade
{
	background: radial-gradient(ellipse 42% 72% at var(--sbg-shade-x, 50%) var(--sbg-shade-y, 50%), rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 45%, rgba(255, 255, 255, 0) 100%);
	opacity: var(--sbg-shade-opacity, 1);
}

.shew-sbg-section--text-left
{
	--sbg-shade-x: 70%;
}

.shew-sbg-section--text-right
{
	--sbg-shade-x: 30%;
}

/* Web Portfolio Screens — the device sits on the left, the card grid right. */
@media (min-width: 768px)
{
	.portfolioScreensBlock.shew-sbg-section
	{
		--sbg-shade-x: 24%;
	}
}

/* Stacked on phones — the device sits above the copy. */
@media (max-width: 767px)
{
	.shew-sbg-section
	{
		--sbg-shade-x: 50%;
		--sbg-shade-y: 30%;
	}
}

/* Side scrim — strongest behind the copy, fading toward the device. */
.shew-sbg__scrim--side
{
	background: linear-gradient(var(--sbg-scrim-dir, 90deg), rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0) 72%);
}

.shew-sbg-section--text-right .shew-sbg__scrim--side
{
	--sbg-scrim-dir: 270deg;
}

/* Stacked layout on phones: copy and device share the full width, so the
   scrim becomes an even wash instead of a side fade. */
@media (max-width: 767px)
{
	.shew-sbg__scrim--side
	{
		background: rgba(255, 255, 255, 0.6);
	}
}

/* Frosted panel behind the copy (Web Portfolio Screen and Text). */
.shew-sbg-section--scrim-frost .webScreenAndText__text
{
	position: relative;
	z-index: 1;
}

.shew-sbg-section--scrim-frost .webScreenAndText__text::before
{
	content: "";
	position: absolute;
	inset: -28px -32px;
	z-index: -1;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.45);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	backdrop-filter: blur(16px) saturate(1.2);
}

/* Dark grounds — light copy (unless a frosted panel sits behind it) and
   light card labels. */
.shew-sbg-section--light-text .webScreenAndText__subhead,
.shew-sbg-section--light-text .webScreenAndText__body
{
	color: #ffffff;
}

.shew-sbg-section--dark.portfolioScreensBlock
{
	--ps-title-color: rgba(255, 255, 255, 0.72);
	--ps-active-title-color: #ffffff;
}

/* Line art (hand and device) stays black on every ground. A soft white halo
   keeps it readable over photos and dark colors; on light grounds it's
   invisible. The hero's line art gets the same halo (hero-web-mockup.css). */
.shew-sbg-section svg.shewMockupLineart,
.shew-sbg-section svg.psMockupLineart
{
	filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.55));
}