/**
 * CSS for Side Blocks Element
 *
 * Base font size is assumed to be 16px for em conversion.
 * 40px = 2.5em
 * 32px = 2em
 * 25px = 1.5625em
 * 20px = 1.25em
 * 18px = 1.125em
 * 16px = 1em
 * 10px = 0.625em
 */

.brxe-side-blocks {
    width: 100%;
    padding: 2em 0; /* Add some vertical spacing */
    /* * IMPORTANT: The container has a -200px top margin, 
     * so this root element needs a stacking context 
     * to ensure it appears above default page content.
    */
    position: relative;
    z-index: 2; 
}

.side-blocks-container {
    /* Merged rules */
    margin-top: -200px;
    margin-bottom: 50px;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 1.25em; /* 20px padding on sides */
    width: 100%;
}

.side-blocks-grid {
    display: grid;
    /* Creates 3 equal columns */
    grid-template-columns: repeat(3, 1fr);
    /* STOP the grid from forcing global stretch so JS can match content */
    align-items: flex-start;
    /* 30px gap between columns */
    gap: 30px;
}

/* --- Column 1 Styling --- */

.side-blocks-col-1 {
    padding-right: 40px;
    /* --- Z-INDEX FIX --- */
    /* Create a stacking context to lift this col */
    position: relative;
    z-index: 1;
    /* ------------------- */
}



.side-blocks-col-1 .side-blocks-heading {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 2.5em; /* 40px */
    line-height: 1.25;
    letter-spacing: 0;
    color: #36194C;
    margin: 0 0 0.5em 0;
}

/* Target generated <p> tags inside the WYSIWYG output */
.side-blocks-col-1 .side-blocks-wysiwyg p {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.125em; /* 18px */
    line-height: 1.5;
    letter-spacing: 0;
    color: #36194C;
    margin: 0;
}

/* --- Column 2 & 3 Repeater Wrappers --- */
.side-blocks-col-2,
.side-blocks-col-3 {
    /* FIX: Reverted from display: contents to allow JS global height matching */
    display: flex;
    flex-direction: column;
    gap: 30px; /* 30px gap between blocks in same column */
}


/* --- Repeater Block Styling --- */

.side-block-item {
    /* 25px border radius */
    border-radius: 1.5625em;
    /* 20px padding */
    padding: 1.25em;
    box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3); /* 0x0000004D */
    
    /* Backdrop filter support */
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    
    /* Fallback background for browsers that don't support backdrop-filter */
    /* A semi-transparent white looks good over most backgrounds */
    background-color: rgba(255, 255, 255, 0.75);
    
    /* Ensure blocks don't shrink */
    width: 100%;
    box-sizing: border-box;
    
    /* * This + backdrop-filter creates a new stacking context, 
     * which is the source of the z-index issue.
    */
    position: relative; 
    /* Let JS handle the specific height based on most content */
    height: auto;
    display: flex;
    flex-direction: column;
}

.side-block-item .side-block-icon {
    margin-bottom: 1em;
}

.side-block-item .side-block-icon img {
    /* Fixes space for lazy loading */
    aspect-ratio: 1 / 1;
    /* 32px max width */
    max-width: 2em;
    height: auto;
    display: block;
}

.side-block-text h3{
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.25em; /* 20px */
    line-height: 1.5;
    letter-spacing: 0;
    color: #000000;
    margin: 0 0 0.5em 0;

}

.side-block-text h4{
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.25em; /* 20px */
    line-height: 1.5;
    letter-spacing: 0;
    color: #000000;
    margin: 0 0 0.5em 0;

}

.side-block-item .side-block-title {
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 1.25em; /* 20px */
    line-height: 1.5;
    letter-spacing: 0;
    color: #000000;
    margin: 0 0 0.5em 0;
}

/* Target generated <p> tags from the 'editor' field */
.side-block-item .side-block-text p {
    font-family: 'Figtree', sans-serif;
    font-weight: 400;
    font-size: 1em; /* 16px */
    line-height: 1.5;
    letter-spacing: 0;
    color: #000000;
    margin: 0;
}

/* --- Responsive Styling --- */

/* Tablet */
@media (max-width: 991px) {
    .side-blocks-grid {
        /* Stack to 2 columns */
        grid-template-columns: repeat(2, 1fr);
    }

    .side-blocks-col-1 {
        /* Make col 1 span both columns */
        grid-column: 1 / -1;
        grid-row: auto !important;
    }

    .side-blocks-container{
        margin-top:-30px;
    }

    .side-blocks-col-1 .side-blocks-heading {
    
    font-size: 1.5em;
   
}
}

/* Mobile */
@media (max-width: 767px) {
    .side-blocks-grid {
        /* Stack to 1 column */
        grid-template-columns: 1fr;
    }
    .side-blocks-col-1 {
        /* Remove the extra padding on mobile */
        padding-right: 0;
    }

    


}