/* =========================================================================
   Steps / Cards: centered heading + intro, then a row of hover cards
   ========================================================================= */

.nhc-steps__head {
	text-align: left;
	margin: 0 0 48px;
}

.nhc-steps__heading {
	margin: 0 0 18px;
	font-size: 46px;
	line-height: 1.15;
	font-weight: 400;       /* inherits the theme heading font (e.g. Lora) */
	color: #3a3a3a;
	white-space: nowrap;    /* keep the section heading on one line */
}

/* Accent highlight — any <span> inside the heading (half-text style) */
.nhc-steps__heading span {
	font-style: italic;
	font-weight: 700;
	background-image: linear-gradient(to right, #00A1B180 0, rgba(255, 107, 48, 0.01) 100%);
	background-repeat: no-repeat;
	background-size: 0% 0.4em;
	background-position: 0 78%;
	transition: background-size 1.04s cubic-bezier(0.19, 1, 0.22, 1);
	padding: 0 .02em;
}

.nhc-steps__heading span.nhc-hl-in { background-size: 100% 0.4em; }

.nhc-steps__intro {
	max-width: 820px;
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: #6f6f6f;
}
.nhc-steps__intro > :first-child { margin-top: 0; }
.nhc-steps__intro > :last-child  { margin-bottom: 0; }

/* ---------- Cards grid ---------- */
.nhc-steps__grid {
	display: grid;
	gap: 50px;
	grid-template-columns: repeat(3, minmax(0, 294px));
	justify-content: start;
}
.nhc-steps__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 294px)); }
.nhc-steps__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 294px)); }
.nhc-steps__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 294px)); }

.nhc-steps__card {
	background: #ffffff;
	border-radius: 10px;
	padding: 36px 32px;
	box-shadow: 0 12px 30px rgba(20, 20, 35, 0.06);
	transition: transform .3s ease, box-shadow .3s ease;
	will-change: transform;
}
/* Subtle lift on hover (designer request) */
.nhc-steps__card:hover,
.nhc-steps__card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 20px 45px rgba(20, 20, 35, 0.12);
}

.nhc-steps__num {
	margin-bottom: 14px;
	font-family: 'Lora', Georgia, 'Times New Roman', serif;
	font-size: 42px;
	font-weight: 400;
	line-height: 1;
	color: #137e83;
}

.nhc-steps__title {
	margin: 0 0 14px;
	font-size: 28px;
	line-height: 1.2;
	font-weight: 400;       /* inherits the theme heading font (e.g. Lora) */
	color: #3a3a3a;
}

.nhc-steps__text {
	font-size: 16px;
	line-height: 1.7;
	color: #6f6f6f;
	overflow-wrap: anywhere;
}
.nhc-steps__text > :first-child { margin-top: 0; }
.nhc-steps__text > :last-child  { margin-bottom: 0; }
.nhc-steps__text p { margin: 0 0 1em; }
.nhc-steps__text-body { margin: 0; }

/* ---------- Read more / less ---------- */
.nhc-steps__text-rest[hidden],
.nhc-steps__text-ellipsis[hidden] { display: none; }

.nhc-steps__toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	padding: 0;
	background: none;
	border: 0;
	color: #137e83;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: color .2s ease;
}
.nhc-steps__toggle::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);   /* chevron down when collapsed */
	transition: transform .2s ease;
}
.nhc-steps__toggle[aria-expanded="true"]::after {
	transform: translateY(1px) rotate(-135deg);  /* chevron up when expanded */
}
.nhc-steps__toggle:hover,
.nhc-steps__toggle:focus-visible {
	color: #0e6b70;
	text-decoration: underline;
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 980px) {
	.nhc-steps__grid { grid-template-columns: repeat(2, minmax(0, 294px)); }
}
@media only screen and (max-width: 600px) {
	.nhc-steps__heading { font-size: 32px; white-space: normal; }

	/* Cards become a swipeable horizontal slider (CSS scroll-snap, no JS) */
	.nhc-steps__grid {
		display: flex;
		grid-template-columns: none;
		gap: 16px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 0;
		padding: 8px 0 24px;        /* room for the card shadow + hidden scrollbar */
		scrollbar-width: none;       /* Firefox */
	}
	.nhc-steps__grid::-webkit-scrollbar { display: none; } /* WebKit */
	.nhc-steps__card {
		flex: 0 0 82%;               /* card width; next card peeks to signal swipe */
		scroll-snap-align: start;
	}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	.nhc-steps__card { transition: none; }
	.nhc-steps__card:hover,
	.nhc-steps__card:focus-within { transform: none; }
}
