/* Blog card 1.0.0 */
/* The post card used by the listing, by the related-posts section and by the
   get-posts blocks. Loaded on both listing and single contexts, since related
   posts render the same card at the end of an article. */

.lvd-blog-card                      {position:relative; display:flex; flex-direction:column; overflow:hidden;}
.lvd-blog-card.lvd-card             {border-radius:var(--lvd-rounded);}

/* Image — the 3:2 ratio matches the img_medium crop, so nothing shifts while
   the image loads. Positioned, so the category badge can sit on top of it. */
.lvd-blog-card .lvd-image           {display:block; position:relative;}
.lvd-blog-card .lvd-image img       {display:block; width:100%; aspect-ratio:3 / 2; object-fit:cover;}

/* Category badge — the .lvd-badge primitive supplies the look (tokens, radius,
   shadow); only the placement belongs to this component.
   pointer-events:none matters: the badge sits above the stretched title link, so
   without it the top-left corner of every card would be a dead click zone. */
.lvd-blog-card .lvd-badge           {position:absolute; top:16px; left:16px; z-index:2; pointer-events:none;}

.lvd-blog-card.lvd-card .lvd-content    {padding:20px;}
.lvd-blog-card .lvd-content             {display:flex; flex-direction:column; padding:16px 0 0 0;}

.lvd-blog-card .lvd-title           {margin-bottom:8px; color:var(--lvd-cc-title);}
/* Hover fades, it does not recolour. Turning the headline blue read as "this is a
   link you have not visited" rather than "you are pointing at it", and it clashed
   with the card being one big click target anyway. Same treatment as the author
   name and the table of contents — one hover language across the blog. */
.lvd-blog-card .lvd-title a         {color:inherit; transition:opacity 0.3s ease;}
.lvd-blog-card .lvd-title a:hover   {color:inherit; opacity:0.7;}

/* Optional 2-line clamp (Customizer): even card heights. The full title is
   surfaced on hover through the anchor's native title tooltip, not a CSS
   expansion — expanding would grow the card and shift the grid row. */
.lvd-blog-card-title-clamp          {display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

.lvd-blog-card .lvd-excerpt         {font-size:var(--lvd-text-s1); margin-bottom:var(--lvd-mb-txt);}
.lvd-blog-card .lvd-excerpt:last-child  {margin-bottom:0;}

.lvd-blog-card-cta                  {align-self:flex-start; margin-top:auto;}

/* Author medallion, right under the image so every card's byline aligns on the
   same line regardless of title length. */

/* Whole card clickable without wrapping everything in one anchor: the title
   link stretches over the card, while the real links inside it (category link,
   author name) are raised above the overlay. Nested anchors would be invalid HTML.
   Only the ANCHORS get raised, never their containers: lifting a whole block —
   e.g. the byline, which spans the card's full width — would turn the photo and
   the empty space beside the name into dead click zones. */
.lvd-blog-card .lvd-title a::after      {content:""; position:absolute; inset:0; z-index:1;}
.lvd-blog-card .lvd-post-meta-category  {position:relative; z-index:2;}
.lvd-blog-card-byline .lvd-author-name a {position:relative; z-index:2;}


/* Bm */
@media (min-width:1px) and (max-width:767px)
{
.lvd-blog-card.lvd-card .lvd-content    {padding:16px;}
.lvd-blog-card .lvd-badge               {top:12px; left:12px;}
}