.falcon-ew-dc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/*
 * The default 1px border exists so the Active Card Border Color control
 * has something to recolor out of the box; the widget's Border group
 * control replaces it entirely when set.
 */
.falcon-ew-dc-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid rgba(127, 127, 127, 0.25);
    transition: border-color 0.2s ease;
}

.falcon-ew-dc-card-image {
    margin-bottom: 16px;
}

.falcon-ew-dc-card-image img {
    display: block;
    width: 100%;
    height: auto;
}

.falcon-ew-dc-card-title {
    margin: 0 0 8px;
}

.falcon-ew-dc-card-text {
    margin: 0 0 16px;
}

/*
 * Theme and Elementor Kit global button styles target plain <button>
 * elements too, so this reset is scoped under .falcon-ew-dc for enough
 * specificity to win without !important. margin-top: auto pins every
 * card's button to the bottom, so a row of cards with different-length
 * short descriptions still lines their buttons up.
 */
.falcon-ew-dc .falcon-ew-dc-read-more,
.falcon-ew-dc .falcon-ew-dc-read-more:hover,
.falcon-ew-dc .falcon-ew-dc-read-more:focus {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    color: inherit;
}

.falcon-ew-dc .falcon-ew-dc-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: auto;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.falcon-ew-dc .falcon-ew-dc-read-more::after {
    content: "";
    width: 0.45em;
    height: 0.45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.25s ease;
}

.falcon-ew-dc .falcon-ew-dc-card.is-active .falcon-ew-dc-read-more::after {
    transform: translateY(25%) rotate(-135deg);
}

.falcon-ew-dc .falcon-ew-dc-read-more:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/*
 * Expand/collapse via the grid-template-rows 0fr -> 1fr technique, so the
 * zone animates to its content's real height without JS measuring it.
 * The clip wrapper is the single grid row; min-height: 0 lets it shrink
 * all the way to nothing.
 */
.falcon-ew-dc-zone {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    transition: grid-template-rows 0.35s ease, margin-top 0.35s ease;
}

.falcon-ew-dc.is-open .falcon-ew-dc-zone {
    grid-template-rows: 1fr;
    margin-top: 24px;
}

/*
 * visibility: hidden while collapsed takes the close button and any links
 * in the panel out of the tab order. It flips back instantly on open but
 * waits out the collapse transition on close, so content doesn't vanish
 * before the zone has finished shrinking.
 */
.falcon-ew-dc-zone-clip {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 0.35s;
}

.falcon-ew-dc.is-open .falcon-ew-dc-zone-clip {
    visibility: visible;
    transition-delay: 0s;
}

.falcon-ew-dc-zone-inner {
    position: relative;
    padding: 32px;
    border: 1px solid rgba(127, 127, 127, 0.25);
}

.falcon-ew-dc .falcon-ew-dc-close,
.falcon-ew-dc .falcon-ew-dc-close:hover,
.falcon-ew-dc .falcon-ew-dc-close:focus {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: inherit;
}

.falcon-ew-dc .falcon-ew-dc-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.falcon-ew-dc .falcon-ew-dc-close:hover,
.falcon-ew-dc .falcon-ew-dc-close:focus-visible {
    opacity: 1;
}

.falcon-ew-dc-panel:focus {
    outline: none;
}

.falcon-ew-dc-panel:not([hidden]) {
    animation: falcon-ew-dc-fade 0.25s ease;
}

.falcon-ew-dc-panel-heading {
    margin: 0 40px 12px 0;
}

.falcon-ew-dc-panel-body p:last-child {
    margin-bottom: 0;
}

@keyframes falcon-ew-dc-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .falcon-ew-dc-zone,
    .falcon-ew-dc-zone-clip,
    .falcon-ew-dc-card,
    .falcon-ew-dc .falcon-ew-dc-read-more::after {
        transition: none;
    }

    .falcon-ew-dc-panel:not([hidden]) {
        animation: none;
    }
}