/* =========================================
   FIGMA SERVICES SECTION
========================================= */

.weblodge-figma-services-head {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

/* Layout only - heading style from global .wla-big-text
   (the span keeps its cyan from the global file) */
.weblodge-figma-services-head h2 {
    margin: 0 0 10px;
}

/* Layout only - text style from global .wla-description-text */
.weblodge-figma-services-head p {
    max-width: 600px;
    margin: 0 auto;
}

/* SERVICES GRID */

.weblodge-figma-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
    z-index: 2;
}

/* SERVICE CARD */

.weblodge-figma-service-card {
    padding: 35px 25px;
    min-height: 220px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

/* LOTTIE BACKGROUND */

.service-lottie {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: 0.10;
    z-index: 0;
    pointer-events: none;
}

/* CARD TEXT */

.weblodge-figma-service-card p {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Layout only - card title style from global .wla-card-medium-text */
.weblodge-figma-service-card h3 {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 10px;
}

/* Card text style comes from global .wla-card-description-text;
   position and centering stay in the shared rule above. */




/* TABLET */

@media (max-width: 1024px) {

    /* Heading and text sizes now come from the global file */

    .weblodge-figma-service-card {
        padding: 25px 10px;
        min-height: 200px;
        border-radius: 21px;
    }

    /* Card text sizes now come from the global file */

}

/* MOBILE */

@media (max-width: 767px) {

    .weblodge-figma-services-section {
        padding: 30px 10px;
    }

    /* Heading and text sizes now come from the global file */

    /* 2 cards per row */
    .weblodge-figma-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .weblodge-figma-service-card {
        padding: 25px 8px;
        min-height: 180px;
        border-radius: 18px;
    }

    /* Card text sizes now come from the global file */

}