/*
 * Newsroom modules shared by the homepage and News & Community (brief p7/p8):
 * topic card row, conversations band, More from the newsroom, Explore by
 * topic, Explore shop. Loaded on the front page and every news surface.
 */

/* Section bar: small uppercase heading left, green "view all" right. */
.tg-section-bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--tg-sp-4); margin-bottom: var(--tg-sp-4);
}
.tg-section-bar--tight { margin-bottom: var(--tg-sp-3); }
.tg-newscards .tg-section-head, .tg-newsmore .tg-section-head,
.tg-topics .tg-section-head, .tg-exploreshop .tg-section-head,
.tg-funds .tg-section-head, .tg-guides .tg-section-head,
.tg-nhero .tg-section-head {
	font-size: var(--tg-fs-sm); text-transform: uppercase; letter-spacing: .08em;
	font-weight: var(--tg-fw-bold); margin: 0;
}
.tg-viewall {
	font-size: var(--tg-fs-xs); font-weight: var(--tg-fw-bold); white-space: nowrap;
	text-transform: uppercase; letter-spacing: .06em; color: var(--tg-link);
}

/* Grids below size themselves to the SPACE THEY SIT IN, not the window: these
   are blocks, so they also land inside narrow page containers, where a
   viewport media query would squeeze four columns into 120px each. */
.tg-newscards, .tg-newsmore, .tg-topics, .tg-exploreshop { container-type: inline-size; }

/* ---- 1. Topic-labelled card row ---- */
.tg-newscards__grid { display: grid; gap: var(--tg-sp-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tg-newscard {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 320px; padding: var(--tg-sp-4); border-radius: var(--tg-radius);
	overflow: hidden; color: #fff; background-color: var(--tg-black);
	background-image: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.92) 100%), var(--tg-card-img, none);
	background-size: cover; background-position: center;
}
.tg-newscard:hover { text-decoration: none; box-shadow: var(--tg-shadow-lg); }
.tg-newscard:hover .tg-newscard__arrow { transform: translateX(3px); }
.tg-newscard--noimg { background-image: linear-gradient(180deg, var(--tg-n-800), var(--tg-black)); }
/* In flow for the same reason as .tg-leadstory__chip: the card is
   `justify-content: flex-end`, so a long title grows up into a chip pinned at
   `top: 16px`. `margin-bottom: auto` parks the chip at the top and puts the
   slack between it and the text. */
.tg-newscard__cat {
	align-self: flex-start; margin-bottom: auto;
	background: var(--tg-green-fill); color: #fff; border-radius: var(--tg-radius-sm);
	padding: 3px var(--tg-sp-2); font-size: var(--tg-fs-xs); font-weight: var(--tg-fw-bold);
	text-transform: uppercase; letter-spacing: .04em;
}
.tg-newscard__title {
	display: block; margin-top: var(--tg-sp-3); font-weight: var(--tg-fw-bold); font-size: var(--tg-fs-md);
	line-height: 1.25; margin-bottom: var(--tg-sp-3);
}
.tg-newscard__meta {
	display: flex; align-items: center; justify-content: space-between; gap: var(--tg-sp-3);
	font-size: var(--tg-fs-xs); color: var(--tg-n-300);
}
.tg-newscard__arrow { color: var(--tg-green); font-size: var(--tg-fs-md); transition: transform .15s ease; }
@container (min-width: 900px) { .tg-newscards__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- 2. Conversations band ---- */
.tg-conversations {
	background: var(--tg-black); color: #fff;
	background-image: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 70%, rgba(0,0,0,.4) 100%), var(--tg-band-img, none);
	background-size: cover; background-position: center;
}
.tg-conversations__inner {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
	gap: var(--tg-sp-5); padding-block: var(--tg-band-y);
}
.tg-conversations__title { font-size: var(--tg-fs-xl); margin: 0 0 var(--tg-sp-2); text-transform: uppercase; }
.tg-conversations__lead { margin: 0; color: var(--tg-n-300); max-width: 60ch; font-size: var(--tg-fs-sm); }

/* ---- 3. More from the newsroom ---- */
.tg-newsmore__grid { display: grid; gap: var(--tg-sp-4); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@container (min-width: 1000px) { .tg-newsmore__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tg-newsmore__item { display: block; color: inherit; }
.tg-newsmore__item:hover { text-decoration: none; }
.tg-newsmore__item:hover .tg-newsmore__title { color: var(--tg-link); }
.tg-newsmore__media {
	display: block; aspect-ratio: 16/10; margin-bottom: var(--tg-sp-3);
	border-radius: var(--tg-radius); overflow: hidden; background: var(--tg-n-200);
}
.tg-newsmore__media img { width: 100%; height: 100%; object-fit: cover; }
.tg-newsmore__cat { display: block; font-size: var(--tg-fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tg-green-text); font-weight: var(--tg-fw-bold); }
.tg-newsmore__title { display: block; font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); line-height: 1.3; margin: 2px 0; }
.tg-newsmore__meta { display: block; font-size: var(--tg-fs-xs); color: var(--tg-text-muted); }

/* ---- 4. Explore by topic ---- */
.tg-topics__grid { display: grid; gap: var(--tg-sp-4); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
@container (min-width: 1000px) { .tg-topics__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tg-topic {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 150px; padding: var(--tg-sp-4); border-radius: var(--tg-radius-lg); overflow: hidden;
	color: #fff; background-color: var(--tg-black);
	/* Tile photographs carry their own text, so the scrim has to be heavy at the
	   bottom for the label and description to read. */
	background-image: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.92) 78%, rgba(0,0,0,.97) 100%), var(--tg-tile-img, none);
	background-size: cover; background-position: center;
	min-height: 190px;
}
.tg-topic:hover { text-decoration: none; box-shadow: var(--tg-shadow-lg); }
/* In flow, like the card chips above: the tile is `justify-content: flex-end`
   and only 190px tall, so on a phone the label plus its two-line description
   grows up past an icon pinned at `top: 16px` and lands on top of it. */
.tg-topic__icon { align-self: flex-start; margin-bottom: auto; color: #fff; line-height: 0; }
.tg-topic__label { margin-top: var(--tg-sp-3); font-family: var(--tg-font-head); font-weight: var(--tg-fw-black); text-transform: uppercase; line-height: 1.1; }
/* Two lines of room whether the description needs them or not, so the labels
   sit on one line across the row instead of stepping up and down with the
   length of the copy below them. */
.tg-topic__desc {
	font-size: var(--tg-fs-xs); color: rgba(255,255,255,.82); margin-top: var(--tg-sp-1);
	line-height: 1.35; min-height: calc(2 * 1.35em);
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* ---- 5. Explore shop ---- */
.tg-exploreshop { background: var(--tg-white); color: var(--tg-ink); }
.tg-exploreshop__grid { display: grid; gap: var(--tg-sp-4); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@container (min-width: 1000px) { .tg-exploreshop__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tg-exploreshop__tile {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
	min-height: 160px; padding: var(--tg-sp-4); border-radius: var(--tg-radius-lg); overflow: hidden;
	color: #fff; background-color: var(--tg-black);
	background-image: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.8) 100%), var(--tg-tile-img, none);
	background-size: cover; background-position: center;
}
.tg-exploreshop__tile:hover { text-decoration: none; box-shadow: var(--tg-shadow-lg); }
.tg-exploreshop__label { font-family: var(--tg-font-head); font-weight: var(--tg-fw-black); text-transform: uppercase; }
.tg-exploreshop__cta { font-size: var(--tg-fs-xs); color: var(--tg-green); font-weight: var(--tg-fw-semi); }
/* The lead sits under the heading, above the tiles: below them it reads as a
   stray line of text belonging to nothing. */
.tg-exploreshop__lead { margin: calc(var(--tg-sp-3) * -1) 0 var(--tg-sp-4); color: var(--tg-text-muted); font-size: var(--tg-fs-sm); }

/* ---- 6. Homepage hero (brief p7): light ground, copy left, photo, news rail ---- */
.tg-nhero { background: var(--tg-white); color: var(--tg-ink); }
.tg-nhero__inner {
	display: grid; gap: var(--tg-sp-5); align-items: center;
	grid-template-columns: 1fr; padding-block: var(--tg-band-y-loose);
}
@media (min-width: 1000px) {
	.tg-nhero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 340px; gap: var(--tg-sp-6); }
}
.tg-nhero__title {
	font-size: clamp(2.25rem, 4.2vw, 3.6rem); line-height: 1.02; margin: 0 0 var(--tg-sp-4);
	text-transform: uppercase; color: var(--tg-ink);
}
/* Large display text needs 3:1 and the brand green gives 2.74; the strong
   green clears it without dropping to the body-text green. */
.tg-nhero__accent { color: var(--tg-green-strong); }
.tg-nhero__lead { color: var(--tg-text-muted); max-width: 42ch; margin: 0 0 var(--tg-sp-5); }
.tg-nhero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tg-sp-3); }
.tg-nhero__cta .tg-btn { width: auto; }
/* The photograph sits between copy and rail, fading into the page on its left. */
.tg-nhero__media {
	min-height: 260px; border-radius: var(--tg-radius); background-color: var(--tg-paper);
	background-image: var(--tg-hero-img, none); background-size: cover; background-position: center;
}
@media (min-width: 1000px) {
	.tg-nhero__media { min-height: 420px; border-radius: 0; margin-inline: calc(var(--tg-sp-5) * -1); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
}
.tg-nhero__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tg-sp-3); }
.tg-nhero__list a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--tg-sp-3); align-items: center; color: inherit; padding-bottom: var(--tg-sp-3); border-bottom: var(--tg-bw) solid var(--tg-border); }
.tg-nhero__list li:last-child a { border-bottom: 0; padding-bottom: 0; }
.tg-nhero__list a:hover { text-decoration: none; }
.tg-nhero__list a:hover .tg-nhero__headline { color: var(--tg-link); }
.tg-nhero__thumb { display: block; aspect-ratio: 1; border-radius: var(--tg-radius-sm); overflow: hidden; background: var(--tg-n-200); }
.tg-nhero__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tg-nhero__item { display: block; min-width: 0; }
.tg-nhero__cat { display: block; font-size: var(--tg-fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tg-green-text); font-weight: var(--tg-fw-bold); }
.tg-nhero__headline { display: block; font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); line-height: 1.3; margin: 2px 0; }
.tg-nhero__meta { display: block; font-size: var(--tg-fs-xs); color: var(--tg-text-muted); }

/* ---- 7. "Equip your team for success" band ---- */
.tg-equip { background: var(--tg-black); color: #fff; }
.tg-equip__inner { display: flex; align-items: center; gap: var(--tg-sp-4); flex-wrap: wrap; padding-block: var(--tg-band-y-tight); }
.tg-equip__icon { color: var(--tg-green); flex: 0 0 auto; }
.tg-equip__copy { flex: 1 1 260px; min-width: 0; }
.tg-equip__title { font-size: var(--tg-fs-lg); text-transform: uppercase; margin: 0; }
.tg-equip__lead { margin: 2px 0 0; color: var(--tg-n-300); font-size: var(--tg-fs-sm); }

/* ---- Topic tab row (locked tab component, news destinations) ---- */
/* No rule under the row: the pills carry their own outlines, and a second
   line beneath them reads as a stray divider against the hero above.
   The row needs its own air instead. Sitting directly beneath the dark hero it
   had none at all, so the pills butted straight against the band. One-line
   strip rhythm, and a real gap so the wrapped rows on a phone (four of them at
   390px) do not touch each other either. */
.tg-tabs--topics { background: var(--tg-white); padding-block: var(--tg-band-y-tight); }
.tg-tabs--topics .tg-tabs__row {
	display: flex; flex-wrap: wrap;
	gap: var(--tg-sp-3) var(--tg-sp-2);
}

/* ---- News landing (brief p8) ---- */
.tg-newslanding { background: var(--tg-white); color: var(--tg-ink); padding-top: var(--tg-band-y); }
.tg-newslanding__title { font-size: clamp(2rem, 4vw, 3rem); text-transform: uppercase; margin: 0 0 var(--tg-sp-4); }
.tg-newsswitch ul { display: flex; flex-wrap: nowrap; gap: var(--tg-sp-5); margin: 0 0 var(--tg-sp-5); padding: 0 0 var(--tg-sp-2); list-style: none; overflow-x: auto; }
.tg-newsswitch__link {
	display: inline-block; padding-bottom: var(--tg-sp-2); white-space: nowrap;
	font-size: var(--tg-fs-sm); font-weight: var(--tg-fw-bold); text-transform: uppercase;
	letter-spacing: .04em; color: var(--tg-ink); border-bottom: 2px solid transparent;
}
.tg-newsswitch__link:hover { text-decoration: none; color: var(--tg-link); }
.tg-newsswitch__link.is-active { color: var(--tg-green-text); border-bottom-color: var(--tg-green); }

.tg-newslanding__top { display: grid; gap: var(--tg-sp-5); grid-template-columns: 1fr; padding-bottom: var(--tg-band-y); }
@media (min-width: 1000px) { .tg-newslanding__top { grid-template-columns: minmax(0, 1fr) 340px; } }

.tg-leadstory {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 440px; padding: var(--tg-sp-6); border-radius: var(--tg-radius-lg); overflow: hidden;
	color: #fff; background-color: var(--tg-black);
	background-image: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.92) 100%), var(--tg-card-img, none);
	background-size: cover; background-position: center;
}
.tg-leadstory:hover { text-decoration: none; }
/* The chip is IN FLOW, not absolutely positioned.
   It used to be `position: absolute; top: 24px`, which is fine while the card
   is taller than its content - but the card is `justify-content: flex-end`, so
   the text grows UPWARDS. On a phone the headline wraps to three lines and the
   first line ran straight under the chip ("LEAGUE TREASURER JAILED" was
   unreadable behind "BREAKING NEWS"). As a flex item with `margin-bottom: auto`
   the chip takes the top of the card and the free space sits between it and the
   text, so the two can never collide however long the headline is. The title
   carries a margin-top as well: the auto margin is whatever space is LEFT, and
   on a phone a three-line headline leaves none, so without it the chip just
   sat flush on the first line instead of over it. */
.tg-leadstory__chip {
	align-self: flex-start; margin-bottom: auto;
	background: var(--tg-green-fill); color: #fff; border-radius: var(--tg-radius-sm);
	padding: 4px var(--tg-sp-3); font-size: var(--tg-fs-xs); font-weight: var(--tg-fw-bold);
	text-transform: uppercase; letter-spacing: .04em;
}
.tg-leadstory__title { display: block; margin-top: var(--tg-sp-4); font-family: var(--tg-font-head); font-weight: var(--tg-fw-black); font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.1; margin-bottom: var(--tg-sp-3); }
.tg-leadstory__excerpt { display: block; color: var(--tg-n-200); max-width: 46ch; margin-bottom: var(--tg-sp-3); }
.tg-leadstory__meta { display: block; font-size: var(--tg-fs-sm); color: var(--tg-n-300); margin-bottom: var(--tg-sp-4); }
.tg-leadstory__cta { align-self: flex-start; color: #fff; border-color: rgba(255,255,255,.6); pointer-events: none; }

.tg-latestrail__head {
	font-size: var(--tg-fs-sm); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--tg-fw-bold);
	margin: 0 0 var(--tg-sp-3); padding-bottom: var(--tg-sp-2); border-bottom: 2px solid var(--tg-green);
}
.tg-latestrail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tg-sp-3); }
.tg-latestrail a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--tg-sp-3); align-items: center; color: inherit; padding-bottom: var(--tg-sp-3); border-bottom: var(--tg-bw) solid var(--tg-border); }
.tg-latestrail li:last-child a { border-bottom: 0; padding-bottom: 0; }
.tg-latestrail a:hover { text-decoration: none; }
.tg-latestrail a:hover .tg-latestrail__title { color: var(--tg-link); }
.tg-latestrail__thumb { display: block; aspect-ratio: 1; border-radius: var(--tg-radius-sm); overflow: hidden; background: var(--tg-n-200); }
.tg-latestrail__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tg-latestrail__title { display: block; font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); line-height: 1.3; }
.tg-latestrail__meta { display: block; font-size: var(--tg-fs-xs); color: var(--tg-text-muted); margin-top: 2px; }

/* ---- Hub modules: funding opportunities, guides, feature strip ---- */
.tg-funds, .tg-guides, .tg-featurestrip { container-type: inline-size; }
/* How many funds are live varies, so the row is not pinned to four columns:
   three open opportunities were leaving a quarter of the row empty. auto-fit
   collapses the unused track and the cards share the width. */
.tg-funds__grid { display: grid; gap: var(--tg-sp-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tg-fund {
	display: flex; flex-direction: column; color: inherit; overflow: hidden;
	border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius-lg); background: var(--tg-bg);
}
.tg-fund:hover { text-decoration: none; border-color: var(--tg-green); box-shadow: var(--tg-shadow); }
.tg-fund__media {
	position: relative; display: block; aspect-ratio: 16/10; background-color: var(--tg-n-800);
	background-image: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.5)), var(--tg-tile-img, none);
	background-size: cover; background-position: center;
}
.tg-fund__chip {
	position: absolute; top: var(--tg-sp-3); left: var(--tg-sp-3);
	background: var(--tg-green-fill); color: #fff; border-radius: var(--tg-radius-sm);
	padding: 3px var(--tg-sp-2); font-size: var(--tg-fs-xs); font-weight: var(--tg-fw-bold);
	text-transform: uppercase; letter-spacing: .04em;
}
.tg-fund__body { display: block; padding: var(--tg-sp-4); }
.tg-fund__title { display: block; font-weight: var(--tg-fw-bold); line-height: 1.25; }
.tg-fund__amount { display: block; color: var(--tg-link); font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); margin-top: 2px; }
.tg-fund__excerpt { display: block; color: var(--tg-text-muted); font-size: var(--tg-fs-sm); margin: var(--tg-sp-2) 0 var(--tg-sp-3); }
.tg-fund__deadline { display: block; font-size: var(--tg-fs-xs); font-weight: var(--tg-fw-semi); text-transform: uppercase; letter-spacing: .04em; color: var(--tg-text-muted); }

.tg-guides__grid { display: grid; gap: var(--tg-sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@container (min-width: 1000px) { .tg-guides__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tg-guide { display: block; color: inherit; }
.tg-guide:hover { text-decoration: none; }
.tg-guide:hover .tg-guide__title { color: var(--tg-link); }
.tg-guide__media { display: block; aspect-ratio: 16/10; border-radius: var(--tg-radius); overflow: hidden; background: var(--tg-n-200); margin-bottom: var(--tg-sp-3); }
.tg-guide__media img { width: 100%; height: 100%; object-fit: cover; }
.tg-guide__cat { display: block; font-size: var(--tg-fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tg-green-text); font-weight: var(--tg-fw-bold); }
.tg-guide__title { display: block; font-weight: var(--tg-fw-semi); line-height: 1.3; margin: 2px 0; }
.tg-guide__excerpt { display: block; font-size: var(--tg-fs-sm); color: var(--tg-text-muted); }

.tg-featurestrip { border-top: var(--tg-bw) solid var(--tg-border); background: var(--tg-bg-muted); }
.tg-featurestrip__row { display: grid; gap: var(--tg-sp-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-block: var(--tg-band-y-tight); }
.tg-featurestrip__item { display: flex; align-items: center; gap: var(--tg-sp-3); }
.tg-featurestrip__icon { color: var(--tg-green); flex: 0 0 auto; }
.tg-featurestrip__item strong { display: block; font-size: var(--tg-fs-sm); }
.tg-featurestrip__item span span { display: block; font-size: var(--tg-fs-xs); color: var(--tg-text-muted); }

/* ---- Feature your team + catalogue (client additions, 28 Sep) ---- */
.tg-featureteam { background: var(--tg-green-soft); border-block: var(--tg-bw) solid var(--tg-green-line); }
.tg-featureteam__inner { display: flex; align-items: center; gap: var(--tg-sp-4); flex-wrap: wrap; padding-block: var(--tg-band-y-tight); }
.tg-featureteam__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--tg-radius-pill); background: var(--tg-green); color: #fff; flex: 0 0 auto; }
.tg-featureteam__copy { flex: 1 1 280px; min-width: 0; }
.tg-featureteam__title { font-size: var(--tg-fs-lg); text-transform: uppercase; margin: 0; color: var(--tg-ink); }
.tg-featureteam__lead { margin: 2px 0 0; color: var(--tg-ink); font-size: var(--tg-fs-sm); }

.tg-catalogue__inner { display: grid; gap: var(--tg-sp-5); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 800px) { .tg-catalogue__inner { grid-template-columns: 280px minmax(0, 1fr); } }
.tg-catalogue__cover { aspect-ratio: 3/4; border-radius: var(--tg-radius); background-color: var(--tg-bg-muted); background-image: var(--tg-tile-img, none); background-size: cover; background-position: center; border: var(--tg-bw) solid var(--tg-border); }
.tg-catalogue__title { font-size: var(--tg-fs-2xl); text-transform: uppercase; margin: 0 0 var(--tg-sp-3); }
.tg-catalogue__lead { color: var(--tg-text-muted); margin: 0 0 var(--tg-sp-4); }
.tg-catalogue__empty { color: var(--tg-text-muted); font-size: var(--tg-fs-sm); }

/* Shoutout consent block */
.tg-consent { border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius); padding: var(--tg-sp-4); margin: var(--tg-sp-5) 0; }
.tg-consent legend { font-weight: var(--tg-fw-bold); padding: 0 var(--tg-sp-2); }
.tg-check--inline { display: inline-flex; margin-right: var(--tg-sp-4); }
.tg-field__label { display: block; font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); margin-bottom: var(--tg-sp-2); }
.tg-field__hint { font-size: var(--tg-fs-xs); color: var(--tg-text-muted); margin: var(--tg-sp-2) 0 0; }
.tg-notice--ok { border-left: 4px solid var(--tg-green); background: var(--tg-green-soft); padding: var(--tg-sp-4); border-radius: var(--tg-radius); }
.tg-notice--alert { border-left: 4px solid #cf3b2e; background: rgba(207,59,46,.08); padding: var(--tg-sp-4); border-radius: var(--tg-radius); }

/* ---- About / Set Up Your Club / Help & FAQs modules ---- */
.tg-whatwedo, .tg-partners, .tg-people, .tg-journey, .tg-resources, .tg-faqcats { container-type: inline-size; }
/* Same treatment as the newsroom section bars, and left-aligned like them: a
   centred label above a left-aligned grid, on a page that also carries a
   left-aligned "Popular questions" bar, reads as two different systems. */
.tg-whatwedo__head, .tg-partners__head, .tg-people__head, .tg-journey__head, .tg-resources__head, .tg-faqcats__head {
	font-size: var(--tg-fs-sm); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--tg-fw-bold);
	margin: 0 0 var(--tg-sp-4);
}
.tg-whatwedo__grid { display: grid; gap: var(--tg-sp-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); text-align: center; }
.tg-whatwedo__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: var(--tg-radius-pill); background: var(--tg-green-fill); color: #fff; margin-bottom: var(--tg-sp-3); }
.tg-whatwedo__item h3 { font-size: var(--tg-fs-lg); margin: 0 0 var(--tg-sp-2); }
.tg-whatwedo__item p { color: var(--tg-text-muted); margin: 0; }

.tg-impact { background: var(--tg-black); color: #fff; }
.tg-impact__inner { display: grid; gap: var(--tg-sp-5); padding-block: var(--tg-band-y); }
@media (min-width: 900px) { .tg-impact__inner { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: center; } }
.tg-impact__title { font-size: var(--tg-fs-xl); text-transform: uppercase; line-height: 1.1; margin: 0; }
.tg-impact__grid { display: grid; gap: var(--tg-sp-5); grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin: 0; }
.tg-impact__grid dt { font-family: var(--tg-font-head); font-weight: var(--tg-fw-black); font-size: var(--tg-fs-2xl); color: var(--tg-green); }
.tg-impact__grid dd { margin: 2px 0 0; font-size: var(--tg-fs-sm); color: var(--tg-n-300); }

.tg-partners__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--tg-sp-6); list-style: none; margin: 0; padding: 0; }
.tg-partners__row img { max-height: 38px; width: auto; filter: grayscale(1); opacity: .75; }
.tg-partners__row span { font-weight: var(--tg-fw-bold); color: var(--tg-text-muted); text-transform: uppercase; letter-spacing: .04em; }

.tg-people__grid { display: grid; gap: var(--tg-sp-4); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.tg-person { margin: 0; text-align: center; }
.tg-person__photo { display: block; aspect-ratio: 1; border-radius: var(--tg-radius-lg); background-color: var(--tg-bg-muted); background-image: var(--tg-tile-img, none); background-size: cover; background-position: center; margin-bottom: var(--tg-sp-3); }
.tg-person figcaption strong { display: block; font-size: var(--tg-fs-sm); }
.tg-person figcaption span { display: block; font-size: var(--tg-fs-xs); color: var(--tg-text-muted); }

.tg-journey__list { display: grid; gap: var(--tg-sp-5); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.tg-journey__list li { text-align: center; position: relative; }
.tg-journey__marker { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: var(--tg-radius-pill); background: var(--tg-bg); border: 2px solid var(--tg-green); color: var(--tg-green-text); margin-bottom: var(--tg-sp-3); }
.tg-journey__num { position: absolute; right: -6px; bottom: -6px; min-width: 22px; height: 22px; border-radius: var(--tg-radius-pill); background: var(--tg-green-fill); color: #fff; font-size: var(--tg-fs-xs); font-weight: var(--tg-fw-bold); display: inline-flex; align-items: center; justify-content: center; }
.tg-journey__list strong { display: block; font-size: var(--tg-fs-sm); }
.tg-journey__list li > span:last-child { display: block; font-size: var(--tg-fs-xs); color: var(--tg-text-muted); margin-top: 2px; }

.tg-resources__grid { display: grid; gap: var(--tg-sp-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* A column, so the Download line sits on the bottom of every card in the row
   whatever the length of the description above it. */
.tg-resource { display: flex; flex-direction: column; height: 100%; padding: var(--tg-sp-4); border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius); color: inherit; background: var(--tg-bg); }
.tg-resource:hover { text-decoration: none; border-color: var(--tg-green); }
.tg-resource__icon { display: inline-flex; color: var(--tg-green-text); margin-bottom: var(--tg-sp-2); }
.tg-resource strong { display: block; }
.tg-resource__sub { display: block; font-size: var(--tg-fs-sm); color: var(--tg-text-muted); margin: 2px 0 var(--tg-sp-3); flex: 1 1 auto; }
.tg-resource__cta { font-size: var(--tg-fs-xs); font-weight: var(--tg-fw-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--tg-green-text); }

/* The head above sits close, so the hint reads as its subtitle rather than
   needing a negative margin to drag it back up. */
.tg-faqcats__hint { color: var(--tg-text-muted); font-size: var(--tg-fs-sm); margin: calc(var(--tg-sp-3) * -1) 0 var(--tg-sp-4); }
/* 140px let eight tiles onto a desktop row and stranded the ninth on its own.
   Wider tiles give six and three. */
.tg-faqcats__grid { display: grid; gap: var(--tg-sp-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tg-faqcat { display: grid; justify-items: center; gap: var(--tg-sp-2); text-align: center; padding: var(--tg-sp-4) var(--tg-sp-3); border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius); color: inherit; font-size: var(--tg-fs-sm); font-weight: var(--tg-fw-semi); background: var(--tg-bg); }
.tg-faqcat:hover { text-decoration: none; border-color: var(--tg-green); }
.tg-faqcat__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--tg-radius-pill); border: 2px solid var(--tg-green-line); color: var(--tg-green-text); }

/* Empty states: say what happened rather than letting a section vanish. */
.tg-newslanding__empty { padding-block: var(--tg-band-y); }
.tg-newslanding__empty p { margin: 0 0 var(--tg-sp-4); color: var(--tg-text-muted); }
.tg-funds__empty { color: var(--tg-text-muted); margin: 0; }

/* Archive big header (category, tag, author, date). The category page used to
   open with a plain heading on white, which read as no header at all. */
.tg-archhero { background: var(--tg-black); color: #fff; }
.tg-archhero__inner { padding-block: var(--tg-sp-7); }
.tg-archhero__eyebrow {
	margin: 0 0 var(--tg-sp-2); font-size: var(--tg-fs-xs); font-weight: var(--tg-fw-bold);
	text-transform: uppercase; letter-spacing: .12em; color: var(--tg-green-text);
}
.tg-archhero__title {
	margin: 0; font-family: var(--tg-font-head); font-weight: var(--tg-fw-black);
	text-transform: uppercase; line-height: 1.02;
	font-size: clamp(2rem, 6vw, 4rem);
}
.tg-archhero__lead { margin: var(--tg-sp-4) 0 0; color: var(--tg-n-200); max-width: 60ch; }
.tg-archhero__count { margin: var(--tg-sp-3) 0 0; font-size: var(--tg-fs-sm); color: var(--tg-n-300); }

/* Journey band on black (Our Work's approved artwork). The markers invert: on a
   dark ground the light-ground ring reads as a hole rather than a step. */
.tg-journey--dark { background: var(--tg-black); color: #fff; }
.tg-journey--dark .tg-journey__head { color: #fff; }
.tg-journey--dark .tg-journey__marker { background: rgba(255,255,255,.06); border-color: var(--tg-green); color: var(--tg-green); }
.tg-journey--dark .tg-journey__list li strong { color: #fff; }
.tg-journey--dark .tg-journey__list li span { color: var(--tg-n-300); }

/* A resource with no file yet is not a link, so it must not look like one. */
.tg-resource--nofile { cursor: default; opacity: .72; }
.tg-resource__cta--soon { color: var(--tg-text-muted); font-weight: var(--tg-fw-semi); }