/*
 * Homepage journey preview (Local only): Trainers (DESIGN-SPEC §5.8, owner refinement A5).
 * The closing band (base: the approved #eef8fc → #dff1f9 gradient). Below 1024 one column in DOM order: the head, the
 * primary, the status line, the checklist, then the trainer example card (A5). From 1024 two equal columns: the copy on
 * the left (the head at the content's left edge, its node exiting to the left lane) and the card on the right, below
 * the node's row.
 * Every small text on this band is the copy colour: the muted colour is 4.41:1 at the band's end (#dff1f9).
 * Every selector starts with .shh.shj; no --sh-* is defined here. Breakpoints: 1024.
 */

/* ---------- the section: one column in DOM order below 1024 ---------- */
.shh.shj .shj-grid--trainers { display: grid; grid-template-columns: minmax(0, 1fr); }
.shh.shj .shj-trainers-do { margin-top: 28px; }
.shh.shj .shj-trainers-status { margin-top: 14px; text-wrap: pretty; }
.shh.shj .shj-sec--trainers .shj-trainers-can { margin-top: 20px; }
.shh.shj .shj-trainers-can li { text-wrap: pretty; } /* no one-word last lines ("statement", "listed") */
/* the card is a <figure>: Elementor's frontend.min.css resets figure margins at (0,4,1), so its margin is set at (0,5,0) */
.shh.shj .shj-sec--trainers .shj-grid--trainers > .shj-seat { margin: 28px 0 0; }
/* small text on the band: the copy colour, 6.8:1 at the band's end */
.shh.shj .shj-sec--trainers .shh-note { color: var(--shh-copy); }

/* ---------- the card: a light card (the seat's surface) ---------- */
.shh.shj .shj-seat { position: relative; min-width: 0; padding: clamp(20px, 2.6vw, 30px); border-radius: 26px; background: #fff; border: 1px solid var(--shh-line-soft); box-shadow: 0 30px 60px -44px rgba(18, 44, 58, .5); }
.shh.shj .shj-seat-k { margin: 0; font: 800 12px/1 var(--shh-text); letter-spacing: .11em; text-transform: uppercase; color: var(--shh-ink); }
/* the empty seat: a dashed circle (nobody is listed yet) with the person glyph, which has no AI spark */
.shh.shj .shj-seat-node { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 2px dashed #8fa4b2; color: #587183; }
.shh.shj .shj-seat-node .shh-i { width: 30px; height: 30px; }
/* Hello Elementor's reset makes every figcaption 16px italic #333: the font shorthand restates all of it */
.shh.shj .shj-seat-cap { margin-top: 18px; font: 400 14.5px/1.5 var(--shh-text); color: var(--shh-copy); text-wrap: pretty; }

/* ---------- A5: five parts of a connected journey, joined to the seat by one dotted stem ----------
   Three a member can share when the marketplace opens, and two labelled "Planned", worded as the public launch page
   words them. The stem uses the hero's dotted-stem grammar; each badge carries a white ring so the dots stop at it. */
.shh.shj .shj-tx-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.shh.shj .shj-tx .shj-seat-node { position: relative; z-index: 1; width: 56px; height: 56px; }
.shh.shj .shj-tx .shj-seat-node .shh-i { width: 28px; height: 28px; }
.shh.shj .shj-tx-title { margin: 6px 0 0; font: 700 clamp(1.08rem, .98rem + .35vw, 1.25rem)/1.2 var(--shh-display); letter-spacing: -.015em; color: var(--shh-ink); text-wrap: balance; }
.shh.shj .shj-tx-rows { position: relative; display: grid; gap: 14px; margin: 18px 0 0; padding: 0 0 0 11px; list-style: none; }
.shh.shj .shj-tx-rows::before { content: ""; position: absolute; left: 26px; top: -18px; bottom: 16px; width: 4px; background: radial-gradient(circle, #8fa4b2 1.25px, rgba(143, 164, 178, 0) 1.7px) 50% 0 / 4px 8px repeat-y; }
.shh.shj .shj-tx-row { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: start; margin: 0; }
.shh.shj .shj-tx-row .shh-badge { position: relative; width: 34px; height: 34px; box-shadow: 0 0 0 4px #fff; }
.shh.shj .shj-tx-row .shh-badge .shh-i { width: 19px; height: 19px; }
.shh.shj .shj-tx-row .shh-badge.shj-tx-badge--planned { background: #fff; color: #587183; border: 2px dashed #8fa4b2; }
.shh.shj .shj-tx-text { display: grid; gap: 2px; min-width: 0; padding-top: 1px; font: 400 14.5px/1.45 var(--shh-text); color: var(--shh-copy); text-wrap: pretty; }
.shh.shj .shj-tx-text b { font: 700 15.5px/1.3 var(--shh-text); color: var(--shh-ink); }
.shh.shj .shj-tx-text .shj-tx-planned { margin-left: 6px; font: 800 11px/1 var(--shh-text); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #587183; white-space: nowrap; }
.shh.shj .shj-tx-row.is-planned .shj-tx-text b { color: var(--shh-copy); }

/* ---------- 1024 and up: the copy on the left, the card on the right below the node's row ---------- */
@media (min-width: 1024px) {
	.shh.shj .shj-grid--trainers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head seat" "do seat" "status seat" "can seat"; column-gap: 56px; }
	/* the head keeps its own height, so its node stays at the top of the row */
	.shh.shj .shj-grid--trainers > .shj-head { grid-area: head; align-self: start; }
	.shh.shj .shj-grid--trainers > .shj-trainers-do { grid-area: do; margin-top: 40px; }
	.shh.shj .shj-grid--trainers > .shj-trainers-status { grid-area: status; }
	.shh.shj .shj-grid--trainers > .shj-trainers-can { grid-area: can; }
	.shh.shj .shj-sec--trainers .shj-grid--trainers > .shj-seat { grid-area: seat; grid-row: 1 / span 4; align-self: center; margin-top: var(--shj-node-row); }
}