/* ==========================================================================
   CSS CHO COMPONENT IMAGE CARD GRID ITEM (ĐÃ GỘP & TỐI ƯU)
   ========================================================================== */

/* 1. Ép block hiển thị đúng */
.wp-block-image-card-grid-item { 
    width: 100%; 
    display: block; 
}

.image-card-grid-item {
    position: relative;
    width: 100%;
    padding: 80px 0 90px 0;
    box-sizing: border-box;
    overflow: hidden;
    background: linear-gradient(to bottom, var(--color-surface, #F7F2EE) 42%, var(--color-bg, #D2E3DF) 42%);
}

.image-card-grid-item__container {
    position: relative;
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.image-card-grid-item__title {
    font-family: var(--font-heading, 'Cormorant SC', serif);
    font-size: var(--fs-h2, 55px);
    font-weight: 500;
    color: #2D2D2D !important;
    margin: 0 0 55px 0;
}

/* 2. Grid 3 cột */
.image-card-grid-item__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
    width: 100% !important;
    margin-bottom: 50px;
}

.image-card-grid-item__card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-card-grid-item__avatar-frame {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 24px;
    background: #fff;
}
.image-card-grid-item__avatar { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* 3. Cụm nút bấm và Link */
.image-card-grid-item__card-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 15px !important;
    width: 100% !important;
}

/* Fix nút Đặt lịch (dùng lại class btn của theme) */
.image-card-grid-item__card-actions .btn {
    margin-bottom: 5px !important;
}

/* Nút Learn more (Link mũi tên - Không viền) */
.btn-link-custom {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important; 
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--color-primary-second, #456967) !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    transition: 0.3s;
}
.btn-link-custom::after { 
    content: ""; 
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='19' x2='19' y2='5'%3E%3C/line%3E%3Cpolyline points='9 5 19 5 19 15'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='19' x2='19' y2='5'%3E%3C/line%3E%3Cpolyline points='9 5 19 5 19 15'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.btn-link-custom:hover { 
    color: #2D2D2D !important; 
}
.btn-link-custom:hover::after { 
    transform: translate(2px, -2px); 
}

/* 4. Nút bấm chính ở dưới cùng của Section */
.image-card-grid-item__action {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

/* CSS cho nút Outline (Viền xanh, nền trong suốt) */
.btn-outline {
    background-color: transparent !important;
    color: var(--color-primary-second, #456967) !important;
    border: 1.5px solid var(--color-primary-second, #456967) !important;
    padding: 10px 30px !important;
    border-radius: 6px !important;
    font-family: var(--ff-body, 'Nunito Sans', sans-serif);
    font-size: 16px !important;
    font-weight: 500 !important;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
    display: inline-block;
    transition: all 0.3s ease !important;
}

.btn-outline:hover {
    background-color: var(--color-primary-second, #456967) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE
   ========================================================================== */
@media (max-width: 992px) {
    .image-card-grid-item {
        background: linear-gradient(to right, var(--color-bg, #D2E3DF) 28%, var(--color-surface, #F7F2EE) 28%);
        padding: 50px 0;
    }
    
    /* Chuyển grid 3 cột thành 1 cột */
    .image-card-grid-item__grid { 
        grid-template-columns: 1fr !important; 
    }
    
    /* Căn chỉnh lại bố cục Card trên Mobile */
    .image-card-grid-item__card { 
        flex-direction: row; 
        align-items: center; 
        gap: 20px; 
        text-align: left; 
    }
    .image-card-grid-item__avatar-frame { 
        width: 125px; 
        height: 125px; 
        flex-shrink: 0; 
    }
    .image-card-grid-item__info { 
        align-items: flex-start; 
        text-align: left; 
    }
    
    /* Canh lề trái cho cụm nút trên Mobile */
    .image-card-grid-item__card-actions { 
        align-items: flex-start !important; 
    }
}