/* ============================================================
   Post page — banner image
   Theme default: .preview-img { aspect-ratio: 40/21; width: 100%; height: 100% }
   Selector: img.preview-img inside article .post-meta (post layout only)
   ============================================================ */

article .post-meta .preview-img {
  max-width: 400px;
  max-height: 400px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent;
  aspect-ratio: unset !important;
  display: block;
  margin: 0 auto;
}

/* ============================================================
   All post list pages — card layout: image left, text right
   Used on: Home, Writeups, Categories, Tags, Archives
   HTML: #post-list > article.card-wrapper.card > a.post-preview
         > div.col-md-5 > img  (no .preview-img on cards)
         > div.col-md-7 > div.card-body
   ============================================================ */

#post-list .card .post-preview {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

/* Image container */
#post-list .card .col-md-5 {
  flex: 0 0 auto !important;
  width: 80px !important;
  max-width: 80px !important;
  height: 80px !important;
  padding: 0 !important;
  margin-right: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

/* Image itself */
#post-list .card .col-md-5 img {
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  border-radius: 8px !important;
}

/* Text container */
#post-list .card .col-md-7 {
  flex: 1 1 auto !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  min-width: 0 !important;
}

#post-list .card .card-body {
  height: auto !important;
  padding: 0.75rem !important;
}

/* Archives — year separator */
#post-list .archive-year {
  display: block;
  font-size: 1.4rem;
  font-weight: 300;
  opacity: 0.65;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.03rem;
}

/* Mobile */
@media (max-width: 768px) {
  #post-list .card .col-md-5 {
    width: 60px !important;
    max-width: 60px !important;
    height: 60px !important;
  }

  #post-list .card .col-md-5 img {
    width: 60px !important;
    height: 60px !important;
  }
}