/**
 * AsiaWeb Custom Post Display
 * Main CSS
 */

/* =========================================================
   Wrapper
========================================================= */

.asiaweb-cpd {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.asiaweb-cpd *,
.asiaweb-cpd *::before,
.asiaweb-cpd *::after {
    box-sizing: border-box;
}


/* =========================================================
   Grid
========================================================= */

.asiaweb-cpd-grid {
    display: grid;

    grid-template-columns: repeat(
        var(--asiaweb-cpd-columns, 4),
        minmax(0, 1fr)
    );

    gap: 24px;

    width: 100%;
}


/* =========================================================
   Item
========================================================= */

.asiaweb-cpd-item {
    min-width: 0;
    width: 100%;
}


/* =========================================================
   Card
========================================================= */

.asiaweb-cpd-card {
    border:
        var(--asiaweb-cpd-card-border-width, 1px)
        var(--asiaweb-cpd-card-border-style, solid)
        var(--asiaweb-cpd-card-border-color, #e5e7eb);

    border-radius:
        var(--asiaweb-cpd-card-radius, 12px);

    background:
        var(--asiaweb-cpd-card-background, #ffffff);

    padding:
        var(--asiaweb-cpd-card-padding, 12px);

    box-shadow:
        var(--asiaweb-cpd-card-shadow, none);

    overflow: hidden;

    transition:
        border-color
        var(--asiaweb-cpd-card-transition, 0.25s),

        box-shadow
        var(--asiaweb-cpd-card-transition, 0.25s),

        transform
        var(--asiaweb-cpd-card-transition, 0.25s);
}


/* =========================================================
   Card Hover
========================================================= */

.asiaweb-cpd-card-hover:hover {
    border-color:
        var(--asiaweb-cpd-card-hover-border, #042f1f);

    transform: translateY(-2px);
}


/* =========================================================
   Image Frame
   16:9
========================================================= */

.asiaweb-cpd-image-frame {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 8px;
}


/* =========================================================
   Image Link
========================================================= */

.asiaweb-cpd-image-link {
    display: block;

    width: 100%;
    height: 100%;

    text-decoration: none;
}


/* =========================================================
   Image
========================================================= */

.asiaweb-cpd-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;

    max-width: 100%;

    transition:
        transform
        0.3s ease;
}


/* =========================================================
   Image Hover
========================================================= */

.asiaweb-cpd-card-hover:hover .asiaweb-cpd-image {
    transform: scale(1.02);
}


/* =========================================================
   Category Badge
========================================================= */

.asiaweb-cpd-category {
    display: table;

    margin: 12px auto 8px;

    padding: 5px 12px;

    background-color:
        var(
            --asiaweb-cpd-category-background,
            #042f1f
        );

    color:
        var(
            --asiaweb-cpd-category-text-color,
            #ffffff
        );

    border-radius: 999px;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 600;

    text-align: center;
}


/* =========================================================
   Category Link
========================================================= */

.asiaweb-cpd-category a {
    color:
        var(
            --asiaweb-cpd-category-text-color,
            #ffffff
        );

    text-decoration: none;
}


/* =========================================================
   Category Hover
========================================================= */

.asiaweb-cpd-category a:hover {
    color:
        var(
            --asiaweb-cpd-category-text-color,
            #ffffff
        );

    text-decoration: none;
}


/* =========================================================
   Category Title
========================================================= */

.asiaweb-cpd-category-title {
    margin-top: 0;
    margin-bottom: 24px;

    font-weight: 700;

    line-height: 1.3;
}


/* =========================================================
   Title
========================================================= */

.asiaweb-cpd-title {
    margin: 12px 0 0;

    line-height: 1.4;

    font-weight: 600;
}


/* =========================================================
   Title Link
========================================================= */

.asiaweb-cpd-title a {
    color: inherit;

    text-decoration: none;
}


/* =========================================================
   Title Hover
========================================================= */

.asiaweb-cpd-title a:hover {
    text-decoration: none;
}


/* =========================================================
   Date
========================================================= */

.asiaweb-cpd-date {
    margin-top: 8px;

    font-size: 13px;

    line-height: 1.5;

    opacity: 0.7;
}


/* =========================================================
   Excerpt
========================================================= */

.asiaweb-cpd-excerpt {
    margin-top: 10px;

    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   Meta
========================================================= */

.asiaweb-cpd-meta {
    margin-top: 10px;
}

.asiaweb-cpd-meta-item {
    margin-bottom: 5px;

    font-size: 14px;

    line-height: 1.5;
}


/* =========================================================
   Read More
========================================================= */

.asiaweb-cpd-read-more {
    margin-top: 15px;
}

.asiaweb-cpd-read-more a {
    display: inline-block;

    text-decoration: none;
}


/* =========================================================
   Group
========================================================= */

.asiaweb-cpd-group {
    width: 100%;

    margin-bottom: 40px;
}

.asiaweb-cpd-group-title {
    margin-top: 0;

    margin-bottom: 24px;

    line-height: 1.3;
}


/* =========================================================
   Pagination
========================================================= */

.asiaweb-cpd-pagination {
    margin-top: 30px;

    text-align: center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .asiaweb-cpd-grid {
        grid-template-columns: repeat(
            var(--asiaweb-cpd-tablet-columns, 2),
            minmax(0, 1fr)
        );

        gap: 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .asiaweb-cpd-grid {
        grid-template-columns: repeat(
            var(--asiaweb-cpd-mobile-columns, 1),
            minmax(0, 1fr)
        );

        gap: 16px;
    }

    .asiaweb-cpd-card {
        padding: 10px;
    }

    .asiaweb-cpd-title {
        font-size: 18px !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .asiaweb-cpd-grid {
        gap: 14px;
    }

    .asiaweb-cpd-category {
        font-size: 12px;

        padding: 4px 10px;
    }

}