/* ==========================================================================
   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;
}

.blog-pill:hover,
.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);
}

@media (min-width: 992px) {
  .blog-layout {
    grid-template-columns: minmax(0, 1fr) 19rem;
    column-gap: calc(var(--space-gap) * 1.5);
    align-items: start;
  }

  .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;
}

a.blog-pagination__link:hover,
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);
}

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

.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;
  }
}