/* =========================================================
   H & CHICKEN - PROMO CARDS
   CSS ONLY
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.promo-section {
    width: 100%;

    padding: 30px 32px 42px;

    background: #ffffff;
}


/* =========================================================
   CARD ROW
   ========================================================= */

.promo-grid {
    width: 100%;
    max-width: 1710px;

    margin: 0 auto;

    display: flex;
    flex-wrap: nowrap;

    gap: 20px;
}


/* =========================================================
   BASE CARD

   Original source desktop:
   aspect-ratio: 2.3 / 1
   flex: calc(50% - 1rem)
   border-radius: 1.2rem
   ========================================================= */

.promo-card {
    position: relative;

    flex: 0 0 calc(50% - 10px);
    min-width: calc(50% - 10px);

    aspect-ratio: 2.3 / 1;

    overflow: hidden;

    border-radius: 12px;

    color: #ffffff;

    isolation: isolate;


    /* DEFAULT COLOR VARIABLES */

    --bg-a: #111111;
    --bg-b: #181818;
    --bg-c: #272727;
    --bg-d: #363636;

    --panel-1: rgba(0, 0, 0, 0.44);
    --panel-2: rgba(0, 0, 0, 0.36);
    --panel-3: rgba(0, 0, 0, 0.28);
    --panel-4: rgba(0, 0, 0, 0.20);

    --separator: rgba(255, 255, 255, 0.018);

    --bottom-block: rgba(0, 0, 0, 0.58);
    --bottom-line: rgba(0, 0, 0, 0.34);


    background:
        linear-gradient(
            90deg,
            var(--bg-a) 0%,
            var(--bg-b) 30%,
            var(--bg-c) 66%,
            var(--bg-d) 100%
        );
}


/* =========================================================
   RED CARD COLORS
   ========================================================= */

.promo-card-featured {
    --bg-a: #670000;
    --bg-b: #850000;
    --bg-c: #b40000;
    --bg-d: #ed0029;

    --panel-1: rgba(70, 0, 0, 0.50);
    --panel-2: rgba(78, 0, 0, 0.42);
    --panel-3: rgba(88, 0, 0, 0.34);
    --panel-4: rgba(100, 0, 0, 0.24);

    --separator: rgba(255, 20, 20, 0.09);

    --bottom-block: rgba(104, 0, 0, 0.74);
    --bottom-line: rgba(104, 0, 0, 0.48);
}


/* =========================================================
   BLACK CARD COLORS

   EXACT SAME PATTERN GEOMETRY
   ========================================================= */

.promo-card-deal {
    --bg-a: #090909;
    --bg-b: #111111;
    --bg-c: #202020;
    --bg-d: #343536;

    --panel-1: rgba(0, 0, 0, 0.54);
    --panel-2: rgba(0, 0, 0, 0.44);
    --panel-3: rgba(0, 0, 0, 0.34);
    --panel-4: rgba(0, 0, 0, 0.24);

    --separator: rgba(255, 255, 255, 0.022);

    --bottom-block: rgba(0, 0, 0, 0.62);
    --bottom-line: rgba(0, 0, 0, 0.40);
}


/* =========================================================
   LARGE ANGLED PANELS

   SAME SHAPE ON BOTH CARDS.
   ONLY VARIABLES CHANGE.
   ========================================================= */

.promo-card::before {
    content: "";

    position: absolute;

    z-index: 0;

    top: -10%;
    left: -5%;

    width: 110%;
    height: 120%;

    transform:
        skewX(-3.6deg)
        scaleX(1.015);

    transform-origin: center;


    background:

        /* PANEL 1 */
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 7%,

            var(--panel-1) 7%,
            var(--panel-1) 22%,

            var(--separator) 22%,
            var(--separator) 24%,

            transparent 24%,
            transparent 100%
        ),


        /* PANEL 2 */
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 28%,

            var(--panel-2) 28%,
            var(--panel-2) 44%,

            var(--separator) 44%,
            var(--separator) 46%,

            transparent 46%,
            transparent 100%
        ),


        /* PANEL 3 */
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 50%,

            var(--panel-3) 50%,
            var(--panel-3) 67%,

            var(--separator) 67%,
            var(--separator) 69%,

            transparent 69%,
            transparent 100%
        ),


        /* PANEL 4 */
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 72%,

            var(--panel-4) 72%,
            var(--panel-4) 89%,

            transparent 89%,
            transparent 100%
        );

    pointer-events: none;
}


/* =========================================================
   BOTTOM BLOCK STRIP
   ========================================================= */

.promo-card::after {
    content: "";

    position: absolute;

    z-index: 0;

    left: 0;
    right: 0;
    bottom: 0;

    height: 59px;


    background:

        repeating-linear-gradient(
            90deg,

            var(--bottom-block) 0,
            var(--bottom-block) 20px,

            transparent 20px,
            transparent 48px
        );


    border-bottom:
        11px solid var(--bottom-line);

    pointer-events: none;
}


/* =========================================================
   CONTENT
   ========================================================= */

.promo-content {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    display: flex;
}


/* =========================================================
   COPY AREA

   Original CardTile desktop:
   50%
   15px 5px 15px 20px
   ========================================================= */

.promo-copy {
    position: relative;

    z-index: 3;

    flex: 1 1 50%;

    width: 50%;

    min-width: 0;

    padding:
        15px
        5px
        15px
        20px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    gap: clamp(2px, 0.2vw, 30px);
}


/* =========================================================
   PRODUCT AREA
   ========================================================= */

.promo-product {
    position: relative;

    z-index: 2;

    flex: 0 1 50%;

    width: 50%;
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   UNUSED LABEL
   ========================================================= */

.promo-label {
    display: none;
}


/* =========================================================
   TITLE

   REAL NATIONAL 2 CONDENSED
   comes from core.css
   ========================================================= */

.promo-title {
    margin: 0;

    max-width: 100%;

    color: #ffffff;

    font-family:
        "National 2 Condensed",
        "Arial Narrow",
        Arial,
        sans-serif;

    font-size:
        clamp(22px, 1.25vw, 29.76px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: 1px;

    text-transform: uppercase;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.promo-description {
    margin:
        4px
        0
        0;

    max-width: 440px;

    color: #ffffff;

    font-family:
        "Helvetica Neue",
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(12px, 0.8vw, 18px);

    font-weight: 400;

    line-height: 1.4;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;

    overflow: hidden;
}


/* =========================================================
   BOTTOM AREA
   ========================================================= */

.promo-bottom {
    width: 80%;

    margin-top: auto;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


/* =========================================================
   TERMS
   ========================================================= */

.promo-terms,
.promo-price {
    margin: 0;

    padding: 0;

    border: 0;

    background: transparent;

    color: #ffffff;

    font-family:
        "Helvetica Neue",
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(12px, 0.8vw, 18px);

    font-weight: 500;

    line-height: 1.2;
}


.promo-terms {
    text-decoration: underline;

    text-decoration-skip-ink: none;
}


.promo-price {
    font-weight: 700;

    text-decoration: underline;
}


/* =========================================================
   BUTTON
   ========================================================= */

.promo-button {
    min-width: 165px;
    height: 44px;

    margin-top:
        clamp(1px, 0.55vw, 10px);

    padding:
        0
        40px;

    border: 0;

    border-radius: 22px;

    font-family:
        "Helvetica Neue",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    font-weight: 700;

    line-height: 44px;

    text-align: center;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color 120ms ease,
        color 120ms ease,
        transform 120ms ease;
}


.promo-button:active {
    transform: scale(0.98);
}


.promo-button-red {
    background: #e4002b;

    color: #ffffff;
}


.promo-button-red:hover {
    background: #c8102e;
}


.promo-button-white {
    background: #ffffff;

    color: #e4002b;
}


.promo-button-white:hover {
    background: #f3f3f3;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.promo-product-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;

    pointer-events: none;

    user-select: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media only screen and (max-width: 819px) {

    .promo-section {
        padding-left: 16px;
        padding-right: 16px;
    }


    .promo-grid {
        flex-direction: column;
    }


    .promo-card {
        flex: none;

        width: 100%;
        min-width: 100%;

        aspect-ratio: 2.3 / 1;
    }


    .promo-title {
        font-size:
            clamp(24px, 6vw, 35px);
    }


    .promo-description {
        font-size:
            clamp(16px, 3vw, 22px);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media only screen and (max-width: 659px) {

    .promo-section {
        padding:
            18px
            12px
            24px;
    }


    .promo-grid {
        gap: 12px;
    }


    .promo-card {
        aspect-ratio: auto;

        min-height: 310px;
    }


    .promo-copy {
        flex-basis: 56%;

        width: 56%;

        padding:
            15px
            5px
            15px
            15px;
    }


    .promo-product {
        flex-basis: 44%;

        width: 44%;
    }


    .promo-title {
        font-size:
            clamp(16px, 5vw, 18px);

        line-height: 1.1;
    }


    .promo-description {
        font-size:
            clamp(11px, 1.15em, 12px);
    }


    .promo-bottom {
        width: 100%;
    }


    .promo-button {
        min-width: 138px;

        padding:
            0
            28px;
    }

}