/*
 * Berard AIT — How It Works brain flip cards
 * Rare approved exception: card layout + flip behavior styling lives in the child theme,
 * scoped to the Elementor container class `.berard-brain-flipcards` only.
 */
body.page-id-21 .berard-brain-flipcards {
    --berard-brain-primary: var(--e-global-color-primary, #4c568e);
    --berard-brain-body: var(--e-global-color-text, #333333);
    --berard-brain-card-bg: #ffffff;
    --berard-brain-label-bg: #a8d0aa;
    --berard-brain-border: rgba(76, 86, 142, .22);
    width: 100% !important;
    max-width: 800px !important;
    margin: 36px auto 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 35px 70px !important;
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card {
    flex: 0 0 220px !important;
    width: 220px !important;
    max-width: 220px !important;
    cursor: pointer;
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-widget-container {
    width: 100% !important;
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box {
    height: 236px !important;
    width: 220px !important;
    overflow: hidden !important;
    border-radius: 8px 8px 0 0 !important;
    box-shadow: none !important;
    outline-offset: 4px;
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box:focus-visible {
    outline: 3px solid var(--berard-brain-primary);
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box__layer,
body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box__layer__overlay {
    border-radius: 8px 8px 0 0 !important;
    overflow: hidden !important;
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box__front {
    background: transparent !important;
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box__front .elementor-flip-box__layer__overlay {
    padding: 0 !important;
    background: transparent !important;
    justify-content: stretch !important;
    text-align: center !important;
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box__front .elementor-flip-box__layer__inner {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box__image {
    flex: 0 0 190px !important;
    width: 100% !important;
    height: 190px !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: block !important;
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box__image img {
    width: 100% !important;
    height: 190px !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    border-radius: 0 !important;
    vertical-align: top !important;
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box__front .elementor-flip-box__layer__title {
    flex: 0 0 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 10px !important;
    background: var(--berard-brain-label-bg) !important;
    color: var(--berard-brain-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    text-align: center !important;
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box__back {
    background: var(--berard-brain-card-bg) !important;
    border: 1px solid var(--berard-brain-border) !important;
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box__back .elementor-flip-box__layer__overlay {
    padding: 16px 15px !important;
    background: var(--berard-brain-card-bg) !important;
    justify-content: center !important;
    text-align: center !important;
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box__back .elementor-flip-box__layer__title {
    color: var(--berard-brain-primary) !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box__back .elementor-flip-box__layer__description {
    color: var(--berard-brain-body) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box__back .elementor-flip-box__layer__description strong {
    color: var(--berard-brain-body) !important;
    font-weight: 700 !important;
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .berard-flip-readmore {
    color: var(--berard-brain-primary) !important;
    display: inline-block;
    font-weight: 700;
    margin-top: 6px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Tap/click persistent flip state added by child-theme JS. Native hover/focus flip remains intact. */
body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card.is-flipped .elementor-flip-box__back,
body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box.is-flipped .elementor-flip-box__back {
    transform: none !important;
}

body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card.is-flipped .elementor-flip-box__front,
body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box.is-flipped .elementor-flip-box__front {
    transform: rotateX(0) rotateY(-180deg) !important;
}

@media (max-width: 1024px) and (min-width: 768px) {
    body.page-id-21 .berard-brain-flipcards {
        max-width: 720px !important;
        gap: 30px 30px !important;
    }
}

@media (max-width: 767px) {
    body.page-id-21 .berard-brain-flipcards {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 24px !important;
        align-items: center !important;
        max-width: 100% !important;
    }

    body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card,
    body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box {
        width: min(100%, 320px) !important;
        max-width: 320px !important;
    }

    body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box {
        height: 210px !important;
    }

    body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box__image,
    body.page-id-21 .berard-brain-flipcards .berard-hiw-flip-card .elementor-flip-box__image img {
        height: 158px !important;
        flex-basis: 158px !important;
    }
}