/* ==================================================
   REUSABLE PROMOTION SECTION
   HOLIDAYS / SEASONAL / DEALS / ANNOUNCEMENTS
================================================== */


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

.featured-section {

    position: relative;

    width: 100%;

    margin-top: 90px;

    padding:
        70px 20px;

    background:
        linear-gradient(
            135deg,
            #f7eedf 0%,
            #f4ead6 50%,
            #efe1c8 100%
        );

    overflow: hidden;
}


/* ==================================================
   PROMO CONTAINER
================================================== */

.featured-container {

    position: relative;

    width:
        min(
            900px,
            100%
        );

    margin:
        0 auto;

    padding:
        48px 40px;

    border:
        1px solid
        rgba(45, 86, 59, 0.18);

    border-radius:
        22px;

    background:
        #fffaf0;

    text-align:
        center;

    box-shadow:
        0 16px 40px
        rgba(44, 68, 50, 0.12);
}


/* ==================================================
   PROMO BADGE
================================================== */

.featured-badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        18px;

    padding:
        7px 14px;

    border-radius:
        999px;

    background:
        #2d563b;

    color:
        #fffaf0;

    font-size:
        0.82rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* ==================================================
   PROMO ICON
================================================== */

.featured-icon {

    margin-bottom:
        12px;

    font-size:
        3.5rem;

    line-height:
        1;
}


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

.featured-title {

    margin:
        0 0 16px;

    color:
        #1f3f2c;

    font-size:
        clamp(
            2rem,
            5vw,
            3rem
        );

    font-weight:
        800;

    line-height:
        1.15;
}


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

.featured-description {

    max-width:
        720px;

    margin:
        0 auto 18px;

    color:
        #5d6d62;

    font-size:
        1.08rem;

    line-height:
        1.75;
}


/* ==================================================
   PROMO NOTE
================================================== */

.featured-note {

    max-width:
        680px;

    margin:
        0 auto 28px;

    color:
        #21382a;

    font-size:
        1.05rem;

    font-weight:
        700;
}


/* ==================================================
   PROMO ACTIONS
================================================== */

.featured-actions {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        24px;
}


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

.featured-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        54px;

    padding:
        13px 24px;

    border-radius:
        10px;

    font-size:
        1rem;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


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

.featured-primary-button {

    border:
        2px solid
        #2d563b;

    background:
        linear-gradient(
            135deg,
            #2d563b,
            #1f3f2c
        );

    color:
        #fffaf0;

    box-shadow:
        0 8px 20px
        rgba(45, 86, 59, 0.18);
}


.featured-primary-button:hover,
.featured-primary-button:focus {

    transform:
        translateY(-2px);

    color:
        #fffaf0;

    box-shadow:
        0 12px 26px
        rgba(45, 86, 59, 0.24);
}


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

.featured-secondary-button {

    border:
        2px solid
        #2d563b;

    background:
        #fffaf0;

    color:
        #1f3f2c;
}


.featured-secondary-button:hover,
.featured-secondary-button:focus {

    transform:
        translateY(-2px);

    background:
        #2d563b;

    color:
        #fffaf0;
}


/* ==================================================
   SMALL TEXT
================================================== */

.featured-small-text {

    margin:
        20px 0 0;

    color:
        #7d897f;

    font-size:
        0.9rem;
}


/* ==================================================
   OPTIONAL SALE / DEAL STYLE
================================================== */

.featured-section.sale {

    background:
        linear-gradient(
            135deg,
            #f8eadf 0%,
            #f3dfca 100%
        );
}


.featured-section.sale .featured-badge {

    background:
        #7a3e22;
}


/* ==================================================
   OPTIONAL HOLIDAY STYLE
================================================== */

.featured-section.holiday {

    background:
        linear-gradient(
            135deg,
            #f7f0df 0%,
            #eaf2e6 100%
        );
}


/* ==================================================
   OPTIONAL SEASONAL STYLE
================================================== */

.featured-section.seasonal {

    background:
        linear-gradient(
            135deg,
            #f5ecd8 0%,
            #edf3e9 100%
        );
}


/* ==================================================
   OPTIONAL ANNOUNCEMENT STYLE
================================================== */

.featured-section.announcement {

    background:
        linear-gradient(
            135deg,
            #eef3ea 0%,
            #f8f2e5 100%
        );
}


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

@media (max-width: 768px) {

    .featured-section {

        margin-top:
            80px;

        padding:
            50px 16px;
    }


    .featured-container {

        padding:
            38px 28px;
    }


    .featured-actions {

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .featured-button {

        width:
            100%;
    }

}


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

@media (max-width: 500px) {

    .featured-section {

        margin-top:
            72px;

        padding:
            34px 10px;
    }


    .featured-container {

        padding:
            30px 20px;

        border-radius:
            16px;
    }


    .featured-icon {

        font-size:
            3rem;
    }


    .featured-title {

        font-size:
            1.9rem;
    }


    .featured-description {

        font-size:
            1rem;
    }


    .featured-note {

        font-size:
            1rem;
    }


    .featured-button {

        min-height:
            58px;

        padding:
            14px 18px;

        font-size:
            1rem;
    }

}