/**
 * Home page patterns: the parts of the reference design that block attributes cannot express.
 */

/* Video hero -------------------------------------------------------------- */

.wp-block-cover.cdp-hero-video {
	padding: 120px 80px;
}

/* The reference filters the whole section, which also crushes the copy; the video alone is enough. */
.cdp-hero-video .wp-block-cover__video-background {
	filter: contrast(140%);
}

.cdp-hero-video__content {
	max-width: 520px;
	margin-left: auto;
	text-align: right;
}

.cdp-hero-video__content > * {
	margin-block: 0;
}

.cdp-hero-video__eyebrow {
	margin-bottom: 12px;
}

.cdp-hero-video__logo {
	width: fit-content;
	margin-bottom: 14px;
	margin-left: auto;
}

/* Sized here rather than on the tag so the image block still matches core's save output. */
.cdp-hero-video__logo img {
	width: 400px;
	aspect-ratio: 400 / 167;
}

.cdp-hero-video__lede {
	margin-bottom: 40px;
	color: #3f4352;
	font-weight: 500;
	text-shadow: 5px 20px 75px #00000025;
}

.cdp-hero-video .wp-block-button__link {
	border: 2px solid var(--cdp-light-blue);
	background-color: var(--cdp-light-blue);
	box-shadow: 0 5px 5px 0 #00000025;
	color: var(--cdp-white);
}

.cdp-hero-video .wp-block-button__link:hover,
.cdp-hero-video .wp-block-button__link:focus-visible {
	border-color: var(--cdp-brand-orange);
	background-color: var(--cdp-brand-orange);
	color: var(--cdp-white);
}

@media (max-width: 767px) {
	.wp-block-cover.cdp-hero-video {
		padding: 120px 10px 20px 90px;
	}

	.cdp-hero-video__content {
		max-width: 281px;
	}

	.cdp-hero-video__logo img {
		width: 200px;
	}

	.cdp-hero-video__lede {
		font-size: 16px;
		font-weight: 600;
	}
}

@media (max-width: 479px) {
	.wp-block-cover.cdp-hero-video {
		padding-left: 100px;
	}

	.cdp-hero-video__eyebrow {
		text-shadow: 5px 20px 75px #00000025;
	}

	.cdp-hero-video__logo img {
		width: 150px;
	}

	.cdp-hero-video__lede {
		color: var(--cdp-navy);
		font-weight: 600;
	}
}

/* Solutions teaser -------------------------------------------------------- */

.wp-block-group.cdp-solutions-teaser {
	padding: 80px 40px 120px;
}

/* Drifting pattern wash, shared by the home solutions band, the solutions detail band, the impact panels, the about intro, the working culture band and the support band. */
.cdp-solutions-teaser,
.cdp-solutions-band,
.cdp-impact-panels,
.cdp-about-intro,
.cdp-culture,
.cdp-support-band {
	position: relative;
	/* Keeps the overlay above the group's own background but behind the copy. */
	isolation: isolate;
}

.cdp-solutions-teaser::before,
.cdp-solutions-band::before,
.cdp-impact-panels::before,
.cdp-about-intro::before,
.cdp-culture::before,
.cdp-support-band::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-attachment: fixed;
	background-image: url("../images/solutions-network-pattern.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.1;
}

/* Fixed attachment is broken on iOS and repaints on every scroll frame. */
@media (max-width: 1023px) {
	.cdp-solutions-teaser::before,
	.cdp-solutions-band::before,
	.cdp-impact-panels::before,
	.cdp-about-intro::before,
	.cdp-culture::before,
	.cdp-support-band::before {
		background-attachment: scroll;
	}
}

@media (max-width: 767px) {
	.wp-block-group.cdp-solutions-teaser {
		padding-right: 10px;
		padding-left: 10px;
	}
}

/* About intro ------------------------------------------------------------- */

.wp-block-group.cdp-about-intro {
	padding: 80px 40px;
}

.cdp-about-intro .wp-block-media-text__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: 8px;
	object-fit: cover;
}

@media (max-width: 767px) {
	.wp-block-group.cdp-about-intro {
		padding: 60px 10px;
	}
}

/* Customer support -------------------------------------------------------- */

/* Clips the tinted form half to the card's rounded corners. */
.cdp-support-card {
	overflow: hidden;
	border-radius: 12px;
}

/* Impact panels ----------------------------------------------------------- */

.cdp-impact-panel {
	align-items: stretch;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 5px 20px 75px 0 #00000025;
}

.cdp-impact-panel:not(:last-child) {
	margin-bottom: 40px;
}

/* Core centres both columns, which leaves the photo and the white panel short of full height. */
.cdp-impact-panel .wp-block-media-text__media,
.cdp-impact-panel .wp-block-media-text__content {
	align-self: stretch;
}

.cdp-impact-panel .wp-block-media-text__media img {
	height: 100%;
	object-fit: cover;
}

.cdp-impact-panel .wp-block-media-text__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px;
	background-color: var(--cdp-white);
}

.cdp-impact-panel .wp-block-media-text__content > :last-child {
	margin-bottom: 0;
}

/* Supporting communities -------------------------------------------------- */

.wp-block-cover.cdp-supporting {
	padding: 60px 80px 100px;
}

@media (max-width: 1119px) {
	.wp-block-cover.cdp-supporting {
		padding-right: 10px;
		padding-left: 10px;
	}
}

.cdp-supporting-card {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 16px;
}

.cdp-supporting-card > * {
	margin-block: 0;
}

.cdp-supporting-card__content {
	flex: 1;
	min-width: 0;
	/* The cover block defaults its descendants to white text. */
	color: var(--cdp-body-text);
}

.cdp-supporting-card__content h3 {
	margin-bottom: 8px;
}

.cdp-supporting-card__content > :last-child {
	margin-bottom: 0;
}

.cdp-card-icon {
	flex: none;
	box-sizing: content-box;
	width: 24px;
	height: 24px;
	padding: 12px;
	border-radius: 999px;
	background-color: #001d4fcf;
	fill: var(--cdp-white);
}

/* Solutions tabs ---------------------------------------------------------- */

.cdp-solutions-tabs {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 40px;
	padding: 24px;
	border-radius: 8px;
	background-color: var(--cdp-white);
	box-shadow: 0 5px 15px 0 #001d4f40;
}

.cdp-solutions-tabs__list {
	display: flex;
	flex: 0 0 320px;
	flex-direction: column;
	gap: 8px;
}

.cdp-solutions-tabs__section {
	margin-block-start: 16px;
	color: var(--cdp-navy);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.cdp-solutions-tabs__section:first-child {
	margin-block-start: 0;
}

.cdp-solutions-tabs__tab {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	border: 0;
	border-radius: 8px;
	background-color: var(--cdp-card-blue);
	color: var(--cdp-body-text);
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition:
		background-color var(--cdp-transition) ease,
		color var(--cdp-transition) ease;
}

.cdp-solutions-tabs__tab-icon {
	display: flex;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
}

.cdp-solutions-tabs__tab-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.cdp-solutions-tabs__tab:hover {
	background-color: var(--cdp-brand-orange);
	color: var(--cdp-navy);
}

.cdp-solutions-tabs__tab[aria-selected="true"] {
	background-color: var(--cdp-brand-orange);
	color: var(--cdp-white);
}

.cdp-solutions-tabs__panels {
	flex: 1;
	min-width: 0;
}

.cdp-solutions-tabs__panel {
	color: var(--cdp-navy);
}

/* Core's block-gap rules only zero the top margin on :first-child, so every panel
   but the first would start 24px lower once the others are hidden. */
.cdp-solutions-tabs.is-enhanced .cdp-solutions-tabs__panel {
	margin-block-start: 0;
}

.cdp-solutions-tabs__panel:focus-visible {
	outline-offset: 4px;
}

.cdp-solutions-tabs__panel > :last-child {
	margin-bottom: 0;
}

.cdp-solutions-tabs__panel .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: 8px;
	object-fit: cover;
}

/* Service cards ----------------------------------------------------------- */

.cdp-service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

/* Core's flow-layout gap would otherwise stack a margin on top of the grid gap. */
.cdp-solutions-tabs__panel .cdp-service-grid > .cdp-service-card {
	margin-block-start: 0;
	padding: 20px;
	border-radius: 8px;
	background-color: var(--cdp-card-blue);
}

.cdp-solutions-tabs__panel .cdp-service-grid .cdp-service-card > * {
	margin-block: 0;
}

.cdp-solutions-tabs__panel .cdp-service-grid .cdp-service-card > * + * {
	margin-block-start: 8px;
}

.cdp-service-card p {
	font-size: 16px;
}

/* Until the tab list is built every panel is on show, so they need separating. */
.cdp-solutions-tabs:not(.is-enhanced) .cdp-solutions-tabs__panel + .cdp-solutions-tabs__panel {
	margin-top: 48px;
}

@media (max-width: 1023px) {
	.cdp-solutions-tabs {
		flex-direction: column;
		gap: 24px;
		padding: 16px;
	}

	.cdp-solutions-tabs__list {
		flex: none;
		width: 100%;
	}

	.cdp-solutions-tabs__panels {
		width: 100%;
	}
}

/* Accordion (narrow viewports) -------------------------------------------- */

/* Each tab button is moved next to the panel it opens, so the two stay together
   on a screen too short to show a full tab list and a panel at once. */
.cdp-solutions-tabs.is-accordion {
	gap: 0;
}

.cdp-solutions-tabs.is-accordion .cdp-solutions-tabs__panels {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cdp-solutions-tabs.is-accordion .cdp-solutions-tabs__section {
	margin-block-start: 16px;
}

.cdp-solutions-tabs.is-accordion .cdp-solutions-tabs__section:first-child {
	margin-block-start: 0;
}

.cdp-solutions-tabs.is-accordion .cdp-solutions-tabs__tab {
	width: 100%;
	/* Clears the sticky header when a collapse scrolls the button back into view. */
	scroll-margin-top: 96px;
}

.cdp-solutions-tabs.is-accordion .cdp-solutions-tabs__tab::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-inline-start: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--cdp-transition) ease;
}

.cdp-solutions-tabs.is-accordion .cdp-solutions-tabs__tab[aria-expanded="true"]::after {
	transform: translateY(2px) rotate(-135deg);
}

.cdp-solutions-tabs.is-accordion .cdp-solutions-tabs__panel {
	padding: 8px 4px 16px;
}

/* Working at CDP culture slider ------------------------------------------- */

.cdp-culture-slider {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cdp-culture-slider__track {
	display: flex;
	flex: 1;
	overflow-x: auto;
	border-radius: 8px;
	box-shadow: 0 5px 15px 0 #001d4f40;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.cdp-culture-slider__track::-webkit-scrollbar {
	display: none;
}

.wp-block-columns.cdp-culture-slide {
	flex: 0 0 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

/* Core sizes columns from their content, which leaves the photo half short of the copy half. */
.wp-block-columns.cdp-culture-slide > .wp-block-column {
	box-sizing: border-box;
	flex: 0 0 50%;
}

.cdp-culture-slide__media {
	position: relative;
	min-height: 420px;
	padding: 0;
}

/* Pins the photo to the column so it can crop to whatever height the copy needs. */
.cdp-culture-slide__media .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.cdp-culture-slide__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cdp-culture-slide__body {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 50px;
	color: var(--cdp-navy);
}

.cdp-culture-slide__body > :first-child {
	margin-top: 0;
}

.cdp-culture-slide__body > :last-child {
	margin-bottom: 0;
}

.cdp-culture-slide__title {
	margin: 0 0 22px;
	color: var(--cdp-navy);
	font-size: clamp(26px, 3.2vw, 46px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.cdp-culture-slide__lead,
.cdp-culture-slide__key {
	display: block;
}

.cdp-culture-slide__key {
	color: var(--cdp-light-blue);
	font-size: clamp(36px, 4.6vw, 66px);
	line-height: 1.1;
}

.cdp-culture-slide__title::after {
	content: "";
	display: block;
	width: 80px;
	height: 12px;
	margin-top: 22px;
	background-color: var(--cdp-brand-orange);
}

.cdp-culture-slide__stat {
	margin: 0;
	color: var(--cdp-navy);
	font-size: 52px;
	font-weight: 600;
	line-height: 1.15;
}

.cdp-culture-slider__nav {
	position: absolute;
	z-index: 1;
	top: 24px;
	right: 24px;
	display: flex;
	gap: 2px;
}

.cdp-culture-slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background-color: var(--cdp-navy);
	color: var(--cdp-brand-orange);
	cursor: pointer;
	transition: background-color var(--cdp-transition) ease;
}

.cdp-culture-slider__arrow:hover:not(:disabled) {
	background-color: var(--cdp-light-blue);
}

.cdp-culture-slider__arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

.cdp-culture-slider__arrow svg {
	width: 20px;
	height: 20px;
}

/* Applications promo ------------------------------------------------------ */

.cdp-culture-promo {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	padding: 96px 28px;
	border-radius: 12px;
	background-color: var(--cdp-light-blue);
}

.cdp-culture-promo__title {
	margin: 0 0 24px;
	font-size: clamp(28px, 2.9vw, 42px);
	font-weight: 700;
	line-height: 1.1;
}

.cdp-culture-promo .wp-block-button__link {
	border: 2px solid var(--cdp-brand-orange);
	background-color: transparent;
	color: var(--cdp-white);
}

.cdp-culture-promo .wp-block-button__link:hover,
.cdp-culture-promo .wp-block-button__link:focus-visible {
	background-color: var(--cdp-brand-orange);
	color: var(--cdp-white);
}

/* The promo column is too narrow to read below this, so it drops under the slider. */
@media (max-width: 1199px) {
	.wp-block-columns.cdp-culture__layout {
		flex-wrap: wrap !important;
	}

	.cdp-culture__layout > .wp-block-column {
		flex-basis: 100% !important;
	}

	.cdp-culture-promo {
		padding: 48px 28px;
	}
}

@media (max-width: 781px) {
	.cdp-culture-slide__media {
		position: static;
		height: 220px;
		min-height: 0;
	}

	.cdp-culture-slide__media .wp-block-image {
		position: static;
		height: 100%;
	}

	.cdp-culture-slide__body {
		padding: 32px 24px;
	}

	/* Stacked slides are mostly copy, so the arrows drop below rather than sitting on the text. */
	.cdp-culture-slider {
		gap: 24px;
	}

	.cdp-culture-slider__nav {
		position: static;
	}
}

/* Working at CDP policies ------------------------------------------------- */

.cdp-policies__card {
	padding: 40px;
	border-radius: 8px;
}

.cdp-policies__title {
	margin: 0 0 16px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
}

.cdp-policies__card > :last-child {
	margin-bottom: 0;
}

/* Meet our leaders -------------------------------------------------------- */

.wp-block-cover.cdp-leadership {
	padding: 80px 40px;
}

/* The cover block defaults its descendants to white text. */
.cdp-leadership__lede {
	max-width: 720px;
	margin-inline: auto;
	color: var(--cdp-body-text);
}

.cdp-leadership__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px;
	margin-block-start: 48px;
}

/* Core's flow-layout gap would otherwise stack a margin on top of the grid gap. */
.cdp-leadership__grid > .cdp-leadership-card {
	margin-block-start: 0;
	padding: 24px;
	border-radius: 8px;
	background-color: var(--cdp-white);
	box-shadow: 0 5px 15px 0 #001d4f26;
	color: var(--cdp-body-text);
	text-align: center;
}

.cdp-leadership-card .wp-block-image {
	margin: 0 0 20px;
}

.cdp-leadership-card .wp-block-image img {
	display: block;
	width: 140px;
	margin-inline: auto;
	aspect-ratio: 1;
	border-radius: 999px;
	object-fit: cover;
}

/* Two classes, because editor.css styles headings as `.editor-styles-wrapper h3`. */
.cdp-leadership__grid .cdp-leadership-card__name {
	margin: 0;
	color: var(--cdp-navy);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
}

.cdp-leadership-card__title {
	margin: 6px 0 12px;
	color: var(--cdp-brand-orange);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cdp-leadership-card__bio {
	margin: 0;
	font-size: 16px;
}

@media (max-width: 767px) {
	.wp-block-cover.cdp-leadership {
		padding: 60px 10px;
	}

	.cdp-leadership__grid {
		margin-block-start: 32px;
	}
}

/* Our history timeline ---------------------------------------------------- */

.wp-block-group.cdp-history {
	padding: 80px 40px;
}

.cdp-history__lede {
	max-width: 720px;
	margin-inline: auto;
}

.cdp-timeline {
	position: relative;
	margin-block-start: 48px;
}

/* Centre spine the year markers sit on. */
.cdp-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background-color: var(--cdp-light-blue);
}

.cdp-timeline__item {
	position: relative;
	box-sizing: border-box;
	width: calc(50% - 40px);
	/* Core's flow-layout gap would fight the timeline's own rhythm. */
	margin-block-start: 0;
	padding: 20px 24px;
	border-radius: 8px;
	background-color: var(--cdp-white);
	box-shadow: 0 5px 15px 0 #001d4f26;
}

/* Cards alternate sides, so they can overlap vertically without touching. Kept well
   short of the shortest card so two entries on the same side never collide. */
.cdp-timeline__item + .cdp-timeline__item {
	margin-block-start: -40px;
}

.cdp-timeline__item:nth-child(even) {
	margin-inline-start: auto;
}

/* Marker dot, centred on the spine. */
.cdp-timeline__item::after {
	content: "";
	position: absolute;
	top: 28px;
	width: 16px;
	height: 16px;
	border: 3px solid var(--cdp-white);
	border-radius: 999px;
	background-color: var(--cdp-brand-orange);
}

.cdp-timeline__item:nth-child(odd)::after {
	right: -48px;
}

.cdp-timeline__item:nth-child(even)::after {
	left: -48px;
}

/* Two classes, because editor.css styles headings as `.editor-styles-wrapper h3`. */
.cdp-timeline .cdp-timeline__year {
	margin: 0 0 8px;
	color: var(--cdp-brand-orange);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
}

.cdp-timeline__item--now {
	background-color: var(--cdp-navy);
	color: var(--cdp-white);
}

.cdp-timeline .cdp-timeline__item--now .cdp-timeline__year {
	color: var(--cdp-white);
}

.cdp-timeline__item > :last-child {
	margin-bottom: 0;
}

/* Below the breakpoint the spine moves to a single left rail. Half-width cards
   already read as cramped on tablets, so this collapses earlier than the usual 767px. */
@media (max-width: 899px) {
	.cdp-timeline::before {
		left: 7px;
		margin-left: 0;
	}

	.cdp-timeline__item {
		width: calc(100% - 40px);
		margin-inline-start: 40px;
	}

	.cdp-timeline__item + .cdp-timeline__item {
		margin-block-start: 24px;
	}

	.cdp-timeline__item:nth-child(even) {
		margin-inline-start: 40px;
	}

	.cdp-timeline__item:nth-child(odd)::after,
	.cdp-timeline__item:nth-child(even)::after {
		right: auto;
		left: -40px;
	}
}

@media (max-width: 767px) {
	.wp-block-group.cdp-history {
		padding: 60px 10px;
	}
}