/*
 * News & Community landing, category archives and single articles.
 * Shared card/chip/section styles come from components.css.
 */

.tg-news { padding-top: var(--tg-sp-6); }
.tg-news__title { font-size: clamp(var(--tg-fs-2xl), 5vw, var(--tg-fs-3xl)); text-transform: uppercase; margin: 0 0 var(--tg-sp-4); }
.tg-news__desc { color: var(--tg-text-muted); margin-bottom: var(--tg-sp-4); }
.tg-news-tabs { border-block: var(--tg-bw) solid var(--tg-border); margin-bottom: var(--tg-sp-6); }

/* Landing layout: main + sidebar */
.tg-news__layout { display: grid; grid-template-columns: 1fr; gap: var(--tg-sp-7); padding-bottom: var(--tg-sp-8); }
@media (min-width: 1000px) { .tg-news__layout { grid-template-columns: minmax(0, 1fr) 320px; } }

/* Breaking hero */
.tg-news__hero { display: block; border-radius: var(--tg-radius-lg); overflow: hidden; border: var(--tg-bw) solid var(--tg-border); background: var(--tg-bg-muted); color: inherit; margin-bottom: var(--tg-sp-6); }
.tg-news__hero:hover { text-decoration: none; }
.tg-news__hero-media { display: block; aspect-ratio: 16/8; background: var(--tg-n-200); }
.tg-news__hero-media img { width: 100%; height: 100%; object-fit: cover; }
.tg-news__hero-body { display: block; padding: var(--tg-sp-5); }
.tg-news__hero-title { display: block; font-family: var(--tg-font-head); font-weight: var(--tg-fw-black); font-size: clamp(var(--tg-fs-lg), 3vw, var(--tg-fs-2xl)); line-height: 1.1; margin: var(--tg-sp-3) 0; }
.tg-news__hero-excerpt { display: block; color: var(--tg-text-muted); margin-bottom: var(--tg-sp-3); }
.tg-news__hero-meta { display: block; font-size: var(--tg-fs-sm); color: var(--tg-text-muted); margin-bottom: var(--tg-sp-4); }

/* Category cards row */
.tg-news__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tg-sp-3); margin-bottom: var(--tg-sp-7); }
@media (min-width: 700px) { .tg-news__cards { grid-template-columns: repeat(5, 1fr); } }
.tg-news__card { display: flex; flex-direction: column; gap: var(--tg-sp-2); padding: var(--tg-sp-4); border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius); background: var(--tg-bg); color: inherit; }
.tg-news__card:hover { text-decoration: none; border-color: var(--tg-green); }
.tg-news__card-title { font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); line-height: 1.3; }
.tg-news__card-meta { font-size: var(--tg-fs-xs); color: var(--tg-text-muted); margin-top: auto; }

.tg-news__more-head { font-size: var(--tg-fs-xl); margin-bottom: var(--tg-sp-5); }
.tg-news__grid { display: grid; grid-template-columns: 1fr; gap: var(--tg-sp-5); }
@media (min-width: 560px) { .tg-news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tg-news__grid { grid-template-columns: repeat(3, 1fr); } }

/* Sidebar */
.tg-news__side-panel { border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius-lg); padding: var(--tg-sp-5); position: sticky; top: calc(var(--tg-header-h) + var(--tg-sp-4)); }
.tg-news__side-head { font-size: var(--tg-fs-lg); margin: 0 0 var(--tg-sp-4); }
.tg-news__list { list-style: none; margin: 0 0 var(--tg-sp-4); padding: 0; }
.tg-news__list li { padding: var(--tg-sp-3) 0; border-bottom: var(--tg-bw) solid var(--tg-border); }
.tg-news__list li:last-child { border-bottom: 0; }
.tg-news__list a { display: block; font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); color: var(--tg-text); }
.tg-news__list a:hover { color: var(--tg-link); }
.tg-news__list-meta { display: block; font-size: var(--tg-fs-xs); color: var(--tg-text-muted); margin-top: 2px; }

/* ===== Single article ===== */
.tg-breadcrumb { font-size: var(--tg-fs-sm); color: var(--tg-text-muted); padding-block: var(--tg-sp-5) 0; }
.tg-breadcrumb a { color: var(--tg-text-muted); }
.tg-breadcrumb a:hover { color: var(--tg-link); }

.tg-article__layout { display: grid; grid-template-columns: 1fr; gap: var(--tg-sp-7); padding-block: var(--tg-sp-5) var(--tg-sp-8); }
@media (min-width: 1000px) { .tg-article__layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.tg-article { max-width: var(--tg-maxw-text); }
.tg-article__title { font-size: clamp(var(--tg-fs-2xl), 5vw, var(--tg-fs-3xl)); line-height: 1.05; margin: 0 0 var(--tg-sp-4); }
.tg-article__standfirst { font-size: var(--tg-fs-md); color: var(--tg-text-muted); margin-bottom: var(--tg-sp-4); }
.tg-article__byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tg-sp-4); font-size: var(--tg-fs-sm); color: var(--tg-text-muted); padding-block: var(--tg-sp-4); border-block: var(--tg-bw) solid var(--tg-border); margin-bottom: var(--tg-sp-5); }
.tg-share { display: inline-flex; gap: var(--tg-sp-2); margin-left: auto; }
.tg-share a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--tg-radius-pill); border: var(--tg-bw) solid var(--tg-border-strong); color: var(--tg-text); font-weight: var(--tg-fw-bold); font-size: var(--tg-fs-sm); }
.tg-share a:hover { background: var(--tg-green); border-color: var(--tg-green); color: #fff; text-decoration: none; }
.tg-article__hero { margin: 0 0 var(--tg-sp-5); border-radius: var(--tg-radius-lg); overflow: hidden; }
.tg-article__hero img { width: 100%; height: auto; }

.tg-article__summary { background: var(--tg-green-soft); border: var(--tg-bw) solid var(--tg-green-line); border-radius: var(--tg-radius-lg); padding: var(--tg-sp-5); margin: 0 0 var(--tg-sp-6); }
.tg-article__summary h2 { font-size: var(--tg-fs-lg); text-transform: uppercase; margin: 0 0 var(--tg-sp-3); color: var(--tg-green-strong); }
.tg-article__summary ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tg-sp-2); }
.tg-article__summary li { display: flex; align-items: flex-start; gap: var(--tg-sp-2); }
.tg-article__summary li svg { color: var(--tg-green-strong); flex: 0 0 auto; margin-top: 3px; }

.tg-prose { font-size: var(--tg-fs-md); line-height: var(--tg-lh-base); }
.tg-prose img { border-radius: var(--tg-radius); margin-block: var(--tg-sp-4); }
.tg-prose h2 { font-size: var(--tg-fs-xl); margin-top: var(--tg-sp-6); }
.tg-prose h3 { font-size: var(--tg-fs-lg); margin-top: var(--tg-sp-5); }

.tg-article__side { display: block; }
.tg-article__related { display: grid; gap: var(--tg-sp-4); }
@media (min-width: 1000px) {
	.tg-article__side { position: sticky; top: calc(var(--tg-header-h) + var(--tg-sp-4)); align-self: start; }
}