/* Work Portfolio Grid block — standalone styles, independent of SDdisplayProjects.css. */

.wpg-block {
	--portfolio-card-gap: 1.5rem;
	--portfolio-heading-color: var(--colD, #656259);
	--portfolio-heading-hover-color: var(--colB, #ba5914);
	--portfolio-body-color: var(--colD, #656259);
	--portfolio-focus-color: var(--colA, #355067);
	--portfolio-focus-width: 2px;

	--portfolio-cols-mobile: 2;
	--portfolio-cols-tablet: 3;
	--portfolio-cols-desktop: 4;

	--portfolio-cta-bg: transparent;

	--portfolio-button-radius: var(--radius-role-button, 0.375rem);
	--portfolio-button-primary-bg: var(--colC, #e0bc1c);
	--portfolio-button-primary-hover-bg: var(--colB, #ba5914);
	--portfolio-button-primary-color: #ffffff;
	--portfolio-button-secondary-color: var(--colA, #355067);
	--portfolio-button-ghost-color: var(--colA, #355067);

	width: 100%;
}

/* Full-bleed regardless of page template. */
.wpg-block.alignfull {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Wide alignment (editor "Wide" toolbar choice) is no longer given its own
   width formula here — page-width-control.css clamps every .wpg-block the
   same as any other content child, off the shared --boxedWidth/--wideWidth/
   --veryWideWidth tokens driven by the page's shew_page_width tier. Only
   .alignfull (below) still needs a dedicated rule, since full-bleed past
   the viewport edge isn't something the page-tier system does. */

/* -------------------------------------------------
 * Grid + cards
 * ----------------------------------------------- */

.wpg-grid {
	display: grid;
	grid-template-columns: repeat(var(--portfolio-cols-mobile), 1fr);
	gap: var(--portfolio-card-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Margin-left only, kept as its own #SD rule rather than added to .wpg-grid
   above — that rule also carries the responsive grid-template-columns
   breakpoints below, and giving it an ID would out-specificity those plain
   ".wpg-grid" media-query overrides, freezing every breakpoint at the
   mobile column count. This rule only fights the global
   "#SD UL { margin-left:... }" in SDstandards.css, which was shifting
   every card 20px right of .wpg-block's own (correctly centered) edge. */
#SD .wpg-grid {
	margin-left: 0;
}

@media screen and (min-width: 768px) {
	.wpg-grid {
		grid-template-columns: repeat(var(--portfolio-cols-tablet), 1fr);
	}
}

@media screen and (min-width: 1024px) {
	.wpg-grid {
		grid-template-columns: repeat(var(--portfolio-cols-desktop), 1fr);
	}
}

@media screen and (min-width: 1440px) {
	.wpg-grid {
		grid-template-columns: repeat(var(--portfolio-cols-desktop-lg), 1fr);
	}
}

/* Per-breakpoint reveal-animation toggle (Design Tokens → Portfolio Grid
   Layout). Each band matches the column breakpoint above it exactly, so
   "off" only disables the reveal at the size it was set for. Mirrors the
   prefers-reduced-motion override in motion-effects.css, just scoped to one
   band via the matching wpg-anim-off-* class instead of all breakpoints. */
@media screen and (max-width: 767px) {
	.wpg-anim-off-mobile .wpg-card[data-scroll-behavior="reveal"] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.wpg-anim-off-tablet .wpg-card[data-scroll-behavior="reveal"] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1439px) {
	.wpg-anim-off-desktop .wpg-card[data-scroll-behavior="reveal"] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

@media screen and (min-width: 1440px) {
	.wpg-anim-off-desktop-lg .wpg-card[data-scroll-behavior="reveal"] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* The title is always its own link; the image is a separate, independently
   toggled link (or plain, non-link content). They're siblings either way,
   so the gap lives here rather than inside a single shared link. */
.wpg-card {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--portfolio-gap-default, 0.5rem);
	/* Grid items default to min-width: auto, which lets the image's
	   intrinsic size blow out the 1fr column track instead of shrinking
	   to it — this is what broke the mobile/tablet column counts. */
	min-width: 0;
}

/* "#SD .entry-content UL > LI" in SDstandards.css (padding-left:1.5em;
   text-indent:-1.5em) is meant for bulleted content lists, but .wpg-card is
   also a UL>LI inside .entry-content, so it inherited the same indent —
   text-indent inherits to .wpg-card-name, pulling the caption left of the
   image above it. ".wpg-grid .wpg-card" (2 classes) out-specificities that
   rule's "UL > LI" (1 class + 2 types) since class count is compared before
   type count. */
#SD .wpg-grid .wpg-card {
	padding-left: 0;
	text-indent: 0;
}

/* Hide cards from first paint, before scroll-effects.js has run — without
   this, a card can paint visible for a frame (page parse can outrun the
   deferred script) and then flash as the reveal/entry animation takes over.
   Safe to do here (unlike the site-wide motion-effects.css base rule, which
   intentionally never pre-hides for LCP reasons): every wpg-card always gets
   a non-empty data-scroll-effect (shew_wpg_entrance_effect() falls back to
   "fade-up"), so the matching .is-ready / .is-in-view rule in
   motion-effects.css always exists and has higher specificity (3 simple
   selectors vs. 2 here) — it cleanly overrides this the moment JS adds
   either class, whether the card ends up above or below the fold. */
.wpg-card[data-scroll-behavior="reveal"] {
	opacity: 0;
}

/* When Image Is Link is on (shew_pc_image_is_link()), the render helper
   nests both .wpg-card-media and .wpg-card-name inside this single <a> —
   making it, not .wpg-card, the actual two-child flex container. .wpg-card
   itself only has this one child in that case, so its own gap has nothing
   to space. Mirroring the same flex+gap here covers both markup shapes:
   when Image Is Link is off, .wpg-card-link wraps only the name (one
   child), so this gap is a no-op there and .wpg-card's gap does the work
   instead. */
#SD .wpg-card-link {
	display: flex;
	flex-direction: column;
	gap: var(--portfolio-gap-default, 0.5rem);
	text-decoration: none;
	color: inherit;
}

/* Radius + shadow per card type, per state — every value is an explicit
   token (inc/portfolio-card-tokens.php), never assumed in this stylesheet.
   Logo/Project/Website fall back to Default at the token layer when unset,
   so this CSS only needs one set of rules per type, not a cascade. */

.wpg-card-media {
	display: block;
	overflow: hidden;
	aspect-ratio: var(--portfolio-image-ratio-default, auto);
	border-radius: var(--portfolio-radius-default-rest);
	box-shadow: var(--portfolio-shadow-default-rest);
	transition: border-radius 0.2s ease, box-shadow 0.2s ease;
}

#SD .wpg-card-link:hover .wpg-card-media,
#SD .wpg-card-link:focus-visible .wpg-card-media {
	border-radius: var(--portfolio-radius-default-hover);
	box-shadow: var(--portfolio-shadow-default-hover);
}

.wpg-card--logo,
.wpg-card--logo .wpg-card-link {
	gap: var(--portfolio-gap-logo, 0.5rem);
}
.wpg-card--logo .wpg-card-media {
	aspect-ratio: var(--portfolio-image-ratio-logo, auto);
	border-radius: var(--portfolio-radius-logo-rest);
	box-shadow: var(--portfolio-shadow-logo-rest);
}
#SD .wpg-card--logo .wpg-card-link:hover .wpg-card-media,
#SD .wpg-card--logo .wpg-card-link:focus-visible .wpg-card-media {
	border-radius: var(--portfolio-radius-logo-hover);
	box-shadow: var(--portfolio-shadow-logo-hover);
}

.wpg-card--project,
.wpg-card--project .wpg-card-link {
	gap: var(--portfolio-gap-project, 0.5rem);
}
.wpg-card--project .wpg-card-media {
	aspect-ratio: var(--portfolio-image-ratio-project, auto);
	border-radius: var(--portfolio-radius-project-rest);
	box-shadow: var(--portfolio-shadow-project-rest);
}
#SD .wpg-card--project .wpg-card-link:hover .wpg-card-media,
#SD .wpg-card--project .wpg-card-link:focus-visible .wpg-card-media {
	border-radius: var(--portfolio-radius-project-hover);
	box-shadow: var(--portfolio-shadow-project-hover);
}

.wpg-card--website,
.wpg-card--website .wpg-card-link {
	gap: var(--portfolio-gap-website, 0.5rem);
}
.wpg-card--website .wpg-card-media {
	aspect-ratio: var(--portfolio-image-ratio-website, auto);
	border-radius: var(--portfolio-radius-website-rest);
	box-shadow: var(--portfolio-shadow-website-rest);
}
#SD .wpg-card--website .wpg-card-link:hover .wpg-card-media,
#SD .wpg-card--website .wpg-card-link:focus-visible .wpg-card-media {
	border-radius: var(--portfolio-radius-website-hover);
	box-shadow: var(--portfolio-shadow-website-hover);
}

/* Video has no .wpg-card-link — the poster is a play trigger, not a
   navigation link, so its hover/focus state is driven by :hover/:focus-visible
   on .wpg-card-video-poster itself rather than a wrapping link. */
.wpg-card--video {
	gap: var(--portfolio-gap-video, 0.5rem);
}
.wpg-card--video .wpg-card-media {
	aspect-ratio: var(--portfolio-image-ratio-video, auto);
	border-radius: var(--portfolio-radius-video-rest);
	box-shadow: var(--portfolio-shadow-video-rest);
}
.wpg-card--video .wpg-card-video-poster:hover .wpg-card-media,
.wpg-card--video .wpg-card-video-poster:focus-visible .wpg-card-media {
	border-radius: var(--portfolio-radius-video-hover);
	box-shadow: var(--portfolio-shadow-video-hover);
}

/* Video play trigger — values ported from the legacy project-selector
   card (assets/css/conditional/templates/projectselector/SDdisplayProjects.css
   .card--video .videoPlay*) so the visual treatment matches what's already
   shipping on /work/?type=video, just renamed into wpg- classes so the two
   systems' CSS never collide. */
.wpg-card-video-poster {
	position: relative;
	cursor: pointer;
}
.wpg-card-video-overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}
.wpg-card-video-triangle {
	width: 0;
	height: 0;
	border-left: 22px solid currentColor;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	opacity: 0.9;
}
.wpg-card-video-embed iframe {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

/* height: 100% only takes effect when .wpg-card-media has an explicit
   aspect-ratio (a sized ratio); against the default aspect-ratio: auto it
   resolves to auto per spec, so "None" keeps each image's natural height. */
.wpg-card-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

#SD .wpg-card-name {
	display: inline-block;
	font-family: var(--portfolio-title-family-default, inherit);
	font-weight: var(--portfolio-title-weight-default, 600);
	font-size: var(--portfolio-title-size-default, inherit);
	line-height: var(--portfolio-title-line-height-default, inherit);
	letter-spacing: var(--portfolio-title-letter-spacing-default, normal);
	text-transform: var(--portfolio-title-text-transform-default, none);
	color: var(--portfolio-title-color-default, var(--portfolio-heading-color));
	transition: color 0.2s ease;
}

#SD .wpg-card--logo .wpg-card-name {
	font-family: var(--portfolio-title-family-logo, var(--portfolio-title-family-default, inherit));
	font-weight: var(--portfolio-title-weight-logo, var(--portfolio-title-weight-default, 600));
	font-size: var(--portfolio-title-size-logo, var(--portfolio-title-size-default, inherit));
	line-height: var(--portfolio-title-line-height-logo, var(--portfolio-title-line-height-default, inherit));
	letter-spacing: var(--portfolio-title-letter-spacing-logo, var(--portfolio-title-letter-spacing-default, normal));
	text-transform: var(--portfolio-title-text-transform-logo, var(--portfolio-title-text-transform-default, none));
	color: var(--portfolio-title-color-logo, var(--portfolio-title-color-default, var(--portfolio-heading-color)));
}

#SD .wpg-card--project .wpg-card-name {
	font-family: var(--portfolio-title-family-project, var(--portfolio-title-family-default, inherit));
	font-weight: var(--portfolio-title-weight-project, var(--portfolio-title-weight-default, 600));
	font-size: var(--portfolio-title-size-project, var(--portfolio-title-size-default, inherit));
	line-height: var(--portfolio-title-line-height-project, var(--portfolio-title-line-height-default, inherit));
	letter-spacing: var(--portfolio-title-letter-spacing-project, var(--portfolio-title-letter-spacing-default, normal));
	text-transform: var(--portfolio-title-text-transform-project, var(--portfolio-title-text-transform-default, none));
	color: var(--portfolio-title-color-project, var(--portfolio-title-color-default, var(--portfolio-heading-color)));
}

#SD .wpg-card--website .wpg-card-name {
	font-family: var(--portfolio-title-family-website, var(--portfolio-title-family-default, inherit));
	font-weight: var(--portfolio-title-weight-website, var(--portfolio-title-weight-default, 600));
	font-size: var(--portfolio-title-size-website, var(--portfolio-title-size-default, inherit));
	line-height: var(--portfolio-title-line-height-website, var(--portfolio-title-line-height-default, inherit));
	letter-spacing: var(--portfolio-title-letter-spacing-website, var(--portfolio-title-letter-spacing-default, normal));
	text-transform: var(--portfolio-title-text-transform-website, var(--portfolio-title-text-transform-default, none));
	color: var(--portfolio-title-color-website, var(--portfolio-title-color-default, var(--portfolio-heading-color)));
}

#SD .wpg-card--video .wpg-card-name {
	font-family: var(--portfolio-title-family-video, var(--portfolio-title-family-default, inherit));
	font-weight: var(--portfolio-title-weight-video, var(--portfolio-title-weight-default, 600));
	font-size: var(--portfolio-title-size-video, var(--portfolio-title-size-default, inherit));
	line-height: var(--portfolio-title-line-height-video, var(--portfolio-title-line-height-default, inherit));
	letter-spacing: var(--portfolio-title-letter-spacing-video, var(--portfolio-title-letter-spacing-default, normal));
	text-transform: var(--portfolio-title-text-transform-video, var(--portfolio-title-text-transform-default, none));
	color: var(--portfolio-title-color-video, var(--portfolio-title-color-default, var(--portfolio-heading-color)));
}

/* Client/org name line, video only — sits above the title. No equivalent
   field exists for Logo/Project/Website; their single get_the_title() value
   is the only text on the card. */
.wpg-card-organization {
	display: block;
	margin-top: 0.25rem;
	line-height: 1;
	font-size: 0.875em;
	color: var(--portfolio-body-color);
}

#SD .wpg-card-link:hover .wpg-card-image,
#SD .wpg-card-link:focus-visible .wpg-card-image {
	transform: scale(1.05);
}

#SD .wpg-card-link:hover .wpg-card-name,
#SD .wpg-card-link:focus-visible .wpg-card-name {
	color: var(--portfolio-heading-hover-color);
}

/* No discrete button remains on the card, so the link itself needs a clear
   keyboard focus indicator. */
#SD .wpg-card-link:focus-visible {
	/* Longhand, not the `outline: <w> solid <c>` shorthand — combining two
	   var() refs in that shorthand fails to resolve in testing (width/color
	   silently fall back to the browser default ring). Longhands resolve
	   each var() independently. */
	outline-width: var(--portfolio-focus-width);
	outline-style: solid;
	outline-color: var(--portfolio-focus-color);
	outline-offset: 4px;
	border-radius: var(--portfolio-radius-default-rest);
}

/* -------------------------------------------------
 * Entrance animation — cards opt into the global token-driven reveal system
 * (assets/js/global/scroll-effects.js + assets/css/global/motion-effects.css)
 * via data-scroll-behavior/data-scroll-effect on each <li>. Timing/easing
 * come entirely from Design Tokens → Motion; nothing block-specific here.
 * ----------------------------------------------- */

/* -------------------------------------------------
 * CTA — sibling of .wpg-grid, never a list item
 * ----------------------------------------------- */

.wpg-cta {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: var(--wpg-cta-margin-top, var(--portfolio-card-gap));
	margin-bottom: var(--wpg-cta-margin-bottom, var(--portfolio-card-gap));
	background: var(--wpg-cta-bg, var(--portfolio-cta-bg));
	text-align: center;
}

/* Inner content stays boxed to the standard content width and centered —
   only the background (.wpg-cta above) bleeds to the full viewport. */
.wpg-cta-inner {
	max-width: var(--contentWidth, var(--maxWidth, 1200px));
	margin-left: auto;
	margin-right: auto;
	padding: var(--wpg-cta-padding, 0);
}

.wpg-cta-headline {
	margin: 0 0 0.5rem;
	font-family: var(--wpg-cta-headline-family, inherit);
	font-weight: var(--wpg-cta-headline-weight, 700);
	font-size: var(--wpg-cta-headline-size, 1.25rem);
	line-height: var(--wpg-cta-headline-line-height, inherit);
	letter-spacing: var(--wpg-cta-headline-letter-spacing, normal);
	text-transform: var(--wpg-cta-headline-text-transform, none);
	color: var(--wpg-cta-headline-color, var(--portfolio-heading-color));
}

.wpg-cta-body {
	margin: 0 0 1rem;
	font-family: var(--wpg-cta-body-family, inherit);
	font-weight: var(--wpg-cta-body-weight, inherit);
	font-size: var(--wpg-cta-body-size, inherit);
	line-height: var(--wpg-cta-body-line-height, inherit);
	letter-spacing: var(--wpg-cta-body-letter-spacing, normal);
	text-transform: var(--wpg-cta-body-text-transform, none);
	color: var(--wpg-cta-body-color, var(--portfolio-body-color));
}

#SD .wpg-cta-button {
	display: inline-block;
	padding: 0.6em 1.4em;
	border-radius: var(--portfolio-button-radius);
	font-weight: 600;
	text-decoration: none;
}

#SD .wpg-cta-button--primary {
	background: var(--portfolio-button-primary-bg);
	color: var(--portfolio-button-primary-color);
}

#SD .wpg-cta-button--primary:hover {
	background: var(--portfolio-button-primary-hover-bg);
}

#SD .wpg-cta-button--secondary {
	background: transparent;
	color: var(--portfolio-button-secondary-color);
	border: 2px solid var(--portfolio-button-secondary-color);
}

#SD .wpg-cta-button--ghost {
	background: transparent;
	color: var(--portfolio-button-ghost-color);
	text-decoration: underline;
}

#SD .wpg-cta-button:focus-visible {
	outline-width: var(--portfolio-focus-width);
	outline-style: solid;
	outline-color: var(--portfolio-focus-color);
	outline-offset: 2px;
}