/* ---------------------------------------------------------
   General Grid v5
   Prefix: gg5-   Scope: .general-grid-v5
--------------------------------------------------------- */
.general-grid-v5 {
	/* Map these to your theme variables. Fallbacks match the comp. */
	--gg5-card-bg: var(--primarycolor);
	--gg5-eyebrow: var(--secondarycolor);
	--gg5-title: var(--white);
	--gg5-text: rgba(255, 255, 255, 0.82);
	--gg5-cta: var(--white);
}

.general-grid-v5 .gg5-col {
	display: flex;
	margin-bottom: 30px;
}

/* -------- Card ---------------------------------------- */
.general-grid-v5 .gg5-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
	background-color: var(--gg5-card-bg);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.general-grid-v5 a.gg5-card:hover,
.general-grid-v5 a.gg5-card:focus-visible {
	transform: translateY(-8px);
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.25);
}
.general-grid-v5 a.gg5-card:hover .gg5-cta .fa,
.general-grid-v5 a.gg5-card:focus-visible .gg5-cta .fa {
	transform: translateX(6px);
}
 
/* -------- Image --------------------------------------- */
.general-grid-v5 .gg5-image {
	width: 100%;
	aspect-ratio: 3 / 2;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
 
/* -------- Body ---------------------------------------- */
.general-grid-v5 .gg5-body {
	position: relative;
	overflow: hidden; /* clips the corner treatment to the panel */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 34px 34px 40px;
}
.general-grid-v5 .gg5-body > * {
	position: relative;
	z-index: 1;
}
 
/* Corner line treatment (decorative, built in CSS) ----- */
.general-grid-v5 .gg5-body::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 200px;
	height: 200px;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: bottom right;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1'%3E%3Ccircle cx='200' cy='200' r='80'/%3E%3Ccircle cx='200' cy='200' r='96'/%3E%3Ccircle cx='200' cy='200' r='112'/%3E%3Ccircle cx='200' cy='200' r='128'/%3E%3Ccircle cx='200' cy='200' r='144'/%3E%3Ccircle cx='200' cy='200' r='160'/%3E%3Ccircle cx='200' cy='200' r='176'/%3E%3Ccircle cx='200' cy='200' r='192'/%3E%3C/g%3E%3C/svg%3E");
}
 
/* -------- Eyebrow ------------------------------------- */
.general-grid-v5 .gg5-eyebrow {
	display: block;
	margin-bottom: 14px;
	color: var(--gg5-eyebrow);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.general-grid-v5 .gg5-eyebrow white {
  color: var(--white);
}
.general-grid-v5 .gg5-eyebrow blue {
  color: var(--healthcareblue);
}
 
/* -------- Title --------------------------------------- */
.general-grid-v5 .gg5-title {
	margin: 0 0 18px;
	color: var(--gg5-title);
	font-size: 30px;
	line-height: 1.15;
}
 
/* -------- Text ---------------------------------------- */
.general-grid-v5 .gg5-text {
	margin-bottom: 28px;
	color: var(--gg5-text);
	font-size: 16px;
	line-height: 1.6;
}
.general-grid-v5 .gg5-text p:last-child {
	margin-bottom: 0;
}
 
/* -------- CTA ----------------------------------------- */
.general-grid-v5 .gg5-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto; /* pins CTA to the bottom of the card */
	color: var(--gg5-cta);
	font-size: 17px;
	font-weight: 700;
}
.general-grid-v5 .gg5-cta .fa {
	transition: transform 0.3s ease;
}
 
/* -------- Responsive ---------------------------------- */
@media only screen and (max-width: 767px) {
	.general-grid-v5 .gg5-body {
		padding: 26px 24px 32px;
	}
	.general-grid-v5 .gg5-title {
		font-size: 26px;
	}
}