/* ========================================
   Numbered Grid Section
======================================== */

.numbered-grid-section {
    padding-top: 0;
}
.numbered-grid-section:has(+ .featured-cards-section) {
    padding-bottom: 0;
}
.numbered-grid-section .grid-items {
    display: grid;
    width: 100%;
    padding-top: 16px;
}

body:not(.home) .numbered-grid-section {
    border-top: 1px solid #E9E9E9; 
}

body:not(.home) .numbered-grid-section .grid-items {
    padding-top: 0px;  
}

body:not(.home) .content-section.background-white + .numbered-grid-section.background-white {
    margin-top: 0;
    border-top: 1px solid #E9E9E9; 
}

/* ========================================
   Grid Layout Variations by Item Count
======================================== */

/* 1 item - Single column */
.numbered-grid-section .grid-items[data-item-count="1"] {
    grid-template-columns: 1fr;
}

/* 2 items - Two columns */
.numbered-grid-section .grid-items[data-item-count="2"] {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 items - Three columns */
.numbered-grid-section .grid-items[data-item-count="3"] {
    grid-template-columns: repeat(3, 1fr);
}

/* 4 items - Four columns (default fallback) */
.numbered-grid-section .grid-items[data-item-count="4"],
.numbered-grid-section .grid-items {
    grid-template-columns: repeat(4, 1fr);
}

/* ========================================
   Grid Item Styles
======================================== */

.numbered-grid-section .grid-item {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 1px solid #E9E9E9;
    height: 100%;
}

.numbered-grid-section .grid-items > :first-child .grid-item {
    border-left: none;
}

.gradient-wrapper .numbered-grid-section .grid-item {
    border-left: 1px solid rgba(234, 234, 234, 0.20);
}

.gradient-wrapper .numbered-grid-section .grid-items > :first-child .grid-item {
    border-left: none;
}

/* ========================================
   Grid Item Links
======================================== */

.numbered-grid-section .grid-items a {
    color: inherit;
    text-decoration: none;
}

.numbered-grid-section .grid-item:is(:hover, :focus) {
    background: repeating-linear-gradient(
    135deg,
    #00000000 0%,
    #00000014 0.5%, /* extremely faint black line */
    var(--white, #ffffff) 0.5%,
    var(--white, #ffffff) 1%
    );
    z-index: 1;
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    border-left: none;
}

/* Hide border on adjacent item to the right */
.numbered-grid-section a:is(:hover, :focus-within) + a .grid-item,
.numbered-grid-section a:is(:hover, :focus-within) + .grid-item-wrapper .grid-item,
.numbered-grid-section .grid-item:is(:hover, :focus) + .grid-item,
.numbered-grid-section .grid-item:is(:hover, :focus) + .grid-item-wrapper .grid-item {
    border-left: none;
}

.gradient-wrapper .numbered-grid-section .grid-item:is(:hover, :focus) {
    background: repeating-linear-gradient(
    135deg,
    #00000000 0%,
    #00000014 1%, /* extremely faint black line */
    var(--white, #ffffff) 0.5%,
    var(--white, #ffffff) 1%
    );
}

.gradient-wrapper .numbered-grid-section .grid-item:is(:hover, :focus) {
    background: repeating-linear-gradient(
    135deg,
    #00000000 0%,
    #00000014 1%, /* extremely faint black line */
    var(--white, #ffffff) 0.5%,
    var(--white, #ffffff) 1%
    );
}

/* ========================================
   Item Number
======================================== */

.numbered-grid-section .item-number {
    font-size: 14px;
    font-weight: 600;
}

/* ========================================
   Item Content
======================================== */

.numbered-grid-section .item-content {
    padding-top: 70px;
}

.numbered-grid-section .item-content p {
    font-size: 14px;
    margin-bottom: 0;
}

/* ========================================
   Content Color Variations
======================================== */

/* Default - darker/more saturated purple for better pop */
.numbered-grid-section .item-content span.purple {
    background: linear-gradient(90deg, #7B4FFF 0%, #9370DB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; 
}

/* On gradient backgrounds - lighter/brighter version */
.gradient-wrapper .numbered-grid-section .item-content span.purple {
    background: linear-gradient(90deg, #A48BE3 0%, #C4B0F0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; 
}

.numbered-grid-section .item-content span.peach {
    background: var(--Peach-Gradient, linear-gradient(352deg, #F9646A 0.97%, #F8868A 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.numbered-grid-section .item-content span.light-blue {
    background: var(--Light-Blue-Gradient, linear-gradient(351deg, #21A2BC 0%, #C8E2E8 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gradient wrapper variant - remove bottom padding and add border */
.gradient-wrapper .numbered-grid-section {
    padding-bottom: 0;
    border-bottom: 1px solid #E9E9E9;
}

/* ========================================
   Media Queries
======================================== */

@media (max-width: 1199px) {
    .numbered-grid-section .grid-items[data-item-count="4"] {
        grid-template-columns: repeat(2, 1fr);
    }

    .numbered-grid-section .grid-items[data-item-count="3"] {
        grid-template-columns: repeat(3, 1fr);
    }

    .numbered-grid-section .grid-items[data-item-count="4"] .grid-item:nth-child(odd) {
        border-left: none;
    }
}

@media (max-width: 991px) {
    .numbered-grid-section .grid-items[data-item-count="3"],
    .numbered-grid-section .grid-items[data-item-count="4"] {
        grid-template-columns: repeat(2, 1fr);
    }

    .numbered-grid-section .grid-items[data-item-count="3"] .grid-item:nth-child(odd),
    .numbered-grid-section.grid-items[data-item-count="4"] .grid-item:nth-child(odd) {
        border-left: none;
    }

    .numbered-grid-section {
        border: none;
    }

    .numbered-grid-section .grid-item {
        border: none;
        height: auto;
    }

    .numbered-grid-section .item-content {
        padding-top: 52px;
    }
}

@media (max-width: 575px) {
    .numbered-grid-section .grid-items[data-item-count="1"],
    .numbered-grid-section .grid-items[data-item-count="2"],
    .numbered-grid-section .grid-items[data-item-count="3"],
    .numbered-grid-section .grid-items[data-item-count="4"] {
        grid-template-columns: 1fr;
    }

    .numbered-grid-section .grid-item {
        padding: 15px;
    }

    .numbered-grid-section .grid-item {
        border-bottom: 1px solid #E9E9E9;
    }

    .numbered-grid-section .grid-items > :last-child .grid-item {
        border-bottom: none;
    }

    .numbered-grid-section .grid-item:is(:hover, :focus) {
        border-bottom: none;
    }
}