/*
 * Homepage journey preview (Local only): Help (DESIGN-SPEC §5.6). The two doors and the faith note.
 * The Support door is .shh-support itself, so Support's rose surface, plum-deep type, centring and the one-time breathe
 * of its mark come from home.css:689-706 unchanged; only its box changes here (the band's top rule becomes the card's
 * border). The AI Helpers door is a white card holding the approved cast (six faces; four below 768, home.css:856).
 * Every selector starts with .shh.shj. Breakpoints: 480, 768, 1024, 1280.
 */

/* the doors: stacked below 1024, side by side from 1024 (head to body: 28px, then 40px) */
.shh.shj .shj-help-doors { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 28px; }

/* Sneaky Support: Support's own surface in a card's box */
.shh.shj .shj-support { padding: clamp(24px, 3vw, 40px); border: 1px solid #eccbdb; border-radius: 28px; }
.shh.shj .shj-support .shh-support-inner { margin-inline: auto; }
.shh.shj .shj-support h3 { color: var(--shh-plum-deep); }

/* AI Helpers: a white card, centred, the cast in the middle */
.shh.shj .shj-helpers { display: grid; justify-items: center; align-content: start; gap: 14px; padding: clamp(24px, 3vw, 40px); text-align: center; background: #fff; border: 1px solid var(--shh-line-soft); border-radius: 28px; box-shadow: 0 30px 60px -44px rgba(18, 44, 58, .5); }
.shh.shj .shj-helpers-text { max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--shh-copy); text-wrap: balance; }
.shh.shj .shj-cast { justify-self: stretch; margin-top: 6px; }
/* one track per face, so a long name can never widen its own portrait */
.shh.shj .shj-cast a { grid-template-columns: minmax(0, 1fr); }
.shh.shj .shj-cast strong { text-wrap: balance; }
.shh.shj .shj-helpers .shh-fine > span { text-wrap: pretty; }
.shh.shj .shj-helpers-credits { max-width: 52ch; font-size: 14.5px; line-height: 1.5; color: var(--shh-muted); text-wrap: balance; }
.shh.shj .shj-helpers > .shh-actions { margin-top: 4px; }

/* the faith note under both doors: one quiet link, kept apart from Health (the link's name stays on one line) */
.shh.shj .shj-faith { margin-top: 24px; text-align: center; line-height: 1.55; text-wrap: balance; }
.shh.shj .shj-faith a { white-space: nowrap; }

/* names stay inside their column where the door is narrow (the approved phone size, 14px) */
@media (max-width: 1279.98px) {
	.shh.shj .shj-cast strong { font-size: 14px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	.shh.shj .shj-cast { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 12px; }
}
@media (min-width: 1024px) {
	.shh.shj .shj-help-doors { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; margin-top: 40px; }
	/* the doors share one height: Support's centred content sits in the middle of its card */
	.shh.shj .shj-support { display: grid; align-content: center; }
	/* six faces in two rows of three; the approved 8-up row and its even-row offset (>= 1280) stay off in the door */
	.shh.shj .shj-cast { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; padding-bottom: 0; }
	.shh.shj .shj-cast li:nth-child(even) { transform: none; }
}

/* Support hidden: the AI Helpers door alone, centred (its button is then the section's primary) */
.shh.shj .shj-help-doors--solo { grid-template-columns: minmax(0, 1fr); }
.shh.shj .shj-help-doors--solo > .shj-helpers { width: 100%; max-width: 760px; margin-inline: auto; }
@media (min-width: 768px) {
	.shh.shj .shj-help-doors--solo .shj-cast { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}