/**
 * Features With Image — Image laterale + grille 2x2 de features + CTAs.
 *
 * Layout split : image ~40 % avec badges,
 * grille 2x2 features ~60 %, boutons CTA en bas.
 * Equivalent WordPress « qce-hp__vision ».
 */

/* =============================================================================
   Section
   ============================================================================= */
.features-with-image {
    padding: var(--space-3xl) 0;
    overflow: hidden;
}

/* =============================================================================
   Inner — flex layout
   ============================================================================= */
.features-with-image__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    align-items: center;
}

/* =============================================================================
   Image column
   ============================================================================= */
.features-with-image__media {
    position: relative;
    width: 100%;
}

.features-with-image__media > img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
    display: block;
}

/* =============================================================================
   Image slider (multi-images)
   ============================================================================= */
.features-with-image__slider {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
}

.features-with-image__slider .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.features-with-image__slider .swiper-button-prev,
.features-with-image__slider .swiper-button-next {
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.features-with-image__slider .swiper-button-prev::after,
.features-with-image__slider .swiper-button-next::after {
    font-size: 14px;
}

.features-with-image__slider .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
}

.features-with-image__slider .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--color-orange);
}

/* =============================================================================
   Badges overlaid on image
   ============================================================================= */
.features-with-image__badges {
    position: absolute;
    bottom: var(--space-lg);
    left: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.features-with-image__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--color-white);
    color: var(--color-dark);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 0.875rem;
    border-radius: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.features-with-image__badge svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: currentColor;
}

/* =============================================================================
   Features column
   ============================================================================= */
.features-with-image__content {
    width: 100%;
}

/* =============================================================================
   Section title & subtitle
   ============================================================================= */
.features-with-image__section-title {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    font-weight: 500;
    color: var(--color-dark);
    line-height: 1.2;
    margin-bottom: var(--space-sm);
}

.features-with-image__section-subtitle {
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
    line-height: 1.6;
    color: #555;
    margin-bottom: var(--space-xl);
}

/* =============================================================================
   2x2 grid
   ============================================================================= */
.features-with-image__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

/* =============================================================================
   Feature item
   ============================================================================= */
.features-with-image__item {
    padding: 0;
}

.features-with-image__icon {
    margin-bottom: var(--space-sm);
    color: var(--color-orange);
}

.features-with-image__icon svg {
    width: 40px;
    height: 40px;
    fill: currentColor;
}

.features-with-image__title {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}

.features-with-image__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #555;
}

/* =============================================================================
   CTA buttons
   ============================================================================= */
.features-with-image__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

/* =============================================================================
   Image masks (blob, wave)
   ============================================================================= */
.fwi-mask img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.fwi-mask--blob {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath d='M0 32C0 14.3 14.3 0 32 0h296c17.7 0 32 14.3 32 32v80c0 17.7-14.3 52-32 52h-8c-17.7 0-32 14.3-32 32v8c0 17.7 14.3 32 32 32h8c17.7 0 32 14.3 32 32v100c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V280c0-17.7 14.3-32 32-32h8c17.7 0 32-14.3 32-32v-8c0-17.7-14.3-32-32-32h-8C14.3 176 0 161.7 0 144V32Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath d='M0 32C0 14.3 14.3 0 32 0h296c17.7 0 32 14.3 32 32v80c0 17.7-14.3 52-32 52h-8c-17.7 0-32 14.3-32 32v8c0 17.7 14.3 32 32 32h8c17.7 0 32 14.3 32 32v100c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V280c0-17.7 14.3-32 32-32h8c17.7 0 32-14.3 32-32v-8c0-17.7-14.3-32-32-32h-8C14.3 176 0 161.7 0 144V32Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.fwi-mask--wave {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 638 383' preserveAspectRatio='none'%3E%3Cpath d='M576.453 0.043C575.699 0.069 574.945 0.086 574.191 0.086C573.438 0.086 572.684 0.069 571.93 0.043C571.588 0.034 571.245 0.017 570.903 0H449.863C449.521 0.017 449.178 0.034 448.835 0.043C448.082 0.069 447.328 0.086 446.574 0.086C445.821 0.086 445.067 0.069 444.313 0.043C410.113 1.227 382.766 29.341 382.766 63.848C382.766 98.354 354.202 127.695 318.957 127.695C283.713 127.695 256.382 100.328 255.191 66.113C255.183 66.457 255.166 66.791 255.149 67.134V60.561C253.478 27.573 226.79 1.193 193.687 0.043C192.933 0.069 192.179 0.086 191.426 0.086C190.672 0.086 189.918 0.069 189.165 0.043C154.965 1.227 127.617 29.341 127.617 63.848C127.617 98.354 99.053 127.695 63.809 127.695C28.564 127.695 0 156.281 0 191.543V319.238C0 353.402 26.808 381.292 60.52 383H449.863C483.575 381.292 510.383 353.402 510.383 319.238C510.383 285.075 538.947 255.391 574.191 255.391C609.436 255.391 638 226.771 638 191.457V63.848C638 29.341 610.652 1.227 576.453 0.043Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 638 383' preserveAspectRatio='none'%3E%3Cpath d='M576.453 0.043C575.699 0.069 574.945 0.086 574.191 0.086C573.438 0.086 572.684 0.069 571.93 0.043C571.588 0.034 571.245 0.017 570.903 0H449.863C449.521 0.017 449.178 0.034 448.835 0.043C448.082 0.069 447.328 0.086 446.574 0.086C445.821 0.086 445.067 0.069 444.313 0.043C410.113 1.227 382.766 29.341 382.766 63.848C382.766 98.354 354.202 127.695 318.957 127.695C283.713 127.695 256.382 100.328 255.191 66.113C255.183 66.457 255.166 66.791 255.149 67.134V60.561C253.478 27.573 226.79 1.193 193.687 0.043C192.933 0.069 192.179 0.086 191.426 0.086C190.672 0.086 189.918 0.069 189.165 0.043C154.965 1.227 127.617 29.341 127.617 63.848C127.617 98.354 99.053 127.695 63.809 127.695C28.564 127.695 0 156.281 0 191.543V319.238C0 353.402 26.808 381.292 60.52 383H449.863C483.575 381.292 510.383 353.402 510.383 319.238C510.383 285.075 538.947 255.391 574.191 255.391C609.436 255.391 638 226.771 638 191.457V63.848C638 29.341 610.652 1.227 576.453 0.043Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.fwi-mask--wave img {
    aspect-ratio: 638 / 383;
}

/* When mask is used, disable the default border-radius */
.features-with-image__media .fwi-mask img {
    border-radius: 0;
}

/* =============================================================================
   Dark background variants — light text
   ============================================================================= */
.features-with-image--dark .features-with-image__section-title,
.features-with-image--dark .features-with-image__title,
.bg-teal .features-with-image__section-title,
.bg-teal .features-with-image__title,
.bg-dark .features-with-image__section-title,
.bg-dark .features-with-image__title,
.bg-orange .features-with-image__section-title,
.bg-orange .features-with-image__title {
    color: var(--color-orange);
}

.features-with-image--dark .features-with-image__section-subtitle,
.features-with-image--dark .features-with-image__desc,
.bg-teal .features-with-image__section-subtitle,
.bg-teal .features-with-image__desc,
.bg-dark .features-with-image__section-subtitle,
.bg-dark .features-with-image__desc,
.bg-orange .features-with-image__section-subtitle,
.bg-orange .features-with-image__desc {
    color: rgba(255, 255, 255, 0.85);
}

/* On orange background, use white for titles instead of orange */
.bg-orange .features-with-image__section-title,
.bg-orange .features-with-image__title {
    color: var(--color-white);
}

/* =============================================================================
   Desktop — side by side
   ============================================================================= */
@media (min-width: 768px) {
    .features-with-image__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .features-with-image__inner {
        flex-direction: row;
        align-items: stretch;
    }

    .features-with-image__media {
        width: 40%;
        flex-shrink: 0;
    }

    .features-with-image__media > img {
        height: 100%;
        min-height: 400px;
    }

    .features-with-image__slider {
        height: 100%;
        min-height: 400px;
    }

    .features-with-image__slider .swiper-slide img {
        height: 100%;
        min-height: 400px;
    }

    .features-with-image__content {
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Image right: reverse order */
    .features-with-image--image-right .features-with-image__inner {
        flex-direction: row-reverse;
    }
}

@media (min-width: 1280px) {
    .features-with-image__grid {
        gap: var(--space-2xl) var(--space-xl);
    }
}