/* LastLonger blog: list (frontend-spec 5.4), post (5.5), .prose-blog (frontend-spec 2 with the navy colours of
   theme-architecture 5.6 #15), 404 (theme-architecture 4.7) and the archive/search list of index.php.
   Routes: blog, post, 404, archive. Width, centring and side gutters of .ll-blog come from
   .ll-container.ll-container--blog (layout.css, theme-architecture 5.4); only the vertical padding is set here.
   The CTA box itself (.ll-blogcta) is in components.css (frontend-spec 4.10); its wrappers are styled below. */

/* Container and grid (frontend-spec 5.4) */
.ll-blog { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 1024px) { .ll-blog { padding-top: 4rem; padding-bottom: 4rem; } }
@media (min-width: 1024px) { .ll-blog__grid { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; } }

/* Intro; the 404 heading uses the same rule (theme-architecture 4.7) */
.ll-blog__intro { margin-bottom: 3rem; }
.ll-blog__intro h1, .ll-notfound h1 { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 2.25rem; line-height: 2.5rem;
  font-weight: 600; margin-bottom: .75rem; color: var(--ll-ink); }
@media (min-width: 640px) { .ll-blog__intro h1, .ll-notfound h1 { font-size: 3rem; line-height: 1; } }
.ll-blog__intro p { font-size: 17px; color: var(--ll-ink-muted); line-height: 1.8; }

/* Cards */
.ll-blog__list > * + * { margin-top: 1.5rem; }
.ll-card { padding: 1.5rem; border-radius: 1rem; border: 1px solid rgba(15,27,46,.1); background-color: var(--ll-paper-2);
  transition: all 300ms var(--ll-ease); }
.ll-card:hover { border-color: rgba(31,111,80,.4); box-shadow: var(--ll-shadow-soft); }
.ll-card__date { display: flex; align-items: center; gap: .5rem; font-size: .875rem; line-height: 1.25rem; color: var(--ll-ink-muted); margin-bottom: .75rem; }
.ll-card__date svg { width: 1rem; height: 1rem; }
.ll-card__title { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.25rem; line-height: 1.375; font-weight: 600;
  color: var(--ll-ink); margin-bottom: .75rem; transition: color 150ms var(--ll-ease); }
@media (min-width: 640px) { .ll-card__title { font-size: 1.5rem; line-height: 2rem; } }
.ll-card:hover .ll-card__title { color: var(--ll-accent); }
.ll-card__desc { font-size: 17px; color: var(--ll-ink-muted); line-height: 1.8; margin-bottom: 1.25rem; }
.ll-card__more { display: inline-flex; align-items: center; gap: .5rem; color: var(--ll-accent); font-weight: 600;
  transition: color 150ms var(--ll-ease); }
.ll-card__more:hover { color: var(--ll-accent-hover); }
.ll-card__more svg { width: 1rem; height: 1rem; transition: transform 150ms var(--ll-ease); }
.ll-card:hover .ll-card__more svg { transform: translateX(.25rem); }

/* CTA box wrappers printed by template-parts/cta/blog-cta-box.php: desktop sidebar (sticky) and the mobile box */
.ll-blog__aside { display: none; }
@media (min-width: 1024px) { .ll-blog__aside { display: block; } }
.ll-blog__aside > div { position: sticky; top: 6rem; }
.ll-blog__cta-mobile { margin-top: 3rem; }
@media (min-width: 1024px) { .ll-blog__cta-mobile { display: none; } }

/* Archive / search list of index.php and an empty blog list: same intro, list and cards as /blog/ */
.ll-blog__empty { font-size: 17px; color: var(--ll-ink-muted); line-height: 1.8; }

/* Page numbers, printed only when there is more than one page: a list (paginate_links(), .page-numbers) or a post split
   with page breaks (wp_link_pages(), .post-page-numbers) */
.ll-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 3rem; }
.ll-pagination .page-numbers, .ll-pagination .post-page-numbers { display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem; border-radius: 9999px; border: 1px solid rgba(15,27,46,.15); color: var(--ll-ink);
  font-size: .875rem; line-height: 1.25rem; font-weight: 600; transition: all 200ms var(--ll-ease); }
.ll-pagination a.page-numbers:hover, .ll-pagination a.post-page-numbers:hover { border-color: var(--ll-accent); color: var(--ll-accent); }
.ll-pagination .page-numbers.current, .ll-pagination .post-page-numbers.current { background-color: var(--ll-accent);
  border-color: var(--ll-accent); color: #fff; }
.ll-pagination .page-numbers.dots { border-color: transparent; }

/* Post (frontend-spec 5.5) */
.ll-post__back { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; line-height: 1.25rem;
  color: var(--ll-ink-muted); transition: color 150ms var(--ll-ease); margin-bottom: 2rem; }
.ll-post__back:hover { color: var(--ll-accent); }
.ll-post__back svg, .ll-post__meta svg { width: 1rem; height: 1rem; }
.ll-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: .875rem; line-height: 1.25rem;
  color: var(--ll-ink-muted); margin-bottom: 1.5rem; }
.ll-post__meta > span { display: flex; align-items: center; gap: .375rem; }
.ll-post__title { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.875rem; line-height: 1.25;
  font-weight: 600; margin-bottom: 2.5rem; color: var(--ll-ink); }
@media (min-width: 640px)  { .ll-post__title { font-size: 2.25rem; line-height: 2.5rem; } }
@media (min-width: 1024px) { .ll-post__title { font-size: 3rem; line-height: 1; } }

/* Article body (frontend-spec 2): verbatim except the three colours, which use the navy prose tokens (5.6 #15, O6).
   No letter-spacing on the headings (not .font-display). Scoped to .prose-blog so the end-CTA h2 is not affected. */
.prose-blog h2 {
  font-family: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ll-prose-heading);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}
.prose-blog h3 {
  font-family: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ll-prose-subheading);
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}
.prose-blog p {
  font-size: 17px;
  color: var(--ll-prose-body);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.prose-blog strong {
  color: var(--ll-prose-heading);
  font-weight: 600;
}
.prose-blog h2:first-child,
.prose-blog h3:first-child {
  margin-top: 0;
}

/* End-of-article CTA (frontend-spec 5.5) */
.ll-post__cta { margin-top: 4rem; padding: 2rem; border-radius: 1rem; border: 1px solid rgba(31,111,80,.3);
  background-color: var(--ll-accent-soft); text-align: center; }
.ll-post__cta img { width: 8rem; margin: 0 auto 1rem; filter: drop-shadow(0 20px 13px rgba(0,0,0,.03)) drop-shadow(0 8px 5px rgba(0,0,0,.08)); }
.ll-post__cta h2 { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.5rem; line-height: 2rem;
  font-weight: 600; color: var(--ll-ink); margin-bottom: .5rem; }
.ll-post__cta h2 + p { font-size: 17px; color: var(--ll-ink-muted); line-height: 1.8; margin: 0 auto 1.5rem; max-width: 28rem; }
.ll-post__btn { display: inline-block; padding: 1rem 2.5rem; background-color: var(--ll-accent); color: #fff; border-radius: 9999px;
  font-weight: 600; font-size: 1.25rem; line-height: 1.75rem; box-shadow: var(--ll-shadow-cta); transition: all 200ms var(--ll-ease); }
.ll-post__btn:hover { background-color: var(--ll-accent-hover); transform: translateY(-0.125rem); }
.ll-post__cta-note { font-size: .875rem; line-height: 1.25rem; color: var(--ll-ink-muted); margin-top: .75rem; }

/* 404 (theme-architecture 4.7): heading shares the blog intro rule above; buttons are .ll-btn (components.css) */
.ll-notfound p { font-size: 17px; line-height: 1.8; color: var(--ll-ink-muted); margin-top: .75rem; }
.ll-notfound__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }