/**
 * CWC blocks (Genesis Custom Blocks in blocks/).
 *
 * Loaded on the front end after style.css, and in the block editor as an
 * editor style, so the editor previews match the site.
 */

/* Site fonts. Set here too, because the editor uses other fonts. */
.cwc-cards,
.cwc-checklist,
.cwc-topics,
.cwc-roles {
	font-family: "Jost", sans-serif;
}

/* Card grid */
.cwc-cards {
	display: grid;
	gap: 20px;
	margin-bottom: 30px;
}

.cwc-cards--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.cwc-cards--cols-3 {
	gap: 40px;
	grid-template-columns: repeat(3, 1fr);
}

/* One column that zig-zags right, left, right. */
.cwc-cards--staggered {
	display: flex;
	flex-direction: column;
	gap: 100px;
}

.cwc-cards--staggered > .cwc-card {
	width: 49%;
}

.cwc-cards--staggered > .cwc-card:nth-child(odd) {
	margin-left: auto;
}

.cwc-card {
	backdrop-filter: blur(20px);
	background: rgb(52 58 64 / 20%);
	border-radius: 8px;
	box-shadow: inset 0 -1px 0 rgb(255 255 255 / 14%),
	inset 1px 0 0 rgb(255 255 255 / 6%),
	inset -1px 0 0 rgb(255 255 255 / 6%),
	inset 0 1px 0 rgb(255 255 255 / 4%);
	padding: 36px;
	transition: .4s;
}

.cwc-card:hover {
	background: #27211e;
}

.cwc-cards--staggered > .cwc-card {
	background: transparent;
}

/* Card spanning the full grid row. */
.cwc-cards .cwc-card--wide {
	grid-column: 1 / -1;
}

.cwc-card__head {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 14px;
}

.cwc-card__rule {
	background: #D15E38;
	display: block;
	flex: none;
	height: 2px;
	width: 34px;
}

.cwc-card__rule:has(+ .cwc-card__step) {
	width: 24px;
}

.cwc-card__step {
	color: #D15E38;
	font-family: "Big Shoulders", sans-serif;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cwc-card__title {
	color: #fff;
	font-family: "Big Shoulders", sans-serif;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: 0.08em;
	line-height: 1.25;
	margin: 0 0 20px;
	text-transform: uppercase;
}

.cwc-card__text p {
	color: #fff;
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 10px;
}

.cwc-card__text p:last-child {
	margin-bottom: 0;
}

/* Checklist */
.cwc-checklist {
	display: grid;
	margin-bottom: 30px;
}

.cwc-checklist__item {
	align-items: center;
	display: flex;
	gap: 12px;
	position: relative;
}

.cwc-checklist__marker {
	flex: none;
}

.cwc-checklist__text {
	color: #fff;
	font-size: 16px;
	line-height: 1.5;
}

/* Two columns: flush rows with an orange line on top. */
.cwc-checklist--cols-2 {
	column-gap: 10px;
	grid-template-columns: repeat(2, 1fr);
}

.cwc-checklist--cols-2,
.cwc-solutions .entry-content > .cwc-checklist--cols-2 {
	margin-left: auto;
	margin-right: auto;
	max-width: 890px;
}

.cwc-checklist--cols-2.cwc-checklist--wide,
.cwc-solutions .entry-content > .cwc-checklist--cols-2.cwc-checklist--wide {
	max-width: 1002px;
}

.cwc-checklist--cols-2 .cwc-checklist__item {
	backdrop-filter: blur(20px);
	border-radius: 16px;
	box-shadow: inset 0 -1px 0 rgb(255 255 255 / 10%),
		inset -1px 0 0 rgb(255 255 255 / 8%);
	min-height: 84px;
	overflow: hidden;
	padding: 12px 36px;
}

.cwc-checklist--cols-2 .cwc-checklist__item::before {
	background: linear-gradient(90deg, transparent 0%, #D15E38 53%, transparent 100%);
	box-shadow: 0 0 6px 1px rgb(209 94 56 / 45%);
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.cwc-checklist--cols-2 .cwc-checklist__text {
	font-weight: 500;
	line-height: 1.48;
}

/* One column: spaced rows with a thin orange outline. */
.cwc-checklist--cols-1 {
	gap: 16px;
}

.cwc-checklist--cols-1 .cwc-checklist__item {
	backdrop-filter: blur(10px);
	background: rgb(255 255 255 / 2%);
	border: 1px solid rgb(209 94 56 / 45%);
	border-radius: 8px;
	box-shadow: inset 0 1px 0 rgb(209 94 56 / 25%);
	padding: 9px 16px;
}

.cwc-checklist--cols-1 .cwc-checklist__item:hover {
    background: rgb(255 255 255 / 10%);
}

/* Round orange tick. */
.cwc-checklist--check .cwc-checklist__marker {
	background-color: rgb(209 94 56 / 50%);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 4l3 3 6-6'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 11px 8px;
	border-radius: 50%;
	box-shadow: inset 0 -1px 0 rgb(255 255 255 / 30%),
		inset 0 1px 0 rgb(255 255 255 / 15%);
	height: 27px;
	width: 27px;
}

.cwc-checklist--bullet .cwc-checklist__marker {
	background: #fff;
	border-radius: 50%;
	height: 5px;
	width: 5px;
}

/* Topic tiles */
.cwc-topics {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin: 0 auto 30px;
	max-width: 958px;
}

.cwc-topics.\34 -col {
	grid-template-columns: repeat(4, 1fr);
}

.cwc-topics__tile {
	align-items: center;
	backdrop-filter: blur(20px);
	background: linear-gradient(135deg, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 35%) 55%, rgb(255 255 255 / 2%) 100%);
	border-radius: 16px;
	box-shadow: 0 6px 14px rgb(0 0 0 / 35%);
	color: #fff;
	display: flex;
	font-size: 14px;
	font-weight: 500;
	justify-content: center;
	line-height: 1.4;
	min-height: 109px;
	overflow: hidden;
	padding: 0 20px;
	position: relative;
	text-align: center;
}

/* Orange line along the top of every tile. */
.cwc-topics__tile::before {
	background: linear-gradient(90deg, transparent 0%, #D15E38 53%, transparent 100%);
	box-shadow: 0 1px 2px rgb(209 94 56 / 35%);
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

/* Glass rim, lit from the top left: bright at the top left and bottom right corners. */
.cwc-topics__tile::after {
	background: linear-gradient(135deg, rgb(255 255 255 / 45%) 0%, rgb(255 255 255 / 6%) 20%, rgb(255 255 255 / 4%) 65%, rgb(255 255 255 / 45%) 100%);
	border-radius: inherit;
	content: "";
	inset: 0;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	padding: 1px;
	pointer-events: none;
	position: absolute;
}

/* Role cards */
.cwc-roles {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 30px;
}

.cwc-roles__card {
	backdrop-filter: blur(20px);
	background: linear-gradient(180deg, rgb(0 0 0 / 20%) 62%, rgb(209 94 56 / 80%) 100%), rgb(52 58 64 / 20%);
	border-radius: 8px;
	box-shadow: inset 0 -1px 0 rgb(255 255 255 / 20%),
		inset 1px 0 0 rgb(255 255 255 / 6%),
		inset -1px 0 0 rgb(255 255 255 / 6%);
	min-height: 174px;
	padding: 36px;
}

.cwc-roles__title {
	color: #fff;
	font-family: "Jost", sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	margin-bottom: 14px;
	text-transform: none;
}

.cwc-roles__text p {
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	margin-bottom: 0;
}

/* Warm palette inside a .cwc-section group (the single solution pages). */
.cwc-section .cwc-card__title,
.cwc-section .cwc-card__text p,
.cwc-section .cwc-roles__title,
.cwc-section .cwc-roles__text p,
.cwc-section .cwc-topics__tile,
.cwc-section .cwc-checklist__text {
	color: #EBE4D8;
}

.cwc-section .cwc-checklist--cols-1 .cwc-checklist__item {
	border-color: rgb(209 94 56 / 60%);
}

/* Ticked lists get a quiet grey outline. */
.cwc-section .cwc-checklist--cols-1.cwc-checklist--check .cwc-checklist__item {
	border-color: rgb(235 228 216 / 12%);
	box-shadow: inset 0 -1px 0 rgb(235 228 216 / 8%);
}

.cwc-section .cwc-checklist--check .cwc-checklist__marker {
	background-color: #D15E38;
}

/* Grey glow instead of orange. */
.cwc-section .cwc-roles__card {
	background: linear-gradient(180deg, rgb(12 11 10 / 20%) 85%, rgb(52 58 64 / 80%) 100%), rgb(52 58 64 / 20%);
}

/* Editor only: a block or child with no content yet. */
.cwc-editor-empty {
	border: 1px dashed rgb(255 255 255 / 35%);
	border-radius: 8px;
	color: rgb(255 255 255 / 60%);
	font-size: 14px;
	padding: 16px;
	text-align: center;
}

@media only screen and (max-width: 1023px) {

	.cwc-topics, .cwc-topics.\34 -col {
		grid-template-columns: repeat(3, 1fr);
	}

	.cwc-cards--cols-3,
	.cwc-roles {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media only screen and (max-width: 781px) {

	.cwc-cards--cols-2,
	.cwc-cards--cols-3,
	.cwc-checklist--cols-2,
	.cwc-roles {
		grid-template-columns: 1fr;
	}

	.cwc-cards--staggered {
		gap: 20px;
	}

	.cwc-cards--staggered > .cwc-card {
		width: 100%;
	}

	.cwc-checklist--cols-2 .cwc-checklist__item {
		padding: 12px 20px;
	}

	.cwc-topics, .cwc-topics.\34 -col {
		grid-template-columns: repeat(2, 1fr);
	}

	.cwc-card {
		padding: 28px 24px;
	}

}