/* Cascina Bonfiglio — SEZIONE: Features "La differenza Bonfiglio"
   Cream bg con 4 card. Finisce con un'onda SVG che fa transizione alla
   sezione successiva (colore cream su ciò che sta sotto).
*/

.cb-features {
    position: relative;
    background: var(--cb-cream);     /* #F5EFE2 — stesso cream di .cb-hero, così la transizione è seamless */
    padding: 140px 0 0;               /* abbassa i 4 box dall'alto */
    z-index: 1;
}

.cb-features__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 37px;                 /* itemSpacing Figma Frame 13 = 37 */
    max-width: 1438px;
    margin: 0 auto;
    padding-inline: var(--cb-gutter);
    padding-bottom: 100px;
    box-sizing: border-box;
}

.cb-feature {
    background: var(--cb-white);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 101px;
}
.cb-feature__icon {
    flex: 0 0 auto;
    width: 52px;
    height: 55px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cb-feature__icon img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}
.cb-feature__text { line-height: 1.3; }
.cb-feature__title {
    margin: 0 0 4px;
    font-family: var(--cb-font-body);
    font-weight: 700;
    font-size: 24px;
    color: var(--cb-green);
    letter-spacing: 0.01em;
}
.cb-feature__sub {
    margin: 0;
    font-family: var(--cb-font-body);
    font-weight: 400;
    font-size: 18px;
    color: #000000;
}

/* Onda inferiore: l'SVG ha la path filled cream che rappresenta la parte
   alta (solida). Lo sfondo del container SVG è bianco per rappresentare
   la sezione successiva (.cb-categories). Dove la path NON copre, si vede
   il bianco → effetto curva morbida cream→white. */
.cb-features__wave {
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: clamp(100px, 9vw, 170px);
    background: #ffffff;
    margin-bottom: -1px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1500px) {
    .cb-features { padding: 160px 60px 0; }
    .cb-features__inner { gap: 28px; padding-bottom: 80px; }
    .cb-feature__title { font-size: 22px; }
    .cb-feature__sub { font-size: 17px; }
}

@media (max-width: 1280px) {
    .cb-features { padding: 90px 24px 0; }
    .cb-features__inner { gap: 20px; padding-bottom: 70px; }
    .cb-feature { padding: 14px; gap: 12px; }
    .cb-feature__title { font-size: 18px; }
    .cb-feature__sub { font-size: 14px; line-height: 1.3; }
    .cb-feature__icon { width: 44px; height: 46px; }
}

@media (max-width: 1100px) {
    .cb-features { padding: 70px 20px 0; }
    .cb-features__inner { grid-template-columns: repeat(2, 1fr); gap: 18px; padding-bottom: 60px; }
    .cb-feature { min-height: 88px; }
    .cb-feature__title { font-size: 18px; }
    .cb-feature__sub { font-size: 15px; }
    .cb-feature__icon { width: 42px; height: 44px; }
}

@media (max-width: 1024px) {
    .cb-features { padding: 60px 20px 0; }
    .cb-features__inner { grid-template-columns: repeat(2, 1fr); gap: 18px; padding-bottom: 50px; }
    .cb-feature { min-height: 88px; }
    .cb-feature__title { font-size: 18px; }
    .cb-feature__sub { font-size: 14px; }
    .cb-feature__icon { width: 42px; height: 44px; }
}

@media (max-width: 640px) {
    .cb-features { padding: 30px 0px 0; }
    .cb-features__inner { grid-template-columns: 1fr; gap: 12px; padding-bottom: 40px; max-width: 420px; }
    /* Cliente: card feature in orizzontale — icona sx, testo dx, titolo verde brand. */
    .cb-feature {
        min-height: 90px;
        padding: 18px 22px;
        gap: 20px;
        justify-content: flex-start;
        text-align: left;
        flex-direction: row;
        align-items: center;
    }
    .cb-feature__icon { width: 48px; height: 48px; flex-shrink: 0; }
    .cb-feature__icon img { width: 100%; height: 100%; object-fit: contain; }
    .cb-feature__text { display: flex; flex-direction: column; gap: 4px; }
    .cb-feature__title { font-size: 20px; text-align: left; color: var(--cb-green); font-weight: 700; }
    .cb-feature__sub { font-size: 15px; text-align: left; }
}