/* =========================================================================
   Beekom JOOOL — Expand Cards widget
   -------------------------------------------------------------------------
   Classes:
     .bk-jec                      outer grid wrapper
     .bk-jec__card                individual card (grid item)
     .bk-jec__card--light          light theme (gray bg, navy text)
     .bk-jec__card--dark           dark theme (navy bg, white text)
     .bk-jec__card.is-open         expanded state
     .bk-jec__title                card heading
     .bk-jec__preview              always-visible preview, fades at bottom
     .bk-jec__reveal               hidden content revealed on expand
     .bk-jec__chevron-wrap         wrapper for chevron (keeps it centered)
     .bk-jec__chevron              button with chevron SVG, rotates 180 on open
   ========================================================================= */


/* ----- Layout (flex, not grid) ----------------------------------------

   We use flexbox rather than CSS grid on purpose.

   With `display: grid` + `grid-template-columns: repeat(2, 1fr)` the
   row height is always the height of the tallest cell in that row.
   `align-self: start` on an opened card lets its *content* sit at the
   top, but the grid row itself (and therefore the background of every
   card in the row) still stretches to match the tallest sibling. The
   visible result: a collapsed card looks as tall as the opened one
   even though it has nothing inside the extra space.

   Flexbox has no row-height rule: each item takes its own natural
   height. With `align-items: flex-start`, items sit at the top and
   never pull their siblings to match. That's exactly what we want.
   --------------------------------------------------------------------- */

.bk-jec {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}

/*
 * Each card takes an equal share of the row, minus the gap. The width
 * calculation uses the `--bk-jec-columns` variable written by the
 * widget's responsive `columns` control (see register_controls in PHP),
 * so authors can still pick 1, 2, 3 or 4 columns per breakpoint.
 * Default is 2 columns if the var is missing.
 */
.bk-jec > .bk-jec__card {
    flex: 0 1 calc((100% - var(--bk-jec-gap, 24px) * (var(--bk-jec-columns, 2) - 1)) / var(--bk-jec-columns, 2));
    min-width: 0; /* prevents long unbreakable words from stretching the card */
}

.bk-jec__card {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    padding: 40px;
    border-radius: 20px;
    background-color: #F5F6F8;
    color: #0C1E3E;
    box-sizing: border-box;
}

.bk-jec__card--dark {
    background-color: #0C1E3E;
    color: #FFFFFF;
}


/* ----- Title ----------------------------------------------------------- */

.bk-jec__title {
    margin: 0 0 24px 0;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 500;
    color: inherit;
}


/* ----- Preview (fades out at bottom when collapsed) -------------------- */

.bk-jec__preview {
    position: relative;
    max-height: 220px;
    overflow: hidden;
    /* Smooth transition when opening (max-height change) */
    transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1);
    color: inherit;
}

.bk-jec__preview > *:first-child { margin-top: 0; }
.bk-jec__preview > *:last-child  { margin-bottom: 0; }

/*
 * Fade overlay at the bottom of the preview.
 * We use a mask-image so the fade follows the actual text colour — it works
 * on both light and dark themes without having to hard-code a gradient colour.
 * The fade is removed entirely when the card is open (full text visible).
 *
 * Why a 3-stop mask with a quadratic feel rather than a simple 2-stop linear:
 * A linear fade (60% -> 0%) looks clean against a light background because
 * navy text at, say, 40% opacity blends cleanly into #F5F6F8. But against a
 * navy background, white text at 40% opacity reads as a muddy bluish gray
 * — perceptually the fade looks "unfinished" on the dark theme.
 * Adding an intermediate stop and starting the fade a bit earlier makes the
 * bottom of the text disappear more aggressively, which matches how the eye
 * perceives the fade on light, so both themes look symmetric.
 */
.bk-jec__card:not(.is-open) .bk-jec__preview {
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, #000 45%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0) 100%);
}

/* When open, preview loses its max-height cap so full text is visible */
.bk-jec__card.is-open .bk-jec__preview {
    max-height: none;
}


/* ----- Reveal (collapsed by default, grows on open) ------------------- */

.bk-jec__reveal {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
        max-height 400ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity   300ms ease;
    color: inherit;
}

.bk-jec__reveal > *:first-child { margin-top: 12px; }
.bk-jec__reveal > *:last-child  { margin-bottom: 0; }

.bk-jec__card.is-open .bk-jec__reveal {
    opacity: 1;
    /*
     * max-height: none here is critical. The JS sets an inline max-height
     * (the measured scrollHeight) to animate 0 -> content height, then
     * removes the inline style when the transition ends so the content
     * can reflow on viewport resize. Without this rule, the CSS default
     * (max-height: 0) takes over at that moment and the reveal snaps
     * shut — which looks exactly like an auto-close bug.
     */
    max-height: none;
    /* max-height is set dynamically in JS so the transition animates from 0
       to the measured scrollHeight — after the transition ends we remove
       the inline max-height so the content can reflow on resize. */
}


/* ----- Chevron button -------------------------------------------------- */

.bk-jec__chevron-wrap {
    display: flex;
    justify-content: center;
    padding-top: 24px;
    margin-top: auto; /* pushes chevron to bottom of the card */
}

.bk-jec__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
    opacity: 0.9;
}

.bk-jec__chevron:hover,
.bk-jec__chevron:focus-visible {
    opacity: 1;
}

.bk-jec__chevron:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 2px;
}

.bk-jec__chevron svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
}

/* Rotate chevron when the card is open */
.bk-jec__card.is-open .bk-jec__chevron {
    transform: rotate(180deg);
}


/* ----- Reduced motion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .bk-jec__preview,
    .bk-jec__reveal,
    .bk-jec__chevron {
        transition: none !important;
    }
}


/* ----- Responsive fallback (single column on narrow screens) ----------
   This is a safety net in case the author didn't override columns at
   the mobile breakpoint via the widget's responsive control. */

@media (max-width: 767px) {
    .bk-jec {
        --bk-jec-columns: 1;
    }
    .bk-jec__card {
        padding: 32px 24px;
    }
    .bk-jec__title {
        font-size: 26px;
    }
}