/*  ===========================
    === CK CARD COLUMNS     ===
    ===========================

    Apply to Divi columns with the custom class: ck-card-column
    Goal: blog-like card styling + button pinned bottom-right.
*/

.ck-card-column {
    --ck-card-radius: 25px;
    --ck-card-pad: 25px;
    --ck-card-gap: var(--ck-card-pad);
    --ck-card-img-height: 250px;

    position: relative;
    background: #fff;
    border-radius: var(--ck-card-radius);
    box-shadow: 0px 12px 25px -6px var(--shadow);
    overflow: hidden;
    padding-bottom: var(--ck-card-pad);
    transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
}

.ck-card-column:hover {
    box-shadow: 0px 20px 45px -9px var(--shadow);
    transform: translateY(-10px);
}

/* Divi sometimes wraps column content in .et_pb_column_inner */
.ck-card-column,
.ck-card-column > .et_pb_column_inner {
    display: flex;
    flex-direction: column;
}

.ck-card-column > .et_pb_column_inner {
    flex: 1 1 auto;
    width: 100%;
}

/* Side padding for all direct modules, except the top image */
.ck-card-column > .et_pb_module,
.ck-card-column > .et_pb_column_inner > .et_pb_module {
    padding-left: var(--ck-card-pad);
    padding-right: var(--ck-card-pad);
    margin-bottom: var(--ck-card-gap);
}

.ck-card-column > .et_pb_module:last-child,
.ck-card-column > .et_pb_column_inner > .et_pb_module:last-child {
    margin-bottom: 0;
}

.ck-card-column > .et_pb_module.et_pb_image,
.ck-card-column > .et_pb_column_inner > .et_pb_module.et_pb_image {
    padding-left: 0;
    padding-right: 0;
}

/* Create consistent top padding for the first non-image module */
.ck-card-column > .et_pb_module:not(.et_pb_image):first-child,
.ck-card-column > .et_pb_column_inner > .et_pb_module:not(.et_pb_image):first-child {
    padding-top: var(--ck-card-pad);
}

/* Image: full width, clipped to rounded top corners */
.ck-card-column .et_pb_image_wrap {
    display: block;
    overflow: hidden;
    border-radius: var(--ck-card-radius) var(--ck-card-radius) 0 0;
}

.ck-card-column .et_pb_image_wrap img {
    display: block;
    width: 100%;
    height: var(--ck-card-img-height);
    object-fit: cover;
    transition: transform .3s ease-in-out;
}

.ck-card-column:hover .et_pb_image_wrap img {
    transform: scale(1.05);
}

/* Pin the button to the bottom-right */
.ck-card-column .et_pb_button_module_wrapper {
    margin-top: auto;
    padding-left: var(--ck-card-pad);
    padding-right: var(--ck-card-pad);
    display: flex;
    justify-content: flex-end;
}

.ck-card-column h3 {
    padding-bottom: 0;
}

/* Optional: force the button to match the blog pill style */
.ck-card-column a.et_pb_button,
.ck-card-column a.et_pb_button:visited {
    display: inline-block;
    padding: .5em 1em;
    line-height: 1;
    border: 3px solid var(--green4);
    border-radius: 50px;
    background: transparent;
    transition: background-color .3s ease-in-out, border-color .3s ease-in-out;
}

.ck-card-column a.et_pb_button:hover {
    background-color: var(--green8);
    border-color: var(--green8);
}

@media (prefers-reduced-motion: reduce) {
    .ck-card-column,
    .ck-card-column .et_pb_image_wrap img,
    .ck-card-column a.et_pb_button {
        transition: none !important;
    }

    .ck-card-column:hover {
        transform: none;
    }
}

@media (max-width: 980px) {
    .ck-card-column {
        --ck-card-pad: 25px;
    }
}

@media (max-width: 767px) {
    .ck-card-column {
        --ck-card-pad: 20px;
    }
}

/*  ======================================
    === CK CARD COLUMN SCROLLER (DIVI) ===
    ======================================

    Purpose: reuse the existing carousel controls (progress + prev/next)
    for the non-expandable product cards (ck-card-column).

    Divi setup (high-level):
    - Put your 4 product columns in a Row
    - Add class `ck-card-column-scroller` to that Row
    - Keep each Column class `ck-card-column` (already done)
    - Add a Code module under the Row with `.ck-bottom-controls` markup
*/

/* Controls visibility (avoid relying on Divi "disable on desktop/tablet/phone") */
@media (min-width: 1333px) {
    body:not(.et-fb) .ck-card-column-section .ck-bottom-controls {
        display: none !important;
    }

    /* If `.ck-bottom-controls` lives inside a Divi Code module, hide the module too
       so it doesn't leave an empty gap. Requires :has() support. */
    body:not(.et-fb) .ck-card-column-section :where(.et_pb_module, .et_pb_code):has(.ck-bottom-controls) {
        display: none !important;
    }
}

@media (max-width: 1332px) {
    body:not(.et-fb) .ck-card-column-section .ck-bottom-controls {
        display: flex !important;
    }
}

/* Start the scroller earlier (4-up looks squished around ~1200px). */
@media (max-width: 1332px) {
     body:not(.et-fb) .ck-card-column-scroller {
        padding-left: var(--ck-carousel-gutter-min) !important;
        scroll-padding-left: var(--ck-carousel-gutter-min);
    }
    /* Tokens live on the SECTION so the scroller row + bottom controls can both inherit them. */
    body:not(.et-fb) .ck-card-column-section {
        --ck-carousel-content-width: 1200px;
        --ck-carousel-gutter-min: 5vw;
        --ck-card-gap: clamp(16px, 2.5vw, 24px);
        --ck-control-size: 48px;
        --ck-card-w: clamp(260px, 78vw, 360px);
    }

    body:not(.et-fb) .ck-card-column-scroller {
        /* Full-bleed: overlap the section's side padding without changing it */
        width: 100vw !important;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw !important;
        margin-right: -50vw !important;

        display: flex !important;
        flex-wrap: nowrap !important;
        gap: var(--ck-card-gap);
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;

        /* Use the same "centered content + gutter" logic as the main carousel */
        padding-left: max(var(--ck-carousel-gutter-min), calc((100vw - var(--ck-carousel-content-width)) / 2)) !important;
        padding-right: var(--ck-carousel-gutter-min) !important;
        scroll-padding-left: max(var(--ck-carousel-gutter-min), calc((100vw - var(--ck-carousel-content-width)) / 2));
        scroll-padding-right: var(--ck-carousel-gutter-min);

        padding-bottom: 2rem !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    body:not(.et-fb) .ck-card-column-scroller::-webkit-scrollbar {
        display: none;
    }

    /* Make Divi columns behave like fixed-width cards in the scroller */
    body:not(.et-fb) .ck-card-column-scroller .ck-card-column {
        flex: 0 0 var(--ck-card-w) !important;
        width: var(--ck-card-w) !important;
        max-width: none !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}