/* ==========================================================================
   Training template — Training and Development
   The navy petal holds the BOTTOM of the logo, so on this page it does not
   enter the masthead from an edge: it rises out of the band below it and
   becomes the ground of folio 01, where the solicitor's five competence
   duties run as a white route line. Below, on white, the seven courses are
   set as a 48px ruled syllabus.

   Written in the FINAL state first. Start states live only under
   .js-reveal [data-reveal]:not(.is-revealed), so with no JS, before main.js
   arms, or under reduced motion, the route is drawn and every node filled.

    1  Masthead           4  Route line (the set-piece)
    2  The rising petal   5  Syllabus
    3  The navy band      6  Next step
                          7  Responsive
   ========================================================================== */

/* 1. Masthead --------------------------------------------------------------
   Only petal B (red, small) lives in the masthead, top right. The H1 keeps
   to cols 1-7 so it wraps to two lines at every desktop width and never
   meets that petal; the strip stops at col 6 because petal A rises into the
   masthead's lower right (cols 1-7 left its rule ~18px from the petal at
   1280). */
main.t-training .mast--bottom .mast__h1 { grid-column: 1 / 8; }
main.t-training .mast--bottom .strip { grid-column: 1 / 7; }
main.t-training .mast--bottom .mast__petal--b { right: 14vw; top: calc(var(--header-h) + 7vw); }

/* 2. The rising petal (petal A) -------------------------------------------
   The FIRST CHILD of the navy band, never of the masthead: it is the band's
   own colour and positioned from the band's top edge, so the join cannot
   open at any width. Only its upper half shows, rising over the masthead.
   It settles up 80px when the band arrives, then drifts sideways only —
   any vertical drift would lift it off its seam. */
.rise {
	position: absolute;
	z-index: 0;
	top: calc(min(36vw, 690px) * -0.5);
	right: 6vw;
	width: min(36vw, 690px);
	aspect-ratio: 1;
	border-radius: 30%;
	background: var(--logo-navy);
	rotate: -10deg;
	pointer-events: none;
	transition: transform 0.9s var(--ease-out);
	animation: petal-drift 22s ease-in-out 0.9s infinite alternate;
	--dx: 18px;
	--dy: 0;
}
.js-reveal .folio--navy[data-reveal]:not(.is-revealed) .rise { transform: translateY(80px); }

/* 3. The navy band ----------------------------------------------------------
   Navy is the only saturated ground that carries text: white, 9.55:1. The
   band's content sits on a layer above the petal. */
main.t-training .folio--navy {
	position: relative;
	background: var(--logo-navy);
	color: var(--white);
}
main.t-training .folio--navy > .container { position: relative; z-index: 1; }
main.t-training .folio--navy .folio__grid::before { border-top-color: rgba(255, 255, 255, 0.45); }
main.t-training .folio--navy .folio__num { color: rgba(255, 255, 255, 0.18); }
/* navy lozenges would vanish on navy: the band's punctuation is yellow */
main.t-training .folio--navy .folio__num .lz { --c: var(--logo-yellow); }
main.t-training .folio--navy .statement::before { background: var(--logo-yellow); }
main.t-training .folio--navy .statement { color: var(--white); }
main.t-training .folio--navy .lead { color: rgba(255, 255, 255, 0.92); }
main.t-training .folio--navy ::selection { background: var(--logo-yellow); color: var(--ink); }

/* 4. Route line --------------------------------------------------------------
   'As a solicitor you need to', then five stops on one white line. The
   line draws left to right over 1.2s at a constant speed, so it reaches
   each column's node 240ms after the last; each node fills in its logo
   colour as the line arrives, and its words follow. */
.route-wrap {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
	margin-top: clamp(3rem, 5vw, 6rem);
}
.route-wrap > * { grid-column: 1 / -1; }
.route__lead {
	margin: 0 0 clamp(1.75rem, 2.9vw, 3.5rem);
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--h4);
	line-height: 1.3;
	color: var(--white);
}
.route {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: var(--card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* the line, through the nodes' centres (y = 28px), from the first node to
   the band's right edge */
.route::before {
	content: '';
	position: absolute;
	top: 28px;
	left: 12px;
	right: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.45);
	transform-origin: left;
	transition: transform 1.2s linear;
}
.route__stop {
	position: relative;
	padding-right: 2rem;
}
.route__mark {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.4rem;
}
/* the node: a 24px lozenge on the line, a 2px white outline around a
   navy centre, with a navy halo so the line stops short of it */
.route__node {
	position: relative;
	display: block;
	width: 24px;
	aspect-ratio: 1;
	margin-top: 16px;
	border-radius: 22%;
	rotate: 45deg;
	background: var(--logo-navy);
	box-shadow: inset 0 0 0 2px var(--white), 0 0 0 8px var(--logo-navy);
}
.route__node::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--c);
	transition: opacity 0.3s var(--ease-out), scale 0.45s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 240ms);
}
.route__n { color: var(--white); }
.route__text {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--lead);
	line-height: 1.42;
	color: var(--white);
	text-wrap: pretty;
	transition: opacity 0.5s var(--ease-out), translate 0.5s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 240ms + 120ms);
}
.js-reveal .route-wrap[data-reveal]:not(.is-revealed) .route::before { transform: scaleX(0); }
.js-reveal .route-wrap[data-reveal]:not(.is-revealed) .route__node::after { opacity: 0; scale: 0.4; }
.js-reveal .route-wrap[data-reveal]:not(.is-revealed) .route__text { opacity: 0; translate: 0 10px; }

/* 5. Syllabus -----------------------------------------------------------------
   The seven courses at 48px across cols 1-12. Each row keeps the page grid:
   the marker under the folio numeral (cols 1-3), the course aligned with the
   folio's copy (col 4). The rules draw in with the rows. */
/* the h2 is the list's own lead-in: one line where it fits (the chassis caps
   folio headings at 16em), set closer to its courses than to the statement */
main.t-training .syllabus__h { font-size: var(--h2-sm); max-width: none; margin-top: clamp(1rem, 2vw, 2.5rem); }
.syllabus { margin-top: clamp(0.25rem, 0.6vw, 0.75rem); }
main.t-training .syllabus .index { margin: 0 !important; }
main.t-training .syllabus .index > li {
	position: relative;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
	border: 0;
}
main.t-training .syllabus .index__mark { grid-column: 1 / 4; }
main.t-training .syllabus .index__text { grid-column: 4 / -1; }
main.t-training .syllabus .index > li::before,
main.t-training .syllabus .index > li:last-child::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	border-top: var(--rule);
	transform-origin: left;
	transition: transform 0.6s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 70ms);
}
main.t-training .syllabus .index > li:first-child::before { border-top: var(--rule-strong); }
main.t-training .syllabus .index > li:last-child::after { top: auto; bottom: 0; }
.js-reveal .syllabus[data-reveal]:not(.is-revealed) .index > li::before,
.js-reveal .syllabus[data-reveal]:not(.is-revealed) .index > li:last-child::after { transform: scaleX(0); }

/* 6. Next step ------------------------------------------------------------------
   The Training CTA title is long: set smaller and wider than the default. */
main.t-training .nextstep__copy h2 { font-size: var(--h2-sm); max-width: 18em; }
/* The ghost watermark still crosses the seam up into the section above —
   but here that section is the team strip, whose fourth member sits right
   under it, and the later section paints on top: at the chassis offset
   (-50%) it covered 'Sarah Elulade' and her role. Crossing by 16% keeps it
   inside the strip's bottom padding at every width (35-77px against a
   40-88px padding). */
main.t-training .nextstep .why__decor { top: calc(clamp(220px, 25vw, 480px) * -0.16); }

/* Reduced motion: the global block zeroes durations but not delays, so the
   staggered fills would still snap in one by one. Everything is final at once. */
@media (prefers-reduced-motion: reduce) {
	.rise,
	.route::before,
	.route__node::after,
	.route__text,
	main.t-training .syllabus .index > li::before,
	main.t-training .syllabus .index > li::after { transition-delay: 0s !important; }
}

/* 7. Responsive ------------------------------------------------------------- */
/* below 1280 the route turns vertical: a line at left 11px, each stop padded
   off it with its node on the line. The line is drawn per stop, from each
   node down to the next, so it ends on the last node whatever the text
   lengths are. */
@media (max-width: 1279px) {
	.route-wrap > * { grid-column: 4 / 12; }
	.route { grid-template-columns: minmax(0, 1fr); }
	.route::before { content: none; }
	.route__stop { padding: 0 0 1.5rem 2.5rem; }
	.route__stop:last-child { padding-bottom: 0; }
	.route__stop:not(:last-child)::before {
		content: '';
		position: absolute;
		left: 11px;
		top: 8px;
		bottom: -8px;
		border-left: 1px solid rgba(255, 255, 255, 0.45);
		transform-origin: top;
		transition: transform 0.24s linear;
		transition-delay: calc(var(--i, 0) * 240ms);
	}
	.route__mark { display: block; }
	.route__node { position: absolute; left: 0; top: -4px; margin: 0; }
	.route__n { display: block; }
	.route__text { margin-top: 0.4rem; }
	.js-reveal .route-wrap[data-reveal]:not(.is-revealed) .route__stop::before { transform: scaleY(0); }
}
@media (max-width: 1279px) and (prefers-reduced-motion: reduce) {
	.route__stop::before { transition-delay: 0s !important; }
}

@media (max-width: 1024px) {
	/* the masthead: petal B tucks into the corner under the running head and
	   the H1 drops just below it; petal A, still in the band and still
	   straddling, is 46vw — so the masthead keeps 24vw clear at its foot */
	main.t-training .mast--bottom { padding-bottom: 24vw; }
	main.t-training .mast--bottom .mast__h1 { padding-top: 14vw; }
	main.t-training .mast--bottom .strip { grid-column: 1 / -1; }
	main.t-training .mast--bottom .mast__petal--b {
		width: 12vw;
		right: 7vw !important;
		top: calc(var(--header-h) + 3.1vw + 3.5rem) !important;
	}
	.rise { width: 46vw; right: -10vw; top: calc(46vw * -0.5); }

	.route-wrap > * { grid-column: 3 / -1; }
	main.t-training .syllabus .index__mark { grid-column: 1 / 3; }
	main.t-training .syllabus .index__text { grid-column: 3 / -1; }
}

@media (max-width: 860px) {
	.route-wrap { display: block; }
	main.t-training .syllabus .index > li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; }
	main.t-training .syllabus .index__mark,
	main.t-training .syllabus .index__text { grid-column: auto; }
}

@media (max-width: 640px) {
	/* no corner petal at this size (petal B is hidden), so the H1 needs no
	   clearance above it */
	main.t-training .mast--bottom .mast__h1 { padding-top: 0; margin-top: 2rem; }
	.route__text { font-size: 1.125rem; }
}