/* /news/ (design-spec 1). */
.canopy-news { padding: 0 0 64px; }
.canopy-news__h1 { margin: 40px 0 24px; font-size: 42px; line-height: 1.25; }
@media (max-width: 767px) { .canopy-news__h1 { font-size: 28px; } }

.canopy-subscribe { margin: 0 0 48px; padding: 32px 40px; background: var(--cc-panel-blue); }
@media (min-width: 1025px) { .canopy-subscribe:not(.canopy-subscribe--aside) { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } }
@media (max-width: 1024px) { .canopy-subscribe__action { margin-top: 16px; } }
@media (max-width: 767px) { .canopy-subscribe { padding: 24px 20px; } }
.canopy-subscribe__heading { margin: 0 0 8px; color: var(--cc-green-on-blue); font-size: 24px; line-height: 1.3; }
.canopy-subscribe__intro { max-width: var(--cc-measure); color: var(--cc-text-on-blue); }
.canopy-subscribe__intro p:last-child { margin-bottom: 0; }

.canopy-cards { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .canopy-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .canopy-cards { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.canopy-card { position: relative; display: flex; flex-direction: column; height: 100%; border: 1px solid var(--cc-border-soft); background: var(--cc-white); }
.canopy-card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.canopy-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.canopy-card__media--contain { padding: 16px; background: var(--cc-panel-grey); }
.canopy-card__media--contain img { object-fit: contain; }
.canopy-card__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 24px; }
@media (max-width: 767px) { .canopy-card__body { padding: 20px; } }
.canopy-card__date { margin: 0; color: var(--cc-green); font-size: 14px; font-weight: 700; line-height: 1.4; }
.canopy-card__title { margin: 0; font-size: 22px; line-height: 1.3; }
@media (max-width: 767px) { .canopy-card__title { font-size: 20px; } }
.canopy-card__link { color: var(--cc-green); text-decoration: none; }
.canopy-card__link::after { content: ""; position: absolute; inset: 0; }
.canopy-card__excerpt { margin: 0; color: var(--cc-text); }
.canopy-card__more { margin-top: auto; color: var(--cc-green); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* One focus ring, on the card (1b). */
.canopy-card:has(.canopy-card__link:focus-visible) { outline: 3px solid var(--cc-focus); outline-offset: 2px; }
.canopy-card__link:focus-visible { outline: none; }
@supports not selector(:has(*)) { .canopy-card__link:focus-visible { outline: 3px solid var(--cc-focus); outline-offset: 2px; } }

.canopy-pagination { margin-top: 48px; text-align: center; }
.canopy-pagination ul { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.canopy-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; min-height: 40px; padding: 0 10px; border: 1px solid var(--cc-border-soft); color: var(--cc-green); text-decoration: none; }
.canopy-pagination .page-numbers.current { border-color: var(--cc-green); background: var(--cc-green); color: var(--cc-white); }
.canopy-pagination .dots { border: 0; }

/* B10-1: the old site switched to phone type at <= 768px (Astra 4.7.3 inline responsive CSS: html 85.5%,
   h1 30 / h2 25 / h3 20), while columns stacked only at <= 767. These are this file's <= 767 type rules, repeated so
   768 gets them too; 769+ stays desktop, 390 is unchanged. Source: audit/measure/live-tablet-breakpoint.txt */
@media (max-width: 768px) {
	.canopy-news__h1 { font-size: 28px; }
	.canopy-card__title { font-size: 20px; }
}