/* ==========================================================================
   Service template — Complaints Handling, Compliance Support, Barristers
   The three set-pieces, each made only of the page's own words.
   ========================================================================== */

/* Complaints: the triptych -------------------------------------------------
   ONE <p>. The lead, then 'promptly,' / 'fairly' / 'and free of charge.' as
   three terms on a ruled line with a logo bead on each. The spaces between
   the spans stay in the DOM so the sentence reads verbatim. */
.triptych {
	display: grid;
	/* weighted to the words: 'and free of charge.' is nearly twice as long as
	   'fairly', and on equal tracks it left 'charge.' alone on a second line */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
	margin: 0;
}
.triptych__lead {
	grid-column: 1 / -1;
	max-width: 44em;
	margin-bottom: clamp(3rem, 5vw, 6rem);
	font-size: var(--read);
	line-height: 1.6;
	color: var(--ink);
}
.triptych__term {
	--stag: 0s;             /* the three terms play 90ms apart, left to right */
	position: relative;
	display: block;
	padding: 72px 1.5rem 0 0;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--statement);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--ink);
}
.triptych__term + .triptych__term { padding-left: 1.5rem; border-left: var(--rule); }
/* The --rule-strong top rule is its own layer so it can draw from the left. */
.triptych__term::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	border-top: var(--rule-strong);
	transform-origin: left;
	transition: transform 0.8s var(--ease-out) calc(0.1s + var(--stag));
}
/* over the divider's top pixel, so the rule reads as one unbroken line */
.triptych__term + .triptych__term::before { left: -1px; }
.triptych__word {
	display: block;
	text-wrap: balance;     /* should a narrow width ever wrap a term, no one-word widow */
	transition: opacity 0.6s var(--ease-out) calc(0.5s + var(--stag)),
		translate 0.6s var(--ease-out) calc(0.5s + var(--stag));
}
/* Centred on the rule with a negative margin, not `translate`: petal-drift
   animates `translate`, and would otherwise drop every bead half its height
   below the line whenever motion is on. The 45deg turn is in `transform`
   (not `rotate`) so the reveal's drop can sit in front of it and fall
   straight down; `translate` applies outside `transform`, so the drift still
   runs vertically too. */
.triptych__bead {
	--bead: clamp(40px, 3.3vw, 64px);
	position: absolute;
	top: 0;
	left: 1.5rem;
	width: var(--bead);
	margin-top: calc(var(--bead) / -2);
	aspect-ratio: 1;
	border-radius: 22%;
	transform: rotate(45deg);
	background: var(--logo-yellow);
	transition: opacity 0.5s var(--ease-out) calc(0.3s + var(--stag)),
		transform 0.6s var(--ease-out) calc(0.3s + var(--stag));
	animation: petal-drift var(--dur, 14s) ease-in-out 1s infinite alternate;
	--dx: 0px; --dy: 6px;
}
/* the lead is the <p>'s first span, so the terms are spans 2-4; the beads
   run in the logo's order: yellow, red, green */
.triptych__term:nth-of-type(2) .triptych__bead { left: 0; }
.triptych__term:nth-of-type(3) { --stag: 0.09s; }
.triptych__term:nth-of-type(4) { --stag: 0.18s; }
.triptych__term:nth-of-type(3) .triptych__bead { background: var(--logo-red); --dur: 16s; }
.triptych__term:nth-of-type(4) .triptych__bead { background: var(--logo-green); --dur: 18s; }
/* The band is its own reveal target (it sits far below its folio's top), so
   the set-piece plays when the band itself arrives, and only if it is
   observed: the rule draws, the beads drop from -24px, the words rise.
   These are start states only; no-JS, reduced motion and pre-arming never
   match them and show the final state. */
.js-reveal .triptych-band[data-reveal]:not(.is-revealed) .triptych__term::before { transform: scaleX(0); }
.js-reveal .triptych-band[data-reveal]:not(.is-revealed) .triptych__bead { opacity: 0; transform: translateY(-24px) rotate(45deg); }
.js-reveal .triptych-band[data-reveal]:not(.is-revealed) .triptych__word { opacity: 0; translate: 0 18px; }

/* Compliance: the checklist ------------------------------------------------
   Each duty's lozenge fills and ticks as the row crosses the middle of the
   screen. Written in its FINAL state; only html.check-live (set by folio.js
   when it is actually observing) draws the empty outline first. */
.index--check .lz { background: var(--acc); transition: background-color 0.35s var(--ease-out), scale 0.4s var(--ease-out); }
.index__tick {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: var(--white);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 12;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.35s ease 0.15s;
}
.index--check .index__lz { width: 20px; height: 20px; }
.index--check .index__lz .lz { width: 16px; }
html.check-live .index--check > li:not(.is-met) .lz { background: transparent; box-shadow: inset 0 0 0 1.5px var(--acc); scale: 0.85; }
html.check-live .index--check > li:not(.is-met) .index__tick { stroke-dashoffset: 12; }

/* Barristers: the citation -------------------------------------------------
   The BSB Handbook's CPD definition set like a statute, the rule reference
   hanging in the margin exactly as the sentence writes it. */
.citation {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	column-gap: var(--card-gap);
	align-items: start;
	margin: 1rem 0 2.5rem !important;
	padding-top: clamp(1.5rem, 2.5vw, 3rem);
	border-top: var(--rule-strong);
}
.citation__ref {
	grid-column: 1 / 4;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	transition: opacity 0.6s var(--ease-out), translate 0.6s var(--ease-out);
}
.citation__code {
	font-family: var(--font-head);
	font-weight: 600;
	/* the quote's reference hangs at numeral size in its three-column margin
	   ('rQ130.2' at 96px is ~330px of a ~420px margin at 1920, and scales
	   with it); a rule reference must never break at its hyphen */
	font-size: var(--numeral-sm);
	line-height: 1;
	letter-spacing: -0.03em;
	white-space: nowrap;
	color: var(--acc-text);
}
/* the compact instance keeps a compact reference: 'C99-C109' is longer, and
   sits beside plain reading text rather than a display quote */
.citation--plain .citation__code { font-size: clamp(1.5rem, 2.2vw, 2.625rem); }
.citation__ref .label { color: var(--body); }
.citation__q { grid-column: 4 / -1; margin: 0; }
.citation__q p {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--statement-sm);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-indent: -0.4em;   /* hang the opening quote */
	/* A measure in em, so it holds at every width (the type and the column
	   both scale with vw): on the full 21.2em column the definition ended on
	   a lone 'practice".' from 1366 up, and neither pretty nor balance (9
	   lines) moved it. At 20em it ends 'professional practice".' from 870 to
	   1920, still in 9 lines. */
	max-width: 20em;
	text-wrap: pretty;
}
/* both citations share one text edge */
.citation--plain .citation__body {
	grid-column: 4 / -1;
	margin: 0;
	font-size: var(--read);
	line-height: 1.65;
	color: var(--body);
}
.js-reveal [data-reveal]:not(.is-revealed) .citation__ref { opacity: 0; translate: -24px 0; }

/* Barristers: the steps — a line runs down through the lozenges */
.index--steps { position: relative; }
.index--steps::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--acc-pale);
	transform-origin: top;
	transition: transform 1s var(--ease-out);
}
.index--steps .index__lz .lz { box-shadow: 0 0 0 4px var(--white); }
.js-reveal [data-reveal]:not(.is-revealed) .index--steps::before { transform: scaleY(0); }

@media (max-width: 860px) {
	.triptych { display: block; }
	.triptych__lead { display: block; }
	.triptych__term {
		display: grid;
		grid-template-columns: 56px 1fr;
		align-items: center;
		padding: 1.25rem 0;
		border-left: 0 !important;
		font-size: 2rem;
	}
	.triptych__term::before { border-top: var(--rule); }
	.triptych__term + .triptych__term { padding-left: 0; }
	.triptych__term + .triptych__term::before { left: 0; }
	.triptych__bead { position: static; width: 32px; margin-top: 0; animation: none; }
	.citation { display: block; }
	.citation__ref { flex-direction: row; align-items: baseline; margin-bottom: 1rem; }
	/* 0,2,0 and later in the file: outranks both desktop sizes */
	.citation .citation__code { font-size: 2.5rem; }
	.citation__q p { font-size: 1.375rem; }
}

/* On paper the whole set-piece is there, whether or not it was scrolled past. */
@media print {
	.triptych__term::before { transform: none !important; }
	.triptych__bead { opacity: 1 !important; transform: rotate(45deg) !important; }
	.triptych__word { opacity: 1 !important; translate: none !important; }
}