/*
 * grid.css (GLOBAL)
 * Shared "media/card grid" pattern used by both Home V2's "One
 * trusted partner for every answer that matters" (2-column asymmetric
 * grid) and Services' "Why Guidepoint" (3-column alternating grid).
 * Consolidated 2026-08-20 per Monika's request to have one stylesheet
 * per reusable component. The card + button styling is 100% identical
 * between the two, so it's merged into one shared rule below. Row
 * layout, media cells, headers, and breakpoints genuinely differ (2
 * vs 3 columns, different widths) so those stay in each page's own
 * section, in this same file.
 */

/* ---- Shared: card base (bg/radius/height/padding/layout/color) ---- */
.c-trusted-card,
.c-why-card-col {
	height: 370px;
	background-color: var(--color-black);
	border-radius: 10px;
	padding: 36px 40px;
	display: flex;
	flex-direction: column;
	color: var(--color-white);
	box-sizing: border-box;
}

/* ---- Shared: card body text ---- */
.c-trusted-card__body,
.c-why-card-body {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-size: 16px;
	line-height: 180%;
	color: var(--color-white);
	margin: 0;
}

/* ---- Shared: circular yellow button + arrow icon ---- */
.c-trusted-card__btn,
.c-why-card-btn {
	margin-top: 25px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 88px !important;
	height: 56px !important;
	border-radius: 9999px;
	background-color: var(--color-yellow-bg);
	border: 1px solid var(--color-yellow-bg);
	text-decoration: none;
	box-sizing: border-box;
	line-height: 0;
	padding: 0 !important;
}

/* The native vcex_button module always renders fallback "Button Text"
   when no text is set -- hide it visually (icon stays crisp via
   explicit px size below, unaffected by font-size:0). */
.c-trusted-card__btn .vcex-button-inner,
.c-why-card-btn .vcex-button-inner {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100%;
	height: 100%;
	font-size: 0;
}

.c-trusted-card__btn svg,
.c-why-card-btn svg {
	display: block;
	width: 20px !important;
	height: 20px !important;
}


/* ================================================================
   HOME V2 "One trusted partner for every answer that matters"
   (2-column asymmetric grid: c-trusted-*)
   ================================================================ */

.c-trusted-partner{
	padding: 90px clamp(16px, 4.17vw, 80px);

}

.c-trusted-partner-header{
	padding-bottom:90px;
	max-width:var(--max-width);
	margin:0 auto;
}
.c-trusted-partner-eyebrow{
	display:none;
	text-align: center !important;
	font-size: var(--text-md);
	font-weight: var(--font-weight-semibold);
	line-height:180%;
	text-transform:uppercase;
	margin-bottom:10px;
}

/*The paragraph's wpb_text_column has a fixed width="1200px" with no auto
  margins, so it sits flush-left within the row even with text-align:center
  applied (that only centers text INSIDE the box, not the box itself).*/
.c-trusted-partner-title {
	margin-left: auto !important;
	margin-right: auto !important;
}

.c-trusted-partner-header h2,
.c-trusted-partner-title {
	font-weight: var(--font-weight-normal) !important;
	font-size: var(--heading-h2);
	text-align:center;
}

.c-trusted-partner-subtitle {
	max-width:1000px;
	padding-left:0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.c-trusted-partner-subtitle p {
	text-align: center !important;
	font-size: var(--text-md);
	font-weight: var(--font-weight-medium);
	line-height:180%;
}

.c-trusted-grid {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.c-trusted-row {
	display: flex;
	gap: 15px;
	align-items: stretch;
	max-width:var(--max-width);
	margin:0 auto 15px;
}

.c-trusted-row--reverse {
	flex-direction: row-reverse;
}

.c-trusted-media {
	flex: 0 0 65%;
	max-width: 65%;
	background-color: #D9D9D9;
	border-radius: 10px;
	height: 370px;
	overflow: hidden;
}
.c-trusted-media .vc_column-inner{
	padding:0 !important;
}

.c-trusted-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.c-trusted-card {
	flex: 1;
}

.c-trusted-card__title {
	font-family: var(--font-primary) !important;
	font-weight: var(--font-weight-semibold) !important;
	font-size: var(--heading-h3) !important;
	line-height: 150% !important;
	letter-spacing: -3% !important;
	color: var(--color-white) !important;
	margin: 0 0 12px !important;
}

.c-trusted-card__btn {
	align-self: flex-start;
}

.c-trusted-card__btn .vcex-button-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
}



/*The native vcex_button module always renders fallback "Button Text" when
  no text is set — hide it visually (icon stays crisp via explicit px size
  above, unaffected by font-size:0). Added 2026-08-12*/
.c-trusted-card__btn svg path {
	fill: #111B29;
}

/*Between the desktop layout and the mobile stack breakpoint, the fixed
  370px card height can't grow, so shrinking width (which wraps the body
  text onto more lines) pushes the button out of the card. Compact the
  text/padding/button here so everything keeps fitting within 370px.
  Added 2026-08-12*/
@media (max-width: 1300px) and (min-width: 901px) {
	.c-trusted-card {
		padding: 24px 28px;
	}
	.c-trusted-card__title {
		font-size: 20px !important;
		margin-bottom: 8px !important;
	}
	.c-trusted-card__body {
		font-size: 13px !important;
		line-height: 150% !important;
	}
	.c-trusted-card__btn {
		margin-top: 15px !important;
		width: 64px;
		height: 40px;
	}
	.c-trusted-card__btn svg {
		width: 16px !important;
		height: 16px !important;
	}
}

@media (max-width: 900px) {
	.c-trusted-partner {
		padding: 90px 0 15px;
	}
	.c-trusted-media {
		display: none;
	}
	.c-trusted-card {
		flex: 1 1 100%;
		max-width: 100%;
		height: auto !important;
		padding: 30px 20px 40px;
	}
	.c-trusted-partner-eyebrow{
		display:block;
	}
	.c-trusted-partner-header h2,
	.c-trusted-partner-title {		
		font-size: var(--heading-h2-mobile);
		line-height:150%;
		letter-spacing:-3%;
	}
	.c-trusted-partner-subtitle p {
		font-weight: var(--font-weight-normal);
		font-size: var(--text-lg);
	}
	.c-trusted-card__title{
		font-size: var(--heading-h2-mobile) !important;
		font-weight: var(--font-weight-normal) !important;
	}
	.c-trusted-card__body{
		font-weight: var(--font-weight-normal);
		line-height:150%;
	}
}

.c-trusted-media .vc_column-inner,
.c-trusted-media .wpb_wrapper,
.c-trusted-media figure.vcex-image,
.c-trusted-media .vcex-image-inner {
	height: 100%;
	display: block;
}



/* ================================================================
   SERVICES "Why Guidepoint" (3-column alternating grid: c-why-*)
   ================================================================ */

/*
 * why-guidepoint-grid.css
 * "Why Guidepoint" section (Services page) — 3-column alternating
 * card/photo grid, same visual style as trusted-partner-grid.css
 * (Home V2 "One trusted partner" component), adapted for 3 equal
 * columns instead of 2 asymmetric ones.
 * Added 2026-08-19
 */

.c-why-guidepoint-grid {
	background-color: var(--color-white);
}

.c-why-row {
	display: flex;
	gap: 15px;
	align-items: stretch;
	margin-bottom: 15px;
}

/* Photo placeholder cells (empty until images are added) */
.c-why-media-col {
	flex: 0 0 calc(33.333% - 10px);
	max-width: calc(33.333% - 10px);
	height: 370px;
	background-color: #D9D9D9;
	border-radius: 10px;
	overflow: hidden;
}
.c-why-media-col .vcex-image-inner {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
}
.c-why-media-col img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Card cells */
.c-why-card-col {
	flex: 0 0 calc(33.333% - 10px);
	max-width: calc(33.333% - 10px);
}

.c-why-card-title {
	font-family: var(--font-primary) !important;
	font-weight: var(--font-weight-semibold) !important;
	font-size: 24px !important;
	line-height: 130% !important;
	color: var(--color-white) !important;
	margin: 0 0 12px !important;
}

/* Button: circular yellow, black arrow icon, matches trusted-partner-grid */
.c-why-card-btn svg path {
	fill: var(--color-black);
}

/* Mobile: stack everything, full width */
@media (max-width: 900px) {
	/* Mobile: hide all photo cells, show only the cards stacked one
	   below the other. Added 2026-08-19 */
	.c-why-media-col {
		display: none !important;
	}
	.c-why-row {
		flex-direction: column;
		margin-bottom: 0;
		gap: 15px;
	}
	.c-why-card-col {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		min-height: 220px;
	}
}


/* Wide media cell (row 1): spans 2 of the 3 columns as one continuous
   photo instead of two separate boxes.
   Added 2026-08-19 */
.c-why-media-col--wide {
	flex: 0 0 calc(66.666% - 5px);
	max-width: calc(66.666% - 5px);
}

@media (max-width: 900px) {
	.c-why-media-col--wide {
		flex: 1 1 100%;
		max-width: 100%;
	}
}


/* "Why Guidepoint" title row (eyebrow + h2 + subtitle), sits above the
   grid. Re-added 2026-08-19 after being accidentally dropped during an
   earlier rebuild of the grid itself. */
.c-why-title-row {
	max-width:var(--max-width);
	margin:0 auto;
}

.c-why-title-row .eyebrow {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-semibold);
	font-size: var(--text-md);
	color: var(--color-black);
	text-transform: uppercase;
	display: block;
	margin-bottom: 24px;
}

.c-why-title-row__title {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-size: var(--heading-h2);
	line-height: 120%;
	color: var(--color-black);
	margin: 0 0 24px;
	width: 100%;
}

.c-why-title-row__subtitle {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-size: var(--text-lg);
	line-height: 160%;
	color: #555555;
	margin: 0;
	width: 100%;
}

@media (max-width: 767px) {
	.c-why-title-row .eyebrow,
	.c-why-title-row__title,
	.c-why-title-row__subtitle {
		text-align: center;
	}
	.c-why-title-row__title,
	.c-why-title-row__subtitle {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}


/* Horizontal padding on the grid so it doesn't touch the viewport edges.
   Added 2026-08-19 
removed for max width fix
*/
.c-why-guidepoint-grid {
	/*padding-left: 80px !important;
	padding-right: 80px !important;
	box-sizing: border-box;*/
}

/* First row's wide image: focus lower in the frame instead of the
   vertical center. Added 2026-08-19 */
.c-why-media-col--wide .c-why-media img {
	object-position: center 100%;
}


/* Intermediate/tablet range: the fixed 370px card height + 36/40px
   padding left too little room for the text + button, causing overflow
   past the card edges. Reduce padding and font-size here, and let the
   card grow past 370px if content still needs more room.
   Added 2026-08-19 */
@media (max-width: 1300px) and (min-width: 901px) {
	.c-why-card-col {
		height: auto;
		min-height: 370px;
		padding: 24px 28px;
	}
	.c-why-card-title {
		font-size: 20px !important;
	}
	.c-why-card-body {
		font-size: 13px;
	}
}


/* The icon's own wrapping span (.vcex-button-icon) is wider than the
   SVG itself and left-aligns it by default, making the arrow look
   off-center within the button. Force it to center the SVG.
   Added 2026-08-19 */
.c-why-card-btn .vcex-button-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
}

.c-why-card-btn .vcex-button-inner {
	font-size: 0;
}


/* Mobile: reduce the 80px horizontal padding down to 16px on both the
   grid and the title/subtitle container above it.
   Added 2026-08-19 */
@media (max-width: 767px) {
	.c-why-guidepoint-grid {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.c-why-title-row {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}