/**
 * Services Grid Component (ported from Electrocom IA, electrocomia.fr)
 * 2-column grid of service cards, left-aligned header. Electrocom design tokens
 * resolved to concrete values so it renders identically inside the wapi-prev
 * theme; fonts use the theme's Inter vars.
 */

.services-grid {
    padding: var(--section-padding) 0;
    /* No own background: this section joins the site-wide white/sage
       alternation via the `section` class (ksw_alternate_sections).
       It used to paint #F9FAFB, a third colour that broke the rhythm. */
}

.services-grid .container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 16px;
}

/* Header - centered */
.services-grid__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 64px;
}

.services-grid__label {
    display: block;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.services-grid__title {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
    margin: 0 0 16px;
}

.services-grid__subtitle {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text-muted);
    line-height: 1.75;
    margin: 0;
}

/* Grid */
.services-grid__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

/* Card - No hover animations */
.services-grid__card {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

/* Card Icon */
.services-grid__card-icon {
    /* Was a 48px box holding a 64px svg, i.e. the icon overflowed its own
       container. Direction 2 has no container at all. */
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    color: var(--color-primary);
    line-height: 0;
}

.services-grid__card-icon svg {
    width: var(--icon-size);
    height: var(--icon-size);
    display: block;
}

/* Card Content */
.services-grid__card-content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
}

/* Card CTA = small arrow link, same as the "Pour qui" cards (override the
   dev-naked.css "all CTAs outlined" !important rule). Pinned to the card bottom. */
.services-grid__card-content .cta-component {
    margin-top: auto;
    background: none !important;
    border: none !important;
    box-shadow: none;
    padding: 0;
    height: auto;
    min-height: 0;
    color: var(--color-primary);
    text-decoration: none;
}

.services-grid__card-content .cta-component:hover {
    background: none !important;
    border: none !important;
    text-decoration: underline;
}

.services-grid__card-content .cta-component::after {
    content: " \2192";
}

.services-grid__card-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.2;
    margin: 0 0 16px;
}

.services-grid__card-description {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0 0 24px;
}

/* Feature List with bullet points */
.services-grid__card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}

.services-grid__card-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.6;
    margin-bottom: 8px;
}

.services-grid__card-features li:last-child {
    margin-bottom: 0;
}

/* Accent bullet, drawn as a dot rather than tinted as a glyph.
   The markup ships a literal "•" character; tinting THAT yellow would be
   yellow TEXT at 1.63:1 (an AA failure, 30 of them on the homepage alone).
   So the glyph is collapsed to zero size and a 9px circle is painted in
   its place - which is exactly what the approved mock does
   (`ul.bul li::before{width:9px;height:9px;background:var(--detail);
   border-radius:50%}`). A painted box is decoration, not text. */
.services-grid__bullet {
    flex-shrink: 0;
    font-size: 0;
    line-height: 0;
    width: var(--bullet-size);
    height: var(--bullet-size);
    margin-top: 7px;   /* centres the dot on the first line (14px/1.6) */
    border-radius: 50%;
    background: var(--color-accent);
}

.services-grid__card-features li span:last-child {
    flex: 1;
}

/* Responsive */
@media (max-width: 1024px) {
    .services-grid__grid {
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .services-grid {
        padding: 48px 0;
    }

    .services-grid__header {
        margin-bottom: 48px;
    }

    .services-grid__title {
        font-size: 32px;
    }

    .services-grid__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .services-grid__card-content {
        padding: 24px;
    }

    .services-grid__card-title {
        font-size: 20px;
    }
}