/* ==========================================================
   28 PRIVÉ — GALLERY 2 NEW HOME / OUR PROCESS

   Cream Theme
   Desktop and tablet layout preserved.

   MOBILE UPDATE:
   Vertically center card title and description.
   Equal space above and below the text group.
========================================================== */


/* ==========================================================
   1. MAIN SECTION
========================================================== */

.keyheld-steps {
    --ks-section: #faf7f0;
    --ks-image-tint: #eee9df;
    --ks-card: #faf7f0;
    --ks-gold: #c9a668;
    --ks-ivory: #0d264f;
    --ks-border: #e9e2d0;

    --ks-content-gutter: clamp(24px, 5vw, 96px);
    --ks-column-gap: 24px;

    position: relative;
    display: block;
    width: 100%;

    margin: 0;
    padding: 0;

    background: var(--ks-section);
    border: 0;
    box-shadow: none;
}

.keyheld-steps,
.keyheld-steps *,
.keyheld-steps *::before,
.keyheld-steps *::after {
    box-sizing: border-box;
}


/* ==========================================================
   2. HEADING AREA
========================================================== */

.keyheld-steps .keyheld-steps__heading-area {
    width: 100%;
    margin: 0;
    padding: 64px 0 40px;

    background: var(--ks-section);
    text-align: start;
}


/* ==========================================================
   3. SHARED CONTENT CONTAINER
========================================================== */

.keyheld-steps .keyheld-steps__heading,
.keyheld-steps .keyheld-steps__container {
    position: relative;

    width: calc(
        100% - (2 * var(--ks-content-gutter))
    ) !important;

    max-width: 1720px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}

.keyheld-steps .keyheld-steps__heading {
    text-align: start;
}


/* ==========================================================
   4. SECTION SUBTITLE
========================================================== */

.keyheld-steps .keyheld-steps__subtitle {
    margin: 0 0 9px;

    color: var(--ks-gold) !important;

    font-family: "EB Garamond", Georgia, serif !important;
    font-size: 21px !important;
    font-weight: 700 !important;

    line-height: 1.35;
    letter-spacing: 1.5px;
}


/* ==========================================================
   5. SECTION TITLE
========================================================== */

.keyheld-steps .keyheld-steps__title {
    margin: 0;

    color: #0d264f !important;

    font-family: "EB Garamond", Georgia, serif !important;
    font-size: 25px !important;
    font-weight: 700 !important;

    line-height: 1.2;
}


/* ==========================================================
   6. GALLERY AREA
========================================================== */

.keyheld-steps .keyheld-steps__gallery-area {
    position: relative;

    width: 100%;
    margin: 0;
    padding: 0 0 68px;

    background: var(--ks-section);

    border: 0 !important;
    outline: 0;
    box-shadow: none;

    overflow: hidden;
}


/* ==========================================================
   7. FULL WIDTH PANEL BACKGROUND
========================================================== */

.keyheld-steps .keyheld-steps__gallery-area::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 138px;

    background: #eee9df;

    pointer-events: none;
    z-index: 0;
}


/* ==========================================================
   8. GALLERY CONTAINER
========================================================== */

.keyheld-steps .keyheld-steps__container {
    z-index: 1;
    background: transparent;
    border: 0;
}

.keyheld-steps .keyheld-steps__carousel,
.keyheld-steps .keyheld-steps__static {
    position: relative;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;
}


/* ==========================================================
   9. CARD ITEM
========================================================== */

.keyheld-steps .keyheld-steps__item {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    width: 100%;
    min-width: 0;
    min-height: 263px;

    margin: 0;
    padding: 32px 0 0;

    background: transparent;
}


/* Background images disabled */

.keyheld-steps .keyheld-steps__texture {
    display: none !important;
}


/* ==========================================================
   10. CARD BASE
   DESKTOP / TABLET UNCHANGED
========================================================== */

.keyheld-steps .keyheld-steps__card {
    position: relative;
    z-index: 1;

    flex: 1 0 auto;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: flex-start;

    width: 100% !important;
    min-width: 0;
    min-height: 226px;

    margin: 0 !important;

    padding: 27px 16px 24px;

    background: var(--ks-card) !important;

    border: 1px solid var(--ks-border);
    border-radius: 0;

    box-shadow: none;

    text-align: start;

    transition: border-color .25s ease;
}


/* CARD HOVER */

.keyheld-steps .keyheld-steps__card:hover {
    border-color: var(--ks-gold);
}


/* ==========================================================
   11. STEP NUMBER
========================================================== */

.keyheld-steps .keyheld-steps__number {
    display: none;

    margin: 0 0 9px;

    color: var(--ks-gold) !important;

    font-family: "EB Garamond", Georgia, serif !important;
    font-size: 28.1px !important;
    font-weight: 700 !important;

    line-height: 1.15;
}


/* ==========================================================
   12. CARD TITLE
========================================================== */

.keyheld-steps .keyheld-steps__card-title {
    margin: 0 0 12px;

    color: var(--ks-gold) !important;

    font-family: "EB Garamond", Georgia, serif !important;
    font-size: 23px !important;
    font-weight: 700 !important;

    line-height: 1.25;
}


/* ==========================================================
   13. CARD DESCRIPTION
========================================================== */

.keyheld-steps .keyheld-steps__description {
    width: 100%;

    margin: 0;

    color: var(--ks-ivory) !important;

    font-family: "EB Garamond", Georgia, serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;

    line-height: 1.47;

    overflow-wrap: break-word;
}


/* ==========================================================
   14. OWL CAROUSEL
========================================================== */

.keyheld-steps .owl-stage {
    display: flex;
    align-items: stretch;
}

.keyheld-steps .owl-item {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
}

.keyheld-steps .owl-item > .keyheld-steps__item {
    width: 100%;
    height: 100%;
}

.keyheld-steps .owl-stage-outer {
    overflow: hidden;
    border: 0 !important;
}


/* ==========================================================
   15. CAROUSEL NAVIGATION
========================================================== */

.keyheld-steps .owl-nav {
    position: static !important;

    display: flex !important;
    justify-content: center;
    align-items: center;

    gap: 24px;

    margin: 35px 0 0 !important;
    padding: 0;
}

.keyheld-steps .owl-nav button.owl-prev,
.keyheld-steps .owl-nav button.owl-next {
    position: static !important;

    display: inline-flex !important;
    justify-content: center;
    align-items: center;

    width: 30px;
    height: 30px;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
    color: #d8c7a9 !important;

    font-size: 24px !important;
    line-height: 1 !important;

    box-shadow: none !important;
    transform: none !important;

    cursor: pointer;
}

.keyheld-steps .owl-nav button:hover {
    color: #0d264f !important;
}

.keyheld-steps .owl-nav button span {
    color: inherit;
    font-size: inherit;
}

.keyheld-steps .owl-dots {
    display: none !important;
}


/* ==========================================================
   16. STATIC GRID
========================================================== */

.keyheld-steps .keyheld-steps__static {
    display: grid;

    grid-template-columns: repeat(
        var(--keyheld-desktop-columns, 5),
        minmax(0, 1fr)
    );

    column-gap: var(--ks-column-gap);
    row-gap: 0;

    align-items: stretch;
}

.keyheld-steps .keyheld-steps__static > .keyheld-steps__item {
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
}


/* ==========================================================
   17. ELEMENTOR WIDGET BACKGROUND
========================================================== */

.elementor-widget-muzex_gallery2_new_home,
.elementor-widget-muzex_gallery2_new_home > .elementor-widget-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;

    background: #faf7f0;

    border: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================
   18. DESKTOP — 1200px+
   UNCHANGED
========================================================== */

@media (min-width: 1200px) {

    .keyheld-steps .keyheld-steps__card {
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

}


/* ==========================================================
   19. TABLET — 768px TO 1199px
   UNCHANGED
========================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

    .keyheld-steps {
        --ks-content-gutter: 40px;
        --ks-column-gap: 20px;
    }

    .keyheld-steps .keyheld-steps__heading-area {
        padding-top: 52px;
    }

    .keyheld-steps .keyheld-steps__gallery-area {
        padding-bottom: 56px;
    }

    .keyheld-steps .keyheld-steps__card {
        min-height: 240px;
        padding: 26px 15px 24px;
    }

}


/* ==========================================================
   20. TABLET STATIC GRID
========================================================== */

@media (max-width: 1199px) {

    .keyheld-steps .keyheld-steps__static {
        grid-template-columns: repeat(
            3,
            minmax(0, 1fr)
        );
    }

    .keyheld-steps .keyheld-steps__gallery-area::before {
        display: none !important;
        content: none !important;
    }

    .keyheld-steps .keyheld-steps__item {
        background-image: linear-gradient(
            to bottom,
            #eee9df 0,
            #eee9df 138px,
            transparent 138px,
            transparent 100%
        ) !important;

        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
    }

}


/* ==========================================================
   21. SMALL TABLET
========================================================== */

@media (max-width: 991px) {

    .keyheld-steps .keyheld-steps__static {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    }

}


/* ==========================================================
   22. MOBILE — 767px AND BELOW

   NEW UPDATE:
   Vertically center title and description
   inside each card.

   Same spacing above and below content.
========================================================== */

@media (max-width: 767px) {

    .keyheld-steps {
        --ks-content-gutter: 24px;
        --ks-column-gap: 16px;
    }

    .keyheld-steps .keyheld-steps__heading-area {
        padding: 38px 0 33px;
    }

    /* SECTION SUBTITLE */

    .keyheld-steps .keyheld-steps__subtitle {
        font-size: 19px !important;
        font-weight: 700 !important;
    }

    /* SECTION TITLE */

    .keyheld-steps .keyheld-steps__title {
        font-size: 21px !important;
        font-weight: 500 !important;
    }

    /* GALLERY BOTTOM SPACING */

    .keyheld-steps .keyheld-steps__gallery-area {
        padding-bottom: 42px;
    }

    /* ==========================================
       MOBILE CARD ITEM
    ========================================== */

    .keyheld-steps .keyheld-steps__item {
        align-items: stretch;
    }

    /* ==========================================
       MOBILE CARD VERTICAL CENTERING
       MAIN UPDATE
    ========================================== */

    .keyheld-steps .keyheld-steps__card {
        min-height: 226px;

        display: flex !important;
        flex-direction: column !important;

        align-items: flex-start !important;

        /* Equal free space above and below */
        justify-content: center !important;

        /* Keep existing mobile padding */
        padding: 27px 18px !important;

        text-align: start !important;
    }

    /* MOBILE CARD TITLE */

    .keyheld-steps .keyheld-steps__card-title {
        font-size: 21px !important;
        font-weight: 500 !important;

        /* Original title/description gap */
        margin-bottom: 12px;
    }

    /* MOBILE CARD DESCRIPTION */

    .keyheld-steps .keyheld-steps__description {
        font-size: 14.5px !important;
        font-weight: 400 !important;
    }

    .keyheld-steps .owl-nav {
        margin-top: 20px !important;
    }

}


/* ==========================================================
   23. MOBILE STATIC GRID
========================================================== */

@media (max-width: 575px) {

    .keyheld-steps .keyheld-steps__static {
        grid-template-columns: minmax(0, 1fr);
    }

}


/* ==========================================================
   24. SMALL MOBILE — 480px AND BELOW
========================================================== */

@media (max-width: 480px) {

    .keyheld-steps .keyheld-steps__card {
        /* Keep original small mobile padding */
        padding: 25px 16px 24px !important;

        /* Keep content vertically centered */
        justify-content: center !important;
    }

}


/* ==========================================================
   25. NARROW MOBILE — 380px AND BELOW
========================================================== */

@media (max-width: 380px) {

    .keyheld-steps {
        --ks-content-gutter: 20px;
    }

}


/* ==========================================================
   26. ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .keyheld-steps .keyheld-steps__card {
        transition: none;
    }

}








/* ==========================================================
   28 PRIVÉ — OUR PROCESS
   RESPONSIVE GRID VERTICAL GAP
   Keep horizontal spacing unchanged
========================================================== */

/* Tablet and smaller screens */
@media (max-width: 1199px) {

    .keyheld-steps .keyheld-steps__static {
        row-gap: 20px !important;
    }

}

/* Mobile screens */
@media (max-width: 575px) {

    .keyheld-steps .keyheld-steps__static {
        row-gap: 16px !important;
    }

}