/* TRA Results - front end. Fonts (Oswald, Nunito) come from the theme. */
.tra-res {
	--tra-red: #e2012d;
	--tra-ink: #333;
	--tra-muted: #777;
	--tra-bar: #3d3f45;
	--tra-track: #f1f1f1;
	font-family: Nunito, sans-serif;
	color: var(--tra-ink);
	width: 100%;
	container-type: inline-size;
}
.tra-res *, .tra-res *::before, .tra-res *::after { box-sizing: border-box; }
.tra-res p { margin: 0; }

/* Intro */
.tra-res__intro { margin-bottom: 32px; }
.tra-res__intro p + p { margin-top: 1em !important; }

/* Headline boxes */
.tra-res__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 36px; }
.tra-res__stat { background: #fff; border: 1px solid #e6e6e6; border-top: 4px solid var(--tra-ink); padding: 20px 18px; }
.tra-res__stat--hero { background: var(--tra-red); border-color: var(--tra-red); color: #fff; }
.tra-res__label { font-family: Oswald, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; margin-bottom: 8px !important; opacity: .85; }
.tra-res__num { white-space: nowrap; font-family: Oswald, sans-serif; font-weight: 700; font-size: 40px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tra-res__sub { font-size: 14px; margin-top: 8px !important; opacity: .85; }
.tra-res--total-only .tra-res__stat--hero { height: 100%; }

/* Chart */
.tra-res__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tra-res .tra-res__title { font-family: Oswald, sans-serif; font-weight: 600; color: var(--tra-red); text-transform: uppercase; font-size: 30px; line-height: 1.2; margin: 0; }
.tra-res__note { font-size: 14px; color: var(--tra-muted); }
.tra-res__list { list-style: none; margin: 0 !important; padding: 0 !important; }
.tra-res__row { display: grid; grid-template-columns: 96px 1fr 150px; align-items: center; gap: 14px; padding: 9px 0 9px 10px; margin: 0; border-bottom: 1px solid #eee; border-left: 4px solid transparent; }
.tra-res__year { font-family: Oswald, sans-serif; font-weight: 600; font-size: 22px; line-height: 1.1; }
.tra-res__tag { display: block; font-family: Nunito, sans-serif; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--tra-red); }
.tra-res__track { background: var(--tra-track); height: 26px; overflow: hidden; }
.tra-res__bar { background: var(--tra-bar); height: 100%; width: var(--w); }
.tra-res__val { text-align: right; line-height: 1.2; }
.tra-res__pts { font-family: Oswald, sans-serif; font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; }
.tra-res__gbp { display: block; font-size: 13px; line-height: 1.3; margin-top: 4px; color: var(--tra-muted); }

.tra-res__row--current { background: #fff5f7; border-left-color: var(--tra-red); }
.tra-res__row--current .tra-res__bar { background: var(--tra-red); }
.tra-res__row--current .tra-res__year,
.tra-res__row--current .tra-res__pts { color: var(--tra-red); }
.tra-res__row--neg .tra-res__bar { background: #c9c9c9; }
.tra-res__note-text { font-size: 15px; font-style: italic; margin-top: 14px !important; }
.tra-res__foot { font-size: 14px; color: var(--tra-muted); margin-top: 18px !important; }

/* [tra_total style="counter"] - big number with a smaller red £ */
.tra-counter { display: inline-flex; align-items: flex-start; font-family: Oswald, sans-serif; font-weight: 700; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff; }
.tra-counter--dark { color: #333; }
.tra-counter__pound { color: #e2012d; font-size: 36px; margin: .3em .06em 0 0; line-height: 1; }
.tra-counter__num { font-size: 59px; letter-spacing: .01em; }
@media (max-width: 1024px) { .tra-counter__num { font-size: 50px; } .tra-counter__pound { font-size: 31px; } }
@media (max-width: 767px)  { .tra-counter__num { font-size: 42px; } .tra-counter__pound { font-size: 26px; } }

/* Light animation - only when JS is running and the visitor hasn't asked for reduced motion */
@media (prefers-reduced-motion: no-preference) {
	.tra-js .tra-res--animate .tra-res__bar { width: 0; transition: width 1.1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 60ms); }
	.tra-js .tra-res--animate.is-in .tra-res__bar { width: var(--w); }
	.tra-js .tra-res--animate .tra-res__row { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i, 0) * 60ms); }
	.tra-js .tra-res--animate.is-in .tra-res__row { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
	.tra-res__stats { grid-template-columns: 1fr; gap: 10px; margin-bottom: 28px; }
	.tra-res__num { font-size: 34px; }
	.tra-res .tra-res__title { font-size: 24px; }
	.tra-res__row { grid-template-columns: 62px 1fr 92px; gap: 10px; }
	.tra-res__row { padding-left: 6px; }
	.tra-res__year { font-size: 18px; }
	.tra-res__track { height: 20px; }
	.tra-res__pts { font-size: 17px; }
}

@container (max-width: 640px) {
	.tra-res__stats { grid-template-columns: 1fr; gap: 10px; margin-bottom: 28px; }
	.tra-res__num { font-size: 34px; }
	.tra-res .tra-res__title { font-size: 24px; }
	.tra-res__row { grid-template-columns: 62px 1fr 92px; gap: 10px; }
	.tra-res__row { padding-left: 6px; }
	.tra-res__year { font-size: 18px; }
	.tra-res__track { height: 20px; }
	.tra-res__pts { font-size: 17px; }
}

@container (min-width: 641px) and (max-width: 860px) {
	.tra-res__num { font-size: 30px; }
	.tra-res__stat { padding: 16px 14px; }
}