/**
 * Homepage patterns — hero-developer, trust-bar, validation-stack,
 * feedback-loop, already-want, process-steps. Single stylesheet (rather
 * than one-per-pattern) keeps the CSS budget down; cta-closer carries
 * zero rules (the centred-flow layout serialises entirely via block
 * primitives).
 *
 * Rules:
 *   1. Hero — two-col grid (text 1.2fr / visual 1fr), stacks at 900px.
 *   2. Validation card grid — 3-col → 2-col → 1-col responsive.
 *   2b. Tool-index card grid — same shape, image-on-top cards.
 *   2c. Muted eyebrow inside card grids — pattern-scoped palette override.
 *   3. Feedback-loop + already-want — column heading top-rhythm trim.
 *   4. List styling for feedback-loop + already-want bullets.
 *   5. Trust bar — 4-col grid with vertical-rule dividers + label/caption.
 *   6. Process steps — wireframe .step numeral grid + row divider.
 *   7. CTA closer — lead measure cap.
 *   8. 'What we test' list — row dividers (mirrors .ncom-feedback-list).
 *   9. FAQ — summary marker rotation (+ → ×).
 */

/* 1. Hero — two-col with text-priority */
.ncom-hero-developer-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--wp--preset--spacing--70);
	align-items: center;
}
@media (max-width: 900px) {
	.ncom-hero-developer-grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--60);
	}
}

.ncom-hero-developer-visual svg { display: block; width: 100%; height: auto; }
@media (max-width: 599px) {
	.ncom-hero-developer-visual { display: none; }
}

/* 2. Validation card grid — responsive 3 / 2 / 1.
   `.ncom-validation-grid` is a wp:group with is-layout-flow that we flip to
   display:grid via this className. WP's flow-layout rule still emits
   `> * + * { margin-block-start: var(--wp--style--block-gap) }` against the
   grid items — in flow that's harmless but in grid it pushes card 2/3 down
   relative to card 1 (which has the first-child margin-block-start:0 rule).
   Zero margin-block-start on direct children to keep grid items track-aligned. */
.ncom-validation-grid > *,
.ncom-tool-index-grid > * { margin-block-start: 0; }

.ncom-validation-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--50);
}
@media (max-width: 900px) {
	.ncom-validation-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.ncom-validation-grid {
		grid-template-columns: 1fr;
	}
}

.ncom-validation-card > .is-style-tnk-eyebrow {
	margin-bottom: var(--wp--preset--spacing--40);
}
.ncom-validation-card > .wp-block-heading {
	margin-top: 0;
}

/* 2c. Muted eyebrow inside card grids — quieter palette on white card surface
   (matches tech-site service-card spec). :not(.has-text-color) preserves the
   Recommended-card accent eyebrow in the timeline grid. */
.ncom-validation-grid p.is-style-tnk-eyebrow:not(.has-text-color),
.ncom-timeline-grid p.is-style-tnk-eyebrow:not(.has-text-color) {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast-2);
}

/* 2b. Tool-index card grid — same 3 / 2 / 1 shape as validation, with image-on-top cards */
.ncom-tool-index-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--50);
}
@media (max-width: 900px) {
	.ncom-tool-index-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.ncom-tool-index-grid {
		grid-template-columns: 1fr;
	}
}
.ncom-tool-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.ncom-tool-card__image,
.ncom-tool-card__image img {
	width: 100%;
	margin: 0;
}
.ncom-tool-card__image img {
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.ncom-tool-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.ncom-tool-card__body > .wp-block-heading {
	margin-top: 0;
}
.ncom-tool-card__cta {
	margin-top: auto;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.95rem;
}

/* 3. Feedback-loop + already-want — bullet rhythm */
.ncom-feedback-list,
.ncom-already-want__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--heading);
}
.ncom-feedback-list li,
.ncom-already-want__list li {
	padding: var(--wp--preset--spacing--30) 0;
	border-bottom: 1px solid var(--wp--custom--border--soft, rgba(25, 35, 33, 0.08));
}
.ncom-feedback-list li:last-child,
.ncom-already-want__list li:last-child {
	border-bottom: none;
}

/* 5. Trust bar — 3-col grid with vertical-rule dividers */
.ncom-trust-bar__inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--60);
}
.ncom-trust-bar__item {
	border-left: 2px solid var(--wp--preset--color--contrast-3);
	padding-left: var(--wp--preset--spacing--40);
	margin: 0;
}
.ncom-trust-bar__item strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--lg);
	margin-bottom: var(--wp--preset--spacing--10);
}
.ncom-trust-bar__item span {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast-3);
}
@media (max-width: 768px) {
	.ncom-trust-bar__inner { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); }
}

/* 6. Process steps — wireframe .step numeral grid */
.ncom-steps {
	max-width: 880px;
}
.ncom-step {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}
.ncom-step + .ncom-step {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--custom--border--soft, rgba(25, 35, 33, 0.12));
}
.ncom-step__num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-2);
	line-height: 1;
	margin: 0;
}
.ncom-step .wp-block-heading { margin-top: 0; }
@media (max-width: 600px) {
	.ncom-step { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); }
	.ncom-step__num { font-size: 2.25rem; }
}

/* 7. CTA closer — lead measure cap */
.ncom-cta-closer .has-lead-font-size { max-width: 56ch; margin-left: auto; margin-right: auto; }

/* 8. 'What we test' list — row dividers (mirrors .ncom-feedback-list) */
.ncom-validate-list { list-style: none; margin: 0; padding: 0; font-family: var(--wp--preset--font-family--heading); }
.ncom-validate-list li { padding: var(--wp--preset--spacing--30) 0; border-bottom: 1px solid var(--wp--custom--border--soft, rgba(25, 35, 33, 0.08)); }
.ncom-validate-list li:last-child { border-bottom: none; }

/* 9. FAQ — summary marker rotation (+ → ×) + readability (heading font, contrast colour) */
.ncom-faq__item summary { list-style: none; cursor: pointer; position: relative; padding-right: 32px; color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--heading); font-weight: 500; }
.ncom-faq__item summary:focus { outline: none; }
.ncom-faq__item summary:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.ncom-faq__item summary::after { content: "+"; position: absolute; right: 0; top: 0; transition: transform var(--wp--custom--transition--base); }
.ncom-faq__item[open] summary::after { transform: rotate(45deg); }
.ncom-faq__item > p { color: var(--wp--preset--color--contrast); }
@media (prefers-reduced-motion: reduce) { .ncom-faq__item summary::after { transition: none; } }