/*
 * ============================================================
 * QUAD BANNERS — 4-Card Responsive Grid
 * ============================================================
 */

.ces-quad-banners-section {
    width: 100%;
    padding: 24px 0 32px;
    background: var(--c-surface, #f7f8fa);
}

.ces-quad-banners-container {
    max-width: var(--container-max, 1280px);
    margin: 0 auto;
    padding: 0 var(--container-pad, 32px);
}

.ces-quad-banners-grid {
    display: grid;
    /* Default CSS Grid from Elementor args, overridden by inline style if needed, 
       but we provide the strict responsive defaults here */
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ces-quad-gap, 16px);
}

/* ── Item Wrapper ────────────────────────────────────────── */
.ces-quad-banner-item {
    display: block;
    position: relative;
    width: 100%;
    /* No fixed aspect ratio — box shapes itself exactly to the image */
    border-radius: var(--ces-quad-radius, 14px);
    overflow: hidden;
    background: transparent; 
    text-decoration: none;
    transform: translateZ(0); /* Hardware acceleration */
    will-change: transform, box-shadow;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Image */
.ces-quad-banner-img {
    width: 100%;
    height: auto; /* Natural height, no spaces, no cutting */
    display: block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

/* ── Hover Animations ────────────────────────────────────── */
.ces-quad-banners-grid--hover-elevate .ces-quad-banner-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    z-index: 2;
}

.ces-quad-banners-grid--hover-brightness .ces-quad-banner-item:hover .ces-quad-banner-img {
    filter: brightness(1.05);
}

/* ── Responsive Breakpoints ──────────────────────────────── */
@media (max-width: 1023px) {
    .ces-quad-banners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ces-quad-gap-tablet, 14px);
    }
}

@media (max-width: 767px) {
    :root { --container-pad: 16px; }
    
    .ces-quad-banners-section {
        padding: 16px 0 24px;
    }
    .ces-quad-banners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ces-quad-gap-mobile, 10px);
    }
    .ces-quad-banner-item {
        border-radius: var(--ces-quad-radius-mobile, 10px);
    }
    
    /* Disable hover interactions on touch devices */
    .ces-quad-banners-grid--hover-elevate .ces-quad-banner-item:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .ces-quad-banner-item,
    .ces-quad-banner-img {
        transition: none !important;
        transform: none !important;
    }
}