/* Cascina Bonfiglio — SEZIONE: La differenza Bonfiglio (Figma 12:196).
   Misure pixel-perfect dal canvas Figma 1728px. */

.cb-diff {
    position: relative;
    background: #FFFFFF;
    padding: 110px 0 110px;
    box-sizing: border-box;
    overflow: hidden;
}

.cb-diff__inner {
    position: relative;
    max-width: 1438px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
}

/* Kicker */
.cb-diff__kicker {
    margin: 0;
    font-family: var(--cb-font-body);
    font-weight: 700;
    font-size: 14px;
    line-height: 47px;
    letter-spacing: 1.174px;
    text-transform: uppercase;
    color: var(--cb-text);
}

/* Titolo */
.cb-diff__title {
    margin: 0 0 60px;
    font-family: var(--cb-font-body);
    font-weight: 400;
    font-size: 36px;
    line-height: 47px;
    letter-spacing: 1.174px;
    color: var(--cb-text);
}
.cb-diff__title-accent {
    font-family: var(--cb-font-accent); font-style: italic;
    font-weight: 700;
    font-size: 1.35em;
    color: #000000;
    padding-left: .05em;
}

/* ----- Stage: contenitore fisso 1728x660, centrato.
   Niente overflow-x:hidden su desktop: le features stanno dentro lo stage 1728 ma
   l'inner ha max-width 1600 → con overflow:hidden venivano clippate. Su mobile
   l'overflow:hidden è applicato dentro @media 640px (vedi sotto). */
.cb-diff__stage {
    position: relative;
    width: 1728px;
    height: 660px;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* Cerchi concentrici (Group 10) — centrati orizzontalmente */
.cb-diff__rings {
    position: absolute;
    top: 18px;        /* ~3154 - 3136 (titolo) */
    left: 50%;
    transform: translateX(-50%);
    width: 623px;
    height: 623px;
    pointer-events: none;
}
.cb-diff__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 519.96px;
    border: 1.376px dashed #A8C780;
    transform: translate(-50%, -50%);
}
.cb-diff__ring--1 { width: 365.9px; height: 365.9px; }
.cb-diff__ring--2 { width: 440.18px; height: 440.18px; }
.cb-diff__ring--3 { width: 519.96px; height: 519.96px; }
.cb-diff__ring--4 { width: 623px; height: 623px; }

/* Vasetto centrale (Frame 118:2127 — 447x557, posizione x=616 y=3169 nel canvas) */
.cb-diff__jar {
    position: absolute;
    top: 33px;        /* 3169 - 3136 */
    left: 50%;
    width: 447px;
    height: 557px;
    margin-left: -223.5px;
    object-fit: cover;
    z-index: 2;
    user-select: none;
}

/* Pallini verdi connettori (Ellipse 5/6/7/8 — 32x32) */
.cb-diff__dot {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #A8C780;
    z-index: 3;
}
/* Coordinate Figma:
   tl 601,3248  tr 1077,3244  bl 543,3535  br 1140,3540
   relative al canvas; lo stage parte ~y=3136 e left=0 quindi:
*/
.cb-diff__dot--tl { left: 601px; top: 112px; }
.cb-diff__dot--tr { left: 1077px; top: 108px; }
.cb-diff__dot--bl { left: 543px; top: 399px; }
.cb-diff__dot--br { left: 1140px; top: 404px; }

/* ----- Features 2x2 attorno al vasetto -----
   Coordinate Figma (x,y,w,h del titolo seguito da text 100h) */
.cb-diff__feature {
    position: absolute;
    width: 212px;
    text-align: left;
}
/* Figma 12:377 Bold 20px / normal — titolo feature */
.cb-diff__feature-title {
    margin: 0 0 8px;
    font-family: var(--cb-font-body);
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    color: #000000;
}
/* Figma 12:376 Regular 18px / normal — descrizione feature */
.cb-diff__feature-text {
    margin: 0;
    font-family: var(--cb-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #000000;
}

/* Top-left: Fatto a Mano */
.cb-diff__feature--tl { left: 316px; top: 101px; text-align: right; }
/* Top-right: Fino al 140% di frutta */
.cb-diff__feature--tr { left: 1186px; top: 94px; }
/* Bottom-left: Sicilia, Italia */
.cb-diff__feature--bl { left: 302px; top: 404px; text-align: right; }
/* Bottom-right: Zero Additivi */
.cb-diff__feature--br { left: 1193px; top: 404px; }

/* ----- Responsive ----- */
/* Sotto 1280 il layout assoluto a posizioni Figma (stage 1728x660) eccede troppo lo viewport
   e clipperebbe le features laterali. Passo al grid 3-col (testo / jar / testo). Sopra 1280
   resta il layout absolute Figma con cerchi concentrici e features sparse attorno al jar. */
@media (max-width: 1280px) {
    .cb-diff { padding: 80px 0; }
    .cb-diff__title { font-size: 32px; line-height: 42px; margin-bottom: 44px; }
    .cb-diff__stage {
        width: 100%;
        height: auto;
        margin-left: 0;
        transform: none;
        position: static;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 30px;
        max-width: 1100px;
        margin: 0 auto;
    }
    .cb-diff__rings,
    .cb-diff__dot { display: none; }
    .cb-diff__jar {
        position: static;
        margin: 0 auto;
        width: 280px;
        max-width: 100%;
        height: auto;
        grid-row: span 2;
        grid-column: 2;
    }
    .cb-diff__feature {
        position: static;
        width: 100%;
        max-width: 280px;
        text-align: left;
    }
    .cb-diff__feature--tl { grid-column: 1; grid-row: 1; text-align: right; justify-self: end; }
    .cb-diff__feature--tr { grid-column: 3; grid-row: 1; text-align: left; }
    .cb-diff__feature--bl { grid-column: 1; grid-row: 2; text-align: right; justify-self: end; }
    .cb-diff__feature--br { grid-column: 3; grid-row: 2; text-align: left; }
}

@media (max-width: 1024px) {
    .cb-diff { padding: 70px 0; }
    .cb-diff__title { font-size: 32px; line-height: 42px; margin-bottom: 40px; }
    .cb-diff__stage {
        width: 100%;
        height: auto;
        margin-left: 0;
        transform: none;
        position: static;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 30px;
    }
    .cb-diff__rings,
    .cb-diff__dot { display: none; }
    .cb-diff__jar {
        position: static;
        margin: 0 auto;
        width: 220px;
        max-width: 100%;
        height: auto;
        grid-row: span 2;
        grid-column: 2;
    }
    .cb-diff__feature {
        position: static;
        width: 100%;
        max-width: 280px;
        text-align: left;
    }
    .cb-diff__feature--tl { grid-column: 1; grid-row: 1; text-align: right; justify-self: end; }
    .cb-diff__feature--tr { grid-column: 3; grid-row: 1; text-align: left; }
    .cb-diff__feature--bl { grid-column: 1; grid-row: 2; text-align: right; justify-self: end; }
    .cb-diff__feature--br { grid-column: 3; grid-row: 2; text-align: left; }
}

@media (max-width: 640px) {
    .cb-diff { padding: 50px 0; }
    .cb-diff__title { font-size: 22px; line-height: 30px; margin-bottom: 80px; text-align: center; }
    .cb-diff__title-accent { display: block; }
    /* Cliente: "le differenze di Bonfiglio deve essere con le scritte a sinistra e l'immagine a destra".
       Sotto 640px: layout 2 colonne (testo sx, immagine dx che sporge), feature impilate
       nell'ordine: Fatto a Mano, 140% frutta, Zero Additivi, Sicilia. */
    .cb-diff__inner { overflow: hidden; }
    .cb-diff__stage {
        grid-template-columns: 1fr 110px;
        align-items: center;
        gap: 14px;
        text-align: left;
    }
    .cb-diff__jar {
        width: 350px !important;
        min-width: 231px !important;
        max-width: none !important;
        flex-shrink: 0;
        grid-row: span 4;
        grid-column: 2;
        margin: 0px 0px 0 0;
        position: absolute;
        top: 25%;
    }
    .cb-diff__feature {
        grid-column: 1 !important;
        max-width: none;
        margin: 0;
        text-align: left !important;
        justify-self: stretch !important;
        padding-right: 6px;
    }
    .cb-diff__feature--tl { grid-row: 1 !important; }
    .cb-diff__feature--tr { grid-row: 2 !important; }
    .cb-diff__feature--br { grid-row: 3 !important; }
    .cb-diff__feature--bl { grid-row: 4 !important; }
    .cb-diff__feature-title { font-size: 16px; margin-bottom: 4px; }
    .cb-diff__feature-text { font-size: 13.5px; line-height: 1.4; }
}