/* Senior HR Forum v14 – Stream C: editorial Articles (homepage section + Articles page)
   and colour-coded Tools & Templates. Loaded after brand.css.
   Layout follows an editorial "insights" page (lead story with an overlapping text panel,
   mixed-size grid, text-only list, thin rules, category labels); colours and font are our own. */

:root {
	--shf-ed-ink: #0B1A33;      /* headings */
	--shf-ed-meta: #556474;     /* dates, intro text (AA on white and on the off-white) */
	--shf-ed-bg: #F4F7F8;       /* off-white page background */
	--shf-ed-navy: #0B1A33;
	--shf-ed-navy-2: #0E3550;
	--shf-ed-rule: #D6DFE3;
	--shf-ed-accent: var(--shf-teal, #0B6A85);
	/* Tool types: text colour (AA on white and on its tint) + tint */
	--shf-type-questionnaire: #0B6A85; --shf-type-questionnaire-tint: #E3F3F7;
	--shf-type-outline: #6741A8;       --shf-type-outline-tint: #EFEAF9;
	--shf-type-handbook: #A23B72;      --shf-type-handbook-tint: #FAEAF2;
	--shf-type-form: #2754C5;          --shf-type-form-tint: #E8EEFC;
}

/* ================= Articles: shared ================= */
.shf-ed { position: relative; background: var(--shf-ed-bg); color: var(--shf-ed-meta); overflow: hidden; }
.shf-ed > * { position: relative; z-index: 1; }
.shf-ed-kicker {
	margin: 0 0 14px !important;
	padding-left: 12px;
	border-left: 3px solid var(--shf-cyan, #22B8CF);
	color: #BFE9F1;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
}
.shf-ed-grid { margin-top: 0 !important; }
.shf-ed-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 32px;
	row-gap: 36px;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}
.shf-ed-grid .wp-block-post-template > li { margin: 0 !important; min-width: 0; list-style: none; }

.shf-ed-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "img" "body";
	align-content: start;
	height: 100%;
	margin: 0 !important;
}
.shf-ed-card > * { margin: 0 !important; }
/* Brand pattern behind the picture; it shows when a post has no picture of its own. */
.shf-ed-card::before {
	content: "";
	grid-area: img;
	min-height: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 4px;
	background:
		radial-gradient(60% 80% at 85% 15%, rgba(127, 227, 242, 0.45) 0%, rgba(127, 227, 242, 0) 70%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 18px),
		linear-gradient(140deg, #0B6A85 0%, #0E3550 100%);
}
.shf-ed-card__image { grid-area: img; position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 16 / 10; background: #fff; } /* white behind transparent PNG banners */
.shf-ed-card__image a { display: block; height: 100%; }
.shf-ed-card__image img { display: block; width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s ease; }
.shf-ed-card:hover .shf-ed-card__image img { transform: scale(1.035); }
.shf-ed-card__body { grid-area: body; display: flex; flex-direction: column; gap: 10px; padding-top: 18px; min-width: 0; }
.shf-ed-card__body > * { margin: 0 !important; }
.shf-ed .shf-ed-label {
	background: none;
	padding: 0;
	border-radius: 0;
	color: var(--shf-ed-accent);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.shf-ed-card__title { font-size: 1.15rem !important; line-height: 1.3 !important; font-weight: 700; letter-spacing: -0.01em; text-transform: none !important; }
.shf-ed-card__title a { color: var(--shf-ed-ink) !important; text-decoration: none; }
.shf-ed-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.shf-ed-card__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.shf-ed-card__title a:focus-visible { outline: none; }
.shf-ed-card:focus-within { outline: 3px solid var(--shf-cyan); outline-offset: 4px; }
.shf-ed-card__excerpt { color: var(--shf-ed-meta); font-size: 0.98rem; line-height: 1.6; }
.shf-ed-card__excerpt p { margin: 0; }
.shf-ed-card__excerpt .wp-block-post-excerpt__more-text { display: none; }
.shf-ed-card__date { color: var(--shf-ed-meta); font-size: 0.82rem; font-weight: 600; }


/* ================= Articles page ================= */
.shf-ed-hero {
	position: relative;
	overflow: hidden;
	padding-bottom: 230px !important;
	color: #fff;
	background:
		radial-gradient(40% 70% at 95% 0%, rgba(34, 184, 207, 0.30) 0%, rgba(34, 184, 207, 0) 70%),
		radial-gradient(30% 60% at 0% 100%, rgba(34, 184, 207, 0.12) 0%, rgba(34, 184, 207, 0) 70%),
		linear-gradient(160deg, var(--shf-ed-navy) 0%, var(--shf-ed-navy-2) 100%);
}
.shf-ed-hero::after { /* thin offset frame line, for a layered feel */
	content: "";
	position: absolute;
	right: -60px;
	top: 40px;
	width: 380px;
	height: 380px;
	border: 1px solid rgba(127, 227, 242, 0.25);
	border-radius: 50%;
	pointer-events: none;
}
.shf-ed-hero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: end; }
.shf-ed-hero__inner > * { margin: 0 !important; grid-column: 1; }
.shf-ed-hero__title { color: #fff !important; font-size: clamp(2.6rem, 1.6rem + 3.2vw, 4.4rem) !important; line-height: 1.02 !important; font-weight: 800; letter-spacing: -0.03em; text-transform: none !important; margin: 0 0 18px !important; }
.shf-ed-hero__intro { color: #D3E2E9; font-size: 1.08rem; line-height: 1.6; max-width: 46ch; }
.shf-ed-hero .shf-ed-chips { grid-column: 2; grid-row: 2 / span 2; justify-self: end; align-self: end; }
.shf-ed-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.shf-ed-chip {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.42);
	border-radius: 999px;
	color: #fff;
	font-size: 0.86rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.shf-ed-chip:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.shf-ed-chip.is-current { background: #fff; color: var(--shf-ed-ink); border-color: #fff; }
.shf-ed--list { padding-top: 1px !important; overflow: visible; z-index: 2; display: flow-root; }
.shf-ed--list .shf-ed-grid { margin-top: -170px !important; position: relative; z-index: 2; }

/* 1: lead story across the width; panel overlaps the right of the picture */
.shf-ed--list .wp-block-post-template > li:nth-child(1) { grid-column: 1 / -1; margin-bottom: 20px !important; }
.shf-ed--list li:nth-child(1) .shf-ed-card { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 70px auto 70px; grid-template-areas: none; column-gap: 32px; }
.shf-ed--list li:nth-child(1) .shf-ed-card::before,
.shf-ed--list li:nth-child(1) .shf-ed-card__image { grid-area: auto; grid-column: 1 / 9; grid-row: 1 / 4; aspect-ratio: auto; min-height: 500px; }
.shf-ed--list li:nth-child(1) .shf-ed-card__body,
.shf-ed--home li:nth-child(1) .shf-ed-card__body {
	position: relative;
	z-index: 2;
	gap: 14px;
	padding: 40px 44px 38px;
	background: #fff;
	border-top: 4px solid var(--shf-ed-accent);
	box-shadow: 0 26px 60px rgba(11, 26, 51, 0.16);
}
.shf-ed--list li:nth-child(1) .shf-ed-card__body { grid-area: auto; grid-column: 7 / 13; grid-row: 2; align-self: center; }
.shf-ed--list li:nth-child(1) .shf-ed-card__title,
.shf-ed--home li:nth-child(1) .shf-ed-card__title { font-size: clamp(1.6rem, 1.1rem + 1.3vw, 2.3rem) !important; line-height: 1.15 !important; letter-spacing: -0.02em; }

/* 2: large story, left; 3-4: small stories with picture on the left, stacked on the right */
.shf-ed--list .wp-block-post-template > li:nth-child(2) { grid-column: 1 / 8; grid-row: span 2; }
.shf-ed--list li:nth-child(2) .shf-ed-card__title { font-size: 1.6rem !important; line-height: 1.2 !important; }
.shf-ed--list .wp-block-post-template > li:nth-child(3),
.shf-ed--list .wp-block-post-template > li:nth-child(4) { grid-column: 8 / 13; }
.shf-ed--list li:nth-child(3) .shf-ed-card, .shf-ed--list li:nth-child(4) .shf-ed-card,
.shf-ed--home li:nth-child(2) .shf-ed-card, .shf-ed--home li:nth-child(3) .shf-ed-card {
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	grid-template-areas: "img body";
	column-gap: 20px;
	align-items: start;
	padding-top: 20px;
	border-top: 1px solid var(--shf-ed-rule);
}
.shf-ed--list li:nth-child(3) .shf-ed-card::before, .shf-ed--list li:nth-child(4) .shf-ed-card::before,
.shf-ed--list li:nth-child(3) .shf-ed-card__image, .shf-ed--list li:nth-child(4) .shf-ed-card__image,
.shf-ed--home li:nth-child(2) .shf-ed-card::before, .shf-ed--home li:nth-child(3) .shf-ed-card::before,
.shf-ed--home li:nth-child(2) .shf-ed-card__image, .shf-ed--home li:nth-child(3) .shf-ed-card__image { aspect-ratio: 4 / 3; min-height: 0; }
.shf-ed--list li:nth-child(3) .shf-ed-card__body, .shf-ed--list li:nth-child(4) .shf-ed-card__body,
.shf-ed--home li:nth-child(2) .shf-ed-card__body, .shf-ed--home li:nth-child(3) .shf-ed-card__body { padding-top: 0; }
.shf-ed--list li:nth-child(n+3) .shf-ed-card__excerpt,
.shf-ed--home li:nth-child(n+2) .shf-ed-card__excerpt { display: none; }

/* 5-6: small stories; 7-10: text-only list column on the right, thin rules */
.shf-ed--list .wp-block-post-template > li:nth-child(5) { grid-column: 1 / 5; grid-row: span 4; }
.shf-ed--list .wp-block-post-template > li:nth-child(6) { grid-column: 5 / 9; grid-row: span 4; }
.shf-ed--list .wp-block-post-template > li:nth-child(n+7) { grid-column: 9 / 13; }
.shf-ed--list li:nth-child(n+7) .shf-ed-card, .shf-ed--home li:nth-child(n+4) .shf-ed-card { grid-template-areas: "body"; padding-top: 16px; border-top: 1px solid var(--shf-ed-rule); }
.shf-ed--list li:nth-child(n+7) .shf-ed-card::before, .shf-ed--list li:nth-child(n+7) .shf-ed-card__image,
.shf-ed--home li:nth-child(n+4) .shf-ed-card::before, .shf-ed--home li:nth-child(n+4) .shf-ed-card__image { display: none; }
.shf-ed--list li:nth-child(n+7) .shf-ed-card__body, .shf-ed--home li:nth-child(n+4) .shf-ed-card__body { padding-top: 0; gap: 8px; }
.shf-ed--list li:nth-child(n+7) .shf-ed-card__title { font-size: 1.05rem !important; }
.shf-ed-pagination { margin-top: 56px !important; gap: 8px; font-weight: 600; }
.shf-ed-pagination a, .shf-ed-pagination .page-numbers { color: var(--shf-ed-ink); text-decoration: none; padding: 6px 10px; }
.shf-ed-pagination .page-numbers.current { color: #fff; background: var(--shf-ed-accent); border-radius: 999px; }

/* ================= Homepage Articles section ================= */
.shf-ed--home::before { /* deep navy band behind the headline and the top of the stories */
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 420px;
	z-index: 0;
	background:
		radial-gradient(45% 80% at 95% 0%, rgba(34, 184, 207, 0.26) 0%, rgba(34, 184, 207, 0) 70%),
		linear-gradient(160deg, var(--shf-ed-navy) 0%, var(--shf-ed-navy-2) 100%);
}
.shf-ed-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: end; margin-bottom: 48px !important; }
.shf-ed-head > * { margin: 0 !important; }
.shf-ed-head__main > * { margin: 0; }
.shf-ed-head__title { color: #fff !important; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.2rem) !important; line-height: 1.06 !important; font-weight: 800; letter-spacing: -0.025em; text-transform: none !important; margin: 0 !important; max-width: 14ch; }
.shf-ed-head__side { justify-self: end; gap: 28px !important; align-items: center; }
.shf-ed-head__lead { color: #D3E2E9; font-size: 1rem; line-height: 1.6; max-width: 42ch; margin: 0 !important; }
.shf-ed--home .shf-round-arrow { color: #fff; }
/* 1: lead story, left; panel overlaps the bottom of its picture */
.shf-ed--home .wp-block-post-template > li:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / span 2; }
.shf-ed--home li:nth-child(1) .shf-ed-card { grid-template-areas: "img" "body"; }
.shf-ed--home li:nth-child(1) .shf-ed-card::before,
.shf-ed--home li:nth-child(1) .shf-ed-card__image { aspect-ratio: auto; min-height: 420px; }
.shf-ed--home li:nth-child(1) .shf-ed-card__body { margin: -130px 0 0 48px !important; }
/* 2-3: small stories on white tiles, stacked on the right (they start over the navy band) */
.shf-ed--home .wp-block-post-template > li:nth-child(2),
.shf-ed--home .wp-block-post-template > li:nth-child(3) { grid-column: 8 / 13; }
.shf-ed--home li:nth-child(2) .shf-ed-card, .shf-ed--home li:nth-child(3) .shf-ed-card { padding: 18px; background: #fff; border-top: 0; box-shadow: 0 16px 40px rgba(11, 26, 51, 0.12); height: auto; }
.shf-ed--home .wp-block-post-template > li:nth-child(2) { align-self: start; }
.shf-ed--home .wp-block-post-template > li:nth-child(3) { align-self: end; margin-left: 36px !important; } /* small offset, for layers */
/* 4-6: text-only row with rules */
.shf-ed--home .wp-block-post-template > li:nth-child(4) { grid-column: 1 / 5; }
.shf-ed--home .wp-block-post-template > li:nth-child(5) { grid-column: 5 / 9; }
.shf-ed--home .wp-block-post-template > li:nth-child(6) { grid-column: 9 / 13; }
.shf-ed--home li:nth-child(n+4) .shf-ed-card { border-top: 2px solid var(--shf-ed-ink); padding-top: 18px; }
.shf-ed--home .wp-block-post-template > li:nth-child(n+7) { display: none; }
.shf-ed-all { margin: 44px 0 0 !important; text-align: right; }
.shf-ed-all a { color: var(--shf-ed-accent); font-weight: 700; text-underline-offset: 5px; }

@media (max-width: 1080px) {
	.shf-ed-grid .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
	.shf-ed--list .wp-block-post-template > li:nth-child(n), .shf-ed--home .wp-block-post-template > li:nth-child(n) { grid-column: auto; grid-row: auto; margin-left: 0 !important; }
	.shf-ed--list .wp-block-post-template > li:nth-child(1), .shf-ed--list .wp-block-post-template > li:nth-child(2),
	.shf-ed--home .wp-block-post-template > li:nth-child(1) { grid-column: 1 / -1; }
	.shf-ed--list .wp-block-post-template > li:nth-child(n+7) { grid-column: 1 / -1; }
	.shf-ed--list li:nth-child(1) .shf-ed-card::before, .shf-ed--list li:nth-child(1) .shf-ed-card__image { grid-column: 1 / 10; min-height: 420px; }
	.shf-ed--list li:nth-child(1) .shf-ed-card__body { grid-column: 6 / 13; }
	.shf-ed-hero__inner, .shf-ed-head { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
	.shf-ed-hero .shf-ed-chips { grid-column: 1; grid-row: auto; justify-self: start; justify-content: flex-start; margin-top: 10px !important; }
	.shf-ed-head__side { justify-self: start; }
	.shf-ed--home::before { height: 470px; }
}
@media (max-width: 781px) {
	.shf-ed-grid .wp-block-post-template { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
	.shf-ed--list .wp-block-post-template > li:nth-child(n), .shf-ed--home .wp-block-post-template > li:nth-child(n) { grid-column: 1 / -1; }
	.shf-ed--list li:nth-child(1) .shf-ed-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "img" "body"; }
	.shf-ed--list li:nth-child(1) .shf-ed-card::before, .shf-ed--list li:nth-child(1) .shf-ed-card__image { grid-area: img; min-height: 260px; }
	.shf-ed--list li:nth-child(1) .shf-ed-card__body, .shf-ed--home li:nth-child(1) .shf-ed-card__body { grid-area: body; margin: -70px 14px 0 !important; padding: 26px 22px 24px; }
	.shf-ed--home li:nth-child(1) .shf-ed-card::before, .shf-ed--home li:nth-child(1) .shf-ed-card__image { min-height: 260px; }
	/* other stories become small picture-left cards; text-only stay text-only */
	.shf-ed--list li:nth-child(2) .shf-ed-card, .shf-ed--list li:nth-child(5) .shf-ed-card, .shf-ed--list li:nth-child(6) .shf-ed-card {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-areas: "img body"; column-gap: 16px; padding-top: 18px; border-top: 1px solid var(--shf-ed-rule);
	}
	.shf-ed--list li:nth-child(2) .shf-ed-card__body, .shf-ed--list li:nth-child(5) .shf-ed-card__body, .shf-ed--list li:nth-child(6) .shf-ed-card__body { padding-top: 0; }
	.shf-ed--list li:nth-child(2) .shf-ed-card__excerpt { display: none; }
	.shf-ed--list li:nth-child(n+2) .shf-ed-card__title, .shf-ed--home li:nth-child(n+2) .shf-ed-card__title { font-size: 1.02rem !important; }
	.shf-ed-card::before, .shf-ed-card__image { aspect-ratio: 4 / 3; }
	.shf-ed--list li:nth-child(3) .shf-ed-card, .shf-ed--list li:nth-child(4) .shf-ed-card, .shf-ed--home li:nth-child(2) .shf-ed-card, .shf-ed--home li:nth-child(3) .shf-ed-card { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
	.shf-ed-hero { padding-bottom: 150px !important; }
	.shf-ed-hero::after { width: 220px; height: 220px; right: -80px; }
	.shf-ed--list .shf-ed-grid { margin-top: -110px !important; }
	.shf-ed--home::before { height: 400px; }
	.shf-ed-head { margin-bottom: 32px !important; }
	.shf-ed-head__side { flex-wrap: wrap !important; gap: 18px !important; }
	.shf-ed-all { text-align: left; }
}

/* ================= Tools & Templates: colour by type ================= */
.shf-tool-card { --type: var(--shf-type-questionnaire); --type-tint: var(--shf-type-questionnaire-tint); }
.shf-tool-card--questionnaire { --type: var(--shf-type-questionnaire); --type-tint: var(--shf-type-questionnaire-tint); }
.shf-tool-card--outline { --type: var(--shf-type-outline); --type-tint: var(--shf-type-outline-tint); }
.shf-tool-card--handbook { --type: var(--shf-type-handbook); --type-tint: var(--shf-type-handbook-tint); }
.shf-tool-card--form { --type: var(--shf-type-form); --type-tint: var(--shf-type-form-tint); }
.shf-tool-card:not(.shf-tool-card--more) { border-top: 4px solid var(--type); }
.shf-tool-card:not(.shf-tool-card--more):hover { border-color: var(--type); border-top-color: var(--type); }
.shf-tool-card:not(.shf-tool-card--more) .shf-tool-card__photo { background: var(--type-tint); }
.shf-tool-type {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 12px !important;
	padding: 4px 11px 4px 9px;
	border-radius: 999px;
	background: var(--type-tint);
	color: var(--type);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}
.shf-tool-type::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--type); flex: 0 0 auto; }
.shf-tool-card:not(.shf-tool-card--more) .shf-tool-card__title { color: var(--shf-ink); }
/* "More templates" card: keep the + tile clear of the heading */
.shf-tool-card--more { padding: 30px 28px !important; }
.shf-tool-card--more .shf-tool-card__icon { margin: 0 0 24px !important; }
/* a soft colour wash behind the grid, picking up the four type colours */
.shf-tools-grid { position: relative; }
.shf-tools-grid::before {
	content: "";
	position: absolute;
	inset: 8% -4% -4% -4%;
	z-index: -1;
	background:
		radial-gradient(30% 40% at 8% 20%, rgba(103, 65, 168, 0.10) 0%, rgba(103, 65, 168, 0) 70%),
		radial-gradient(28% 40% at 92% 30%, rgba(162, 59, 114, 0.09) 0%, rgba(162, 59, 114, 0) 70%),
		radial-gradient(30% 40% at 70% 95%, rgba(39, 84, 197, 0.09) 0%, rgba(39, 84, 197, 0) 70%);
	pointer-events: none;
}