/**
 * The answer-ready page standard (playbook §11).
 *
 * The eleven blocks always render in the same order with the same semantics, so a
 * buyer and a retrieval system meet the same structure on every priority page.
 */

/* ---- Hero -------------------------------------------------------------- */

.sfx-answer-hero {
	position: relative;
	background: var(--sfx-ink);
	color: var(--sfx-text-invert);
	padding-block: 220px var(--sfx-section-y-sm);
	overflow: hidden;
}

.sfx-answer-hero__media { position: absolute; inset: 0; z-index: 0; }
.sfx-answer-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }

/* Green scanline overlay — the biometric-capture motif from the production hero. */
.sfx-answer-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(22,22,22,0.95) 0%, rgba(22,22,22,0.65) 45%, rgba(22,22,22,0.25) 100%),
		repeating-linear-gradient(0deg, rgba(6,213,101,0.10) 0px, rgba(6,213,101,0.10) 1px, transparent 1px, transparent 5px);
}

.sfx-answer-hero__inner { position: relative; z-index: 1; }
.sfx-answer-hero__title { font-size: var(--sfx-fs-h1); margin: 0 0 24px; max-width: 20ch; }
.sfx-answer-hero__meta { display: flex; gap: 24px; flex-wrap: wrap; font-size: var(--sfx-fs-fine); color: var(--sfx-text-invert-muted); }

/* ---- Block 2: direct answer -------------------------------------------- */

/* Deliberately the first thing after the H1 and visually distinct. This is the
   40–60 word passage a generative engine is most likely to lift, so it must be
   self-contained: solution, buyer, outcome, no antecedents from earlier copy. */
.sfx-answer-direct {
	font-size: 20px;
	line-height: 1.6;
	max-width: var(--sfx-measure);
	padding: 28px 32px;
	background: var(--sfx-bg-alt);
	border-left: 3px solid var(--sfx-green);
	border-radius: 0 var(--sfx-radius) var(--sfx-radius) 0;
	margin: 0 0 var(--sfx-section-y-sm);
}

/* ---- Blocks ------------------------------------------------------------ */

.sfx-answer-block { margin-bottom: var(--sfx-section-y-sm); scroll-margin-top: 120px; }
.sfx-answer-block > h2 { font-size: var(--sfx-fs-h2); margin: 0 0 24px; }
.sfx-answer-block > h2 + .sfx-answer-block__intro { margin-top: -12px; }
.sfx-answer-block p, .sfx-answer-block li { max-width: var(--sfx-measure); }

/* ---- Block 5: capabilities --------------------------------------------- */

.sfx-capability-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.sfx-capability-list > li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 16px; align-items: start; }
.sfx-capability-list > li::before { content: ""; width: 12px; height: 2px; background: var(--sfx-green); margin-top: 0.6em; }
.sfx-capability-list__name { font-weight: var(--sfx-w-semibold); }
.sfx-capability-list__outcome { color: var(--sfx-text-muted); }

/* ---- Block 7: standards ------------------------------------------------ */

.sfx-standards { display: grid; gap: 16px; }
.sfx-standard { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--sfx-hairline-dark); align-items: baseline; }
.sfx-standard__scope { font-size: var(--sfx-fs-fine); color: var(--sfx-text-muted); display: block; }
/* Certifications carry scope and expiry. An expired certificate is flagged rather
   than silently rendered, and is withheld from schema. */
.sfx-standard__validity { font-size: var(--sfx-fs-fine); color: var(--sfx-text-muted); white-space: nowrap; }
.sfx-standard--expired .sfx-standard__validity { color: #B7791F; font-weight: var(--sfx-w-semibold); }

/* ---- Block 11: next action --------------------------------------------- */

.sfx-answer-cta {
	margin-top: var(--sfx-section-y-sm);
	padding: 40px;
	background: var(--sfx-ink);
	color: var(--sfx-text-invert);
	border-radius: var(--sfx-radius);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.sfx-answer-cta h2 { margin: 0 0 8px; font-size: var(--sfx-fs-h3); color: var(--sfx-white); }
.sfx-answer-cta p { margin: 0; color: var(--sfx-text-invert-muted); max-width: 52ch; }

/* ---- Case study -------------------------------------------------------- */

.sfx-case__outcome { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sfx-gutter); margin-bottom: var(--sfx-section-y-sm); }

/* ---- Person profile ---------------------------------------------------- */

.sfx-person__head { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--sfx-gutter); align-items: start; }
.sfx-person__photo { border-radius: var(--sfx-radius); width: 160px; height: 160px; object-fit: cover; }
.sfx-person__role { color: var(--sfx-text-muted); margin: 0 0 16px; }
.sfx-person__expertise { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sfx-person__expertise li { font-size: var(--sfx-fs-fine); padding: 4px 12px; border: 1px solid var(--sfx-grey-200); border-radius: var(--sfx-radius-pill); }

@media (max-width: 767px) {
	.sfx-answer-hero { padding-block: 150px var(--sfx-section-y-sm); }
	.sfx-answer-direct { font-size: 17px; padding: 20px 22px; }
	.sfx-person__head { grid-template-columns: minmax(0, 1fr); }
}