/* =========================================================
   WIDE CARDS
   ========================================================= */

.c-wide-cards {
	padding: 60px clamp(24px, 4.17vw, 80px);
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.c-wide-cards__header {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	text-align: center;
}

.c-wide-cards__header .eyebrow {
	margin-bottom: 12px;
	font-size: var(--text-md);
	font-weight: var(--font-weight-semibold);
	line-height: 180%;
	text-transform: uppercase;
}

.c-wide-cards__header h2 {
	margin: 0;
	font-size: var(--heading-h2);
	font-weight: var(--font-weight-regular);
	line-height: 120%;
	letter-spacing:-1.2px
}

.c-wide-cards__header p {
	margin: 16px auto 0;
	font-size: var(--text-md);
	font-weight: var(--font-weight-medium);
	line-height: 180%;
	padding-bottom:30px;
}


/* =========================================================
   CARD GRID
   ========================================================= */

.c-wide-cards__grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;

	width: 100%;
	max-width: var(--max-width);
	margin: 55px auto 0 !important;
}
/* Remove WPBakery clearfix pseudo-elements.
   Otherwise they become grid items. */

.c-wide-cards__grid:before,
.c-wide-cards__grid:after {
	display: none !important;
}


/* WPBakery column overrides */

.c-wide-cards__grid > .wpb_column {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}


/* Third card centered */

.c-wide-cards__grid > .wpb_column:nth-child(3) {
	grid-column: 1 / -1;
	width: calc(50% - 5px) !important;
	justify-self: center;
}


/* =========================================================
   CARD
   ========================================================= */

.c-wide-card {
	min-width: 0;
	border-radius: 18px;
	overflow: hidden;
}

.c-wide-card > .vc_column-inner {
	height: 100%;
	padding: 0 !important;
}

.c-wide-card > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;

	width: 100%;
	height: 100%;
	min-height: 220px;

	padding: 22px;
	box-sizing: border-box;
}


/* =========================================================
   TITLE
   ========================================================= */

.c-wide-card h3 {
	margin: 0 0 12px;

	font-size: var(--heading-h3);
	font-weight: var(--font-weight-semibold);
	line-height: 150%;
	letter-spacing:-0.72px;
}


/* =========================================================
   OPTIONAL ICON / NUMBER
   ========================================================= */

/*
Base icon slot.
Can be:
- WPBakery Heading set to span
- Image element
*/

.c-wide-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	align-self: flex-start;

	margin: 0 0 12px !important;

	flex: 0 0 auto;

	line-height: 1;
}

/* =========================================================
   NUMBERED VARIATION
   ========================================================= */

.c-wide-cards__grid.numbered .c-wide-card__icon {
	/*display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
*/
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;

	padding: 0 !important;
	margin: 0 0 12px !important;

	background-color: var(--color-yellow-bg) !important;
	color: var(--color-black) !important;

	border-radius: 50% !important;

	font-size: var(--text-xs) !important;
	line-height: 1 !important;
}


/* WPBakery's inner span */

.c-wide-cards__grid.numbered
.c-wide-card__icon .vcex-heading-inner {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 100% !important;
	height: 100% !important;

	padding: 0 !important;
	margin: 0 !important;

	background: transparent !important;
	color: var(--color-black) !important;

	font-size: var(--text-xs) !important;
	font-weight: var(--font-weight-regular);
	line-height: 1 !important;
}

/* =========================================================
   ICON CIRCLE VARIATION
   ========================================================= */

.c-wide-cards__grid.icon-circles .c-wide-card__icon {
	width: 42px !important;
	height: 42px !important;

	background: var(--color-yellow) !important;

	border-radius: 50% !important;
}


/* Image inside circle */

.c-wide-cards__grid.icon-circles
.c-wide-card__icon img {
	display: block;

	width: 42px !important;
	height: 42px !important;

	object-fit: contain;
}


/* SVG inside circle */

.c-wide-cards__grid.icon-circles
.c-wide-card__icon svg {
	display: block;

	width: 18px !important;
	height: 18px !important;
}

/* =========================================================
   ICON + TITLE INLINE
   ========================================================= */

/*
If an icon exists immediately before the H3,
put both on the same visual row.
*/

.c-wide-cards__grid.numbered .c-wide-card__icon + h3 {
	margin-top: -40px;
	margin-left: 40px;
	min-height: 28px;

	display: flex;
	align-items: center;

	line-height: 28px;
}


/* =========================================================
   CARD COPY
   ========================================================= */

.c-wide-card__intro {
	margin: 5px 0 16px;

	font-size: var(--text-md);
	font-weight: var(--font-weight-medium);
	line-height: 180%;
}

.c-wide-card__text {
	margin: 0 0 16px;

	font-size: var(--text-sm);
	line-height: 180%;
}


/* =========================================================
   CTA
   ========================================================= */

.c-wide-card .vcex-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 74px !important;
	min-width: 74px !important;
	max-width: 74px !important;
	height: 46px !important;

	padding: 0 !important;
	margin-top: auto;

	border-radius: 999px !important;

	box-sizing: border-box;
}


/* Inner button content */

.c-wide-card .vcex-button .vcex-button-inner {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 100%;
	height: 100%;

	padding: 0 !important;
	gap: 0 !important;

	/* Hides "Button Text" */
	font-size: 0 !important;
	line-height: 1 !important;
}


/* Restore arrow/icon size */

.c-wide-card .vcex-button .vcex-icon,
.c-wide-card .vcex-button i {
	font-size: 20px !important;
	margin: 0 !important;
}

.c-wide-card .vcex-button svg {
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
}




/* =========================================================
   DARK CARDS
   White section / black cards
   ========================================================= */

.c-wide-cards--dark-cards {
	background: var(--color-white);
	color: var(--color-off-black-text);
}

.c-wide-cards--dark-cards .c-wide-cards__header p {
	color: var(--color-gray-text);
}

.c-wide-cards--dark-cards .c-wide-card {
	background: var(--color-off-black);
	color: var(--color-white);
}

.c-wide-cards--dark-cards .c-wide-card__icon {
	background: var(--color-yellow);
	color: var(--color-black);
}
.c-wide-cards--dark-cards .c-wide-card .vcex-button,
.c-wide-cards--dark-cards .c-wide-card .vcex-button:hover {
	background: transparent !important;
	border: 1px solid var(--color-yellow) !important;
	color: var(--color-yellow) !important;
}
.c-wide-cards--dark-cards .theme-button-icon-right, 
.c-wide-cards--dark-cards .color-button-icon-right{padding-inline-start:0;}

/* =========================================================
   LIGHT CARDS
   Black section / white cards
   ========================================================= */

.c-wide-cards--light-cards {
	background: var(--color-black);
	color: var(--color-white);
}

.c-wide-cards--light-cards .c-wide-cards__header,
.c-wide-cards--light-cards .c-wide-cards__header .eyebrow,
.c-wide-cards--light-cards .c-wide-cards__header h2,
.c-wide-cards--light-cards .c-wide-cards__header p{
	color: var(--color-white);
}


.c-wide-cards--light-cards .c-wide-card {
	background: var(--color-white);
	color: var(--color-black);
}

.c-wide-cards--light-cards .c-wide-card__icon {
	background: var(--color-yellow);
	color: var(--color-black);
}

.c-wide-cards--light-cards .c-wide-card .vcex-button,
.c-wide-cards--light-cards .c-wide-card .vcex-button:hover {
	background: transparent !important;
	border: 1px solid var(--color-black) !important;
	color: var(--color-black) !important;
}
.c-wide-cards--light-cards .theme-button-icon-right, 
.c-wide-cards--light-cards .color-button-icon-right{padding-inline-start:0;}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

	.c-wide-cards__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.c-wide-cards__grid > .wpb_column:nth-child(3) {
		grid-column: auto;
		width: auto !important;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.c-wide-cards {
		padding: 48px 24px;
	}

	.c-wide-cards__grid {
		margin-top: 36px !important;
	}
	
	.c-wide-cards__header, 
	.c-wide-cards__header .align-center{
		text-align:left !important;
	}
	.c-wide-card > .vc_column-inner > .wpb_wrapper {
		min-height: 0;
		padding: 24px;
	}
	.c-wide-cards__grid.numbered .c-wide-card__icon{display:none !important;}
	.c-wide-cards__grid.numbered .c-wide-card__icon + h3{margin-top:0; margin-left:0;}
	
	.c-wide-cards--light-cards .c-wide-cards__header .vc_column_container>.vc_column-inner{
		padding-left:0;
		padding-right:0;
	}

}