/* 
 * CSS để đảm bảo hình ảnh trong cùng 1 hàng có cùng height
 * Size của hình ảnh được quyết định bởi CSS (grid_size), không phải database
 */

/* Đảm bảo articles trong cùng 1 hàng có cùng height */
.row.row-articles {
    align-items: stretch;
}

.row.row-articles > .column {
    display: flex;
    flex-direction: column;
}

.row.row-articles > .column .content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.row.row-articles > .column .content .media {
    flex-shrink: 0;
}

.row.row-articles > .column .content .media figure {
    margin: 0;
    padding: 0;
}

.row.row-articles > .column .content .media figure .img {
    position: relative;
    width: 100%;
    overflow: hidden;
    
    /* Set aspect ratio để đảm bảo hình ảnh có cùng height */
    /* Aspect ratio ~1.54:1 (dựa trên 524x341 hoặc 353x230) */
    padding-bottom: 65%;
}

.row.row-articles > .column .content .media figure .img picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.row.row-articles > .column .content .media figure .img picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Responsive: Mobile không cần aspect ratio cố định */
@media (max-width: 767px) {
    .row.row-articles > .column .content .media figure .img {
        padding-bottom: 0; /* Reset aspect ratio trên mobile */
    }
    
    .row.row-articles > .column .content .media figure .img picture {
        position: relative;
    }
    
    .row.row-articles > .column .content .media figure .img picture img {
        width: 100%;
        height: auto; /* Auto height trên mobile */
        object-fit: contain; /* Contain thay vì cover trên mobile */
    }
}