/**
 * Four Grid Section Styles
 * 
 * @package Ascend Health
 */

/* Main section container */
.ascend-four-grid-section {
    position: relative;
    z-index: 1;
}

.section-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Section header */
.four-grid-header {
    margin-bottom: 60px;
}

.four-grid-header .four-grid-title {
    margin-bottom: 20px;
    font-family: var(--heading-font);
    font-weight: 400;
    line-height: 1.2;
    font-size: var(--section-title-size, 48px);
}

.four-grid-header .section-description {
    font-family: var(--body-font);
    line-height: 1.6;
    font-size: var(--section-description-size, 16px);
}

/* Alignment classes */
.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

/* Grid container */
.four-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

/* Grid item */
.grid-item {
    position: relative;
}

.grid-item-inner {
    display: flex;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.grid-item-inner:hover {
    transform: translateY(-5px);
}

/* Flipped layout for items 3 and 4 (second row) */
.grid-item.flipped .grid-item-inner {
    flex-direction: row-reverse;
}

/* Grid item image */
.grid-item-image {
    flex: 0 0 50%;
    position: relative;
}

.grid-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Grid item content */
.grid-item-content {
    flex: 1;
    padding: 30px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    max-height: 90%;
    width: 50%;
    left: 50%;
    border-left: 20px solid var(--Color-Palette-Copper);
}

/* Flipped layout positioning */
.grid-item.flipped .grid-item-content {
    left: 0;
    transform: translate(0, -50%);
    border-left: none;
    border-right: 20px solid var(--Color-Palette-Copper);
}

.grid-item-content .item-title {
    margin-bottom: 15px;
    font-family: var(--heading-font);
    font-weight: 400;
    line-height: 1.3;
    font-size: var(--item-title-size, 24px);
}

.grid-item-content .item-description {
    font-family: var(--body-font);
    line-height: 1.6;
    font-size: var(--item-description-size, 16px);
}

/* Background color classes for content */
.grid-item-content.bg-white {
    background-color: var(--Color-Palette-White);
}

.grid-item-content.bg-cream {
    background-color: var(--Color-Palette-Cream);
}

.grid-item-content.bg-copper {
    background-color: var(--Color-Palette-Copper);
}

.grid-item-content.bg-dark-chocolate {
    background-color: var(--Color-Palette-Dark-Chocolate);
}

.grid-item-content.bg-olive {
    background-color: var(--Color-Palette-Olive);
}

.grid-item-content.bg-khaki {
    background-color: var(--Color-Palette-Khaki);
}

.grid-item-content.bg-random-color {
    background-color: var(--Color-Palette-Random-Color);
}

.grid-item-content.bg-random-color-two {
    background-color: var(--Color-Palette-Random-Color-Two);
}


/* Background colors */
.bg-white {
    background-color: var(--Color-Palette-White);
}

.bg-copper {
    background-color: var(--Color-Palette-Copper);
}

.bg-dark-chocolate {
    background-color: var(--Color-Palette-Dark-Chocolate);
}

.bg-cream {
    background-color: var(--Color-Palette-Cream);
}

.bg-olive {
    background-color: var(--Color-Palette-Olive);
}

.bg-khaki {
    background-color: var(--Color-Palette-Khaki);
}

.bg-random-color {
    background-color: var(--Color-Palette-Random-Color);
}

.bg-random-color-two {
    background-color: var(--Color-Palette-Random-Color-Two);
}

/* Text colors */

.text-white {
    color: var(--Color-Palette-White) !important;
}
.text-black {
    color: var(--Color-Palette-Black) !important;
}
.text-copper {
    color: var(--Color-Palette-Copper) !important;
}
.text-dark-chocolate {
    color: var(--Color-Palette-Dark-Chocolate) !important;
}
.text-cream {
    color: var(--Color-Palette-Cream) !important;
}
.text-olive {
    color: var(--Color-Palette-Olive) !important;
}
.text-khaki {
    color: var(--Color-Palette-Khaki) !important;
}
.text-random-color {
    color: var(--Color-Palette-Random-Color) !important;
}
/* CTA section */
.four-grid-cta {
    text-align: center;
    margin-top: 40px;
}

.four-grid-cta .cta-button {
    display: inline-block;
    padding: 10px 18px;
    text-decoration: none;
    font-family: var(--body-font);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: 0.48px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.four-grid-cta .cta-button:hover {
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Button background colors */
.cta-button.bg-copper {
    background-color: var(--Color-Palette-Copper);
}
.cta-button.bg-copper:hover {
    background-color: var(--Color-Palette-White);
    color: var(--Color-Palette-Copper) !important;
    border: 1px solid var(--Color-Palette-White);
}

.cta-button.bg-olive {
    background-color: var(--Color-Palette-Olive);
}
.cta-button.bg-olive:hover {
    background-color: var(--Color-Palette-Copper);
    color: var(--Color-Palette-White) !important;
    border: 1px solid var(--Color-Palette-Copper);
}

.cta-button.bg-dark-chocolate {
    background-color: var(--Color-Palette-Dark-Chocolate);
}
.cta-button.bg-dark-chocolate:hover {
    background-color: var(--Color-Palette-Copper);
    color: var(--Color-Palette-White) !important;
    border: 1px solid var(--Color-Palette-Copper);
}

.cta-button.bg-white {
    background-color: var(--Color-Palette-White);
    border-color: var(--Color-Palette-Copper);
}
.cta-button.bg-white:hover {
    background-color: var(--Color-Palette-Copper);
    color: var(--Color-Palette-White) !important;
    border: 1px solid var(--Color-Palette-Copper);
}

.cta-button.bg-cream {
    background-color: var(--Color-Palette-Cream);
}
.cta-button.bg-cream:hover {
    background-color: var(--Color-Palette-Copper);
    color: var(--Color-Palette-Cream) !important;
    border: 1px solid var(--Color-Palette-Copper);
}

.cta-button.bg-khaki {
    background-color: var(--Color-Palette-Khaki);
}
.cta-button.bg-khaki:hover {
    background-color: var(--Color-Palette-Copper);
    color: var(--Color-Palette-White) !important;
    border: 1px solid var(--Color-Palette-Copper);
}
/* Button text colors */
.cta-button.text-white {
    color: var(--Color-Palette-White);
}

.cta-button.text-copper {
    color: var(--Color-Palette-Copper);
}

.cta-button.text-olive {
    color: var(--Color-Palette-Olive);
}

.cta-button.text-dark-chocolate {
    color: var(--Color-Palette-Dark-Chocolate);
}

.cta-button.text-cream {
    color: var(--Color-Palette-Cream);
}

/* Tablet breakpoint */
@media (max-width: 1024px) {
    .ascend-four-grid-section {
        --section-title-size: clamp(32px, 4vw, 36px);
        --section-description-size: 14px;
        --item-title-size: clamp(18px, 2.5vw, 20px);
        --item-description-size: 14px;
    }
    
    .four-grid-container {
        gap: 30px;
        margin-bottom: 50px;
    }
    
    .four-grid-header {
        margin-bottom: 40px;
    }
    
    .grid-item-content {
        padding: 25px;
    }
}

/* Mobile breakpoint */
@media (max-width: 920px) {
    .ascend-four-grid-section {
        --section-title-size: clamp(24px, 5vw, 28px);
        --section-description-size: 14px;
        --item-title-size: clamp(16px, 3vw, 18px);
        --item-description-size: 14px;
    }
    
    .four-grid-container {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 40px;
    }
    
    .four-grid-header {
        margin-bottom: 30px;
    }
    
    .four-grid-header .four-grid-title {
        margin-bottom: 15px;
        font-size: 32px;
    }
    
    .grid-item-inner,
    .grid-item.flipped .grid-item-inner {
        flex-direction: column;
        min-height: auto;
    }
    
    .grid-item-image {
        flex: 0 0 200px;
    }
    
    .grid-item-content,
    .grid-item.flipped .grid-item-content {
        padding: 20px;
        position: relative;
        width: 90%;
        left: 0;
        right: 0;
        top: 0;
        transform: unset;
        margin: 0 auto;
        border-left: none;
        border-right: none;
        border-top: 20px solid var(--Color-Palette-Copper);
    }
    
    .grid-item-content .item-title {
        margin-bottom: 10px;
    }
    
    .four-grid-cta .cta-button {
        padding: 12px 30px;
        font-size: 14px;
    }
}

/* Small mobile breakpoint */
@media (max-width: 480px) {
    .ascend-four-grid-section {
        --section-title-size: clamp(20px, 6vw, 24px);
        --section-description-size: 13px;
        --item-title-size: clamp(14px, 4vw, 16px);
        --item-description-size: 13px;
    }
    
    .section-container {
        padding: 0 15px;
    }
    
    .grid-item-content {
        padding: 15px;
    }
}