/* =============================================================
   Vivasoft Post Grid Widget — post-grid.css
   CSS prefix: .vpg-
   ============================================================= */

/* ---- Wrapper ---- */
.vpg-wrapper {
    position: relative;
    width: 100%;
}

/* ---- Grid ---- */
.vpg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* ---- Card ---- */
.vpg-card {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

.vpg-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
    transform: translateY(-3px);
}

.vpg-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

/* ---- Card Image ---- */
.vpg-card-image {
    position: relative;
    width: 100%;
    padding-bottom: 58%;
    overflow: hidden;
    background: #f0f0f0;
    flex-shrink: 0;
}

/* Overlay layer — controlled by Elementor "Overlay" control */
.vpg-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.vpg-card-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.vpg-card:hover .vpg-card-image img {
    transform: scale(1.04);
}

/* ---- Meta bar (date + category) ---- */
.vpg-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 0;
    flex-wrap: wrap;
}

.vpg-card-cat,
.vpg-card-date {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
}

.vpg-card-cat {
    color: #2563eb;
}

.vpg-card-date {
    color: #aaa;
}

.vpg-meta-sep {
    color: #ddd;
    font-size: 11px;
}

/* ---- Card Content ---- */
.vpg-card-content {
    padding: 14px 18px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.vpg-card-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #111;
    margin: 0 0 10px;
}

.vpg-card-excerpt {
    font-size: 14px;
    line-height: 1.65;
    color: #666;
    margin: 0;
    flex: 1;
}

/* ---- Footer tags ---- */
.vpg-card-footer {
    padding: 10px 18px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-top: 1px solid #f0f0f0;
    margin-top: auto;
}

.vpg-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #444;
    background: #f3f4f6;
    border-radius: 4px;
    padding: 3px 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- No results ---- */
.vpg-no-results {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 15px;
}

/* ---- Loading state ---- */
.vpg-wrapper.is-loading .vpg-grid {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .vpg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .vpg-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   Post Grid Widget — Client Info Grid
   Scoped to .elementor-widget-vcsg_post_grid_widget to avoid
   conflicts with the main Case Study Grid widget.
   ============================================================= */

.elementor-widget-vcsg_post_grid_widget .vcsg-card-info-grid {
    display: flex;
    gap: 30px;
    padding: 12px 20px;
    background-color: #f8f8f8;
    border-radius: 0 0 12px 12px;
    box-sizing: border-box;
}

.elementor-widget-vcsg_post_grid_widget .vcsg-info-item {
    display: flex;
    flex-direction: column;
    /* flex: 1; */
    min-width: 0;
}

.elementor-widget-vcsg_post_grid_widget .vcsg-info-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888888;
    margin-bottom: 2px;
}

.elementor-widget-vcsg_post_grid_widget .vcsg-info-value {
    font-size: 13px;
    font-weight: 500;
    color: #222222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =============================================================
   Post Grid Widget — Mobile Slider
   ============================================================= */

/*
 * When Swiper has NOT yet initialised (desktop / before JS runs),
 * the .swiper-wrapper class would otherwise apply display:flex from
 * swiper-bundle.min.css. Override it so the CSS grid layout is used.
 */
/*
 * Before Swiper initialises: render as grid so the cards look normal
 * without JS (SSR / slow connections).
 */
.vcsg-post-grid-swiper:not(.swiper-initialized) .swiper-wrapper {
    display: grid !important;
    flex-wrap: unset !important;
    transform: none !important;
}

/*
 * After Swiper initialises: override any grid CSS (from .vcsg-grid class
 * and Elementor's columns selector) so Swiper's flex + transform layout
 * is fully in control. Without this, grid-template-columns and gap fight
 * Swiper's translate, causing slides to drift progressively out of view.
 */
.vcsg-post-grid-swiper.swiper-initialized .swiper-wrapper {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    /* Swiper handles spacing via spaceBetween / margin-right */
}

/* Container needs overflow:hidden for peek effect */
.vcsg-post-grid-swiper {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* padding-bottom is added only when Swiper is active (see below) */
    padding-bottom: 0;
}

/* Reserve bottom space for nav/pagination only when slider is running */
.vcsg-post-grid-swiper.swiper-initialized {
    padding-bottom: 52px;
}

/* Each card as a Swiper slide — full height so cards align */
.vcsg-post-grid-swiper .swiper-slide.vcsg-card {
    height: auto;
}

/* Hide nav + pagination until Swiper is active */
.vcsg-post-grid-swiper .swiper-button-prev,
.vcsg-post-grid-swiper .swiper-button-next,
.vcsg-post-grid-swiper .swiper-pagination {
    display: none;
}

.vcsg-post-grid-swiper.swiper-initialized .swiper-button-prev,
.vcsg-post-grid-swiper.swiper-initialized .swiper-button-next,
.vcsg-post-grid-swiper.swiper-initialized .swiper-pagination {
    display: block;
}

/* Navigation arrows — bottom-right */
.vcsg-post-grid-swiper .swiper-button-prev,
.vcsg-post-grid-swiper .swiper-button-next {
    --swiper-navigation-size: 36px;
    position: absolute;
    top: auto;
    bottom: 0;
    width: 36px;
    height: 36px;
    margin-top: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    color: transparent;
    background: #ffffff00;
    border-radius: 0;
    box-shadow: none;
    color: #00000000;
    /* padding: 10px 4px 8px 5px; */
    background-color: #EEEEEE;
    border-radius: 50%;
    transform: translateY(-5px);
}

.vcsg-post-grid-swiper .swiper-button-next {
    right: 0;
}

.vcsg-post-grid-swiper .swiper-button-prev {
    right: 44px;
    /* next width (36) + gap (8) */
    left: auto;
}

.vcsg-post-grid-swiper .swiper-button-prev::after,
.vcsg-post-grid-swiper .swiper-button-next::after {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    font-size: 0;
    transform: translate(10px, 10px);
}

/* Next button — left-chevron circle SVG */
.vcsg-post-grid-swiper .swiper-button-next::after {
    background-image: url('data:image/svg+xml,<svg width="36" height="36" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.16667 0C11.1247 0 14.3333 3.20867 14.3333 7.16667C14.3333 11.1247 11.1247 14.3333 7.16667 14.3333C3.20867 14.3333 0 11.1247 0 7.16667C0 3.20867 3.20867 0 7.16667 0ZM6.85333 4.48C6.80756 4.43088 6.75236 4.39147 6.69102 4.36415C6.62969 4.33682 6.56348 4.32212 6.49635 4.32094C6.42921 4.31975 6.36253 4.3321 6.30027 4.35725C6.23801 4.3824 6.18145 4.41983 6.13397 4.46731C6.0865 4.51479 6.04907 4.57134 6.02392 4.6336C5.99877 4.69586 5.98642 4.76255 5.98761 4.82968C5.98879 4.89682 6.00348 4.96303 6.03081 5.02436C6.05814 5.08569 6.09754 5.14089 6.14667 5.18667L8.12667 7.16667L6.14667 9.14667C6.09754 9.19244 6.05814 9.24764 6.03081 9.30897C6.00348 9.37031 5.98879 9.43652 5.98761 9.50365C5.98642 9.57079 5.99877 9.63747 6.02392 9.69973C6.04907 9.76199 6.0865 9.81855 6.13397 9.86602C6.18145 9.9135 6.23801 9.95093 6.30027 9.97608C6.36253 10.0012 6.42921 10.0136 6.49635 10.0124C6.56348 10.0112 6.62969 9.99652 6.69102 9.96919C6.75236 9.94186 6.80756 9.90246 6.85333 9.85333L9.18667 7.52C9.2803 7.42625 9.33289 7.29917 9.33289 7.16667C9.33289 7.03417 9.2803 6.90708 9.18667 6.81333L6.85333 4.48Z" fill="%23503AF2"/></svg>');

}

/* Prev button — right-chevron circle SVG */
.vcsg-post-grid-swiper .swiper-button-prev::after {
    background-image: url('data:image/svg+xml,<svg width="36" height="36" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.16537 14.3334C3.20737 14.3334 -0.00130109 11.1247 -0.00130144 7.16671C-0.00130178 3.20871 3.20736 4.29342e-05 7.16536 4.25882e-05C11.1234 4.22422e-05 14.332 3.20871 14.332 7.16671C14.332 11.1247 11.1234 14.3334 7.16537 14.3334ZM7.4787 9.85338C7.52447 9.9025 7.57967 9.9419 7.64101 9.96923C7.70234 9.99656 7.76855 10.0113 7.83568 10.0124C7.90282 10.0136 7.9695 10.0013 8.03176 9.97612C8.09402 9.95098 8.15058 9.91355 8.19806 9.86607C8.24554 9.81859 8.28297 9.76203 8.30811 9.69977C8.33326 9.63751 8.34561 9.57083 8.34443 9.50369C8.34324 9.43656 8.32855 9.37035 8.30122 9.30902C8.27389 9.24768 8.23449 9.19248 8.18536 9.14671L6.20536 7.16671L8.18536 5.18671C8.23449 5.14093 8.27389 5.08573 8.30122 5.0244C8.32855 4.96307 8.34324 4.89686 8.34443 4.82972C8.34561 4.76259 8.33326 4.6959 8.30811 4.63364C8.28297 4.57138 8.24553 4.51483 8.19806 4.46735C8.15058 4.41987 8.09402 4.38244 8.03176 4.35729C7.9695 4.33215 7.90282 4.3198 7.83568 4.32098C7.76855 4.32217 7.70234 4.33686 7.64101 4.36419C7.57967 4.39152 7.52447 4.43092 7.4787 4.48004L5.14537 6.81338C5.05173 6.90713 4.99914 7.03421 4.99914 7.16671C4.99914 7.29921 5.05173 7.42629 5.14537 7.52004L7.4787 9.85338Z" fill="%23503AF2"/></svg>');
}

/* Pagination dots — bottom-left */
.vcsg-post-grid-swiper .swiper-pagination {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: auto;
    width: auto;
    text-align: left;
    background-color: #EEEEEE;
    padding: 1px 10px 4px;
    border-radius: 130px;
}

.vcsg-post-grid-swiper .swiper-pagination-bullet {
    background: #00000033;
    opacity: 1;
    width: 8px;
}

.vcsg-post-grid-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 20px;
    border-radius: 10px;
    background: #503AF2;
}