/* Aer VRV Systems Widget Styles */

/* Main Section Styles */
.aer-vrv-systems-comfort-section {
    position: relative;
    padding-top: 2rem;
    padding-bottom: 2rem;
    overflow: hidden;
    /* Background image is applied here */
    background-image: url('/images/default-source/products-and-services/residential_hvac_bg.jpg'); /* Replace with your image path */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Optional: Creates a parallax effect */
}

/* Dark Overlay using a pseudo-element */
.aer-vrv-systems-comfort-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.8); /* slate-900/80 */
    z-index: 1;
}

/* Content Container */
.aer-vrv-systems-content-container {
    position: relative;
    z-index: 2; /* Ensures content is above the overlay */
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header */
.aer-vrv-systems-header {
    text-align: center;
    margin-bottom: 1rem;
}

.aer-vrv-systems-header h2 {
    font-weight: 700;
    font-size: 1.55rem;
    color: white;
    margin-bottom: 1rem;
}

.aer-vrv-systems-header p {
    font-size: 1rem;
    color: #cbd5e1; /* slate-300 */
    max-width: 42rem;
    margin: 0 auto;
}

/* Layout Options using Flexbox */
.aer-vrv-systems-grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2rem;
}

.aer-vrv-systems-solution-card {
    flex: 0 0 auto;
    box-sizing: border-box;
}

/* TwoTwo: 2 items per row, 50% each */
.aer-vrv-systems-grid-container.layout-TwoTwo .aer-vrv-systems-solution-card {
    width: calc((100% - 2rem) / 2);
}

/* ThreeThree: 3 items per row, 33.33% each */
.aer-vrv-systems-grid-container.layout-ThreeThree .aer-vrv-systems-solution-card {
    width: calc((100% - 4rem) / 3);
}

/* FourFour: 4 items per row, 25% each */
.aer-vrv-systems-grid-container.layout-FourFour .aer-vrv-systems-solution-card {
    width: calc((100% - 6rem) / 4);
}

/* TwoThree: 2/3 alternating - 2 at 50%, 3 at 33.33%, repeat every 5 */
.aer-vrv-systems-grid-container.layout-TwoThree .aer-vrv-systems-solution-card:nth-child(5n+1),
.aer-vrv-systems-grid-container.layout-TwoThree .aer-vrv-systems-solution-card:nth-child(5n+2) {
    width: calc((100% - 2rem) / 2);
}
.aer-vrv-systems-grid-container.layout-TwoThree .aer-vrv-systems-solution-card:nth-child(5n+3),
.aer-vrv-systems-grid-container.layout-TwoThree .aer-vrv-systems-solution-card:nth-child(5n+4),
.aer-vrv-systems-grid-container.layout-TwoThree .aer-vrv-systems-solution-card:nth-child(5n+5) {
    width: calc((100% - 4rem) / 3);
}

/* ThreeTwo: 3/2 alternating - 3 at 33.33%, 2 at 50%, repeat every 5 */
.aer-vrv-systems-grid-container.layout-ThreeTwo .aer-vrv-systems-solution-card:nth-child(5n+1),
.aer-vrv-systems-grid-container.layout-ThreeTwo .aer-vrv-systems-solution-card:nth-child(5n+2),
.aer-vrv-systems-grid-container.layout-ThreeTwo .aer-vrv-systems-solution-card:nth-child(5n+3) {
    width: calc((100% - 4rem) / 3);
}
.aer-vrv-systems-grid-container.layout-ThreeTwo .aer-vrv-systems-solution-card:nth-child(5n+4),
.aer-vrv-systems-grid-container.layout-ThreeTwo .aer-vrv-systems-solution-card:nth-child(5n+5) {
    width: calc((100% - 2rem) / 2);
}

/* FourThree: 4/3 alternating - 4 at 25%, 3 at 33.33%, repeat every 7 */
.aer-vrv-systems-grid-container.layout-FourThree .aer-vrv-systems-solution-card:nth-child(7n+1),
.aer-vrv-systems-grid-container.layout-FourThree .aer-vrv-systems-solution-card:nth-child(7n+2),
.aer-vrv-systems-grid-container.layout-FourThree .aer-vrv-systems-solution-card:nth-child(7n+3),
.aer-vrv-systems-grid-container.layout-FourThree .aer-vrv-systems-solution-card:nth-child(7n+4) {
    width: calc((100% - 6rem) / 4);
}
.aer-vrv-systems-grid-container.layout-FourThree .aer-vrv-systems-solution-card:nth-child(7n+5),
.aer-vrv-systems-grid-container.layout-FourThree .aer-vrv-systems-solution-card:nth-child(7n+6),
.aer-vrv-systems-grid-container.layout-FourThree .aer-vrv-systems-solution-card:nth-child(7n+7) {
    width: calc((100% - 4rem) / 3);
}

/* ThreeFour: 3/4 alternating - 3 at 33.33%, 4 at 25%, repeat every 7 */
.aer-vrv-systems-grid-container.layout-ThreeFour .aer-vrv-systems-solution-card:nth-child(7n+1),
.aer-vrv-systems-grid-container.layout-ThreeFour .aer-vrv-systems-solution-card:nth-child(7n+2),
.aer-vrv-systems-grid-container.layout-ThreeFour .aer-vrv-systems-solution-card:nth-child(7n+3) {
    width: calc((100% - 4rem) / 3);
}
.aer-vrv-systems-grid-container.layout-ThreeFour .aer-vrv-systems-solution-card:nth-child(7n+4),
.aer-vrv-systems-grid-container.layout-ThreeFour .aer-vrv-systems-solution-card:nth-child(7n+5),
.aer-vrv-systems-grid-container.layout-ThreeFour .aer-vrv-systems-solution-card:nth-child(7n+6),
.aer-vrv-systems-grid-container.layout-ThreeFour .aer-vrv-systems-solution-card:nth-child(7n+7) {
    width: calc((100% - 6rem) / 4);
}

.aer-vrv-systems-grid-container-secondary {
        display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* Solution Card Styles */
.aer-vrv-systems-solution-card {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem; /* rounded-xl */
    padding: 2rem;
    text-align: center;
    color: white;
    height: 16rem; /* h-64 */
    transition: all 0.3s ease;
    cursor: pointer;
}

.aer-vrv-systems-solution-card:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

.aer-vrv-systems-card-image-wrapper {
    height: 8rem; /* h-32 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.aer-vrv-systems-card-image {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Group hover effect for image scaling */
.aer-vrv-systems-solution-card:hover .aer-vrv-systems-card-image {
    transform: scale(1.05);
}

.aer-vrv-systems-card-title {
    font-weight: 700;
    font-size: 1.25rem;
}

/* Responsive Styles */
/* Small screens: force 1 column for all layouts */
@media (max-width: 767px) {
    .aer-vrv-systems-grid-container .aer-vrv-systems-solution-card {
        width: 100% !important;
    }
}

@media (min-width: 768px) { /* md breakpoint */
    .aer-vrv-systems-header h2 {
        font-size: 3rem;
    }
    .aer-vrv-systems-grid-container-secondary {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
    }
}

@media (min-width: 640px) { /* sm breakpoint */
    .aer-vrv-systems-content-container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) { /* lg breakpoint */
        .aer-vrv-systems-content-container {
        padding: 0 2rem;
    }

    .aer-vrv-systems-comfort-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .aer-vrv-systems-header h2 {
        font-size: 2.25rem;
    }

    .aer-vrv-systems-header p {
        font-size: 1.25rem;
    }
    .aer-vrv-systems-header {
        margin-bottom: 4rem;
    }
}