/*
  Public news list and articles (News.cshtml, Article.cshtml), styled to match MyTGI's news pages. mytgi.css isn't
  loaded here because some of its rules restyle the site header, so the tokens and card styles are repeated with a
  news- prefix. Keep the values in step with :root in mytgi.css.
*/

.news-page {
  --tgi-magenta: #98005d;
  --tgi-magenta-dark: #75004a;
  --tgi-ink: #1f2430;
  --tgi-text: #3d4350;
  --tgi-muted: #6b7280;
  --tgi-line: #e6e6ea;
  --tgi-canvas: #f5f5f7;
  --tgi-surface: #ffffff;
  --tgi-radius: 14px;
  --tgi-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --tgi-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.06), 0 16px 32px rgba(16, 24, 40, 0.1);
  --tgi-measure: 70ch;
  --tgi-space: clamp(24px, 3vw, 40px);

  padding: var(--tgi-space) 0 calc(var(--tgi-space) * 1.5);
  background: var(--tgi-canvas);
  color: var(--tgi-text);
}

/* The search box under the banner sits on the same grey as the list. */
.news-search {
  background: #f5f5f7;
}

.news-card {
  background: var(--tgi-surface);
  border: 1px solid var(--tgi-line);
  border-radius: var(--tgi-radius);
  box-shadow: var(--tgi-shadow);
}

.news-empty {
  padding: 32px;
  text-align: center;
}

/* ── List ─────────────────────────────────────────────────────────────────── */

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-tile {
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.news-tile:hover {
  box-shadow: var(--tgi-shadow-hover);
  transform: translateY(-2px);
}

.news-tile > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.news-tile__image {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--tgi-canvas);
  overflow: hidden;
}

.news-tile__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-tile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 22px;
}

.news-tile__meta {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tgi-muted);
}

.news-tile__title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tgi-ink);
}

.news-tile__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.55;
}

.news-tile__cta {
  margin-top: auto;
  padding-top: 6px;
  font-weight: 600;
  color: var(--tgi-magenta);
}

.news-tile:hover .news-tile__cta {
  color: var(--tgi-magenta-dark);
}

/* The newest story spans the row, picture beside the text. */
.news-tile--featured {
  grid-column: 1 / -1;
}

.news-tile--featured > a {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.news-tile--featured .news-tile__image {
  aspect-ratio: auto;
  min-height: 320px;
}

.news-tile--featured .news-tile__body {
  justify-content: center;
  gap: 12px;
  padding: clamp(24px, 4vw, 48px);
}

.news-tile--featured .news-tile__title {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.2;
}

.news-tile--featured .news-tile__text {
  -webkit-line-clamp: 5;
  font-size: 1rem;
}

.news-tile--featured .news-tile__cta {
  margin-top: 8px;
}

.news-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding-top: var(--tgi-space);
  color: var(--tgi-muted);
}

.news-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--tgi-magenta);
  border-radius: 999px;
  background: var(--tgi-surface);
  font-weight: 600;
  color: var(--tgi-magenta);
  text-decoration: none;
}

.news-btn:hover {
  background: var(--tgi-magenta);
  color: #fff;
  text-decoration: none;
}

/* ── Article ──────────────────────────────────────────────────────────────── */

.article-banner {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.article-banner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.article-banner__content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  padding: 60px 24px;
}

.article-banner__content h1 {
  font: 700 2.6rem/1.15 "franklin-gothic-atf", sans-serif !important;
  letter-spacing: 0;
  color: #fff;
  margin: 0 0 16px;
  padding: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.article-banner__date {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}

.news-crumbs ol {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}

.news-crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  opacity: 0.6;
}

.news-crumbs a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.news-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--tgi-space);
  align-items: start;
}

.news-article__main {
  padding: clamp(24px, 4vw, 48px);
}

/* The story uses the card's full width, so full-width pictures line up with the text. */
.news-article__main .news-prose {
  max-width: none;
}

.news-article__aside {
  position: sticky;
  top: 140px;
  display: grid;
  gap: 16px;
}

.news-aside-block {
  padding: 22px;
}

.news-aside-block h3 {
  margin: 0 0 14px;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--tgi-ink);
}

.news-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.news-author img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.news-author__label {
  margin: 0 0 2px;
  padding: 0;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tgi-muted);
}

.news-author__name {
  margin: 0;
  padding: 0;
  font-weight: 600;
  color: var(--tgi-ink);
}

.news-meta {
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--tgi-muted);
}

.news-meta .fa {
  margin-right: 6px;
}

.news-related {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-related a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tgi-ink);
  text-decoration: none;
}

.news-related a:hover span {
  color: var(--tgi-magenta);
}

.news-related img {
  flex: 0 0 80px;
  width: 80px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
}

.news-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-weight: 600;
  color: var(--tgi-magenta);
  text-decoration: none;
}

.news-back:hover {
  color: var(--tgi-magenta-dark);
}

/* Article text. Images stay inline so the editor's centre and right alignment (set on the paragraph) moves them. */
.news-prose {
  max-width: var(--tgi-measure);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--tgi-text);
}

.news-prose p,
.news-prose ul,
.news-prose ol,
.news-prose table,
.news-prose figure {
  margin: 0 0 1.15em;
  padding-bottom: 0;
}

.news-prose > :last-child {
  margin-bottom: 0;
}

.news-prose ul,
.news-prose ol {
  padding-left: 1.4em;
}

.news-prose ul li {
  list-style: disc;
}

.news-prose ol li {
  list-style: decimal;
}

.news-prose li {
  margin-bottom: 0.4em;
}

.news-prose h2,
.news-prose h3,
.news-prose h4 {
  margin: 1.6em 0 0.5em;
  padding: 0;
  font-weight: 600;
  line-height: 1.25 !important;
  letter-spacing: 0;
  color: var(--tgi-ink);
}

.news-prose h2 {
  font-size: 1.5rem;
}

.news-prose h3 {
  font-size: 1.3rem;
}

.news-prose h4 {
  font-size: 1.15rem;
}

.news-prose > h2:first-child,
.news-prose > h3:first-child,
.news-prose > h4:first-child {
  margin-top: 0;
}

.news-prose a {
  color: var(--tgi-magenta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.news-prose a:hover {
  color: var(--tgi-magenta-dark);
}

.news-prose img {
  max-width: 100%;
  height: auto;
  margin: 8px 0 16px;
  border-radius: 10px;
  vertical-align: middle;
}

/* Landscape pictures (see FullWidthImages in Article.cshtml). */
.news-prose img.news-wide {
  display: block;
  width: 100%;
  margin: 8px 0 20px;
}

.news-prose figcaption {
  margin-top: -6px;
  font-size: 0.85rem;
  color: var(--tgi-muted);
}

.news-prose iframe {
  max-width: 100%;
  border-radius: 10px;
}

.news-prose blockquote {
  margin: 1.5em 0;
  padding: 18px 24px;
  border-left: 4px solid var(--tgi-magenta);
  border-radius: 0 10px 10px 0;
  background: var(--tgi-canvas);
  font-style: italic;
}

.news-prose blockquote p {
  margin-bottom: 0;
}

.news-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.news-prose th,
.news-prose td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--tgi-line);
  text-align: left;
}

.news-prose th {
  font-weight: 600;
  color: var(--tgi-ink);
}

/* ── Smaller screens ──────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-article__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-article__aside {
    position: static;
  }

  .article-banner__content h1 {
    font-size: 2rem !important;
  }
}

@media (max-width: 767px) {
  .news-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .news-tile--featured > a {
    display: flex;
  }

  .news-tile--featured .news-tile__image {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .news-prose {
    font-size: 1rem;
  }

  .article-banner {
    min-height: 260px;
  }

  .article-banner__content h1 {
    font-size: 1.6rem !important;
  }
}