/**
 * HTG Commercial Readiness Sprints — styles
 *
 * Two-tone full-bleed section. The cards row sits between the navy and
 * cream zones with negative margin so each card straddles the boundary.
 */

.htg-sprints {
	position: relative;
	width: 100%;
}

/* --- Inner constrained container (shared) ------------------------- */

.htg-sprints__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-x);
	position: relative;
	z-index: 1;
}

/* --- Navy zone --------------------------------------------------- */

.htg-sprints__navy {
	background: var(--c-navy);
	color: var(--c-white);
	padding-block: var(--sp-3xl);
	position: relative;
	overflow: hidden;
}

/* Heading + lede sit in a centered column, narrower than the full
   container, with text inside left-aligned. */
.htg-sprints__intro {
	max-width: 800px;
	margin-inline: auto;
}

/* Decorative bg image (Media Library upload, falls back to sprints-1.svg) */
.htg-sprints__topo {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.htg-sprints__topo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.htg-sprints__heading {
	margin: 0 0 var(--sp-md);
}

.htg-sprints__lede {
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}

.htg-sprints__lede p {
	max-width: 90ch;
	margin: 0 0 var(--sp-sm);
}
.htg-sprints__lede p:last-child {
	margin-bottom: 0;
}

/* --- Cards row (floats over navy/grey boundary) ----------------- */

.htg-sprints__cards-wrap {
	position: relative;
	z-index: 2;
	/* Pull the cards row up so it overlaps the navy zone above. The
	   cards-wrap is INSIDE __grey (which has the grey bg), so the cards'
	   bottom half sits on grey naturally; the negative margin extends
	   their top half into navy territory. */
	margin-top: calc(-1 * var(--sp-2xl));
	margin-bottom: var(--sp-2xl);
}

.htg-sprints--overlap-shallow .htg-sprints__cards-wrap {
	margin-top: calc(-1 * var(--sp-xl));
}

.htg-sprints--overlap-deep .htg-sprints__cards-wrap {
	margin-top: calc(-1 * var(--sp-3xl));
}

.htg-sprints__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-md);
}

.htg-sprints__card {
	background: var(--c-white);
	color: var(--c-ink);
	padding: var(--sp-lg);
	display: flex;
	flex-direction: column;
	gap: var(--sp-sm);
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.08),
		0 8px 24px rgba(0, 0, 0, 0.06);
}

.htg-sprints__card-eyebrow {
	font-family: var(--ff-mono);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-eyebrow);
	color: var(--c-ink-45, rgba(14, 13, 11, 0.45));
}

.htg-sprints__card-heading {
	margin: 0;
	font-family: var(--ff-serif);
	font-weight: 400;
	line-height: 1.05;
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
}

.htg-sprints__card-duration {
	font-family: var(--ff-mono);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-eyebrow);
	color: var(--c-ink);
	margin-top: var(--sp-xs);
}

.htg-sprints__card-price {
	font-family: var(--ff-serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 2vw, 2rem);
	color: var(--c-red);
	line-height: 1;
}

.htg-sprints__card-body {
	font-family: var(--ff-sans);
	font-weight: var(--fw-regular);
	font-size: 13px;
	line-height: 1.55;
	flex: 1;
	margin-top: var(--sp-xs);
}

.htg-sprints__card-body p {
	margin: 0 0 var(--sp-sm);
}
.htg-sprints__card-body p:last-child {
	margin-bottom: 0;
}

.htg-sprints__card-link {
	align-self: flex-start;
	margin-top: var(--sp-md);
}

/* Arrow nudges right on hover/focus — same motion tokens as the rest of the theme */
.htg-sprints__link-arrow {
	display: inline-block;
	transition: transform var(--dur-base) var(--ease-out);
}

.htg-sprints a:hover .htg-sprints__link-arrow,
.htg-sprints a:focus-visible .htg-sprints__link-arrow {
	transform: translateX(4px);
}

/* --- Cream zone -------------------------------------------------- */

/* Lower zone: contains the cards-wrap (which floats up into navy via
   negative margin) AND the caption. Both share the same grey bg, which
   is what makes the cards' bottom half sit on grey instead of on the
   page background. */
.htg-sprints__grey {
	background: #DCDCDC;
	color: var(--c-ink);
	padding-bottom: var(--sp-2xl);
}

.htg-sprints--lower-light-grey .htg-sprints__grey {
	background: #f1f1f1;
}

.htg-sprints--lower-white .htg-sprints__grey {
	background: var(--c-white);
}

.htg-sprints__caption {
	margin: 0;
	max-width: 50ch;
	margin-inline: auto;
	font-family: var(--ff-serif);
	font-weight: 400;
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	line-height: 1.35;
	text-align: center;
}

/* --- Responsive -------------------------------------------------- */

@media (max-width: 900px) {
	.htg-sprints__cards {
		grid-template-columns: 1fr;
	}
	.htg-sprints__cards-wrap {
		margin-top: var(--sp-lg);
	}
	.htg-sprints--overlap-shallow .htg-sprints__cards-wrap,
	.htg-sprints--overlap-deep .htg-sprints__cards-wrap {
		margin-top: var(--sp-lg);
	}
	.htg-sprints__navy {
		padding-block: var(--sp-2xl);
	}
	.htg-sprints__grey {
		padding-bottom: var(--sp-xl);
	}
}

/* --- Editor-specific tweaks ------------------------------------- */

/* Editor canvas is constrained — keep zones inside the editor frame. */
.editor-styles-wrapper .htg-sprints {
	max-width: 100%;
}