/* V2 Highlighted Services Component Styles */
/* This component now uses v2-boxes for rendering, so we only need wrapper-specific styles */

/* V2 Highlighted Services Section */
.v2-highlighted-services-section {
    margin: 64px 0;
    max-width: 1200px;
    margin: auto auto;

}

/* Override v2-boxes styles for highlighted services context */
.v2-highlighted-services-section .v2-boxes-section {
    padding: 0;
}

.v2-highlighted-services-section .v2-boxes-main-title {
    color: #f4f4f4;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    width: 100%;
    text-align: left;
    margin-bottom: 48px;
}

.v2-highlighted-services-section .v2-boxes-grid {
    max-width: 1216px;
    margin: 0 auto;
    display: grid;
    gap: 32px;
}

/* Grid configurations for highlighted services */
.v2-highlighted-services-section .v2-boxes-grid.grid-2-1 {
    grid-template-columns: repeat(2, 1fr);
}

.v2-highlighted-services-section .v2-boxes-grid.grid-3-1 {
    grid-template-columns: repeat(3, 1fr);
}

.v2-highlighted-services-section .v2-boxes-grid.grid-2-2 {
    grid-template-columns: repeat(2, 1fr);
}

.v2-highlighted-services-section .v2-boxes-grid.grid-3-2 {
    grid-template-columns: repeat(3, 1fr);
}

.v2-highlighted-services-section .v2-boxes-grid.grid-3-3 {
    grid-template-columns: repeat(3, 1fr);
}

.v2-highlighted-services-section .v2-boxes-grid.grid-3-4 {
    grid-template-columns: repeat(3, 1fr);
}

/* Override box styling for highlighted services */
.v2-highlighted-services-section .v2-box-item {
    background-color: #f4f4f4;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

/* Responsive layout for v2 highlighted services */
@media (max-width: 1199px) {


    .v2-highlighted-services-section .v2-boxes-main-title {
        margin-bottom: 40px;
        width: 100%;
    }

    /* Tablet: All grids become 2 columns except 2-box grids which stay 2 columns */
    .v2-highlighted-services-section .v2-boxes-grid.grid-2-1,
    .v2-highlighted-services-section .v2-boxes-grid.grid-2-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .v2-highlighted-services-section .v2-boxes-grid.grid-3-1,
    .v2-highlighted-services-section .v2-boxes-grid.grid-3-2,
    .v2-highlighted-services-section .v2-boxes-grid.grid-3-3,
    .v2-highlighted-services-section .v2-boxes-grid.grid-3-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .v2-highlighted-services-section .v2-boxes-grid {
        gap: 30px;
    }
}

@media (max-width: 899px) {
    /* All grids become single column for screens < 900px */
    .v2-highlighted-services-section .v2-boxes-grid {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .v2-highlighted-services-section {
        padding: 0 20px;
        margin: 60px 0;
    }

    .v2-highlighted-services-section .v2-boxes-main-title {
        margin-bottom: 30px;
        width: 100%;
        font-size: 1.8rem;
    }

    .v2-highlighted-services-section .v2-boxes-grid {
        gap: 20px;
    }
}