/* Bento Box Section
-------------------------------------------------- */
.bento-section {
    padding: var(--spacing-xxxl) 0;
    background-color: var(--color-white);
    text-align: center;
}

.bento-section h2 {
    color: var(--color-primary);
    font-size: var(--font-size-hero);
    font-weight: 700;
    margin-bottom: var(--spacing-xxxl);
    text-align: center;
}

/* Product Grid: 4 columns */
.product-flex {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    padding: 0 var(--spacing-lg) var(--spacing-xxl);
    margin: 0 auto;
    max-width: 1800px;
    width: 100%;
}

/* Product Group: Responsive for grid cell */
.product-group {
    position: relative;
    aspect-ratio: 850 / 550;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}
/* Product Image */
.product-group img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
    transform: scale(1);
    transition: transform var(--transition-normal);
}

/* Product Figure */
.product-group figure {
    margin: 0;
    position: relative;
    width: 100%;
    height: 100%;
}

/* Product Figcaption */
.product-group figcaption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(1, 142, 71, 0.85) 0%,
        rgba(141, 207, 79, 0.85) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    opacity: 0;
    color: var(--color-white);
    text-align: center;
    padding: var(--spacing-lg);
    transition: all var(--transition-normal);
}

/* Product Title */
.product-group h3 {
    font-size: var(--font-size-hero);
    font-weight: 700;
    line-height: var(--line-height-tight);
    margin: 0;
    text-align: center;
    transform: translateY(20px);
    transition: transform var(--transition-normal), color var(--transition-normal);
}

/* Change title color on hover */
.product-group:hover h3 {
    color: var(--color-white);
}

/* Product Description */
.product-group p {
    font-size: var(--font-size-xxxxl);
    font-weight: 400;
    line-height: var(--line-height-normal);
    margin: 0;
    max-width: 80%;
    text-align: center;
    transform: translateY(20px);
    transition: transform var(--transition-normal) 0.1s;
}

/* Learn More Button */
.product-group a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl) var(--spacing-xxxl);
    color: var(--color-white);
    font-weight: 700;
    font-size: var(--font-size-xxxxxl);
    line-height: var(--line-height-tight);
    border: 2px solid var(--color-white);
    border-radius: var(--border-radius-lg);
    transform: translateY(20px);
    transition: all var(--transition-normal);
    text-decoration: none;
    cursor: pointer;
}

.product-group a:hover {
    background: var(--color-white);
    color: var(--color-primary);
    transform: scale(1.03);
}

/* Hover Effects */
.product-group:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.product-group:hover img {
    transform: scale(1.05);
}

.product-group:hover figcaption {
    opacity: 1;
}

.product-group:hover h3,
.product-group:hover p,
.product-group:hover a {
    transform: translateY(0);
}

/* Loader Styles
-------------------------------------------------- */
.loader-container {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--spacing-xxl) var(--spacing-lg);
}

.loader {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.loader::after {
    content: '';
    display: block;
    width: var(--spacing-xl);
    height: var(--spacing-xl);
    border-radius: var(--border-radius-full);
    border: var(--spacing-xxs) solid var(--color-primary);
    border-color: var(--color-primary) transparent var(--color-primary) transparent;
    animation: loader 1.2s linear infinite;
}

@keyframes loader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.error-message {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    text-align: center;
    padding: var(--spacing-md);
}

/* Animation Classes
-------------------------------------------------- */
.product-flex,
.product-group {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--transition-normal),
                transform var(--transition-normal);
}

.product-flex.fade-in,
.product-group.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Loader Adjustments
-------------------------------------------------- */
@media screen and (max-width: 1440px) {

    .bento-section h2 {
        font-size: var(--font-size-xxxxxxl);
        
    }
    .product-group h3 {
        font-size: var(--font-size-xxxl);
       
    }
      .product-group p {
        font-size: var(--font-size-xxl);
        width: 75%;
    }
        .product-group a {
        padding: var(--spacing-lg) var(--spacing-xxl);
        font-size: var(--font-size-lg);
    }

    
}


@media screen and (max-width: 1024px) {
     .loader-container {
        min-height: 300px;
        padding: var(--spacing-xl) var(--spacing-md);
    }
    .product-flex {
        grid-template-columns: 1fr;
        max-width: 80%;
        width: 100%;
        margin: 0 auto;
        gap: var(--spacing-lg);
        padding: 0;
    }
    .product-group h3 {
        font-size: var(--font-size-xl);
       
    }
      .product-group p {
        font-size: var(--font-size-xxl);
        width: 75%;
    }
        .product-group a {
        padding: var(--spacing-lg) var(--spacing-xxl);
        font-size: var(--font-size-lg);
    }
}

@media screen and (max-width: 768px) {
    .loader-container {
        min-height: 250px;
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .loader {
        width: 60px;
        height: 60px;
    }

    .product-flex {
        margin: 0;
        padding: 0;
    }
}



/* Responsive Adjustments
-------------------------------------------------- */
@media screen and (max-width: 1279px) {
   
    /* .bento-section {
        padding: var(--spacing-xxl) var(--spacing-xl);
    } */
    .bento-section h2 {
        font-size: var(--font-size-xxxxl);
        margin-bottom: var(--spacing-lg);
    }


    /* Improve content spacing */
    .product-group figcaption {
        padding: var(--spacing-sm) var(--spacing-sm);
        justify-content: center;
        
    }

    /* Adjust typography for better readability */
    .product-group h3 {
        font-size: var(--font-size-xxl);
        margin-bottom: var(--spacing-md);
        max-width: 90%;
        line-height: 1.3;
    }

    .product-group p {
        font-size: var(--font-size-lg);
        max-width: 85%;
        margin: var(--spacing-md) 0;
        line-height: var(--line-height-relaxed);
    }

    /* Optimize button size and spacing */
    .product-group a {
        padding: var(--spacing-md) var(--spacing-xl);
        font-size: var(--font-size-md);
        margin-top: var(--spacing-md);
        min-width: 160px;
        max-width: 200px;
    }

    /* Improve spacing between rows */
    .product-group:nth-child(n+3) {
        margin-top: var(--spacing-lg);
    }

    /* Enhanced hover effects for tablets */
    .product-group:hover figcaption {
        opacity: 1;
        backdrop-filter: blur(3px);
    }
}

@media screen and (max-width: 768px) {
    /* .bento-section {
        padding: var(--spacing-md) var(--spacing-md);
    } */
    .bento-section h2 {
        font-size: var(--font-size-xxxl);
        margin-bottom: var(--spacing-lg);
    }
    
   .product-flex {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        padding: 0;
        margin: 0 auto;
        max-width: 80%;
        width: 100%;
    }
    .product-group {
        margin: 0 var(--spacing-md);
    }

    /* Improve touch targets */
    .product-group a {
        padding: var(--spacing-md) var(--spacing-xl);
        min-height: 44px;
    }

    .product-group figcaption {
        padding: var(--spacing-xl);
    }
}

@media screen and (max-width: 576px) {
    .bento-section {
        padding: var(--spacing-lg) var(--spacing-sm);
    }

   .bento-section h2 {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-md);
    }

    .product-flex {
        max-width: 100%;
        width: 100%;
    }
    .product-group {
        margin: 0 var(--spacing-sm);
    }
    .product-group figcaption {
        padding: var(--spacing-lg);
    }
    .product-group h3 {
        font-size: var(--font-size-lg);
    }
    .product-group p {
        font-size: var(--font-size-sm);
        max-width: 85%;
         margin: 0;
    }
    .product-group a {
        padding: 0 2rem;
        font-size: var(--font-size-sm);
    }
    .loader-container {
        min-height: 200px;
        padding: var(--spacing-md);
    }
    .loader {
        width: 40px;
        height: 40px;
    }

    .figcaption {
        padding: var(--spacing-sm);
       
    }
}