/* =========================================================
   BLOG SECTION — long-form post reading experience + paginated index
   Reskinned onto the shared portfolio design system (css/styles.css).
   Tokens/fonts/reset live in styles.css; this file is blog-only and
   scoped under body.blog so it can't leak onto other pages.
   Organization: layout shell -> shared prose rhythm -> post page ->
   table of contents -> index page -> pagination -> media queries
   (min-width 48rem / 64rem, mobile-first)

   ========================================================= */

/* ===== LAYOUT SHELL =====
   Mobile-first base; scaled up at the 48rem breakpoint below. */
.blog-page {
  padding: var(--space-xl) var(--space-md) var(--space-4xl);
}

.post,
.blog-index__header,
.post-list,
.pagination {
  /* Comfortable reading measure, capped so it never outgrows the viewport
     on narrow screens. */
  max-width: min(65ch, 100%);
  margin-inline: auto;
}

/* ===== SHARED PROSE RHYTHM ===== */
.post p {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-block-end: var(--space-lg);
}

.post p:last-child {
  margin-block-end: 0;
}

.post a,
.post-summary a {
  color: var(--color-primary-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary-ring);
  transition: border-bottom-color var(--transition), color var(--transition), text-decoration-color var(--transition);
}

.post a:hover,
.post a:focus-visible,
.post-summary a:hover,
.post-summary a:focus-visible {
  color: var(--color-primary-ink);
  border-bottom-color: var(--color-primary-ink);
  text-decoration: underline;
}

.post img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-block: var(--space-lg);
}

.post video {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  margin-block: var(--space-lg);
}

/* ===== BEFORE/AFTER COMPARISON SLIDER =====
   Owned replacement for the WP BEAF plugin. Markup (authored once per post,
   passes through marked unescaped):
     <div data-img-compare>
       <img src="before.jpg" alt="Before">
       <img src="after.jpg" alt="After">
     </div>
   No-JS fallback: both images are plain block-level <img>s, stacked in
   document order (before, then after) — both fully visible, captioned by
   their alt text, no layout role depends on JS. js/blog.js progressively
   enhances the wrapper: it stacks the two images via CSS grid (same cell),
   clips the top "after" image with clip-path driven by the --pos custom
   property, and adds a native <input type="range"> as the drag handle. */
.post [data-img-compare] {
  margin-block: var(--space-lg);
}

.post [data-img-compare].is-enhanced {
  position: relative;
  display: grid;
  border-radius: var(--radius-md);
  overflow: hidden;
  --pos: 50%;
}

.post [data-img-compare].is-enhanced img {
  grid-area: 1 / 1;
  margin-block: 0;
  border-radius: 0;
  width: 100%;
}

/* The second <img> (after) sits on top, clipped to reveal only the portion
   left of the handle; the first <img> (before) shows through underneath. */
.post [data-img-compare].is-enhanced img:last-of-type {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.img-compare__divider {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--pos);
  width: 2px;
  background: var(--color-bg);
  box-shadow: 0 0 0 1px var(--color-primary-ring);
  pointer-events: none;
  transform: translateX(-1px);
}

.img-compare__divider::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  width: var(--space-lg);
  height: var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-primary-ring);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
}

/* The range input IS the drag handle: transparent track, full-size hit
   area, positioned over the whole image so it's draggable anywhere and
   reachable via Tab + arrow keys like any native slider. */
.img-compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.img-compare__range::-webkit-slider-thumb {
  appearance: none;
  width: var(--space-lg);
  height: 100%;
  background: transparent;
}

.img-compare__range::-moz-range-thumb {
  width: var(--space-lg);
  height: 100%;
  background: transparent;
  border: none;
}

.img-compare__range::-moz-range-track {
  background: transparent;
}

.img-compare__range:focus-visible {
  /* The slider's wrapper (.is-enhanced) clips with overflow:hidden for the
     rounded-corner crop, which would cut off a normal positive
     outline-offset ring. Use a negative offset so the ring draws INSIDE the
     clipped box and stays visible. */
  outline: 2px solid var(--color-primary-ink);
  outline-offset: -2px;
}

.post blockquote {
  border-inline-start: 3px solid var(--color-primary-ring);
  margin-inline: 0;
  margin-block: var(--space-lg);
  padding-inline-start: var(--space-md);
  /* text-secondary, not -muted: repo precedent (styles.css .testimonial__quote)
     uses -secondary for italic body copy because -muted falls just under the
     APCA Lc 75 floor (measures ~74 on --color-bg) at this size/style. */
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Code blocks/inline code: no rule existed for these anywhere (shared
   styles.css doesn't style <pre>/<code> either), so long migrated CLI
   examples (e.g. the Robocopy/Beyond Compare posts) rendered with the
   browser default <pre> (white-space: pre, no width cap) and forced
   horizontal scroll on the whole page at mobile widths. Wrap long lines
   instead of letting them overflow; a horizontal scrollbar on the block
   itself is the fallback for content that still can't wrap (e.g. an
   unbroken path with no spaces). */
.post pre {
  background: var(--color-bg-paper);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-block: var(--space-lg);
  overflow-x: auto;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}

.post pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}

.post code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-paper);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
  word-break: break-word;
}

/* Tables: no rule existed anywhere (shared styles.css doesn't style
   <table> either) — a multi-column GFM table (e.g. the Digisemestr post)
   rendered at default browser width with no constraint, forcing
   horizontal scroll on the whole page at mobile widths. Wrap in a
   horizontally-scrollable container that's narrower than the table itself,
   so only the table scrolls, not the page. */
.post table {
  border-collapse: collapse;
  width: 100%;
}

.post .table-wrap {
  overflow-x: auto;
  margin-block: var(--space-lg);
}

.post .table-wrap table {
  margin-block: 0;
}

.post th,
.post td {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  text-align: left;
}

.post th {
  color: var(--color-text-primary);
  font-weight: 600;
}

.post hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-2xl) 0;
}

.post h2,
.post h3,
.post h4 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin-block: var(--space-2xl) var(--space-md);
  scroll-margin-top: var(--space-xl);
}

.post h2 {
  font-size: var(--type-display-md);
}

.post h3 {
  font-size: var(--font-size-lg);
}

/* ===== POST PAGE ===== */
.post__title {
  font-family: var(--font-display);
  font-size: var(--type-display-md);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  margin-block-end: var(--space-sm);
}

.post__meta {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  /* text-secondary (not -muted): -muted measures APCA Lc ~74 on --color-bg,
     just under the Lc 75 floor for small text; -secondary clears Lc 83. */
  color: var(--color-text-secondary);
  margin-block-end: var(--space-lg);
}

/* ===== TAGS =====
   Shared between the post page and index summaries. */
.tag-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0 0 var(--space-xl);
  padding: 0;
}

.tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary-ink);
  background: var(--color-primary-tint);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-sm);
}

/* ===== BUILD-TIME TABLE OF CONTENTS =====
   Generated wherever a post's markdown contained the `<!-- toc -->`
   marker; replaces it 1:1 with this nav, linking to the heading ids the
   build assigns to every h2/h3/h4 in the post. */
.toc {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-block: var(--space-xl);
  background: var(--color-primary-tint);
}

.toc__label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* text-secondary, not -muted: on the .toc tint background, -muted measures
     APCA Lc ~67 (fails the Lc 75 floor for small text); -secondary clears Lc 76. */
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-sm);
}

.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.toc__item a {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.toc__item a:hover,
.toc__item a:focus-visible {
  color: var(--color-primary-ink);
  border-bottom-color: var(--color-primary-ink);
}

.toc__item--3 {
  padding-inline-start: var(--space-lg);
}

.toc__item--4 {
  padding-inline-start: var(--space-2xl);
}

/* ===== INDEX PAGE ===== */
.blog-index__header {
  margin-block-end: var(--space-2xl);
}

.blog-index__title {
  font-family: var(--font-display);
  font-size: var(--type-display-md);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.post-list {
  list-style: none;
  /* `auto` inline margins (not 0) so the list stays centered like the header and
     pagination — a plain `0 0 ...` shorthand here would clobber the shared
     `margin-inline: auto` above and left-align the posts. */
  margin: 0 auto var(--space-2xl);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.post-summary {
  padding-block-end: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.post-list__item:last-child .post-summary {
  border-bottom: none;
  padding-block-end: 0;
}

/* Cards with a restored WordPress featured image lay out thumbnail-left,
   text-right; cards without one (no placeholder — see the plan) keep the
   plain stacked layout above with .post-summary__body spanning full width.
   Mobile-first: thumb sits above the body until there's enough width for a
   comfortable side-by-side row (see the 30rem breakpoint below). */
.post-summary--has-thumb {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.post-summary__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.post-summary__body {
  min-width: 0; /* allow long titles/excerpts to wrap instead of overflowing the flex item */
}

.post-summary__title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  letter-spacing: -0.01em;
  margin-block-end: var(--space-xs);
}

.post-summary__title a {
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: none;
}

.post-summary__title a:hover,
.post-summary__title a:focus-visible {
  color: var(--color-primary-ink);
}

.post-summary__meta {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  /* text-secondary, not -muted: see .post__meta comment above (Lc ~74 vs 83). */
  color: var(--color-text-secondary);
  margin-block-end: var(--space-sm);
}

.post-summary p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-block-end: var(--space-sm);
}

/* ===== PAGINATION ===== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block-start: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  /* Vertical padding brings the tap target close to the ~44px guideline
     without changing the visual text size. */
  padding-block: var(--space-sm);
  margin-block: calc(var(--space-sm) * -1);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-primary-ink);
  text-decoration: none;
}

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

.pagination__link--disabled {
  color: var(--color-text-muted);
  pointer-events: none;
}

.pagination__status {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  /* text-secondary, not -muted: see .post__meta comment above (Lc ~74 vs 83). */
  color: var(--color-text-secondary);
  margin: 0;
}

/* ===== RESPONSIVE — small-mobile-landscape and up (min-width 30rem / 480px) ===== */
@media (min-width: 30rem) {
  .post__title,
  .blog-index__title {
    font-size: var(--type-display-lg);
  }

  /* Thumbnail-left/text-right row: a fixed-width thumb column leaves the
     65ch-capped .post-list plenty of room for the title/excerpt/tags even
     at this narrower breakpoint, so the switch from stacked to side-by-side
     can happen earlier than the section's main 48rem tablet breakpoint. */
  .post-summary--has-thumb {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-lg);
  }

  .post-summary--has-thumb .post-summary__thumb {
    flex: 0 0 8rem;
    width: 8rem;
    aspect-ratio: 1 / 1;
  }
}

/* ===== RESPONSIVE — tablets and up (min-width 48rem / 768px) ===== */
@media (min-width: 48rem) {
  .blog-page {
    padding: var(--space-2xl) var(--space-lg) var(--space-5xl);
  }

  .post-summary--has-thumb .post-summary__thumb {
    flex-basis: 10rem;
    width: 10rem;
  }
}

/* ===== FOOTER ALIGNMENT =====
   Mirrors the writing section's approach: the shared footer (.site-footer,
   css/styles.css) pads horizontally with var(--gutter) and centers a 72rem
   .container inside it, but the blog section's prose runs in a narrower
   65ch column inset by .blog-page's own padding instead. Re-scope both the
   footer's horizontal padding and its inner container here so the
   signature's left edge lands on the same viewport-relative offset as
   .post/.post-list at every breakpoint. */
body.blog .site-footer {
  padding-inline: var(--space-md);
}

body.blog .site-footer .container {
  width: min(65ch, 100%);
  margin-inline: auto;
}

@media (min-width: 48rem) {
  body.blog .site-footer {
    padding-inline: var(--space-lg);
  }
}