/**
 * Homepage "What we do" (template-parts/home/what-we-do.php, node 197:689).
 * The orange shape is designer-spec, not in the node: brand 60deg cut,
 * anchored to the viewport left edge (or the 1920px band edge on ultrawide).
 */

.what-we-do {
	--wwd-pad-bottom: 12.5rem; /* 200px bottom per node, intentional deviation */
	position: relative;
	padding-block: var(--section-pad-y) var(--wwd-pad-bottom);
}

/* Decorative brand shape, defined by anchors rather than fixed dimensions:
   the left edge rides the page band (viewport edge below the 1920 cap, band
   edge above), and the 60deg cut's top corner is pinned 583px right of the
   container's left content edge (64 + 583 = the node's 647 at 1440), so the
   cut keeps ending in the column gap as the container centers on wider
   viewports. The gradient spans the full stretched width and gets shallower
   on wide screens by design.

   Height is dynamic: the wrapper's bottom sits 100px BELOW the content row,
   so only the last 100px of the 200px bottom padding stay clear. That
   matches the original static 722px shape (100 top padding + content row +
   100 overshoot below the video) and the overshoot stays constant however
   long the text gets. A clip-path cannot keep a constant angle at unknown
   height, so the wrapper clips an oversized fixed-height shape: the slant
   stays exactly 60deg and the wrapper's edge performs the horizontal cut. */
.what-we-do__shape {
	position: absolute;
	inset: 0 0 6.25rem 0; /* 100px stays clear below the shape */
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.what-we-do__shape::before {
	content: "";
	position: absolute;
	top: 0;
	left: max(0px, (100% - var(--band-max)) / 2);
	width: calc((100% - min(var(--container-max), 100% - 2 * var(--container-pad))) / 2 + 583px - max(0px, (100% - var(--band-max)) / 2));
	height: 2000px; /* oversized on purpose; the wrapper cuts it at the content bottom */
	background: linear-gradient(90deg, var(--color-gradient-start), var(--color-gradient-end));
	clip-path: polygon(0 0, 100% 0, calc(100% - 2000px / tan(60deg)) 100%, 0 100%);
}

.what-we-do__grid {
	position: relative; /* lifts all content above the shape */
	z-index: 1;
	display: flex;
	align-items: stretch;
	gap: 124px;
}

.what-we-do__left {
	flex: 0 0 500px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Node: on the orange shape this eyebrow is all white (label uses
   heading-text-on-dark and the slash is white too), unlike the hero's
   #D9DCE1 label with accent slash. */
.what-we-do .eyebrow {
	color: var(--color-heading-text-on-dark);
}

.what-we-do .eyebrow::before {
	background-color: var(--color-heading-text-on-dark);
}

.what-we-do__right {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.what-we-do__copy {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.what-we-do__text {
	font-size: var(--type-body-lg-size);
	line-height: var(--type-body-lg-line);
	font-weight: var(--type-body-lg-weight);
	color: var(--color-body-text);
}

.what-we-do__chips {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* chip: 12px/500, line normal per node (the MD table's 13px/1.2 row is stale). */
.what-we-do__chip {
	border: 1px solid var(--color-border-subtle);
	padding: 9px 15px;
	font-size: 0.75rem; /* 12px */
	line-height: normal;
	font-weight: 500;
	color: var(--color-body-text);
}

/* --------------------------------------------------------------------
 * Video player (default state is one <button>; JS swaps in <video>)
 * -------------------------------------------------------------------- */

.wwd-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--color-surface-darkest);
}

.wwd-video__trigger {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--color-button-primary-text); /* label + play glyph run on currentColor */
}

.wwd-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Figma layer blur 6 = CSS blur(3px), per spec. Fades are killed to instant
   by the global reduced-motion stub in base.css. */
.wwd-video__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(10, 11, 13, 0.2); /* surface-darkest at .2, no alpha token */
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 200ms ease;
}

.wwd-video__bar {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 32px;
}

.wwd-video__label {
	opacity: 0;
	transition: opacity 200ms ease;
	text-align: left;
}

.wwd-video__play {
	flex-shrink: 0;
}

.wwd-video__trigger:hover .wwd-video__overlay,
.wwd-video__trigger:focus-visible .wwd-video__overlay,
.wwd-video__trigger:hover .wwd-video__label,
.wwd-video__trigger:focus-visible .wwd-video__label {
	opacity: 1;
}

/* Touch fallback: everything visible, nothing animated. */
@media (hover: none) {
	.wwd-video__overlay,
	.wwd-video__label {
		opacity: 1;
		transition: none;
	}
}

.wwd-video__player {
	display: block;
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------------------
 * Responsive (<=1024): shape first, then video, then the copy
 * -------------------------------------------------------------------- */

.what-we-do__shape-mobile {
	display: none;
}

@media (max-width: 1024px) {
	.what-we-do {
		--wwd-pad-bottom: 4rem; /* the 200px overshoot is a desktop shape device */
	}

	/* 128px video to headline: 64px down to the shape's bottom edge (the
	   shape's own -64px offset) and another 64px of clear space from there
	   to the copy. The two 64s are separate measurements that happen to
	   match, so changing one does not silently move the other. */
	.what-we-do__grid {
		flex-direction: column;
		gap: 8rem;
	}

	/* Source order already gives eyebrow, video, headline, text, chips. */
	/* 32px from the eyebrow to the video. The 64px above the eyebrow is the
	   section's own top padding, which the shape extends up to cover. */
	.what-we-do__left {
		position: relative; /* anchors the shape */
		flex: 0 0 auto;
		justify-content: flex-start;
		gap: 32px;
	}

	.what-we-do__right {
		gap: 32px;
	}

	/* The desktop shape is anchored to the section, so its bottom can never
	   track the video. This one is anchored to the column instead: it runs
	   from the section top (up past the 64px padding) to 64px below the
	   video, and from the viewport's left edge to half its width. */
	.what-we-do__shape {
		display: none;
	}

	.what-we-do__shape-mobile {
		display: block;
		position: absolute;
		top: calc(-1 * var(--section-pad-y));
		bottom: -4rem;
		left: calc(-1 * var(--container-pad));
		width: 85vw;
		overflow: hidden;
		pointer-events: none;
		z-index: 0;
	}

	/* Same constant-angle trick as the desktop shape: an oversized gradient
	   carrying the 60deg brand cut, clipped by the wrapper. */
	.what-we-do__shape-mobile::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2000px;
		background: linear-gradient(90deg, var(--color-gradient-start), var(--color-gradient-end));
		clip-path: polygon(0 0, 100% 0, calc(100% - 2000px / tan(60deg)) 100%, 0 100%);
	}

	.what-we-do__left > *:not(.what-we-do__shape-mobile) {
		position: relative;
		z-index: 1;
	}

	/* Chips become a scroller: starts at the content line, bleeds right,
	   trailing space so the last chip never sits flush at scroll end. */
	.what-we-do__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		/* The clipper must also be the containing block. Absolutely positioned
		   content inside a scroller - .sr-only text above all - otherwise
		   resolves against the PAGE and widens the document instead of being
		   clipped here. */
		position: relative;
		margin-right: calc(-1 * var(--container-pad));
		padding-right: var(--container-pad);
		scrollbar-width: none;
	}

	.what-we-do__chips::-webkit-scrollbar {
		display: none;
	}

	.what-we-do__chip {
		flex: 0 0 auto;
	}
}