/*
 * Homepage journey preview (Local only): Train (DESIGN-SPEC §5.3).
 * The library first (the primary and its two shortcuts), the approved workout ticket (its own CSS untouched: this file
 * only places it), the exercises note, then "Or make your own" as two plain cells (Workout Creator, Cardio Planner).
 * Below 1024 one column in DOM order, which is the phone order; from 1024 the approved Train orientation, ticket left
 * and head right, the ticket starting below the node's row. Motion: reveals only.
 * Every selector starts with .shh.shj; no --sh-* is defined here. Breakpoint: 1024 (and a 460 px container query).
 */

/* ---------- below 1024: one column in DOM order (a grid, so the ticket keeps its approved centring) ---------- */
.shh.shj .shj-grid--train { display: grid; grid-template-columns: minmax(0, 1fr); }
.shh.shj .shj-train-do { margin-top: 28px; }
.shh.shj .shj-train-shortcuts { margin-top: 14px; }
/* the ticket is a <figure>: Elementor's frontend.min.css resets figure margins at specificity (0,4,1)
   (".elementor .elementor-widget:not(…):not(…) figure"), so the ticket's margins are set at (0,5,0) */
.shh.shj .shj-sec--train .shj-grid--train > .shh-ticket { margin-top: 28px; }
/* the note reads as the ticket's caption: the ticket's own width and centring */
.shh.shj .shj-train-exnote { width: 100%; max-width: 560px; margin-top: 14px; justify-self: center; }
.shh.shj .shj-grid--train.is-solo > .shj-train-exnote { justify-self: start; }

/* the ways: two plain cells side by side when there is room. The container is the block that holds them (an element
   cannot query its own width). Two cells from 520 px: the Workout Creator button is 212 px wide and does not wrap, so
   at 460 px (a 184 px cell) it would spill out of its cell (viewports of about 1120 to 1250 px) */
.shh.shj .shj-make { margin-top: 36px; container-type: inline-size; }
.shh.shj .shj-ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
@container (min-width: 520px) {
	.shh.shj .shj-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.shh.shj .shj-way:only-child { grid-column: 1 / -1; }
}
.shh.shj .shj-way { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; padding: 18px 20px; border-radius: 18px; background: #fbfdfe; border: 1px solid var(--shh-line-soft); }
.shh.shj .shj-way-title { font: 700 18px/1.25 var(--shh-display); color: var(--shh-ink); }
.shh.shj .shj-way-text { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--shh-copy); }
.shh.shj .shj-way .shh-actions { margin-top: 14px; }
.shh.shj .shj-make-note { margin-top: 14px; }

/* ---------- 1024 and up: the approved Train orientation, ticket left, head right ---------- */
@media (min-width: 1024px) {
	.shh.shj .shj-grid--train:not(.is-solo) { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "ticket head" "ticket do" "ticket make" "exnote make"; grid-template-rows: auto auto auto 1fr; column-gap: 64px; }
	/* the head keeps its own height (a stretched head would centre the node lower in its row) */
	.shh.shj .shj-grid--train:not(.is-solo) > .shj-head { grid-area: head; align-self: start; }
	.shh.shj .shj-sec--train .shj-grid--train:not(.is-solo) > .shh-ticket { grid-area: ticket; align-self: start; margin-top: var(--shj-node-row); }
	.shh.shj .shj-grid--train:not(.is-solo) > .shj-train-do { grid-area: do; margin-top: 24px; }
	.shh.shj .shj-grid--train:not(.is-solo) > .shj-make { grid-area: make; margin-top: 36px; }
	.shh.shj .shj-grid--train:not(.is-solo) > .shj-train-exnote { grid-area: exnote; margin-top: 16px; }
	.shh.shj .shj-grid--train.is-solo > .shj-train-do { margin-top: 40px; }
}