/* Cascina Bonfiglio — SEZIONE: Le nostre categorie (pixel-perfect 1:1 Figma)
   Canvas Figma 1728px wide. Tutte le misure sono convertite in rem usando
   1728 = 108rem (1 rem = 16px). Uso clamp() con pivot a 1728px.
*/

.cb-categories {
    position: relative;
    background: #ffffff;
    padding: 40px 0 100px;
    overflow: clip;
}

/* ---------- Decorazioni foglie ----------
   Figma canvas y=0 è in alto del doc; la sezione categories inizia a y=1358.
   Tutte le top sono calcolate come: figma_y - 1358 (y relativa alla section).
*/
.cb-categories__leaf {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
/* 10:503 — green leaf: x=-58, y=1894, w=230, h=303
   rel_y = 1894 - 1358 = 536 */
.cb-categories__leaf--left {
    left: -58px;
    top: 536px;
    width: 230px;
    height: 303px;
}
/* 10:509 — pink leaf: x=1508, y=1400, w=179, h=115
   rel_y = 1400 - 1358 = 42 */
.cb-categories__leaf--right {
    left: 1925px;
    top: 42px;
    width: 179px;
    height: 115px;
}

/* Su viewport < 1728 le foglie scalano proporzionalmente col viewport */
@media (max-width: 1727px) {
    .cb-categories__leaf--left {
        left: -3.36vw;            /* -58/1728 */
        top: 31vw;                /* 536/1728 */
        width: 13.31vw;           /* 230/1728 */
        height: 17.54vw;          /* 303/1728 */
    }
    .cb-categories__leaf--right {
        left: auto;
        right: 2.37vw;            /* (1728-1508-179)/1728 */
        top: 2.43vw;              /* 42/1728 */
        width: 10.36vw;           /* 179/1728 */
        height: 6.66vw;           /* 115/1728 */
    }
}

/* ---------- Inner wrapper 1436px (allineato a bestsellers/features) ---------- */
.cb-categories__inner {
    position: relative;
    z-index: 1;
    max-width: 1438px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}
@media (max-width: 1700px) {
    .cb-categories__inner { padding: 0 var(--cb-gutter); }
}

/* ---------- Kicker "LE NOSTRE CATEGORIE" ---------- */
/* Figma 12:40: Nunito Sans Bold 14px, line-height 47px, letter-spacing 1.174px,
   textCase UPPER, center. */
.cb-categories__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 "Tutto il gusto della Sicilia" ---------- */
/* Figma 10:547: Nunito Sans Regular 36px, line-height 47px, ls 1.174px */
.cb-categories__title {
    margin: 0 0 50px;           /* gap Figma: 1575 - 1525 = 50px */
    font-family: var(--cb-font-body);
    font-weight: 400;
    font-size: 36px;
    line-height: 47px;
    letter-spacing: 1.174px;
    color: var(--cb-text);
}
.cb-categories__title-accent {
    font-family: var(--cb-font-accent); font-style: italic;
    font-weight: 700;
    font-size: 1.35em;
    color: #000000;
    padding-left: .05em;
}

/* ---------- Slider wrapper (frecce a fianco del grid, fuori dalle card) ---------- */
.cb-categories__slider {
    position: relative;
    max-width: 1438px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ---------- Grid 4 box (flex scrollabile) ---------- */
/* Frame 51: 1432x390, 4 box 340x390 con gap 24 (1432-1360)/3 */
.cb-categories__grid {
    display: flex;
    gap: 24px;
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    z-index: 1;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge */
    padding: 4px 0;              /* spazio per ombra/focus */
}
.cb-categories__grid::-webkit-scrollbar { display: none; }

.cb-categories__grid > .cb-cat-card {
    flex: 0 0 calc((100% - 72px) / 4);   /* 4 card visibili con 3 gap da 24 */
    scroll-snap-align: start;
}

/* Box categoria: 340x390, border-radius 20, padding 20 */
.cb-cat-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 340 / 390;
    border-radius: 20px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    text-decoration: none;
    color: var(--cb-white);
    transition: transform .3s ease, box-shadow .3s ease;
}
.cb-cat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.50) 100%);
}
.cb-cat-card:hover {
    transform: translateY(-4px);
}

.cb-cat-card__text {
    position: relative;
    z-index: 1;
    padding: 20px;
    width: 100%;
    color: var(--cb-white);
    text-align: left;
}
/* Figma box title: Nunito Sans 700 26px, line-h 35.5px */
.cb-cat-card__title {
    margin: 0;
    font-family: var(--cb-font-body);
    font-weight: 700;
    font-size: 26px;
    line-height: 35.5px;
    color: var(--cb-white);
}
/* Figma box count: Nunito Sans 400 16px, line-h 21.8px, ls 0.9px */
.cb-cat-card__count {
    margin: 0;
    font-family: var(--cb-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 21.8px;
    letter-spacing: 0.9px;
    color: var(--cb-white);
}

/* ---------- Frecce slider (ai lati del Frame 51) ----------
   Figma 23:222/229: 46x47, posizionate al livello del centro dei box.
   Left arrow absolute x=39 (in canvas), Right arrow absolute x=1641.
   In screen: stanno appena fuori dal Frame 51 (width 1432). */
.cb-categories__arrow {
    position: relative;
    flex: 0 0 46px;
    width: 46px;
    height: 47px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 5;
    transition: transform .2s ease, opacity .2s ease;
}
.cb-categories__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}
.cb-categories__arrow:hover {
    transform: scale(1.08);
}
.cb-categories__arrow[disabled] {
    cursor: not-allowed;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .cb-categories { padding: 70px 0 180px; }
    .cb-categories__grid { gap: 18px; }
    .cb-cat-card__title { font-size: 22px; line-height: 30px; }
    .cb-cat-card__count { font-size: 14px; }
}
@media (max-width: 1100px) {
    .cb-categories { padding: 70px 0 140px; }
    .cb-categories__grid > .cb-cat-card { flex: 0 0 calc((100% - 18px) / 2); }
}
@media (max-width: 1024px) {
    .cb-categories { padding: 80px 0 120px; }
    .cb-categories__grid { gap: 18px; padding: 4px 20px; }
    .cb-categories__grid > .cb-cat-card {
        flex: 0 0 calc((100% - 36px) / 2); /* 2 visibili con padding */
    }
    .cb-categories__title { font-size: 32px; line-height: 42px; margin-bottom: 40px; }
}
@media (max-width: 640px) {
    .cb-categories { padding: 40px 0 60px; }
    /* Cliente: "il prodotto principale deve stare al centro e quello prima e dopo
       devono essere evidenti". Carosello snap-center: padding viewport-relative
       in modo che la card al centro abbia peek prev+next visibili.
       NB: si annullano padding/max-width del parent .__inner per dare al grid
       l'intera larghezza del viewport (vw), così i calcoli di centratura tornano. */
    .cb-categories__inner { padding: 0 !important; max-width: none !important; }
    .cb-categories__slider { overflow: visible; }
    .cb-categories__grid {
        gap: 14px;
        padding: 4px 14vw;
        margin: 0;
        scroll-padding-inline: 14vw;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }
    .cb-categories__grid > .cb-cat-card {
        flex: 0 0 72vw;
        max-width: 320px;
        scroll-snap-align: center;
    }
    /* Title/kicker tornano in colonna centrata su contenitore di larghezza piena */
    .cb-categories__kicker,
    .cb-categories__title { padding: 0 16px; }
    .cb-categories__title {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 28px;
    }
    .cb-cat-card__title { font-size: 20px; line-height: 28px; }
    .cb-cat-card__count { font-size: 14px; }
    .cb-cat-card__text { padding: 16px; }
    .cb-categories__arrow { display: none; }
}