/* News card grid on /news and the article page /news-article. Club colours from tailwind.css. */
.bbc-news { --g: #174e32; --gold: #fdcd19; --olive: #707324; --line: rgba(23, 78, 50, .08); max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .bbc-news { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .bbc-news { padding: 0 2rem; } }

.news-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.news-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05); color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.news-card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); transform: translateY(-4px); }
.news-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(23, 78, 50, .25); }
@media (prefers-reduced-motion: reduce) { .news-card, .news-card:hover { transition: none; transform: none; } }

.news-pic { position: relative; aspect-ratio: 1 / 1; background: var(--g); overflow: hidden; }
.news-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.news-card:hover .news-pic img { transform: scale(1.04); }
.news-credit { position: absolute; right: .5rem; bottom: .5rem; font-size: .65rem; line-height: 1; color: #fff; background: rgba(0, 0, 0, .55); padding: .3rem .45rem; border-radius: .3rem; }

.news-text { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.35rem 1.4rem; }
.news-meta { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--olive); margin: 0 0 .5rem; }
.news-tag { display: inline-block; background: var(--gold); color: var(--g); border-radius: 999px; padding: .1rem .5rem; margin-right: .4rem; letter-spacing: .08em; }
.news-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.35rem; line-height: 1.15; color: var(--g); margin: 0; }
.news-card:hover .news-title { color: var(--olive); }
.news-sum { font-size: .875rem; line-height: 1.6; color: rgba(23, 78, 50, .72); margin: .6rem 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-go { margin-top: auto; padding-top: 1rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .1em; color: var(--g);
  display: inline-flex; align-items: center; gap: .35rem; }
.news-card:hover .news-go { color: var(--olive); }
.news-go i { font-size: .65rem; }

.news-state { text-align: center; padding: 2.5rem 1rem; color: rgba(23, 78, 50, .65); font-size: .9rem; }
.news-skel { border-radius: 1rem; background: linear-gradient(90deg, #eef1ec 25%, #f7f8f6 50%, #eef1ec 75%); background-size: 200% 100%; animation: news-shimmer 1.4s infinite; aspect-ratio: 3 / 4; }
@keyframes news-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .news-skel { animation: none; } }
.news-more { max-width: 56rem; margin: 3rem auto 0; }

.news-noscript { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; font-size: .9rem; line-height: 1.6; color: rgba(23, 78, 50, .8); }
.news-noscript a { color: var(--g); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Article page */
.news-article { max-width: 46rem; margin: 0 auto; padding: 0 1rem; }
.news-back { display: inline-flex; align-items: center; gap: .4rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .1em; color: var(--g); text-decoration: none; }
.news-back:hover { color: var(--olive); }
.news-back:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: .25rem; }
.news-hero { margin: 1.5rem 0 1.75rem; border-radius: 1rem; overflow: hidden; aspect-ratio: 16 / 9; background: var(--g); }
.news-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-hero[hidden] + .news-body { margin-top: 1.5rem; }
.news-body { font-size: 1.02rem; line-height: 1.75; color: #1c1f1c; }
.news-body p { margin: 0 0 1.1rem; }