/* Post cards module: the card pictures of lv-learn (Latest Posts, Learning Center, Blog Articles) and lv-posts
   (Latest Posts on a condition page), and the placeholder for a post with no featured image. The blog's Latest Posts
   (lv-learn--media) keeps the blog listing module's own layout. */

/* ---------- lv-learn with pictures, as design/templates/blog-listing/NEW-COMPONENTS.md lays out lv-learn--media: a 3:2
   picture over the lead story, a 200px 3:2 thumbnail beside each row, the columns 1:1 so the rows have room ---------- */
.lv-learn:not(.lv-learn--media) .grid:has(.lv-media) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lv-learn:not(.lv-learn--media) .lead-story:has(> .lv-media) { border-top: 0; padding-top: 0; }
.lv-learn:not(.lv-learn--media) .lead-story > .lv-media { aspect-ratio: 3 / 2; margin-bottom: 12px; }
.lv-learn:not(.lv-learn--media) .rows li:has(> .lv-media) { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; align-items: start; }
.lv-learn:not(.lv-learn--media) .grid:has(.lv-media) .rows li:first-child { padding-top: 20px; }
.lv-learn:not(.lv-learn--media) .rows li > .lv-media { aspect-ratio: 3 / 2; margin-top: 12px; }
.lv-learn:not(.lv-learn--media) .grid:has(.lv-media) .rows p:not(.date) { margin: 0; }
.lv-learn:not(.lv-learn--media) .grid:has(.lv-media) h3 a { display: flex; align-items: center; min-height: 48px; padding: 0; margin: 0; }
@media (max-width: 900px) { .lv-learn:not(.lv-learn--media) .grid:has(.lv-media) { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .lv-learn:not(.lv-learn--media) .rows li:has(> .lv-media) { grid-template-columns: 1fr; }
  .lv-learn:not(.lv-learn--media) .rows li > .lv-media { order: -1; margin: 0 0 4px; }
}

/* ---------- lv-posts with pictures: the same 200px 3:2 thumbnail beside each item, above it on a phone ---------- */
.lv-posts li:has(> .lv-media) { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; align-items: start; }
.lv-posts li > .lv-media { aspect-ratio: 3 / 2; margin-top: 4px; }
.lv-posts li:has(> .lv-media) p { margin: 0; }
@media (max-width: 560px) {
  .lv-posts li:has(> .lv-media) { grid-template-columns: 1fr; gap: 12px; }
  .lv-posts li > .lv-media { order: -1; margin: 0; }
}

/* ---------- the placeholder: the brand mark centered on the placeholder tint, until POSTCARD-THUMB-01 has a picture ---------- */
.lv-media.lv-media--placeholder { display: grid; place-items: center; }
.lv-media.lv-media--placeholder > img { width: 28%; max-width: 96px; height: auto; object-fit: contain; }
@media (forced-colors: active) { .lv-media.lv-media--placeholder { border: 1px solid CanvasText; } }