/* ==========================================================
   DE KOFFIE POT - EXPLORE CARDS

   Behaviour / positioning only.
   Divi controls:
   - Background images
   - Background overlays
   - Hover background images
   - Fonts
   - Font sizes
   - Colours
   - Button styling
   - Button alignment
   - Card height
   ========================================================== */

:root {

    /* Soft fade speed */
    --dkp-speed: 0.55s;
    --dkp-easing: ease-in-out;


    /*
     * FIRST HEADING
     * 50% = centre of card
     */
    --dkp-front-top: 50%;

    /*
     * Fine adjustment:
     * negative = UP
     * positive = DOWN
     */
    --dkp-front-y: 0px;


    /*
     * First heading movement as it disappears
     */
    --dkp-front-exit-y: -15px;


    /*
     * SECOND HEADING
     * 50% = centre of card
     */
    --dkp-hover-top: 50%;

    /*
     * Fine adjustment:
     * negative = UP
     * positive = DOWN
     */
    --dkp-hover-y: -20px;


    /*
     * BUTTON VERTICAL POSITION
     *
     * Button remains a normal Divi module.
     * This simply moves it DOWN from its natural position.
     *
     * Increase = move DOWN
     * Decrease = move UP
     *
     * With a 500px card, start around 350px.
     */
    --dkp-button-y: 350px;

}


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

.dkp-card {
    position: relative;
    overflow: hidden;
}


/* ==========================================================
   TRANSITIONS
   ========================================================== */

.dkp-card-front,
.dkp-card-hover,
.dkp-card-button {
    z-index: 2;

    transition:
        opacity var(--dkp-speed) var(--dkp-easing),
        transform var(--dkp-speed) var(--dkp-easing);
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 981px) and (hover: hover) {


    /* ------------------------------------------------------
       FIRST HEADING
       FOOD / DRINKS / CAKES
       ------------------------------------------------------ */

    .dkp-card-front {
        position: absolute !important;

        top: var(--dkp-front-top) !important;
        right: 0 !important;
        left: 0 !important;

        width: 100% !important;

        margin: 0 !important;

        opacity: 1;

        transform:
            translateY(-50%)
            translateY(var(--dkp-front-y));
    }


    /* ------------------------------------------------------
       SECOND HEADING
       ------------------------------------------------------ */

    .dkp-card-hover {
        position: absolute !important;

        top: var(--dkp-hover-top) !important;
        right: 0 !important;
        left: 0 !important;

        width: 100% !important;

        margin: 0 !important;

        opacity: 0;

        transform:
            translateY(-50%)
            translateY(var(--dkp-hover-y));
    }


    /* ------------------------------------------------------
       BUTTON

       Remains a normal Divi block module.
       Divi controls its actual alignment and appearance.
       ------------------------------------------------------ */

    .dkp-card-button {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;

        margin: 0 !important;

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(var(--dkp-button-y)) !important;
    }


    /* ------------------------------------------------------
       HOVER
       ------------------------------------------------------ */

    .dkp-card:hover .dkp-card-front {
        opacity: 0;

        transform:
            translateY(-50%)
            translateY(var(--dkp-front-exit-y));
    }


    .dkp-card:hover .dkp-card-hover {
        opacity: 1;

        transform:
            translateY(-50%)
            translateY(var(--dkp-hover-y));
    }


    .dkp-card:hover .dkp-card-button {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(var(--dkp-button-y)) !important;
    }

}


/* ==========================================================
   TABLET / MOBILE
   Show all content and centre it within the card
   ========================================================== */

@media (max-width: 980px) {

    .dkp-card {
        display: flex !important;
        flex-direction: column !important;

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

        text-align: center;

        gap: 18px;
    }


    .dkp-card-front,
    .dkp-card-hover,
    .dkp-card-button {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 90% !important;
        max-width: 90% !important;

        margin: 0 auto !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;

        pointer-events: auto;
    }


    .dkp-card-button {
        width: 100% !important;
        max-width: 100% !important;
    }

}