feat(library): restore live-site intro copy above post listings

- add the two live intro paragraphs between the hero and article grid
- keep the library listing cards in the live two-column layout
- restore the 4:3 cropped article thumbnails and card spacing via library-scoped selectors
- avoid leaking the card-grid overrides into unrelated pages
- add likes/views from api to library article cards

www/src/components/BlogCard.astro

@@ -1,4 +1,5 @@
 ---
+import LikeViewCounter from './LikeViewCounter.astro';
 const { post, prefix = '' } = Astro.props;
 const href = `${prefix}/library/${post.data.slug}`.replace('//', '/');
 const readMore = { en: 'Read More', es: 'Leer Más', ar: 'اقرأ المزيد' }[post.data.lang] || 'Read More';
@@ -9,12 +10,31 @@ const readMore = { en: 'Read More', es: 'Leer Más', ar: 'اقرأ المزيد'
     <div class="blog-card-meta"><img src="/assets/images/rula-diab-avatar.jpg" alt="" /><p>Rula Diab, Clinical Director, M.Ed, BCBA, LBA<br /><time datetime={post.data.date.toISOString()}>{post.data.date.toLocaleDateString(post.data.lang, { day: 'numeric', month: 'long', year: 'numeric' })}</time></p></div>
     <h3><a href={href}>{post.data.title}</a></h3>
     <p>{post.data.description}</p>
-    <a class="text-link" href={href}>{readMore}</a>
+    <div class="blog-card-footer" style="align-items:center;display:flex;justify-content:space-between;gap:var(--space-lg);margin-top:auto;">
+      <a class="text-link" href={href}>{readMore}</a>
+      <LikeViewCounter slug={post.data.slug} />
+    </div>
   </div>
 </article>
 
 <style>
   .blog-card-meta { align-items: center; display: flex; font-size: .78rem; gap: .75rem; }
   .blog-card-meta img { aspect-ratio: 1; border-radius: 50%; height: 42px; width: 42px; }
-  .blog-card h3 { font-size: 1.35rem; }
+  .blog-card { background: white; border: 0; border-radius: 4px; box-shadow: rgba(54, 48, 48, 0.28) 0 0 12px 0; display: flex; margin-bottom: 40px; overflow: hidden; }
+  .blog-card > a { flex: 0 0 232px; display: block; margin: .75rem; }
+  .blog-card > a img { aspect-ratio: auto; display: block; height: 100%; object-fit: cover; width: 100%; }
+  .blog-card .card-body { display: flex; flex: 1; flex-direction: column; gap: 0; padding: 20px; }
+  .blog-card .card-body h3 { font-family: var(--font-body); }
+  .blog-card-footer { align-items: center; display: flex; justify-content: space-between; gap: var(--space-lg); margin-top: auto; }
+  :global(.blog-card .like-view-counter) { border-top: 0; justify-content: space-between; margin-block: 0; padding-top: 0; width: auto; }
+  .blog-card h3 { font-size: 1.35rem; margin-bottom: 1rem; }
+  .blog-card p { margin-bottom: 1rem; }
+  .blog-card .text-link { margin: 0; }
+
+  @media (max-width: 760px) {
+    .blog-card { flex-direction: column; }
+    .blog-card > a { flex-basis: auto; }
+    .blog-card > a img { height: auto; aspect-ratio: 4 / 3; }
+    .blog-card-footer { align-items: flex-start; flex-direction: column; }
+  }
 </style>

www/src/components/LikeViewCounter.astro

@@ -1,11 +1,16 @@
 ---
 const { slug } = Astro.props;
 ---
-<div class="like-view-counter likes-views" data-counter>
-  <button class="like-button" type="button" data-like data-slug={slug} aria-label="Like this article" aria-pressed="false">
-    <span aria-hidden="true">♡</span> <span class="like-count" data-likes>—</span>
-  </button>
-  <span aria-label="Article views">Views: <span class="view-count" data-views>—</span></span>
+<div class="like-view-counter" data-counter>
+  <span aria-label="Article views"><span class="view-count" data-views>0</span> views</span>
+  <span class="like-group">
+    <span class="like-count" data-likes>—</span>
+    <button class="like-button" type="button" data-like data-slug={slug} aria-label="Like this article" aria-pressed="false">
+      <svg aria-hidden="true" viewBox="0 0 12 10" width="20" height="20" focusable="false" class="like-icon">
+        <path d="m1 4.4c-1-4 2.5-5 4.5-2.5l.5 .6l.5-.6c2-2.5 6-1.5 4.5 2.5q-1 3-5 5q-4-2-5-5z"></path>
+      </svg>
+    </button>
+  </span>
 </div>
 <script>
   const apiBase = import.meta.env.PUBLIC_AIA_API_BASE || 'https://api.azinstitute4autism.com';
@@ -44,6 +49,14 @@ const { slug } = Astro.props;
     const views = counter.querySelector<HTMLElement>('[data-views]');
     if (!button || !slug) return;
 
+    const isLocalhost = ['localhost', '127.0.0.1', '::1'].includes(window.location.hostname);
+    if (isLocalhost) {
+      counter.dataset.unavailable = 'true';
+      if (likes) likes.textContent = '0';
+      if (views) views.textContent = '0';
+      return;
+    }
+
     const cookieName = `liked_${slug}`;
     const renderLiked = (liked: boolean) => {
       button.classList.toggle('liked', liked);
@@ -66,7 +79,7 @@ const { slug } = Astro.props;
     } catch {
       counter.dataset.unavailable = 'true';
       if (likes) likes.textContent = '0';
-      if (views) views.textContent = '—';
+      if (views) views.textContent = '0';
     }
 
     button.addEventListener('click', async () => {
@@ -98,8 +111,12 @@ const { slug } = Astro.props;
 </script>
 
 <style>
-  .like-view-counter { align-items: center; border-top: 1px solid var(--color-border); display: flex; gap: var(--space-lg); margin-block: var(--space-xl); padding-top: var(--space-md); }
-  .like-view-counter button { background: white; border: 1px solid var(--color-border); border-radius: 999px; padding: .6rem 1rem; }
-  .like-view-counter button.liked { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: white; }
+  .like-view-counter { align-items: center; border-top: 1px solid var(--color-border); display: flex; gap: var(--space-lg); font-size: .75rem; margin-block: var(--space-xl); padding-top: var(--space-md); }
+  .like-view-counter { font-size: .8rem; }
+  .like-group { align-items: center; display: inline-flex; gap: .35rem; }
+  .like-view-counter button { align-items: center; background: white; border: none; color: inherit; display: inline-flex; gap: 0; padding: 0; }
+  .like-view-counter .like-count { color: var(--color-text); min-width: 1ch; }
+  .like-view-counter .like-icon { fill: none; flex: 0 0 auto; stroke: #d92d20; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
+  .like-view-counter button.liked .like-icon { fill: #d92d20; stroke: #d92d20; }
   .like-view-counter button:disabled { cursor: wait; opacity: .65; }
 </style>