/*
 * Homepage journey preview (Local only): Learn (DESIGN-SPEC §5.7). The head and its primary, the three guides (the
 * approved .shh-guide card and its phone rows, home.css:715-738), then the topics card beside the approved Think card
 * in .shh-bands (1.4fr / 1fr from 1024, home.css:741, 783-785; the night sky from thought-sky.css).
 * Every selector starts with .shh.shj. Breakpoints: 480, 768, 1024, 1280.
 */

/* phones: the primary directly after the lead (full width below 480: .shh-actions) */
.shh.shj .shj-learn-do { margin-top: 28px; }
.shh.shj .shj-guides { margin-top: 28px; }
.shh.shj .shj-bands { margin-top: 28px; }
/* a card in a row of three keeps its text right under its picture when a neighbour's title runs longer */
.shh.shj .shj-guides .shh-guide { align-content: start; }

/* the topics card: the old traditions card's surface, without the marquee */
.shh.shj .shj-topics { display: grid; gap: 14px; align-content: start; padding: clamp(20px, 2.6vw, 30px); border-radius: 26px; background: #f6f8f9; border: 1px solid #e3e9ec; }
.shh.shj .shj-topics .shh-seglist { margin-top: 2px; }
.shh.shj .shj-topics-fine { max-width: 58ch; font-size: 14.5px; line-height: 1.5; color: var(--shh-muted); }

/* the narrowest phones: the owner's longer label ("Discover", not "Visit") stays on one line in its pill */
@media (max-width: 374.98px) {
	.shh.shj .shh-think-go { padding-inline: 14px; font-size: 15px; }
}
@media (min-width: 768px) {
	/* the approved Explore head: the primary at the end of the head row, level with the lead */
	.shh.shj .shj-grid--learn { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head do" "guides guides" "bands bands"; column-gap: 40px; }
	.shh.shj .shj-grid--learn > .shj-head { grid-area: head; }
	.shh.shj .shj-grid--learn > .shj-learn-do { grid-area: do; align-self: end; margin-top: 0; }
	.shh.shj .shj-grid--learn > .shj-guides { grid-area: guides; }
	.shh.shj .shj-grid--learn > .shj-bands { grid-area: bands; }
}
@media (min-width: 1024px) {
	/* nothing shares the node's row: the button starts below it (the thread crosses that row to the left lane) */
	.shh.shj .shj-grid--learn > .shj-learn-do { margin-top: var(--shj-node-row); }
	.shh.shj .shj-guides { margin-top: 40px; }
	/* beside the taller Think card the topics card stretches: its fine print sits at the card's foot */
	.shh.shj .shj-topics { grid-template-rows: auto auto minmax(0, 1fr); }
	.shh.shj .shj-topics-fine { align-self: end; }
	/* no topics: the Think card alone */
	.shh.shj .shj-bands--solo { grid-template-columns: minmax(0, 1fr); }
}