/**
 * Insights (the blog, /insights/): home.php, category.php, single-post.php and template-parts/insights/.
 */

/* ---- Hero and featured article (template-parts/insights/top.php) ----
   White with light particles under the solid header: heading left; the featured photo right with
   the article card (lime top edge) hanging off its bottom-left corner. */
.jd-ins-top { position: relative; overflow: clip; padding: calc(72px + 16px + clamp(40px, 5vw, 72px)) 0 clamp(56px, 6vw, 96px); background: var(--surface); color: var(--ink); }
.jd-ins-top > .jd-container { position: relative; z-index: 1; }
.jd-ins-top p { margin: 0; }
.jd-ins-top__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.jd-ins-top.is-solo .jd-ins-top__grid { grid-template-columns: minmax(0, 1fr); }
.jd-ins-top__copy { display: grid; gap: var(--space-5); justify-items: start; max-width: 820px; padding-top: clamp(16px, 4vw, 64px); }
.jd-ins-top.is-solo .jd-ins-top__copy { padding-top: 0; }
.jd-ins-top__title { margin: 0; font-size: var(--fs-h1); font-weight: 500; line-height: 1.06; letter-spacing: -.025em; }
.jd-ins-top__title em { padding: 0 .06em; font-style: normal; color: var(--forest); background: linear-gradient(transparent 62%, var(--lime) 62% 92%, transparent 92%); }
.jd-ins-top__text { max-width: 58ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-muted); }

.jd-ins-top__feat { position: relative; padding-bottom: clamp(120px, 12vw, 180px); }
.jd-ins-top__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); background: var(--forest-tint); }
.jd-ins-top__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease-out); }
.jd-ins-top__feat:hover .jd-ins-top__img img { scale: 1.04; }
.jd-ins-top__card { position: absolute; left: clamp(-80px, -5vw, -24px); right: clamp(24px, 6vw, 96px); bottom: 0; display: grid; justify-items: start; gap: var(--space-4); padding: clamp(24px, 3vw, 36px); border-top: 6px solid var(--lime); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 40px 80px -44px rgba(23, 38, 31, .6); }
.jd-ins-top__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.jd-ins-top__flag, .jd-ins-top__cat { padding: 5px 12px; border-radius: var(--radius-pill); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.jd-ins-top__flag { background: var(--forest); color: var(--lime); }
.jd-ins-top__cat { background: var(--forest-tint); color: var(--forest); transition: background-color var(--dur-base); }
.jd-ins-top__cat:hover { background: var(--lime); }
.jd-ins-top__ftitle { margin: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.15; letter-spacing: -.015em; }
.jd-ins-top__ftitle a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .4s var(--ease-out); }
.jd-ins-top__ftitle a:hover { background-size: 100% 2px; }
.jd-ins-top__exc { max-width: 56ch; font-size: var(--fs-body); line-height: 1.65; color: var(--ink-muted); }
.jd-ins-top__date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--ink-muted); }
.jd-ins-top__date svg { width: 16px; height: 16px; }
.jd-ins-top__card .jd-btn { margin-top: var(--space-2); }

@media (max-width: 1023px) {
  .jd-ins-top__grid { grid-template-columns: minmax(0, 1fr); }
  .jd-ins-top__copy { padding-top: 0; }
  .jd-ins-top__feat { padding-bottom: 0; }
  .jd-ins-top__card { position: relative; left: auto; right: auto; margin: -64px 16px 0; }
}
@media (max-width: 600px) {
  .jd-ins-top__card { margin: -48px 8px 0; }
}

/* ---- Categories and Latest Insights (template-parts/insights/grid.php) ----
   Soft green: heading beside the category pills (with counts); tall photo cards with the text
   over a forest fade; round page numbers. The whole card is the link (the title's ::after). */
.jd-ins-grid { padding-block: clamp(64px, 7vw, 112px); background: var(--forest-tint); color: var(--ink); scroll-margin-top: 0; }
.jd-ins-grid p, .jd-ins-grid h3 { margin: 0; }
.jd-ins-grid__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5) clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(32px, 4vw, 48px); }
.jd-ins-grid__title { margin: 0; font-size: var(--fs-h2); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.jd-ins-grid__title em { padding: 0 .06em; font-style: normal; color: var(--forest); background: linear-gradient(transparent 62%, var(--lime) 62% 92%, transparent 92%); }

.jd-ins-grid__tabs { min-width: 0; }
.jd-ins-grid__tabs ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 2px; list-style: none; }
.jd-ins-grid__tabs ul::-webkit-scrollbar { display: none; }
.jd-ins-grid__tabs a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 18px; border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: var(--fs-small); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-base), border-color var(--dur-base), color var(--dur-base); }
.jd-ins-grid__tabs a:hover { border-color: var(--forest); }
.jd-ins-grid__tabs a[aria-current] { border-color: var(--forest); background: var(--forest); color: var(--lime); }
.jd-ins-grid__tabs a:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.jd-ins-grid__tabs span { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 99px; background: var(--forest-tint); color: var(--forest); font-size: var(--fs-caption); font-weight: 700; }
.jd-ins-grid__tabs a[aria-current] span { background: var(--lime); }

.jd-ins-grid__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.jd-ins-card article { position: relative; display: grid; height: 100%; overflow: hidden; border-radius: var(--radius-lg); background: var(--forest); isolation: isolate; }
.jd-ins-card:has(h3 a:focus-visible) article { outline: 3px solid var(--forest); outline-offset: 4px; }
.jd-ins-card__img { position: absolute; inset: 0; z-index: -1; }
.jd-ins-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease-out); }
.jd-ins-card:hover .jd-ins-card__img img { scale: 1.05; }
.jd-ins-card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23, 38, 31, .96) 0%, rgba(23, 38, 31, .6) 48%, rgba(23, 38, 31, 0) 78%); }
.jd-ins-card__body { display: grid; align-content: end; justify-items: start; gap: 10px; min-height: 460px; padding: clamp(20px, 2.5vw, 28px); color: var(--on-forest); }
.jd-ins-card__cat { padding: 4px 12px; border-radius: var(--radius-pill); background: var(--lime); color: var(--forest); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.jd-ins-card h3 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; }
.jd-ins-card h3 a { color: inherit; text-decoration: none; }
.jd-ins-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.jd-ins-card h3 a:focus-visible { outline: none; }
.jd-ins-card:hover h3 a { text-decoration: underline; text-underline-offset: 3px; }
.jd-ins-card__exc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--fs-small); line-height: 1.55; color: var(--on-forest-muted); }
.jd-ins-card__date { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--on-forest-muted); }
.jd-ins-card__date svg { width: 14px; height: 14px; }
.jd-ins-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: var(--fs-small); font-weight: 600; color: var(--lime); }
.jd-ins-card__more svg { width: 16px; height: 16px; transition: translate .25s var(--ease-out); }
.jd-ins-card:hover .jd-ins-card__more svg { translate: 4px 0; }

.jd-ins-grid__pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(40px, 5vw, 64px); }
.jd-ins-grid__pager .page-numbers { display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 12px; border: 1px solid transparent; border-radius: 50%; background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; transition: border-color var(--dur-base); }
.jd-ins-grid__pager a.page-numbers:hover { border-color: var(--forest); }
.jd-ins-grid__pager .page-numbers.current { background: var(--forest); color: var(--lime); }
.jd-ins-grid__pager .page-numbers.dots { background: none; }
.jd-ins-grid__pager a.page-numbers:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.jd-ins-grid__chev { width: 18px; height: 18px; }
.jd-ins-grid__empty { padding: clamp(32px, 4vw, 56px); border-radius: var(--radius-lg); background: var(--surface); font-size: var(--fs-body); line-height: 1.6; text-align: center; color: var(--ink-muted); }
.jd-ins-grid__empty a { color: var(--forest); font-weight: 600; text-underline-offset: 3px; }

@media (max-width: 1023px) {
  .jd-ins-grid__head { grid-template-columns: minmax(0, 1fr); }
  /* one scrolling row on smaller screens, fading out at the right edge as a hint */
  .jd-ins-grid__tabs ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 40px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  .jd-ins-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .jd-ins-grid__list { grid-template-columns: minmax(0, 1fr); }
  .jd-ins-card__body { min-height: 380px; }
}

/* ---- Single article (single-post.php, template-parts/insights/article.php) ----
   The photo fills the top under the see-through header with the title over a forest fade; a left
   column (On this page, share) stays in view beside the article. */
.jd-art { position: relative; color: var(--ink); }
.jd-art p, .jd-art h1 { margin: 0; }
.jd-art__hero { position: relative; display: grid; align-items: end; min-height: clamp(560px, 72vh, 760px); overflow: hidden; background: var(--forest); color: var(--on-forest); }
.jd-art__hero.is-plain { min-height: 0; }
.jd-art__photo { position: absolute; inset: 0; margin: 0; }
.jd-art__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.jd-art__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23, 38, 31, .95) 0%, rgba(23, 38, 31, .55) 50%, rgba(23, 38, 31, .35) 100%), linear-gradient(180deg, rgba(23, 38, 31, .6) 0, transparent 200px); }
.jd-art__head { position: relative; display: grid; justify-items: start; gap: var(--space-5); padding-block: 160px clamp(40px, 5vw, 72px); }
.jd-art__hero.is-plain .jd-art__head { padding-top: calc(72px + 16px + clamp(40px, 5vw, 72px)); }
.jd-art__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--on-forest-muted); }
.jd-art__crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.jd-art__crumbs svg { width: 14px; height: 14px; }
.jd-art__crumbs a { color: inherit; text-decoration: none; }
.jd-art__crumbs a:hover { color: var(--on-forest); text-decoration: underline; text-underline-offset: 3px; }
.jd-art__crumbs li:last-child a { color: var(--lime); font-weight: 600; }
.jd-art__cat { padding: 5px 12px; border-radius: var(--radius-pill); background: var(--lime); color: var(--forest); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.jd-art__title { max-width: 22ch; font-size: var(--fs-h1); font-weight: 500; line-height: 1.08; letter-spacing: -.025em; }
.jd-art__meta { display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); }
.jd-art__meta b { display: block; font-weight: 600; }
.jd-art__meta small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--on-forest-muted); }
.jd-art__meta svg { width: 15px; height: 15px; }
.jd-art__avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lime); color: var(--forest); font-size: var(--fs-small); font-weight: 700; }
.jd-art__avatar.is-lg { width: 72px; height: 72px; background: var(--forest); color: var(--lime); font-size: var(--fs-h4); }

.jd-art__grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 720px); justify-content: center; gap: clamp(32px, 5vw, 96px); align-items: start; padding-block: clamp(48px, 6vw, 80px) clamp(64px, 7vw, 112px); }
.jd-art__side { position: sticky; top: 120px; display: grid; gap: var(--space-6); }
.jd-art__label { margin-bottom: var(--space-3) !important; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.jd-art__toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: jd-toc; }
.jd-art__toc a { display: grid; grid-template-columns: 28px minmax(0, 1fr); padding: 8px 10px; border-radius: 10px; color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.4; text-decoration: none; counter-increment: jd-toc; transition: background-color var(--dur-base), color var(--dur-base); }
.jd-art__toc a::before { content: counter(jd-toc, decimal-leading-zero); font-weight: 700; color: var(--ink-subtle); }
.jd-art__toc a:hover { background: var(--forest-tint); color: var(--ink); }
.jd-art__toc a[aria-current] { background: var(--forest); color: var(--on-forest); }
.jd-art__toc a[aria-current]::before { color: var(--lime); }
.jd-art__toc a:focus-visible, .jd-art__share a:focus-visible, .jd-art__share button:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.jd-art__share { padding-top: var(--space-5); border-top: 1px solid var(--line); }
.jd-art__share:first-child { padding-top: 0; border-top: 0; }
.jd-art__share ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jd-art__share a, .jd-art__share button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--forest); cursor: pointer; transition: background-color var(--dur-base), border-color var(--dur-base), color var(--dur-base); }
.jd-art__share a:hover, .jd-art__share button:hover { border-color: var(--forest); background: var(--forest); color: var(--lime); }
.jd-art__share svg { width: 18px; height: 18px; }
.jd-art__copied { min-height: 1.4em; margin-top: 8px !important; font-size: var(--fs-small); color: var(--forest); }

/* the article body: the writer's blocks */
.jd-art__prose { font-size: var(--fs-body); line-height: 1.75; color: #1f2a26; }
.jd-art__prose > * { margin-block: 0; }
.jd-art .jd-art__prose > * + * { margin-top: var(--space-5); } /* .jd-art: beats the .jd-art p reset */
.jd-art .jd-art__prose > :is(h2, h3, h4) + * { margin-top: var(--space-3); }
.jd-art .jd-art__prose > h2 { margin-top: var(--space-8); }
.jd-art .jd-art__prose > :is(h3, h4) { margin-top: var(--space-6); }
.jd-art__prose > p:first-child { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink); }
.jd-art__prose h2 { margin-top: var(--space-8); font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); scroll-margin-top: 110px; }
.jd-art__prose h3 { margin-top: var(--space-6); font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; color: var(--ink); }
.jd-art__prose h4 { margin-top: var(--space-6); font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.jd-art__prose ul, .jd-art__prose ol { padding-left: 1.3em; }
.jd-art__prose li + li { margin-top: 8px; }
.jd-art__prose ul li::marker, .jd-art__prose ol li::marker { color: var(--forest); font-weight: 700; }
.jd-art__prose a { color: var(--forest); font-weight: 600; text-underline-offset: 3px; }
.jd-art__prose a:hover { text-decoration-thickness: 2px; }
.jd-art__prose strong { color: var(--ink); }
.jd-art__prose blockquote, .jd-art__prose .wp-block-pullquote { margin-inline: 0; padding: var(--space-2) 0 var(--space-2) var(--space-6); border-left: 4px solid var(--lime); font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); }
.jd-art__prose blockquote cite { display: block; margin-top: var(--space-3); font-size: var(--fs-small); font-style: normal; color: var(--ink-muted); }
.jd-art__prose figure { margin-inline: 0; }
.jd-art__prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.jd-art__prose figcaption { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--ink-muted); }
.jd-art__prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.jd-art__prose th, .jd-art__prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.jd-art__prose th { color: var(--ink); }
.jd-art__prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.jd-art__prose .wp-block-button__link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: var(--radius-pill); background: var(--forest); color: var(--on-forest); font-weight: 600; text-decoration: none; transition: background-color var(--dur-base); }
.jd-art__prose .wp-block-button__link:hover { background: var(--forest-deep); }
/* Group block style: related programme box (forest, lime edge) */
.jd-art__prose .is-style-jodyn-callout { margin-block: var(--space-7); padding: clamp(24px, 3vw, 36px); border-left: 6px solid var(--lime); border-radius: var(--radius-md); background: var(--forest); color: var(--on-forest-muted); font-size: var(--fs-small); line-height: 1.6; }
.jd-art__prose .is-style-jodyn-callout > * + * { margin-top: 10px; }
.jd-art__prose .is-style-jodyn-callout :is(h2, h3, h4) { margin-top: 0; color: var(--on-forest); font-size: var(--fs-h4); }
.jd-art__prose .is-style-jodyn-callout > p:first-child { font-size: var(--fs-caption); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.jd-art__prose .is-style-jodyn-callout a:not(.wp-block-button__link) { color: var(--lime); }
.jd-art__prose .is-style-jodyn-callout .wp-block-buttons { margin-top: var(--space-4); }
.jd-art__prose .is-style-jodyn-callout .wp-block-button__link { background: var(--lime); color: var(--forest); }
.jd-art__prose .is-style-jodyn-callout .wp-block-button__link:hover { background: #fff; }
/* Group block style: key takeaways (soft green, ticks) */
.jd-art__prose .is-style-jodyn-takeaways { margin-top: var(--space-8); padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-md); background: var(--forest-tint); }
.jd-art__prose .is-style-jodyn-takeaways > * + * { margin-top: var(--space-4); }
.jd-art__prose .is-style-jodyn-takeaways :is(h2, h3, h4) { margin-top: 0; font-size: var(--fs-h4); font-weight: 700; color: var(--forest); }
.jd-art__prose .is-style-jodyn-takeaways ul { display: grid; gap: 10px; padding: 0; list-style: none; }
.jd-art__prose .is-style-jodyn-takeaways li { position: relative; margin: 0; padding-left: 32px; line-height: 1.6; }
.jd-art__prose .is-style-jodyn-takeaways li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5FD4A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }

.jd-art__author { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); align-items: start; margin-top: var(--space-8); padding: clamp(24px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.jd-art__author .jd-art__label { margin-bottom: 4px !important; }
.jd-art__aname { font-size: var(--fs-h4); font-weight: 600; }
.jd-art__aname a { color: inherit; text-decoration: none; }
.jd-art__aname a:hover { text-decoration: underline; text-underline-offset: 3px; }
.jd-art__role { font-size: var(--fs-small); color: var(--ink-muted); }
.jd-art__bio { margin-top: 8px !important; font-size: var(--fs-small); line-height: 1.6; }
.jd-art-rel__title { margin-bottom: clamp(32px, 4vw, 48px); }

@media (max-width: 1023px) {
  .jd-art__grid { grid-template-columns: minmax(0, 1fr); }
  .jd-art__side { position: static; order: 2; }
  .jd-art__toc { display: none; }
  .jd-art__share { border: 0; padding: 0; }
}
@media (max-width: 600px) {
  .jd-art__hero { min-height: 520px; }
  .jd-art__head { padding-top: 120px; }
  .jd-art__author { grid-template-columns: minmax(0, 1fr); }
}