/* Who We Are (/who-we-are) — page-scoped interaction styles.
   Only `.wwa-*` selectors. Rules live here (not in the Designer) when they need a
   parent-state or pseudo-element selector that the Webflow style panel cannot express. */

/* ---------------------------------------------------------------- Trust (2.6)
   The card drives the CTA: the button has no hover of its own by design. */
.wwa-trust-card,
.wwa-trust-card-button {
	transition: background-color 0.25s ease, color 0.25s ease;
}

.wwa-trust-card:hover .wwa-trust-card-button,
.wwa-trust-card:focus-within .wwa-trust-card-button {
	background-color: var(--_system-colors---accent);
	color: var(--_colors---body);
}

/* ------------------------------------------------------------- Playbook (2.2)
   The card is a two-row grid: the closed face and the revealed detail share the
   top row, the +/× control owns the bottom one. Both faces stay in flow — the
   hidden one is `visibility: hidden`, which still occupies its cell — so the row
   is always as tall as the taller of the two and the card never changes height
   when it opens. Cards stretch to the grid row, so all three match the tallest.
   Longer or shorter copy just resizes the row; nothing clips, nothing jumps. */
.wwa-playbook-card {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 1fr auto;
	align-items: stretch;
	justify-items: stretch;
}

.wwa-playbook-card-face,
.wwa-playbook-card-detail {
	grid-area: 1 / 1;
	z-index: 2;
	transition: opacity 0.3s ease, visibility 0.3s;
}

/* The yellow panel is inset 10px from the card edge and has to sit behind the
   control as well as the copy, so it is a layer of its own rather than the
   detail's own background. */
.wwa-playbook-card:before {
	content: "";
	z-index: 1;
	background-color: var(--_system-colors---accent);
	border-radius: 10px;
	position: absolute;
	inset: 10px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.wwa-playbook-card.is-open:before {
	opacity: 1;
}

/* The card's own 40px padding already places the detail copy where the design
   wants it, and the control's 33px padding-top keeps the last line clear of it. */
.wwa-playbook-card-detail {
	position: static;
	padding: 0;
	background-color: transparent;
	overflow: visible;
}

.wwa-playbook-card.is-open .wwa-playbook-card-detail {
	opacity: 1;
	visibility: visible;
}

.wwa-playbook-card.is-open .wwa-playbook-card-face {
	opacity: 0;
	visibility: hidden;
}

.wwa-playbook-detail-close {
	transform: rotate(45deg);
	transition: transform 0.3s ease;
}

.wwa-playbook-card.is-open .wwa-playbook-detail-close {
	transform: rotate(0deg);
}

/* --------------------------------------------------------------- Values (2.4)
   The row is a slider over a native scroll container. The card takes a share of
   the track instead of the fixed 440px the Designer can express, so the same
   markup shows three cards, then two, then one with the next peeking in. The
   20px subtracted here is the `gap` the Designer sets on .wwa-values-grid. */
.wwa-values-card {
	flex: 0 0 calc((100% - 40px) / 3);
	scroll-snap-align: start;
}

@media (max-width: 1199px) {
	.wwa-values-card {
		flex-basis: calc((100% - 20px) / 2);
	}
}

/* One card and a peek of the next. It never grows past the 440px the design
   gives a card, and the side padding drops so the text keeps its measure. */
@media (max-width: 767px) {
	.wwa-values-card {
		flex-basis: min(100% - 56px, 440px);
		padding-left: 32px;
		padding-right: 32px;
	}
}

/* The design shows no scrollbar: the arrows and the peeking card are the
   affordance at every width. Snapping stops a swipe on a card edge, so the
   slider never comes to rest mid-card. */
.wwa-values-grid {
	height: auto;
	align-items: stretch;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.wwa-values-grid::-webkit-scrollbar {
	display: none;
}

/* Disabled dims the arrow, not the button: the design keeps both pills visible,
   and a `soft` pill at 35% opacity on the dark section disappears entirely. */
.wwa-values-pager-icon,
.wwa-values-pager-icon-prev {
	transition: opacity 0.2s ease;
}

.wwa-values-pager-button.is-disabled {
	pointer-events: none;
}

.wwa-values-pager-button.is-disabled .wwa-values-pager-icon,
.wwa-values-pager-button.is-disabled .wwa-values-pager-icon-prev {
	opacity: 0.35;
}

/* ----------------------------------------------------------------- News (2.7)
   The hover choreography mirrors Related Blogs on /news/news-template: the title
   lifts, the chips sink away behind a blur, and the CTA rises into their place.
   The lift is 10px — the value the design shows (Figma 4120-2642), not the 4px
   Related Blogs uses. */
.wwa-news-card {
	--wwa-news-hover-duration: 520ms;
	--wwa-news-hover-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.wwa-news-card-title {
	transition: transform var(--wwa-news-hover-duration) var(--wwa-news-hover-ease);
}

.wwa-news-card-chip,
.wwa-news-card-cta {
	transition: opacity var(--wwa-news-hover-duration) var(--wwa-news-hover-ease),
	transform var(--wwa-news-hover-duration) var(--wwa-news-hover-ease),
	filter var(--wwa-news-hover-duration) var(--wwa-news-hover-ease);
}

/* The CTA is anchored to the bottom of the chip row, so the transform carries
   both the horizontal centring and the rise. */
.wwa-news-card-cta {
	transform: translate(-50%, 16px);
}

.wwa-news-card:hover .wwa-news-card-title,
.wwa-news-card:focus-visible .wwa-news-card-title {
	transform: translate3d(0, -10px, 0);
}

.wwa-news-card:hover .wwa-news-card-chip,
.wwa-news-card:focus-visible .wwa-news-card-chip {
	opacity: 0;
	transform: translate3d(0, 10px, 0);
	filter: blur(2px);
}

.wwa-news-card:hover .wwa-news-card-cta,
.wwa-news-card:focus-visible .wwa-news-card-cta {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* The head stays a row down to 479px. The label must not break across two lines
   — the underline would follow it under both — and the button must not shrink
   below that width either, because .text-button clips its own overflow. */
.wwa-news-head .text-button {
	flex: none;
}

.wwa-news-head .text-button-label {
	white-space: nowrap;
}

/* Both arrows are the same glyph: the card CTA draws it on a 14×11 box, the
   section link on the 1em square the design system gives .text-button. */
.wwa-news-card-cta-icon,
.wwa-news-head .text-button-icon-before {
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2014%2011'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M0%206.219h9.527L6.651%209l1.391%201.438L13.438%205.219%208.043%200%206.651%201.438%209.527%204.219H0v2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2014%2011'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M0%206.219h9.527L6.651%209l1.391%201.438L13.438%205.219%208.043%200%206.651%201.438%209.527%204.219H0v2z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Gallery (2.8) — the row's own rules live in global.css under the
   `[data-gallery-marquee]` contract: the Careers page runs the same marquee and
   does not load this stylesheet, so a class-keyed rule here reached only one of
   the two galleries. */

/* --------------------------------------------------------- Focus visibility
   Brief §4.13: every interactive element needs a visible keyboard focus state. */
.wwa-playbook-card:focus-visible,
.wwa-team-card:focus-visible,
.wwa-news-card:focus-visible,
.wwa-values-pager-button:focus-visible {
	outline: 2px solid var(--_system-colors---primary);
	outline-offset: 4px;
}

/* ------------------------------------------------------------ Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.wwa-trust-card,
	.wwa-trust-card-button,
	.wwa-playbook-card:before,
	.wwa-playbook-card-face,
	.wwa-playbook-card-detail,
	.wwa-playbook-detail-close,
	.wwa-news-card-title,
	.wwa-news-card-chip,
	.wwa-news-card-cta,
	.wwa-values-pager-icon,
	.wwa-values-pager-icon-prev {
		transition: none !important;
	}
}