/* HyperKit — Feature Banner
 *
 * Four parts in a row over one rounded banner: title | text | image | CTA.
 * The banner keeps overflow visible so the image, pulled down with a
 * negative bottom margin, spills past the bottom edge — the signature look.
 */

.hk-fbnr {
    position: relative;
    display: flex;
    align-items: center;
    /* space-between makes the row fill its width: when a part is removed the
     * survivors spread to the edges instead of bunching up with a gap. */
    justify-content: space-between;
    gap: 32px;
    background-color: #F3EDFB;
    border-radius: 20px;
    padding: 36px 44px;
    /* The whole point: let the image escape the bottom edge. */
    overflow: visible;
}

/* 1) Title */
.hk-fbnr__title-wrap {
    flex: 0 0 auto;
    flex-basis: 190px;
}
/* With no text column, the title becomes the grower so the banner still
 * reads as a filled newsletter strip rather than a title stranded on the left. */
.hk-fbnr:not(.hk-fbnr--has-text) .hk-fbnr__title-wrap {
    flex: 1 1 auto;
}
/* A single remaining part shouldn't stretch oddly — just sit at the start. */
.hk-fbnr--parts-1 { justify-content: flex-start; }
.hk-fbnr__title {
    margin: 0;
    line-height: 1;
    color: #3B4BE0;
}

/* 2) Text */
.hk-fbnr__text {
    flex: 1 1 auto;
    min-width: 0;
}
.hk-fbnr__lead {
    font-weight: 700;
    margin-bottom: 6px;
    color: #1A1A1A;
}
.hk-fbnr__desc {
    line-height: 1.5;
    color: #4A4A4A;
}

/* 3) Image — anchored to the bottom so its overflow drops below the banner. */
.hk-fbnr__media {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    align-self: stretch;
    position: relative;
    z-index: 2;
}
.hk-fbnr__media img {
    display: block;
    width: 230px;
    max-width: 100%;
    height: auto;
    margin-bottom: -40px; /* overridden by the Overflow control */
}

/* 4) CTA */
.hk-fbnr__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #3B4BE0;
    line-height: 1;
    white-space: nowrap;
    transition: transform 250ms ease;
}
.hk-fbnr__cta:hover { transform: translateX(2px); }
.hk-fbnr__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2em;
    height: 2em;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
}
.hk-fbnr__cta-icon svg { width: 0.9em; height: 0.9em; display: block; }
.hk-fbnr__cta-icon i   { font-size: 0.85em; }

/* Stack on small screens; the image sits inline again so nothing clips off
 * the side of a narrow viewport. */
@media (max-width: 880px) {
    .hk-fbnr { flex-wrap: wrap; }
    .hk-fbnr__title-wrap { flex-basis: 100%; }
    .hk-fbnr__text { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .hk-fbnr__cta { transition: none; }
    .hk-fbnr__cta:hover { transform: none; }
}