/* ============================================================
   BEEFREE ENHANCED IMAGE COMPONENT — FULL FRAMEWORK CSS
   Base class : beeFree-addOn-enhancedImage
   Prefix     : bfei
   ============================================================ */


/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
    --bfei-transition-duration: 0.4s;
    --bfei-transition-easing: ease-out;
    --bfei-gradient-start: rgba(0, 0, 0, 0.8);
    --bfei-gradient-end: rgba(0, 0, 0, 0);
    --bfei-gradient-size: 60%;
    --bfei-text-color: #ffffff;
    --bfei-button-border-color: #ffffff;
    --bfei-button-hover-bg: rgba(255, 255, 255, 0.2);
    --bfei-height: 400px;
}


/* ============================================================
   BASE CONTAINER
   ============================================================ */
.beeFree-addOn-enhancedImage {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}


/* ============================================================
   WRAPPER
   ============================================================ */
.bfei__wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    order: 2;
}


/* ============================================================
   ASPECT RATIOS & FIXED HEIGHT
   ============================================================ */
.bfei--ratio-1-1 .bfei__wrapper {
    aspect-ratio: 1 / 1;
}

.bfei--ratio-4-3 .bfei__wrapper {
    aspect-ratio: 4 / 3;
}

.bfei--ratio-16-9 .bfei__wrapper {
    aspect-ratio: 16 / 9;
}

.bfei--ratio-3-4 .bfei__wrapper {
    aspect-ratio: 3 / 4;
}

.bfei--ratio-2-3 .bfei__wrapper {
    aspect-ratio: 2 / 3;
}

.bfei--fixed-height .bfei__wrapper {
    height: var(--bfei-height);
}


/* ============================================================
   IMAGE
   ============================================================ */
.bfei__image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.bfei__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--bfei-transition-duration) var(--bfei-transition-easing);
}

.bfei--hover-zoom:hover .bfei__image {
    transform: scale(1.1);
}

.bfei--hover-zoom-out .bfei__image {
    transform: scale(1.1);
}

.bfei--hover-zoom-out:hover .bfei__image {
    transform: scale(1);
}


/* ============================================================
   OVERLAY (opacity / colour layer)
   ============================================================ */
.bfei__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: transparent;
}


/* ============================================================
   GRADIENT LAYER
   ============================================================ */
.bfei__gradient {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.bfei--gradient-bottom .bfei__gradient {
    background: linear-gradient(to top, var(--bfei-gradient-start) 0%, var(--bfei-gradient-end) var(--bfei-gradient-size));
}

.bfei--gradient-top .bfei__gradient {
    background: linear-gradient(to bottom, var(--bfei-gradient-start) 0%, var(--bfei-gradient-end) var(--bfei-gradient-size));
}

.bfei--gradient-left .bfei__gradient {
    background: linear-gradient(to right, var(--bfei-gradient-start) 0%, var(--bfei-gradient-end) var(--bfei-gradient-size));
}

.bfei--gradient-right .bfei__gradient {
    background: linear-gradient(to left, var(--bfei-gradient-start) 0%, var(--bfei-gradient-end) var(--bfei-gradient-size));
}

.bfei--gradient-center .bfei__gradient {
    background: radial-gradient(ellipse at center, var(--bfei-gradient-end) 0%, var(--bfei-gradient-start) 100%);
}


/* ============================================================
   CONTENT CONTAINER (text + buttons inside the image)
   ============================================================ */
.bfei__content {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

.bfei--content-top .bfei__content {
    top: 0;
}

.bfei--content-middle .bfei__content {
    top: 50%;
    transform: translateY(-50%);
}

.bfei--content-bottom .bfei__content {
    bottom: 0;
}


/* ============================================================
   TEXT ELEMENTS
   ============================================================ */
.bfei__text {
    display: flex;
    flex-direction: column;
}

.bfei__title,
.bfei__subtitle,
.bfei__description {
    margin: 0;
    padding: 0.25rem 0;
    color: var(--bfei-text-color);
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), transform var(--bfei-transition-duration) var(--bfei-transition-easing), font-size var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear 0s;
}

.bfei__title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.bfei__subtitle {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.3;
}

.bfei__description {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 0.5rem;
}


/* ============================================================
   TEXT ALIGNMENT — inside image
   ============================================================ */
.bfei--text-align-left .bfei__text,
.bfei--text-align-left .bfei__content {
    align-items: flex-start;
    text-align: left;
}

.bfei--text-align-center .bfei__text,
.bfei--text-align-center .bfei__content {
    align-items: center;
    text-align: center;
}

.bfei--text-align-right .bfei__text,
.bfei--text-align-right .bfei__content {
    align-items: flex-end;
    text-align: right;
}


/* ============================================================
   TEXT HOVER SIZE CHANGES
   (only meaningful when text is always visible — style-default)
   ============================================================ */
.bfei--title-grow:hover .bfei__title {
    font-size: 2.25rem;
}

.bfei--title-shrink:hover .bfei__title {
    font-size: 1.75rem;
}

.bfei--subtitle-grow:hover .bfei__subtitle {
    font-size: 1.5rem;
}

.bfei--subtitle-shrink:hover .bfei__subtitle {
    font-size: 1rem;
}

.bfei--desc-grow:hover .bfei__description {
    font-size: 1.125rem;
}

.bfei--desc-shrink:hover .bfei__description {
    font-size: 0.875rem;
}


/* ============================================================
   HOVER TRANSITION STYLES

   Default  — everything visible, no animation
   Style 1  — slide up from outside (full travel), staggered
   Style 2  — slide up, subtle nudge, staggered
   Style 3  — slide in from left, staggered
   Style 4  — slide in from right, staggered
   Style 5  — fade in, all together
   Style 6  — fade in, staggered per element
   Style 7  — buttons only fade in; text always visible
   Style 8  — description + buttons fade in; headings always visible
   ============================================================ */


/* — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
   DEFAULT — no animation, everything visible
   — — — — — — — — — — — — — — — — — — — — — — — — — — — — — */
.bfei--style-default .bfei__title,
.bfei--style-default .bfei__subtitle,
.bfei--style-default .bfei__description,
.bfei--style-default .bfei__buttons,
.bfei--style-default .bfei__buttons-pinned {
    opacity: 1;
    visibility: visible;
    transform: none;
}


/* — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
   STYLE 1 — slide up from outside image, staggered
   — — — — — — — — — — — — — — — — — — — — — — — — — — — — — */
.bfei--style-1 .bfei__title,
.bfei--style-1 .bfei__subtitle,
.bfei--style-1 .bfei__description,
.bfei--style-1 .bfei__buttons,
.bfei--style-1 .bfei__buttons-pinned {
    opacity: 0;
    visibility: hidden;
    transform: translateY(60px);
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), transform var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear var(--bfei-transition-duration);
}

.bfei--style-1:hover .bfei__title,
.bfei--style-1:hover .bfei__subtitle,
.bfei--style-1:hover .bfei__description,
.bfei--style-1:hover .bfei__buttons,
.bfei--style-1:hover .bfei__buttons-pinned {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), transform var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear 0s;
}

.bfei--style-1:hover .bfei__subtitle {
    transition-delay: 0.06s;
}

.bfei--style-1:hover .bfei__description {
    transition-delay: 0.10s;
}

.bfei--style-1:hover .bfei__buttons,
.bfei--style-1:hover .bfei__buttons-pinned {
    transition-delay: 0.14s;
}


/* — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
   STYLE 2 — subtle nudge up, staggered
   — — — — — — — — — — — — — — — — — — — — — — — — — — — — — */
.bfei--style-2 .bfei__title,
.bfei--style-2 .bfei__subtitle,
.bfei--style-2 .bfei__description,
.bfei--style-2 .bfei__buttons,
.bfei--style-2 .bfei__buttons-pinned {
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), transform var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear var(--bfei-transition-duration);
}

.bfei--style-2:hover .bfei__title,
.bfei--style-2:hover .bfei__subtitle,
.bfei--style-2:hover .bfei__description,
.bfei--style-2:hover .bfei__buttons,
.bfei--style-2:hover .bfei__buttons-pinned {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), transform var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear 0s;
}

.bfei--style-2:hover .bfei__subtitle {
    transition-delay: 0.06s;
}

.bfei--style-2:hover .bfei__description {
    transition-delay: 0.10s;
}

.bfei--style-2:hover .bfei__buttons,
.bfei--style-2:hover .bfei__buttons-pinned {
    transition-delay: 0.14s;
}


/* — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
   STYLE 3 — slide in from left, staggered
   — — — — — — — — — — — — — — — — — — — — — — — — — — — — — */
.bfei--style-3 .bfei__title,
.bfei--style-3 .bfei__subtitle,
.bfei--style-3 .bfei__description,
.bfei--style-3 .bfei__buttons,
.bfei--style-3 .bfei__buttons-pinned {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-40px);
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), transform var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear var(--bfei-transition-duration);
}

.bfei--style-3:hover .bfei__title,
.bfei--style-3:hover .bfei__subtitle,
.bfei--style-3:hover .bfei__description,
.bfei--style-3:hover .bfei__buttons,
.bfei--style-3:hover .bfei__buttons-pinned {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), transform var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear 0s;
}

.bfei--style-3:hover .bfei__subtitle {
    transition-delay: 0.06s;
}

.bfei--style-3:hover .bfei__description {
    transition-delay: 0.10s;
}

.bfei--style-3:hover .bfei__buttons,
.bfei--style-3:hover .bfei__buttons-pinned {
    transition-delay: 0.14s;
}


/* — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
   STYLE 4 — slide in from right, staggered
   — — — — — — — — — — — — — — — — — — — — — — — — — — — — — */
.bfei--style-4 .bfei__title,
.bfei--style-4 .bfei__subtitle,
.bfei--style-4 .bfei__description,
.bfei--style-4 .bfei__buttons,
.bfei--style-4 .bfei__buttons-pinned {
    opacity: 0;
    visibility: hidden;
    transform: translateX(40px);
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), transform var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear var(--bfei-transition-duration);
}

.bfei--style-4:hover .bfei__title,
.bfei--style-4:hover .bfei__subtitle,
.bfei--style-4:hover .bfei__description,
.bfei--style-4:hover .bfei__buttons,
.bfei--style-4:hover .bfei__buttons-pinned {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), transform var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear 0s;
}

.bfei--style-4:hover .bfei__subtitle {
    transition-delay: 0.06s;
}

.bfei--style-4:hover .bfei__description {
    transition-delay: 0.10s;
}

.bfei--style-4:hover .bfei__buttons,
.bfei--style-4:hover .bfei__buttons-pinned {
    transition-delay: 0.14s;
}


/* — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
   STYLE 5 — fade in, all together
   — — — — — — — — — — — — — — — — — — — — — — — — — — — — — */
.bfei--style-5 .bfei__title,
.bfei--style-5 .bfei__subtitle,
.bfei--style-5 .bfei__description,
.bfei--style-5 .bfei__buttons,
.bfei--style-5 .bfei__buttons-pinned {
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear var(--bfei-transition-duration);
}

.bfei--style-5:hover .bfei__title,
.bfei--style-5:hover .bfei__subtitle,
.bfei--style-5:hover .bfei__description,
.bfei--style-5:hover .bfei__buttons,
.bfei--style-5:hover .bfei__buttons-pinned {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear 0s;
}


/* — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
   STYLE 6 — fade in, staggered per element
   — — — — — — — — — — — — — — — — — — — — — — — — — — — — — */
.bfei--style-6 .bfei__title,
.bfei--style-6 .bfei__subtitle,
.bfei--style-6 .bfei__description,
.bfei--style-6 .bfei__buttons,
.bfei--style-6 .bfei__buttons-pinned {
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear var(--bfei-transition-duration);
}

.bfei--style-6:hover .bfei__title,
.bfei--style-6:hover .bfei__subtitle,
.bfei--style-6:hover .bfei__description,
.bfei--style-6:hover .bfei__buttons,
.bfei--style-6:hover .bfei__buttons-pinned {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear 0s;
}

.bfei--style-6:hover .bfei__title {
    transition-delay: 0s;
}

.bfei--style-6:hover .bfei__subtitle {
    transition-delay: 0.08s;
}

.bfei--style-6:hover .bfei__description {
    transition-delay: 0.16s;
}

.bfei--style-6:hover .bfei__buttons,
.bfei--style-6:hover .bfei__buttons-pinned {
    transition-delay: 0.24s;
}


/* — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
   STYLE 7 — buttons only fade in; text always visible
   — — — — — — — — — — — — — — — — — — — — — — — — — — — — — */
.bfei--style-7 .bfei__title,
.bfei--style-7 .bfei__subtitle,
.bfei--style-7 .bfei__description {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.bfei--style-7 .bfei__buttons,
.bfei--style-7 .bfei__buttons-pinned {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear var(--bfei-transition-duration);
}

.bfei--style-7:hover .bfei__buttons,
.bfei--style-7:hover .bfei__buttons-pinned {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear 0s;
}


/* — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
   STYLE 8 — description + buttons fade in;
             title + subtitle always visible
   — — — — — — — — — — — — — — — — — — — — — — — — — — — — — */
.bfei--style-8 .bfei__title,
.bfei--style-8 .bfei__subtitle {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.bfei--style-8 .bfei__description,
.bfei--style-8 .bfei__buttons,
.bfei--style-8 .bfei__buttons-pinned {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear var(--bfei-transition-duration);
}

.bfei--style-8:hover .bfei__description,
.bfei--style-8:hover .bfei__buttons,
.bfei--style-8:hover .bfei__buttons-pinned {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear 0s;
}

.bfei--style-8:hover .bfei__description {
    transition-delay: 0s;
}

.bfei--style-8:hover .bfei__buttons,
.bfei--style-8:hover .bfei__buttons-pinned {
    transition-delay: 0.08s;
}


/* ============================================================
   STAGGER OVERRIDES
   Combine with any style modifier.
   ============================================================ */
.bfei--stagger-none:hover .bfei__title,
.bfei--stagger-none:hover .bfei__subtitle,
.bfei--stagger-none:hover .bfei__description,
.bfei--stagger-none:hover .bfei__buttons,
.bfei--stagger-none:hover .bfei__buttons-pinned {
    transition-delay: 0s !important;
}

.bfei--stagger-fast:hover .bfei__subtitle {
    transition-delay: 0.04s;
}

.bfei--stagger-fast:hover .bfei__description {
    transition-delay: 0.08s;
}

.bfei--stagger-fast:hover .bfei__buttons,
.bfei--stagger-fast:hover .bfei__buttons-pinned {
    transition-delay: 0.12s;
}

.bfei--stagger-slow:hover .bfei__subtitle {
    transition-delay: 0.15s;
}

.bfei--stagger-slow:hover .bfei__description {
    transition-delay: 0.30s;
}

.bfei--stagger-slow:hover .bfei__buttons,
.bfei--stagger-slow:hover .bfei__buttons-pinned {
    transition-delay: 0.45s;
}


/* ============================================================
   BUTTONS CONTAINER — inside image
   ============================================================ */
.bfei__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), transform var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear 0s;
}

.bfei__button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: var(--bfei-text-color);
    background: transparent;
    border: 1px solid var(--bfei-button-border-color);
    border-radius: 3px;
    cursor: pointer;
    transition: all var(--bfei-transition-duration) var(--bfei-transition-easing);
}

    .bfei__button:hover {
        background: var(--bfei-button-hover-bg);
        text-decoration: none;
    }

    .bfei__button:active {
        transform: translateY(1px);
    }


/* ============================================================
   BUTTON ALIGNMENT
   Applies to inline, pinned and external buttons.
   ============================================================ */
.bfei--buttons-align-left .bfei__buttons,
.bfei--buttons-align-left .bfei__buttons-pinned,
.bfei--buttons-align-left .bfei__external-buttons {
    justify-content: flex-start;
}

.bfei--buttons-align-center .bfei__buttons,
.bfei--buttons-align-center .bfei__buttons-pinned,
.bfei--buttons-align-center .bfei__external-buttons {
    justify-content: center;
}

.bfei--buttons-align-right .bfei__buttons,
.bfei--buttons-align-right .bfei__buttons-pinned,
.bfei--buttons-align-right .bfei__external-buttons {
    justify-content: flex-end;
}


/* ============================================================
   BUTTON POSITIONING — relative to text (inside image)
   ============================================================ */
.bfei--buttons-below .bfei__text {
    order: 1;
}

.bfei--buttons-below .bfei__buttons {
    order: 2;
    margin-top: 1rem;
}

.bfei--buttons-above .bfei__text {
    order: 2;
}

.bfei--buttons-above .bfei__buttons {
    order: 1;
    margin-bottom: 1rem;
    margin-top: 0;
}


/* ============================================================
   BUTTONS PINNED — inside image, independent of text
   Uses .bfei__buttons-pinned inside .bfei__wrapper
   ============================================================ */
.bfei__buttons-pinned {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    transition: opacity var(--bfei-transition-duration) var(--bfei-transition-easing), transform var(--bfei-transition-duration) var(--bfei-transition-easing), visibility 0s linear 0s;
}

.bfei--buttons-pin-top .bfei__buttons-pinned {
    top: 0;
    bottom: auto;
}

.bfei--buttons-pin-bottom .bfei__buttons-pinned {
    bottom: 0;
    top: auto;
}


/* ============================================================
   EXTERNAL TEXT BLOCK
   Direct child of base container, positioned via order.
   ============================================================ */
.bfei__external-text {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0.75rem 1.5rem;
    box-sizing: border-box;
}

    .bfei__external-text .bfei__title,
    .bfei__external-text .bfei__subtitle,
    .bfei__external-text .bfei__description {
        color: var(--bfei-text-color);
    }

.bfei--text-external-above .bfei__external-text {
    order: 1;
}

.bfei--text-external-below .bfei__external-text {
    order: 3;
}


/* ============================================================
   EXTERNAL BUTTONS BLOCK
   Direct child of base container, positioned via order.
   ============================================================ */
.bfei__external-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1.5rem;
    box-sizing: border-box;
}

.bfei--buttons-external-above .bfei__external-buttons {
    order: 1;
}

.bfei--buttons-external-below .bfei__external-buttons {
    order: 3;
}

/*
   When both external text AND external buttons are on the same
   side, use bfei--text-first or bfei--buttons-first to control
   which one appears closest to the image edge.
*/
.bfei--text-first .bfei__external-text {
    order: 0;
}

.bfei--buttons-first .bfei__external-buttons {
    order: 0;
}


/* ============================================================
   EXTERNAL TEXT ALIGNMENT
   ============================================================ */
.bfei--text-align-left .bfei__external-text {
    align-items: flex-start;
    text-align: left;
}

.bfei--text-align-center .bfei__external-text {
    align-items: center;
    text-align: center;
}

.bfei--text-align-right .bfei__external-text {
    align-items: flex-end;
    text-align: right;
}


/* ============================================================
   RESPONSIVE BUTTON LIMITING
   ============================================================ */
@media (max-width: 576px) {
    .bfei--limit-buttons-sm .bfei__buttons .bfei__button:not(:first-child),
    .bfei--limit-buttons-sm .bfei__buttons-pinned .bfei__button:not(:first-child),
    .bfei--limit-buttons-sm .bfei__external-buttons .bfei__button:not(:first-child) {
        display: none;
    }
}

@media (max-width: 768px) {
    .bfei--limit-buttons-md .bfei__buttons .bfei__button:not(:first-child),
    .bfei--limit-buttons-md .bfei__buttons-pinned .bfei__button:not(:first-child),
    .bfei--limit-buttons-md .bfei__external-buttons .bfei__button:not(:first-child) {
        display: none;
    }
}


/* ============================================================
   CLICKABLE CONTAINER
   ============================================================ */
.bfei--clickable {
    cursor: pointer;
}

    .bfei--clickable .bfei__button {
        position: relative;
        z-index: 10;
    }


/* ============================================================
   RESPONSIVE — TYPOGRAPHY & SPACING
   ============================================================ */
@media (max-width: 992px) {
    .bfei__title {
        font-size: 1.75rem;
    }

    .bfei__subtitle {
        font-size: 1.125rem;
    }

    .bfei__description {
        font-size: 0.9375rem;
    }
}

@media (max-width: 768px) {
    .bfei__content {
        padding: 1rem;
    }

    .bfei__title {
        font-size: 1.5rem;
    }

    .bfei__subtitle {
        font-size: 1rem;
    }

    .bfei__description {
        font-size: 0.875rem;
    }

    .bfei__buttons-pinned {
        padding: 0.75rem 1rem;
    }

    .bfei__external-text,
    .bfei__external-buttons {
        padding: 0.5rem 1rem;
    }

    .bfei__button {
        padding: 0.625rem 1.25rem;
        font-size: 0.8125rem;
    }

    /* Suppress hover size changes on touch screens */
    .bfei--title-grow:hover .bfei__title,
    .bfei--title-shrink:hover .bfei__title {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .bfei__title {
        font-size: 1.25rem;
    }

    .bfei__subtitle {
        font-size: 0.9375rem;
    }

    .bfei__description {
        font-size: 0.8125rem;
    }

    .bfei__buttons {
        gap: 0.5rem;
    }

    .bfei__buttons-pinned {
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    .bfei__external-text,
    .bfei__external-buttons {
        padding: 0.5rem 0.75rem;
    }

    .bfei__button {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
}