/**
 * HTG How We Work — styles
 *
 * Two-column shell:
 *   row 1: intro (col 1)   |  two cards (col 2)
 *   row 2: empty (col 1)   |  sub-band CTA (col 2)
 */

.htg-how-we-work {
	/* Opt into a wider container (1260px ≈ standard 1140 + 120) without
	   touching the .alignfull machinery, which is reserved for full-bleed
	   colored sections. The theme's .site-main > * rule reads
	   --block-max-width and falls back to --container-max. */
	--block-max-width: 1260px;

	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-template-areas:
		"intro cards"
		".     cta";
	gap: var(--sp-md) var(--sp-xl);
}

.htg-how-we-work__intro {
	grid-area: intro;
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
}

.htg-how-we-work__heading {
	margin: 0;
}

.htg-how-we-work__subhead {
	font-size: var(--fs-base);
	line-height: 1.6;
}

.htg-how-we-work__subhead p { margin: 0 0 var(--sp-sm); }
.htg-how-we-work__subhead p:last-child { margin-bottom: 0; }

/* --- Cards row --------------------------------------------------- */

.htg-how-we-work__cards {
	grid-area: cards;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-md);
}

.htg-how-we-work__card {
	padding: var(--sp-xl);
	display: flex;
	flex-direction: column;
	gap: var(--sp-md);
}

.htg-how-we-work__card--dark {
	background: var(--c-ink);
	color: var(--c-white);
}

.htg-how-we-work__card--light {
	background: var(--c-cream-lo);
	color: var(--c-ink);
}

.htg-how-we-work__card-eyebrow {
	font-family: var(--ff-mono);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
}

.htg-how-we-work__card-heading {
	margin: 0;
	font-family: var(--ff-serif);
	font-weight: 400;
	line-height: 1.05;
	font-size: clamp(1.75rem, 2.5vw, 2.5rem);
}

.htg-how-we-work__card-body {
	font-family: var(--ff-sans);
	font-weight: var(--fw-regular);
	font-size: 13px;
	line-height: 1.55;
	flex: 1;
}

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

/* The "Learn more" link sits flush-left at the bottom of each card */
.htg-how-we-work__card .btn--learn-more {
	align-self: flex-start;
}

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

.htg-how-we-work a:hover .htg-how-we-work__link-arrow,
.htg-how-we-work a:focus-visible .htg-how-we-work__link-arrow {
	transform: translateX(4px);
}

/* --- Sub-band CTA ----------------------------------------------- */

.htg-how-we-work__cta {
	grid-area: cta;
	border-top: 1px solid var(--c-ink-10);
	border-bottom: 1px solid var(--c-ink-10);
	padding-block: var(--sp-md);
	/* 20px of inner space on both ends — text indents from the left,
	   button sits 20px in from the right. */
	padding-inline: 20px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--sp-md);
	align-items: center;
}

/* The 'Learn About Sprints' CTA button opts out of the global .btn
   +15px horizontal padding bump — it stays at the original size. */
.htg-how-we-work__cta-button {
	padding-inline: 1.5em;
}

.htg-how-we-work__cta-headline {
	font-weight: var(--fw-semibold, 600);
	margin: 0 0 var(--sp-xs);
}

.htg-how-we-work__cta-body {
	font-size: var(--fs-sm);
	line-height: 1.5;
	margin: 0;
	color: var(--c-ink-70);
}

/* On dark Section parents, flip the rule + body color to readable tones */
.htg-section--bg-navy      .htg-how-we-work__cta,
.htg-section--bg-dark-grey .htg-how-we-work__cta {
	border-top-color: rgba(255, 255, 255, 0.15);
	border-bottom-color: rgba(255, 255, 255, 0.15);
}

.htg-section--bg-navy      .htg-how-we-work__cta-body,
.htg-section--bg-dark-grey .htg-how-we-work__cta-body {
	color: rgba(255, 255, 255, 0.7);
}

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

@media (max-width: 900px) {
	.htg-how-we-work {
		grid-template-columns: 1fr;
		grid-template-areas:
			"intro"
			"cards"
			"cta";
		gap: var(--sp-lg);
	}
	.htg-how-we-work__cards {
		grid-template-columns: 1fr;
	}
	.htg-how-we-work__cta {
		grid-template-columns: 1fr;
	}
}