/* XBlog home post cards v2: alternating slanted covers + hover zoom + complete footer */
@media (min-width: 768px) {
  #post-list-container.post-list-mode {
    --post-card-cover-width:31%;
    gap:1rem!important;
    background:transparent!important;
    padding:0!important;
  }

  #post-list-container.post-list-mode .post-card-item { min-width:0; }

  #post-list-container.post-list-mode .post-card {
    position:relative!important;
    height:208px!important;
    min-height:208px!important;
    overflow:hidden!important;
    border-radius:var(--radius-large)!important;
  }

  #post-list-container.post-list-mode .has-cover .post-card-cover {
    position:absolute!important;
    top:0!important;
    bottom:0!important;
    width:var(--post-card-cover-width)!important;
    max-height:none!important;
    margin:0!important;
    border-radius:0!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
    z-index:2!important;
    transition:filter .45s ease!important;
  }

  #post-list-container.post-list-mode .has-cover .post-card-cover img {
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    transform:scale(1.01);
    transition:transform .55s cubic-bezier(.2,.7,.2,1), filter .45s ease!important;
    will-change:transform;
  }

  #post-list-container.post-list-mode .has-cover .post-card-cover:hover img {
    transform:scale(1.085);
    filter:saturate(1.04) brightness(1.03);
  }

  /* 1/3/5...: image on left, slash leans toward content. */
  #post-list-container.post-list-mode > .contents:nth-child(odd) .post-card-item .has-cover .post-card-cover {
    left:0!important;
    right:auto!important;
    clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%);
  }
  #post-list-container.post-list-mode > .contents:nth-child(odd) .post-card-item .has-cover .post-card-content {
    width:calc(100% - var(--post-card-cover-width))!important;
    height:100%!important;
    margin-left:var(--post-card-cover-width)!important;
    margin-right:0!important;
    padding:1.15rem 1.35rem 2.75rem 1.55rem!important;
  }

  /* 2/4/6...: mirrored slash on the right. */
  #post-list-container.post-list-mode > .contents:nth-child(even) .post-card-item .has-cover .post-card-cover {
    right:0!important;
    left:auto!important;
    clip-path:polygon(22px 0, 100% 0, 100% 100%, 0 100%);
  }
  #post-list-container.post-list-mode > .contents:nth-child(even) .post-card-item .has-cover .post-card-content {
    width:calc(100% - var(--post-card-cover-width))!important;
    height:100%!important;
    margin-left:0!important;
    margin-right:var(--post-card-cover-width)!important;
    padding:1.15rem 1.55rem 2.75rem 1.35rem!important;
  }

  #post-list-container.post-list-mode .no-cover {
    min-height:176px!important;
    height:auto!important;
  }
  #post-list-container.post-list-mode .no-cover .post-card-content {
    width:100%!important;
    min-height:176px!important;
    margin:0!important;
    padding:1.15rem 4rem 2.75rem 1.55rem!important;
  }

  #post-list-container.post-list-mode .post-card-title {
    display:-webkit-box!important;
    margin-bottom:.6rem!important;
    overflow:hidden!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    line-clamp:2!important;
    font-size:1.2rem!important;
    line-height:1.42!important;
    font-weight:650!important;
    letter-spacing:-.01em!important;
  }
  #post-list-container.post-list-mode .post-card-title::before {
    top:.25rem!important;
    height:1.15rem!important;
    left:-1rem!important;
  }

  /* Reference layout: category sits at the bottom-right; tags do not consume a separate row. */
  #post-list-container.post-list-mode .post-meta {
    position:absolute!important;
    right:1.25rem!important;
    bottom:1rem!important;
    z-index:4!important;
    display:flex!important;
    width:auto!important;
    max-width:42%!important;
    margin:0!important;
    gap:.35rem!important;
    overflow:hidden!important;
    flex-wrap:nowrap!important;
    white-space:nowrap!important;
    font-size:.76rem!important;
    line-height:1!important;
  }
  #post-list-container.post-list-mode .post-meta > div[hidden] { display:none!important; }
  #post-list-container.post-list-mode .post-meta > .hidden { display:none!important; }
  #post-list-container.post-list-mode .post-meta > .flex.items-center:not(.hidden) { display:flex!important; }
  #post-list-container.post-list-mode .post-meta .meta-icon { display:none!important; }
  #post-list-container.post-list-mode .post-meta a { font-size:.76rem!important; }

  #post-list-container.post-list-mode .post-card-excerpt {
    flex-grow:0!important;
    margin-bottom:.45rem!important;
    padding-right:.2rem!important;
    font-size:.89rem!important;
    line-height:1.62!important;
    -webkit-line-clamp:2!important;
    line-clamp:2!important;
  }

  /* Footer is pinned so it can never be pushed below the card. */
  #post-list-container.post-list-mode .post-card-stats {
    position:absolute!important;
    left:1.45rem!important;
    bottom:.85rem!important;
    z-index:4!important;
    display:flex!important;
    align-items:center!important;
    gap:.48rem!important;
    max-width:56%!important;
    margin:0!important;
    overflow:hidden!important;
    font-size:.74rem!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  #post-list-container.post-list-mode .post-card-stats .h-6.w-6 {
    width:1.15rem!important;
    height:1.15rem!important;
    border-radius:.28rem!important;
  }

  #post-list-container.post-list-mode .post-card-enter-btn {
    top:1rem!important;
    right:1rem!important;
    bottom:1rem!important;
    width:2.75rem!important;
  }
}

@media (max-width: 767px) {
  #post-list-container.post-list-mode .post-card { height:auto!important; min-height:0!important; }
  #post-list-container.post-list-mode .post-card-title { font-size:1.12rem!important; line-height:1.45rem!important; }
  #post-list-container.post-list-mode .post-card-content { height:auto!important; padding:1rem 1.1rem 1.1rem!important; }
  #post-list-container.post-list-mode .post-card-cover {
    margin:.75rem .75rem 0!important;
    width:calc(100% - 1.5rem)!important;
    border-radius:.7rem!important;
    clip-path:none!important;
  }
  #post-list-container.post-list-mode .post-card-cover img {
    transform:none!important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #post-list-container.post-list-mode .post-card-cover img { transition:none!important; }
  #post-list-container.post-list-mode .post-card-cover:hover img { transform:none!important; }
}