/* Who We Are page styles: rules the Webflow style panel cannot express
   (parent states, pseudo-elements). Only .wwa-* selectors. */

/* Trust
   The card drives the CTA hover. */
.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
   Two-row grid: both faces share the top row (the hidden one keeps its space),
   so the card height never changes on open. */
.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 inset yellow panel is its own layer so it sits behind the control and the copy. */
.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 padding places the detail; the control's padding-top keeps it clear. */
.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
   Native scroll slider. Cards take a share of the track; 20px is the grid gap. */
.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 plus a peek of the next, max 440px. */
@media (max-width: 767px) {
	.wwa-values-card {
		flex-basis: min(100% - 56px, 440px);
		padding-left: 32px;
		padding-right: 32px;
	}
}

/* No scrollbar: arrows and the peeking card are the affordance. Snap to card edges. */
.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. */
.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
   Hover: the title lifts 10px, the chips fade behind a blur, the CTA rises in their place. */
.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 so the label and button do not wrap. */
.wwa-news-head .text-button {
	flex: none;
}

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

/* Same arrow glyph: the card CTA draws it on a 14x11 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: row styles live in global.css under [data-gallery-marquee]. */

/* Focus visibility
   Visible keyboard focus on every interactive element. */
.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;
	}
}