/* Articles list, cards and the article page. Brand colours live in /css/styles.css. */
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.article-card { display: flex; flex-direction: column; overflow: hidden; background: var(--white); box-shadow: 0 10px 30px rgba(7,61,35,.09); }
.article-card-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .3s; }
.article-card:hover .article-card-image img { transform: scale(1.03); }
.article-card-image { overflow: hidden; }
.article-card-body { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 24px; }
.article-card-programme { align-self: flex-start; margin-bottom: 10px; padding: 3px 12px; border-radius: 999px; background: var(--gold-soft); color: var(--green-deep); font-size: .82rem; font-weight: 700; }
.article-card h2, .article-card h3 { font-size: clamp(1.5rem, 2.2vw, 1.8rem); line-height: 1.15; }
.article-card h2 a, .article-card h3 a { text-decoration: none; }
.article-card h2 a:hover, .article-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold-line); }
.article-card-summary { flex: 1; margin-top: 10px; color: var(--ink); font-size: .98rem; }
.article-card-meta { margin-top: 16px; color: var(--muted); font-size: .88rem; }
.articles-empty { max-width: 34ch; padding: 34px 38px; border-left: 4px solid var(--gold); background: var(--gold-soft); color: var(--green-deep); font: italic 600 clamp(1.5rem, 3vw, 2rem)/1.3 var(--display); }
.home-articles { background: #F2F3EA; }
.home-articles .section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; max-width: none; }

/* Article page */
.page-width-article { width: min(720px, calc(100% - 48px)); margin-inline: auto; }
.page-width-cover { width: min(1000px, calc(100% - 48px)); margin-inline: auto; }
.article-header { padding-block: clamp(36px, 6vw, 70px) 28px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 26px; color: var(--muted); font-size: .88rem; }
.breadcrumbs a { color: var(--green); }
.breadcrumbs [aria-current] { overflow: hidden; max-width: 30ch; text-overflow: ellipsis; white-space: nowrap; }
.article-programme a { display: inline-block; margin-bottom: 14px; padding: 3px 12px; border-radius: 999px; background: var(--gold-soft); color: var(--green-deep); font-size: .86rem; font-weight: 700; text-decoration: none; }
.article-header h1 { font-size: clamp(2.5rem, 6vw, 4.2rem); }
.article-byline { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.article-byline img { width: 52px; height: 52px; border-radius: 50%; }
.article-byline p { display: grid; font-size: .95rem; line-height: 1.4; }
.article-byline a { color: var(--green-deep); font-weight: 700; text-decoration: none; }
.article-byline span { color: var(--muted); }
.article-cover { margin-block: 0 clamp(34px, 5vw, 54px); }
.article-cover img { width: 100%; }
.article-body { font-size: 1.1rem; line-height: 1.75; }
.article-body > * + * { margin-top: 1.1em; }
.article-body h2 { margin-top: 1.8em; font-size: clamp(1.9rem, 3.6vw, 2.4rem); }
.article-body h3 { margin-top: 1.5em; font-size: clamp(1.5rem, 2.8vw, 1.8rem); }
.article-body ul, .article-body ol { padding-left: 1.3em; }
.article-body li + li { margin-top: .45em; }
.article-body blockquote { margin-inline: 0; padding: 18px 24px; border-left: 4px solid var(--gold); background: var(--gold-soft); color: var(--green-deep); font: italic 600 1.55rem/1.35 var(--display); }
.article-body a { color: var(--green); font-weight: 600; text-decoration-color: var(--gold-line); text-underline-offset: 4px; }
.article-body figure { margin-inline: 0; }
.article-body figcaption { margin-top: 8px; color: var(--muted); font-size: .9rem; }
.article-end { padding-block: 40px clamp(50px, 7vw, 80px); }
.article-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-block: 22px; border-block: 1px solid var(--line); }
.article-share p { font-weight: 600; }
.article-share > div { display: flex; flex-wrap: wrap; gap: 10px; }
.share-button { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 999px; color: var(--white); font-size: .95rem; font-weight: 700; text-decoration: none; }
.share-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.share-whatsapp { background: #1B7F4B; }
.share-linkedin { background: #0A5AA6; }
.share-button:hover { filter: brightness(1.1); }
.about-author { display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: start; margin-top: 34px; padding: 26px; background: #F2F3EA; }
.about-author img { width: 96px; height: 96px; border-radius: 50%; }
.about-author h2 { margin-bottom: 6px; font-size: 1.8rem; }
.about-author p { font-size: .98rem; }
.about-author .text-link { margin-top: 8px; }
.article-programme-box { margin-top: 24px; padding: clamp(24px, 4vw, 36px); background: var(--green-deep); color: var(--white); }
.article-programme-box .eyebrow { color: #F8D47F; }
.article-programme-box h2 { color: var(--white); font-size: clamp(2rem, 4vw, 2.6rem); }
.article-programme-box p:not(.eyebrow) { margin-top: 8px; color: #F6F5EC; }
.article-programme-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 22px; }
.article-programme-box .text-link { color: #F8D47F; text-decoration-color: #F8D47F; }
.related-articles { background: #F2F3EA; }
.related-articles h2 { margin-bottom: 26px; }

@media (max-width: 1000px) { .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .article-grid { grid-template-columns: 1fr; }
  .page-width-article, .page-width-cover { width: min(100% - 36px, 560px); }
  .article-body { font-size: 1.05rem; }
  .about-author { grid-template-columns: 1fr; }
  .home-articles .section-heading-row { display: block; }
  .home-articles .section-heading-row .text-link { margin-top: 10px; }
}