/*
 * v1.8.48 (Susanne, 4 Nov 2026: "the whole page looks horrible, make it smaller, I don't like the background").
 * Articles page only: plain deep navy header (no picture, no circle line) and every article as a
 * normal card in a 3-up grid (1-up on phones). Picture on top, text on white below, never over the picture.
 */
.shf-ed-hero.shf-ed-hero--slim {
	background: var(--shf186-navy, #0B1A33) !important;
	background-image: none !important;
	color: #fff !important;
	padding-top: clamp(28px, 3vw, 40px) !important;
	padding-bottom: clamp(24px, 2.6vw, 34px) !important;
}
.shf-ed-hero.shf-ed-hero--slim::before,
.shf-ed-hero.shf-ed-hero--slim::after { content: none !important; display: none !important; background: none !important; border: 0 !important; }
.shf-ed-hero--slim .shf-ed-kicker { color: #9FD8E3 !important; border-left-color: #22B8CF !important; }
.shf-ed-hero--slim .shf-ed-hero__title { color: #fff !important; font-size: clamp(1.9rem, 3vw, 2.5rem) !important; margin: 0 0 6px !important; }
.shf-ed-hero--slim .shf-ed-hero__intro { color: #D3E2E9 !important; margin-bottom: 0 !important; }
.shf-ed-hero--slim .shf-ed-chip { background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.45) !important; }
.shf-ed-hero--slim .shf-ed-chip[aria-current], .shf-ed-hero--slim .shf-ed-chip.is-active { background: #fff !important; color: var(--shf186-navy, #0B1A33) !important; border-color: #fff !important; }

/* Card grid */
.shf-articles-showcase .shf-ag { background: #fff !important; padding: clamp(32px, 4vw, 56px) 20px !important; }
.shf-articles-showcase .shf-ag__inner { max-width: 1200px; margin: 0 auto; }
.shf-articles-showcase .shf-ag__title { font-size: 1.25rem !important; color: var(--shf186-navy, #0B1A33) !important; margin: 0 0 20px !important; }
.shf-articles-showcase .shf-ag__grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px !important; list-style: none; margin: 0; padding: 0; }
.shf-articles-showcase .shf-ag__card { position: relative; display: flex; flex-direction: column; background: #fff !important; border: 1px solid #E3E8EE; border-radius: 4px; overflow: hidden; margin: 0 !important; grid-column: auto !important; }
.shf-articles-showcase .shf-ag__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #E9EEF3; height: auto !important; }
.shf-articles-showcase .shf-ag__thumb .shf-as-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shf-articles-showcase .shf-ag__body { position: static !important; background: #fff !important; color: #1F2A37 !important; padding: 16px 18px 20px !important; display: flex; flex-direction: column; gap: 8px; }
.shf-articles-showcase .shf-as-type { color: #0B6A85 !important; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.shf-articles-showcase .shf-ag__name { font-size: 1.12rem !important; line-height: 1.3 !important; margin: 0 !important; }
.shf-articles-showcase .shf-ag__name a { color: var(--shf186-navy, #0B1A33) !important; text-decoration: none; }
.shf-articles-showcase .shf-ag__name a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.shf-articles-showcase .shf-ag__card:hover .shf-ag__name a { text-decoration: underline; }
.shf-articles-showcase .shf-ag__excerpt { color: #4A5868 !important; font-size: 0.92rem; line-height: 1.5; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.shf-articles-showcase .shf-as-date { color: #6B7785 !important; font-size: 0.8rem; }
@media (max-width: 900px) { .shf-articles-showcase .shf-ag__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .shf-articles-showcase .shf-ag__grid { grid-template-columns: minmax(0, 1fr) !important; } }