/* ==========================================================================
   Devgun Family Law -- Page: blog listing + blog post detail
   No dedicated Figma frame exists for either page; sanctioned sources are
   docs/design/frontend-build-spec.md (Section 6 decision D4) + the
   Featured Blog card on 03-ajay-profile.png (cards styled in
   blocks/blog-cards.css) + phase1-signoff.md #7 (maximize reading space,
   visible categorization). Page container + the 926px standalone measure
   come from page/detail.css (.detail-main / .detail-container /
   .detail-content--standalone) -- both blog templates require detail.css
   first; this file owns only the blog-specific pieces: intro spacing,
   category pill nav, current-category heading, empty state, pagination,
   and the post header/featured-image/footer.
   Consumes tokens from foundation/tokens.css only -- no raw hex. Raw ramp
   tokens (--color-blue-dark, --color-blue-light, --color-blue-lightest)
   are used where no semantic alias exists (team-cards.css precedent).
   Loaded by templates/App/Pages/Layout/CustomBlog.ss and CustomBlogPost.ss.
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * Shared: category/tag pills
 * Sign-off #7 "visible categorization". Filter-chip pills: Body-2
 * semibold, pill radius, tinted rest state, dark-filled active state.
 * Contrast: Dark Blue on --color-bg-card-tint 7.5:1, on --color-blue-light
 * 5.4:1, white on --color-action 9.26:1 -- all pass AA (build spec S2).
 * Resets the foundation bold/tracked link style; 44px min target height.
 * ------------------------------------------------------------------ */

.blog-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.blog-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-card-tint);
  color: var(--color-blue-dark);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body2);
  line-height: var(--lh-body2);
  letter-spacing: 0;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

@media (hover: hover) {
  .blog-pill:hover {
    background-color: var(--color-blue-light);
    color: var(--color-blue-dark);
    text-decoration: none;
  }
}

.blog-pill:focus {
  background-color: var(--color-blue-light);
  color: var(--color-blue-dark);
  text-decoration: none;
}

.blog-pill:focus-visible {
  border-radius: var(--radius-pill); /* keep the pill shape under the foundation focus ring */
}

.blog-pill--active {
  background-color: var(--color-action);
  color: var(--color-action-text);
}

.blog-pill--active:hover,
.blog-pill--active:focus {
  background-color: var(--color-action);
  color: var(--color-action-text);
}

/* ------------------------------------------------------------------ *
 * Listing: intro, two-column layout (article list + category rail),
 * current-category heading, empty state
 * (2026-07-03 category-menu layout -- Dave's sidebar-menu reference).
 * ------------------------------------------------------------------ */

.blog-intro {
  margin-bottom: var(--space-gap);
}

/* Two-column body. Aside is FIRST in source order (so the collapsible
 * category menu sits on top on mobile); at lg+ explicit grid placement
 * puts the article list on the left and the category rail on the right,
 * matching the reference. The rail's sticky + card + collapse behaviour
 * comes from the shared .rail-disclosure (chrome/rail.css). */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-gap);
}

/* A grid item's automatic minimum size is its CONTENT's min-content width,
   so one wide thing in the article (a comparison table) pushed this column
   -- and with it the page -- past the viewport on phones. The lg+ track
   above already guards its own axis with minmax(0, 1fr); this does the same
   for the item itself, at every width. */
.blog-layout__main {
  min-width: 0;
}

@media (min-width: 992px) {
  .blog-layout {
    grid-template-columns: minmax(0, 1fr) 19rem;
    column-gap: calc(var(--space-gap) * 1.5);
    /* NO align-items: start here (removed 2026-07-06): it sized the
       aside to its content, leaving the sticky .rail-disclosure card
       zero room to travel -- the rail never actually stuck (Dave's
       report). Default stretch gives the aside full column height; the
       card's own background/radius keep its visual size unchanged.

       min-height (2026-07-06 sticky fix, part 2): a sparse category
       (e.g. one post) makes the article column barely taller than the
       rail card, so `position: sticky` had almost no travel and the
       menu scrolled away -- looked broken. A viewport-relative floor
       gives the two-column region (and thus the stretched aside) enough
       height for the rail to actually pin through a meaningful scroll,
       regardless of post count. Categories that already overflow this
       are unaffected; the only cost is a little whitespace under a very
       thin category, which shrinks as real posts land. */
    min-height: 80vh;
  }

  .blog-layout__main {
    grid-column: 1;
    grid-row: 1;
  }

  .blog-layout__aside {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Current-category status heading, left-aligned above the list. */
.blog-list-heading {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-gap);
}

.blog-empty {
  margin: var(--space-gap) 0;
}

/* ------------------------------------------------------------------ *
 * Listing: article ROW list (BlogList.ss) -- image left, meta/title/
 * excerpt/read-more right, thin divider between rows.
 * ------------------------------------------------------------------ */

.blog-list {
  display: flex;
  flex-direction: column;
}

.blog-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.blog-row + .blog-row {
  margin-top: var(--space-gap);
  padding-top: var(--space-gap);
  border-top: 1px solid var(--color-border-subtle);
}

@media (min-width: 576px) {
  .blog-row {
    grid-template-columns: 12.5rem 1fr;
    gap: 1.5rem;
    align-items: start;
  }
}

.blog-row__media {
  display: block;
  border-radius: var(--radius-image);
  overflow: hidden;
}

.blog-row__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.blog-row__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background-color: var(--color-bg-card-tint);
}

.blog-row__image--placeholder img {
  width: 40%;
  height: auto;
  aspect-ratio: auto;
  opacity: 0.6;
}

.blog-row__date {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--fs-body2);
  line-height: var(--lh-body2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-blue-dark);
}

.blog-row__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h5);
  letter-spacing: var(--ls-h5);
  margin: 0 0 0.5rem;
}

/* Title link: normal-weight-context link on white -> Forest Green per the
   F2 audit rule (Canopy fails normal-text AA; Forest Green 8.06:1). */
.blog-row__title-link {
  color: var(--color-text-heading);
  text-decoration: none;
}

.blog-row__title-link:hover,
.blog-row__title-link:focus-visible {
  text-decoration: underline;
}

.blog-row__excerpt {
  color: var(--color-text-default);
  margin: 0 0 0.75rem;
}

.blog-row__excerpt > :last-child {
  margin-bottom: 0;
}

.blog-row__more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--fs-body2);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-green-forest);
  text-decoration: none;
}

.blog-row__more:hover,
.blog-row__more:focus-visible {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * Listing: pagination (SS PaginatedList pattern, retokenized)
 * ------------------------------------------------------------------ */

.blog-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--space-gap);
}

.blog-pagination__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.blog-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--color-blue-dark);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body2);
  line-height: var(--lh-body2);
  letter-spacing: 0;
  text-decoration: none;
  transition: background-color 150ms ease;
}

@media (hover: hover) {
  a.blog-pagination__link:hover {
    background-color: var(--color-bg-card-tint);
    text-decoration: none;
  }
}

a.blog-pagination__link:focus {
  background-color: var(--color-bg-card-tint);
  text-decoration: none;
}

.blog-pagination__link:focus-visible {
  border-radius: var(--radius-pill);
}

.blog-pagination__link--current {
  background-color: var(--color-action);
  color: var(--color-action-text);
}

.blog-pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--color-text-default);
  font-size: var(--fs-body2);
}

/* ------------------------------------------------------------------ *
 * Post detail: header, meta row, featured image, content extras, footer
 * Single centred readable column -- the measure itself comes from
 * .detail-content--standalone (926px, page/detail.css).
 * ------------------------------------------------------------------ */

.blog-post__header {
  margin-bottom: var(--space-gap);
}

/* Article heading scale (Dave 2026-07-05: "make H2 a bit smaller as well
   and H3"). The site ladder (h1 64 / h2 50 / h3 42 at desktop) is hero/
   band scale -- oversized inside the 926px article measure. Step the
   article down the existing token ladder instead of inventing sizes:
   title (h1) at the h3 tokens, content h2 at the h4 tokens (the
   established content-heading scale -- .detail-subheading precedent),
   content h3 at the h5 tokens. Semibold throughout, matching
   .blog-list-heading / .blog-row__title / .detail-subheading. Scoped to
   the post page only; Figma-locked pages keep the full ladder. */

.blog-post__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  margin: 0 0 0.75rem;
}

.blog-post__content h2 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  margin: calc(var(--space-gap) * 1.25) 0 0.75rem;
}

.blog-post__content h3 {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h5);
  letter-spacing: var(--ls-h5);
  margin: var(--space-gap) 0 0.75rem;
}

/* Rarely used deeper levels: keep them below h3, above body. */
.blog-post__content h4,
.blog-post__content h5,
.blog-post__content h6 {
  font-size: var(--fs-intro);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h5);
  letter-spacing: 0;
  margin: var(--space-gap) 0 0.5rem;
}

.blog-post__content > h2:first-child,
.blog-post__content > h3:first-child {
  margin-top: 0;
}

.blog-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

/* Category chip as an editorial eyebrow ABOVE the post title (Dave
   2026-07-06: the beside-the-date spot "isn't any good"). Reuses the
   shared .blog-pill; only placement/rhythm live here. */
.blog-post__categories--eyebrow {
  margin: 0 0 0.875rem;
}

.blog-post__date {
  font-size: var(--fs-body2);
  line-height: var(--lh-body2);
  letter-spacing: 0;
  color: var(--color-blue-dark);
}

.blog-post__featured-image {
  margin-bottom: var(--space-gap);
}

.blog-post__featured-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-image);
}

.blog-post__extra-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--space-gap);
}

.blog-post__footer {
  margin-top: var(--space-gap);
  padding-top: var(--space-gap);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-gap);
}

.blog-post__prevnext {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.blog-post__prev,
.blog-post__next {
  max-width: 48%;
}

.blog-post__next {
  margin-left: auto;
  text-align: right;
}

.blog-post__prevnext-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--fs-body2);
  line-height: var(--lh-body2);
  letter-spacing: 0;
  color: var(--color-text-default);
}

.blog-post__prevnext-link {
  font-size: var(--fs-body2);
  letter-spacing: 0;
}

@media (max-width: 575.98px) {
  .blog-post__prevnext {
    flex-direction: column;
  }

  .blog-post__prev,
  .blog-post__next {
    max-width: 100%;
  }

  .blog-post__next {
    margin-left: 0;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-pill,
  .blog-pagination__link {
    transition: none;
  }
}