/* ============================================================
   Section 24 — Blog (index + post)

   THE ONE NEW SECTION ADDED IN THIS CLIENT BUILD. Template Three ships no blog
   pattern, and rebuilding the clinic's 187 posts was explicitly requested, so
   this file exists. It follows the master's conventions exactly: every selector
   is scoped under a sec-24-blog* root class, it uses only existing design
   tokens, and it adds no JS.

   Deliberately NOT reinvented here:
     - the post hero reuses .sec-00-inthero (shared interior hero + wave)
     - the post body reuses .sec-23-prose (the master's designated pattern for
       plain long-form pages, which is exactly what a blog post is)
     - the booking CTA reuses sections/12-booking.html
   So this file only covers what genuinely did not exist: the post date line,
   the index card grid, and pagination.

   The index grid mirrors the proven track sizing from 50-wwt-grid.css
   (auto-fit + minmax) rather than inventing a second grid idiom.
   ============================================================ */

/* --- Post: date line under the H1, inside the shared interior hero --- */
.sec-24-blog__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.sec-24-blog__meta-dot {
  color: var(--text-on-ink-dim);
}

.sec-24-blog__meta-plain {
  color: var(--text-on-ink-dim);
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 500;
}

/* --- Post: footer nav back to the index --- */
.sec-24-blog__backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-bone);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent-strong);
  text-decoration: none;
}
.sec-24-blog__backlink:hover { text-decoration: underline; }

/* --- Index: card grid --- */
.sec-24-blog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(1.1rem, 1.8vw, 1.5rem);
}

.sec-24-blog__card {
  display: flex;
  flex-direction: column;
  background: var(--bone);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.4rem, 2vw, 1.9rem);
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: border-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out),
    transform 300ms var(--ease-spring);
}

.sec-24-blog__card:hover,
.sec-24-blog__card:focus-visible {
  border-color: var(--accent-strong);
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.sec-24-blog__card-date {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 0.55rem;
}

.sec-24-blog__card-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--text-on-bone);
  margin-bottom: 0.6rem;
  /* Titles run long on these posts; cap at four lines so a row of cards keeps
     a consistent height instead of one card stretching the whole track. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sec-24-blog__card-excerpt {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--text-on-bone-dim);
  margin-bottom: 1.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sec-24-blog__card-more {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent-strong);
}

/* --- Index: pagination --- */
.sec-24-blog__pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
}

.sec-24-blog__pager-link,
.sec-24-blog__pager-current,
.sec-24-blog__pager-gap {
  min-width: 2.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.sec-24-blog__pager-link {
  color: var(--text-on-bone);
  border: 1.5px solid var(--line-bone);
  transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.sec-24-blog__pager-link:hover,
.sec-24-blog__pager-link:focus-visible {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}

.sec-24-blog__pager-current {
  background: var(--accent-strong);
  color: var(--accent-on);
  border: 1.5px solid var(--accent-strong);
}

.sec-24-blog__pager-gap {
  color: var(--text-on-bone-dim);
  border: 1.5px solid transparent;
  min-width: 1.4rem;
  padding-inline: 0.2rem;
}

.sec-24-blog__pager-step {
  padding-inline: 1.1rem;
}

@media (max-width: 560px) {
  /* Numbered links get noisy on a phone; the prev/next steps carry navigation
     and the current-page pill keeps the reader oriented. */
  .sec-24-blog__pager-link:not(.sec-24-blog__pager-step),
  .sec-24-blog__pager-gap { display: none; }
}

html.reduced-motion .sec-24-blog__card { transition: none; }
html.reduced-motion .sec-24-blog__card:hover { transform: none; }