/* Fox renders the homepage "latest posts" section with Masonry.js, which
   stacks each card directly under the shortest card above it. Excerpts and
   titles of different lengths therefore stagger every row. Replace it with
   an even row grid: same-ratio images, 2-line titles, 5-line excerpts.
   !important is required to beat the inline positions Masonry.js writes. */
.section-layout-masonry .fox-masonry.blog-masonry {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    height: auto !important;
}
.section-layout-masonry .blog-masonry > .grid-sizer {
    display: none;
}
.section-layout-masonry .blog-masonry > .fox-masonry-item {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    float: none;
    transform: none !important;
    display: flex;
}
.section-layout-masonry .post-masonry-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Same thumbnail box for every post, regardless of the uploaded ratio
   (also disables Fox's "creative" half-width float for portrait images). */
.section-layout-masonry .blog-masonry .masonry-thumbnail {
    float: none;
    width: 100%;
    margin: 0 !important;
}
.section-layout-masonry .blog-masonry .masonry-thumbnail + .masonry-body {
    margin-top: 1em;
}
.section-layout-masonry .blog-masonry .masonry-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Text: titles max 2 lines (no reserved space), excerpts exactly 5 lines;
   "ادامه" is pinned to the card bottom so links line up across a row. */
.section-layout-masonry .post-masonry-body,
.section-layout-masonry .post-masonry-body .post-body-inner,
.section-layout-masonry .post-masonry-body .masonry-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.section-layout-masonry .blog-masonry .post-item-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.section-layout-masonry .blog-masonry .masonry-content p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
    min-height: 5lh;
    margin-bottom: 0.5em;
}
.section-layout-masonry .blog-masonry .masonry-content .readmore {
    margin-top: auto;
    align-self: flex-start;
}