/**
 * Home page layout grids (EN / ZH / ZH-HK Kadence HTML blocks).
 * Kept external so WordPress does not strip <style> tags from post content.
 */

/* --- English --- */
.wh-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
}

@media (min-width: 600px) {
    .wh-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .wh-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.hk-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
}

@media (min-width: 900px) {
    .hk-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Simplified Chinese --- */
.wp-ourclients-grid-cn {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

@media (max-width: 1024px) {
    .wp-ourclients-grid-cn {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .wp-ourclients-grid-cn {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

.wp-whyhk-grid-cn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 1024px) {
    .wp-whyhk-grid-cn {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .wp-whyhk-grid-cn img {
        max-width: 90%;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .wp-whyhk-grid-cn {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.wp-service-steps-cn {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

@media (max-width: 1024px) {
    .wp-service-steps-cn {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .wp-service-steps-cn {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* --- Traditional Chinese (HK) --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 600px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.why-hk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 992px) {
    .why-hk-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}