/* Module: agregados */

/* Agregados (3 columnas) */
.jh-agregados{
    display:grid;
    grid-template-columns: 32% 26% 42%;
    min-height: 220px;
    border-radius: var(--jh-radius);
    overflow:hidden;
}
.jh-agregados__left{
    background: var(--jh-ag-left-bg, var(--jh-entree-rojo-fuerte));
    padding: 22px 22px 18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:12px;
}
.jh-agregados__left-title{
    font-family: var(--jh-item-title-font, 'JH_Knockout94', Arial, sans-serif);
    color: var(--jh-ag-left-color, var(--jh-entree-negro));
    text-transform:uppercase;
    /* font-weight:800; */
    line-height:.85;
    letter-spacing:.5px;
    font-size: clamp(48px, 24vw, 70px);
}
.jh-agregados__left-title span{
    display:block;
}
.jh-agregados__left-sub{
    font-family: var(--jh-item-desc-font, Arial, sans-serif);
    color: var(--jh-ag-left-sub-color, var(--jh-entree-naranja-lavado));
    font-size: 12px;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.jh-agregados__center{
    background: var(--jh-ag-center-bg, var(--jh-entree-rojo-lavado));
    color: var(--jh-ag-center-color, var(--jh-entree-naranja-lavado));
    padding: 18px 20px;
    display:flex;
    align-items:center;
}
.jh-agregados__list{
    list-style:none;
    margin:0;
    padding:0;
    width:100%;
    display:grid;
    gap:8px;
}
.jh-agregados__item{
    display:grid;
    grid-template-columns: 72px 1fr;
    align-items:baseline;
    gap:14px;
    font-family: var(--jh-item-title-font, 'JH_Knockout94', Arial, sans-serif);
    text-transform:uppercase;
    letter-spacing:.6px;
}
.jh-agregados__price{
    font-size: 12px;
    opacity:.95;
    white-space:nowrap;
}
.jh-agregados__name{
    font-size: 16px;
}

.jh-agregados__right{
    background: var(--jh-ag-right-bg, var(--jh-entree-rojo-lavado));
    color: var(--jh-ag-right-color, var(--jh-entree-naranja-lavado));
    padding: 18px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}
.jh-agregados__right-title{
    font-family: var(--jh-item-title-font, 'JH_Knockout94', Arial, sans-serif);
    text-transform:uppercase;
    /* font-weight:900; */
    line-height:.85;
    letter-spacing:.8px;
    font-size: clamp(39px, 4.2vw, 60px);
}
.jh-agregados__mark{
    font-family: var(--jh-item-title-font, 'JH_Knockout94', Arial, sans-serif);
    /* font-weight:900; */
    font-size: clamp(48px, 50vw, 275px);
    line-height:1;
}

@media (max-width: 720px){
    .jh-agregados{
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .jh-agregados__right{
        justify-content:flex-start;
    }
}

/* no-rounded */
.jh-menu, .jh-menu *{
    border-radius: 0 !important;
}


/* =====================================================
   ENTREES - Responsive helpers
   ===================================================== */

/* Mobile collapse should ONLY happen on small screens.
   Tablets/desktop must keep the mockup layout. */
@media (max-width: 767px){
    .jh-agregados__left-title{
        text-align: center;

    }

    .jh-agregados__left-title .jh-agregados__left-l1 {
        font-size: clamp(48px, 25vw, 40vw);
        padding-right: 2px;
    }
    .jh-agregados__left-title .jh-agregados__left-l2 {
        font-size: clamp(48px, 24vw, 19.5vw);
        text-align: center;
    }
    .jh-agregados__left-sub {
        text-align: center;
    }

    .jh-entree{
        grid-template-columns: 1fr;
    }
    .jh-entree__items{
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .jh-entree__specials{
        /* Stack blocks (variants group / papas killer / quesadilla) */
        grid-template-columns: 1fr !important;
    }
    .jh-entree__specials .jh-entree__card{
        width:100%;
    }
}



/* =====================================================
   FIX: Keep ENTREES desktop/tablet layout until 767px
   and define specials mobile layout:
   - Row: CERDO / CARNE / POLLO (3 columns)
   - Below: PAPAS KILLER
   - Below: QUESADILLA
   ===================================================== */

/* Tablet/Desktop (>=768): keep specials on one line (variants + main + quesadilla) */
@media (min-width: 768px){
    .jh-entree__specials{
        display: grid;
        grid-template-columns: 3fr 1.2fr 2.2fr;
        gap: 0;
        width: 100%;
    }
    .jh-entree__specials-wrap{
        width: 100%;
    }
}

/* Mobile */
@media (max-width: 767px){
    .jh-entree__specials{
        grid-template-columns: 1fr !important;
    }
    .jh-entree__pk-variants{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Papas Killer in its own row, Quesadilla in another row */
    .jh-entree__card--papas-killer-main,
    .jh-entree__card--quesadilla{
        width: 100%;
    }

    /* Override the global mobile "big photo" layout ONLY for pk variants */
    .jh-entree__specials-wrap .jh-entree__pk-variants .jh-entree__card--pk-variant{
        display: flex;
        flex-direction: column;
        padding: 10px 0 0 0;
        min-height: 0;
    }

    .jh-entree__specials-wrap .jh-entree__pk-variants .jh-entree__card-img{
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: 100%;
        aspect-ratio: auto;
        margin: 0;
        border-radius: 0;
        overflow: hidden;
    }

    .jh-entree__specials-wrap .jh-entree__pk-variants .jh-entree__card-img img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .jh-entree__specials-wrap .jh-entree__pk-variants .jh-entree__card-title{
        font-size: 20px;
        line-height: 1;
    }
}