/* Module: entree */

/* Entree block (Title + items). Similar to featured, but without middle image.
   Each item can show its own photo, alternating left/right.
*/
.jh-entree{
    display:grid;
    grid-template-columns: minmax(220px, 1.2fr) 3fr;
    align-items:stretch;
    overflow:hidden;
    margin: 0 0 18px;
}

/* ------------------------------------------------------------
   Entree MOCKUP (PNG) layout
   Structure rendered by shortcode.php as .jh-entree-mock
------------------------------------------------------------ */
.jh-entree-mock{
    display:grid;
    grid-template-columns: 1fr 1fr;
    align-items:stretch;
    overflow:hidden;
    margin: 0 0 18px;
}

.jh-entree-mock__left,
.jh-entree-mock__right{
    min-width:0;
}

.jh-entree-mock__left{
    display:flex;
    flex-direction:column;
}

.jh-entree-mock__left-top{
    display:grid;
    grid-template-columns: minmax(200px, 2.5fr) 1.9fr;
    gap:0;
    align-items:stretch;
    height: 330px;
}

.jh-entree-mock__hero{
    background: var(--jh-entree-naranja-lavado);
    color: var(--jh-entree-negro);
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 18px;
}

.jh-entree-mock__hero-title{
    width:100%;
    text-align:left;
    text-transform: uppercase;
    font-family: var(--jh-item-title-font, 'JH_Knockout94', Arial, sans-serif);
    line-height: .75;
    letter-spacing: .02em;
    font-size: clamp(70px, 6vw, 170px);
}


.jh-entree-mock__left-bottom{
    flex:1;
    display:flex;
    min-height:0;
}

.jh-entree-mock__pkrow{
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns: 3fr 1fr;
    gap:0;
    align-items:stretch;
}

.jh-entree-mock__left-bottom .jh-entree-mock__pkrow{
    height:100%;
}
.jh-entree-mock__left-bottom .jh-entree__pk-variants{
    height:100%;
}
.jh-entree-mock__left-bottom .jh-entree__pk-variants .jh-entree__card{
    height:100%;
}
.jh-entree-mock__left-bottom .jh-entree-mock__pkrow > *{
    min-height:0;
}
.jh-entree-mock__left-bottom .jh-entree-mock__pkrow .jh-entree__card{
    height:100%;
}

.jh-entree-mock__right{
    display:flex;
    flex-direction:column;
    gap:0;
    align-items:stretch;
}

/* Top row: left = diablitos (tall), right = stack (tenders + onion) */
.jh-entree-mock__right-toprow{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:0;
    align-items:stretch;
    min-height: 330px;
}

.jh-entree-mock__right-diablitos,
.jh-entree-mock__right-stack{
    min-width:0;
}

.jh-entree-mock__right-stack{
    display:grid;
    grid-template-rows: 1fr 1fr;
    gap:0;
    align-items:stretch;
}

.jh-entree-mock__right-diablitos .jh-entree__card,
.jh-entree-mock__right-stack .jh-entree__card{
    height:100%;
}

/* Bottom row: full-width quesadilla */
.jh-entree-mock__right-bottomrow{
    min-width:0;
}

.jh-entree-mock__right-bottomrow .jh-entree__card{
    width:100%;
    min-height: 260px;
}

/* Tile color mapping (fixed, matches PNG) */
.jh-entree__card--papas-simples{
    --jh-card-bg: var(--jh-entree-rojo-lavado);
    color: var(--jh-entree-naranja-lavado);
}
.jh-entree__card--papas-simples .jh-entree__card-title,
.jh-entree__card--papas-simples .jh-entree__card-desc,
.jh-entree__card--papas-simples .jh-entree__card-price{
    color: var(--jh-entree-naranja-lavado);
}

.jh-entree__card--diablitos{
    --jh-card-bg: var(--jh-entree-rojo-fuerte);
    color: var(--jh-entree-naranja-lavado);
}
.jh-entree__card--diablitos .jh-entree__card-title,
.jh-entree__card--diablitos .jh-entree__card-desc,
.jh-entree__card--diablitos .jh-entree__card-price{
    color: var(--jh-entree-naranja-lavado);
}

.jh-entree__card--tenders,
.jh-entree__card--onion{
    --jh-card-bg: var(--jh-entree-naranja-fuerte);
    color: var(--jh-entree-negro);
}
.jh-entree__card--tenders .jh-entree__card-title,
.jh-entree__card--onion .jh-entree__card-title{
    color: var(--jh-entree-rojo-fuerte);
}
.jh-entree__card--tenders .jh-entree__card-price,
.jh-entree__card--onion .jh-entree__card-price{
    color: var(--jh-entree-rojo-fuerte);
}
.jh-entree__card--tenders .jh-entree__card-desc,
.jh-entree__card--onion .jh-entree__card-desc{
    color: var(--jh-entree-rojo-fuerte);
}

/* Keep these tiles compact like the mockup */
.jh-entree-mock .jh-entree__card{
    min-height: 150px;
}
.jh-entree-mock__right-toprow .jh-entree__card{
    min-height: 160px;
}
.jh-entree-mock__right-diablitos .jh-entree__card{
    min-height: 320px;
}


/* Diablitos (ENTREE mock): make the photo larger and anchor it bottom-left */
.jh-entree-mock__right-diablitos .jh-entree__card--img-left.has-img{
    padding-left: 220px; /* more room for the bigger circle */
}
.jh-entree-mock__right-diablitos .jh-entree__card-img{
    top: auto;
    bottom: -64px;
    left: -64px;
    right: auto;
    transform: none;
    width: 340px;
    height: 340px;
    border-radius: 999px;
}
.jh-entree-mock__right-diablitos .jh-entree__card-img img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: left bottom;
}
.jh-entree__left{
    background: var(--jh-e-left-bg, var(--jh-entree-naranja-fuerte));
    color: var(--jh-e-left-color, var(--jh-entree-negro));
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 18px;
}
.jh-entree__title{
    width:100%;
    text-align:left;
    text-transform: uppercase;
    font-family: var(--jh-item-title-font, 'JH_Knockout94', Arial, sans-serif);
    line-height: .9;
    letter-spacing: .02em;
    font-size: clamp(56px, 8vw, 160px);
}
.jh-entree__items{
    position: relative;
    overflow: hidden;
    display:grid;
    /* Original mockup: 2x2 on desktop (4 items). */
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap:0;
    color: var(--jh-e-right-color, var(--jh-entree-naranja-lavado));
}

/* Specials wrapper rendered as a separate block below .jh-entree */
.jh-entree__specials-wrap{
    margin: 0 0 18px;
    overflow:hidden;
}

.jh-entree__specials{
    display:grid;
    /* 3 variants + main + quesadilla (same line) */
    grid-template-columns: 3fr 1.2fr 2.2fr;
    gap:0;
    color: var(--jh-e-right-color, var(--jh-entree-negro));
}

/* Group for Papas Killer variants (CERDO / POLLO / CARNE) */
.jh-entree__pk-variants{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:0;
    align-items:stretch;
}

/* Make each variant tile tighter and ensure titles aren't covered */
.jh-entree__pk-variants .jh-entree__card--pk-variant{
    min-height: 170px;
    padding: 14px 140px 14px 14px;
}
.jh-entree__pk-variants .jh-entree__card--pk-variant .jh-entree__card-title{
    font-size: 20px;
    line-height: .95;
    position: relative;
    z-index: 5;
}

/* Independent image styling for variants inside specials-wrap */
.jh-entree__specials-wrap .jh-entree__card-img--pk{
    width: 200px;
    right: -44px;
}
.jh-entree__specials-wrap .jh-entree__card-img--pk img{
    object-fit: contain;
}

/* Per-variant tweaks (edit as needed) */
.jh-entree__specials-wrap .jh-entree__card-img--pk-cerdo{
    right:-50px;
}
.jh-entree__specials-wrap .jh-entree__card-img--pk-carne{
    right:-46px;
}
.jh-entree__specials-wrap .jh-entree__card-img--pk-pollo{
    right:-44px;
}

.jh-entree__specials .jh-entree__card{
    /* default backgrounds for specials; individual colors can still be driven by JS */
    background-color: var(--jh-card-bg, var(--jh-e-right-bg, var(--jh-entree-rojo-fuerte)));
    min-height: auto;
}
.jh-entree__specials .jh-entree__card--special-fixed.has-img{
    /* Always keep photo on the right; reserve space */
    padding-right: 140px;
    padding-left: 18px;
}
.jh-entree__specials .jh-entree__card--special-fixed .jh-entree__card-img{
    right: -38px;
    left: auto;
}
.jh-entree__specials .jh-entree__card--special-fixed .jh-entree__card-body{
    /* Copy always sits to the left of the photo, aligned towards it */
    /* align-items:flex-end; */
    text-align:right;
}
.jh-entree__specials .jh-entree__card--special-fixed .jh-entree__card-title,
.jh-entree__specials .jh-entree__card--special-fixed .jh-entree__card-desc,
.jh-entree__specials .jh-entree__card--special-fixed .jh-entree__card-price{
    text-align:right;
}

.jh-entree__card{
    background: var(--jh-card-bg, var(--jh-e-right-bg, var(--jh-entree-rojo-fuerte)));
    padding: 18px;
    position: relative;
    overflow: hidden;
    min-height: 170px;
    display:flex;
    flex-direction:column;
    gap: 10px;
}
.jh-entree__card.has-img{
    /* circular photo cutout */
    padding-right: 140px;
}
.jh-entree__card--img-left.has-img{
    padding-right: 18px;
    padding-left: 140px;
}
.jh-entree__card-img {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: -38px;
    transform: translateY(-50%);
    width: 202px;
    border-radius: 999px;
    overflow: hidden;
}
.jh-entree__card--img-left.has-img .jh-entree__card-img{
    right: auto;
    left: -38px;
}
.jh-entree__card-img img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
}
.jh-entree__card-body{
    position: relative;
    z-index: 3;
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
}

/* Alternate text alignment so the copy sits towards the outer corners.
   (When the photo is on the left, we align text to the right; when on the right, text aligns left.) */
.jh-entree__card--text-right .jh-entree__card-body{
    align-items:flex-end;
    text-align:right;
}
.jh-entree__card--text-right .jh-entree__card-title,
.jh-entree__card--text-right .jh-entree__card-desc,
.jh-entree__card--text-right .jh-entree__card-price{
    text-align:right;
}

.jh-entree__card--text-left .jh-entree__card-body{
    align-items:flex-start;
    text-align:left;
}
.jh-entree__card--text-left .jh-entree__card-title,
.jh-entree__card--text-left .jh-entree__card-desc,
.jh-entree__card--text-left .jh-entree__card-price{
    text-align:left;
}
.jh-entree__card-title{
    font-family: var(--jh-item-title-font, 'JH_Knockout94', Arial, sans-serif);
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1;
    font-size: 28px;
}
.jh-entree__card-desc{
    font-family: var(--jh-item-desc-font, Arial, sans-serif);
    font-size: 15px;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .01em;
    opacity:.95;
    font-weight: 600;
}
.jh-entree__card-price{
    margin-top:auto;
    font-family: var(--jh-item-desc-font, Arial, sans-serif);
    font-weight: 800;
    letter-spacing: .02em;
}

.jh-entree__card-variants{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.jh-entree__variant{
    font-family: var(--jh-item-desc-font, Arial, sans-serif);
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    /* font-weight: 800; */
    letter-spacing: .02em;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(23,18,19,0.22);
    color: inherit;
}

/* Quesadilla (photo background, spans 2 columns) */
.jh-entree__card--span-2{
    grid-column: span 2;
}

/* In the specials row we want a fixed 5-column layout, so span-2 would break the grid. */
.jh-entree__specials-wrap .jh-entree__card--span-2{
    grid-column: span 1;
}

.jh-entree__card--quesadilla{
    color: var(--jh-entree-naranja-lavado);
    text-shadow: 0 1px 1px rgba(23,18,19,0.35);
}

.jh-entree__card--quesadilla.has-bg .jh-entree__card-body{
    min-height: clamp(180px, 23vw, 320px);
    justify-content:flex-start;
}

.jh-entree__card--quesadilla .jh-entree__card-title,
.jh-entree__card--quesadilla .jh-entree__card-desc,
.jh-entree__card--quesadilla .jh-entree__card-price{
    color: var(--jh-entree-naranja-lavado);
}

.jh-entree__card--quesadilla .jh-entree__card-price{
    margin-top: 8px;
    font-size: 30px;
}

.jh-entree__card--quesadilla.has-bg .jh-entree__card-img{
    display:none;
}

/* Papas Killer (main + 3 variants) */
.jh-entree__card--pk-variant .jh-entree__card-title{
    font-size: 30px;
}

/* Make variant titles readable (they sit near the photo) */
.jh-entree__specials .jh-entree__card--pk-variant{
    padding-right: 150px; /* reserve for photo */
}
.jh-entree__specials .jh-entree__card--pk-variant .jh-entree__card-title{
    font-size: 34px;
    position:relative;
    z-index:5;
    text-shadow: 0 2px 0 rgba(23,18,19,0.15);
}

/* Color mapping by label class (stable, no nth-child) */
.jh-entree__card--pk-cerdo{
    --jh-card-bg: var(--jh-entree-rojo-fuerte);
    color: var(--jh-entree-naranja-lavado);
}
.jh-entree__card--pk-pollo{
    --jh-card-bg: var(--jh-entree-naranja-lavado);
    color: var(--jh-entree-rojo-fuerte);
}
.jh-entree__card--pk-carne{
    --jh-card-bg: var(--jh-entree-naranja-fuerte);
    color: var(--jh-entree-rojo-fuerte);
}

/* Papas killer main style */
.jh-entree__card--papas-killer-main{
    --jh-card-bg: var(--jh-entree-naranja-fuerte);
}
.jh-entree__card--papas-killer-main .jh-entree__card-title,
.jh-entree__card--papas-killer-main .jh-entree__card-desc,
.jh-entree__card--papas-killer-main .jh-entree__card-price{
    color:var(--jh-entree-rojo-fuerte);
}

.jh-entree__card--papas-killer-main .jh-entree__card-desc{
    /* max-width: 32ch; */
}

.jh-entree__card--papas-killer-main .jh-entree__card-title{
    font-size: 40px;
}

.jh-entree__card--papas-killer-main .jh-entree__card-price{
    margin-top: auto;
    font-size: 20px;
}

@media (max-width: 767px){

    .jh-entree-mock__left-top{
        height: 480px;
    }
    .jh-entree{
        grid-template-columns: 1fr;
    }
    .jh-entree__title{
        text-align:center;
        font-size: clamp(44px, 28vw, 120px);
    }
    .jh-entree__items{
        grid-template-columns: 1fr 1fr;
    }

    /* Mobile: if the item has an image, stack it (image full width) so the text
       doesn't get squeezed/cut and the photo is visible without cropping. */
    .jh-entree__card.has-img,
    .jh-entree__card--img-left.has-img{
        /* Reset the desktop "absolute circle" layout */
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap: 12px;
        padding: 18px;
        min-height: 0;
        overflow: visible;
    }
    .jh-entree__card-img{
        position: static;
        transform: none;
    }
    /* Override the more specific desktop rule that pushes the circle outside */
    .jh-entree__card--img-left.has-img .jh-entree__card-img{
        left: auto;
        right: auto;
    }
    .jh-entree__card-img img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .jh-entree__card-title{
        font-size: 40px;
    }
    .jh-entree__card-desc{
        /* word-break: break-word;
        hyphens: auto; */
    }

    .jh-entree__card--quesadilla.has-bg .jh-entree__card-body{
        min-height: 220px;
    }

    /* Entree mockup: stack blocks */
    .jh-entree-mock{
        grid-template-columns: 1fr;
    }
    .jh-entree-mock__left-top{
        grid-template-columns: 1fr;
    }
    .jh-entree-mock__right-toprow{
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .jh-entree-mock__right-stack{
        grid-template-rows: auto;
    }
    .jh-entree-mock__pkrow{
        grid-template-columns: 1fr;
    }
    .jh-entree-mock__hero-title{
        text-align:center;
        font-size: clamp(54px, 20vw, 110px);
    }
}


/* Mobile: text always above photo, photo as a full-width background block (no overlay). */
@media (max-width: 767px){
    .jh-entree__items{
        grid-template-columns: 1fr;
    }
    .jh-entree__card--span-2{
        grid-column: span 1;
    }

    /* Remove card padding so the photo can be flush to the card edges,
       while keeping comfortable padding for text only. */
    .jh-entree__card.has-img,
    .jh-entree__card--img-left.has-img{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap: 0;
        padding: 0;
    }

    .jh-entree__card.has-img .jh-entree__card-body,
    .jh-entree__card--img-left.has-img .jh-entree__card-body{
        order: 1; /* always first */
        padding: 20px 20px 20px 20px;
    }

    .jh-entree__card.has-img .jh-entree__card-img,
    .jh-entree__card--img-left.has-img .jh-entree__card-img{
        order: 2; /* always after text */
        width: auto;
        height: auto;
        margin-top: -25px;
    }

    .jh-entree__card.has-img .jh-entree__card-img img,
    .jh-entree__card--img-left.has-img .jh-entree__card-img img{
        width:100%;
        height:100%;
        object-fit: contain;
    }

    .jh-entree__card--quesadilla.has-bg,
    .jh-entree__card--quesadilla.has-bg .jh-entree__card-body{
        min-height: 240px;
    }
}
.jh-planazos__price{
    white-space:nowrap;
    font-weight: 600;
}

@media (max-width: 767px){
    .jh-planazos{
        grid-template-columns: 1fr;
    }
    .jh-planazos__img{
        min-height: 160px;
    }
    .jh-planazos__right{
        justify-content:flex-start;
    }
    .jh-planazos__list{
        max-width: none;
    }
    .jh-entree-mock__right-diablitos .jh-entree__card--img-left.has-img {
        padding-left: 0px;
    }
}

/* -------------------------------------------------------
   PAPAS SIMPLE: imagen lateral derecha — desktop y mobile
   Usa doble clase + has-img para superar los resets
   generales de .jh-entree__card.has-img en mobile.
------------------------------------------------------- */

/* Desktop: grid 2 columnas, imagen flush derecha */
.jh-entree__card--papas-simples.has-img {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: stretch;
    padding: 18px;
    overflow: hidden;
}
.jh-entree__card--papas-simples.has-img .jh-entree__card-body {
    grid-column: 1;
    grid-row: 1;

}
.jh-entree__card--papas-simples.has-img .jh-entree__card-img {
    grid-column: 2;
    grid-row: 1;
}
.jh-entree__card--papas-simples.has-img .jh-entree__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Mobile: mismo grid, imagen más angosta para no aplastar el texto */
@media (max-width: 767px) {

    .jh-entree-mock__hero-title .jh-entree-mock__hero-l1{
        font-size: clamp(54px, 80vw, 50vw);
    }

    .jh-entree-mock__hero-title .jh-entree-mock__hero-l2{
        font-size: clamp(54px, 80vw, 16.2vw);
    }

    .jh-entree__card--papas-simples.has-img {
        display: grid !important;
        grid-template-columns: 1fr 130px !important;
        align-items: stretch !important;
        padding: 18px !important;
        gap: 0 !important;
        flex-direction: unset !important;
        min-height: 160px;
    }
    .jh-entree__card--papas-simples.has-img .jh-entree__card-body {
        grid-column: 1 !important;
        grid-row: 1 !important;
        order: unset !important;
        padding: 0 !important;
        align-self: center;
    }
    .jh-entree__card--papas-simples.has-img .jh-entree__card-img {
        grid-column: 2 !important;
        grid-row: 1 !important;
        order: unset !important;
        position: static !important;
        transform: none !important;
        width: 130px !important;
        height: 100% !important;
        border-radius: 0 !important;
        align-self: stretch !important;
        margin: -18px -18px -18px 18px !important;
        margin-top: 0 !important;
    }
    .jh-entree__card--papas-simples.has-img .jh-entree__card-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
        object-position: center top !important;
    }
}