.bond {
    position: relative;
    background-color: #f1eae1;
    overflow: hidden;
}

.bond::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 216px;
    background-image: url("../../assets/icons/leaf-1.svg");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.bond__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-width-wide);
    margin-inline: auto;
    padding-inline: clamp(var(--space-3), 4vw, 3.75rem);
    padding-block: clamp(var(--space-5), 6vw, 3.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(var(--space-5), 5vw, 3rem);
    text-align: center;
}

.bond__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    max-width: 24rem;
    margin-inline: auto;
}

.bond__ornament-line {
    flex: 1;
    height: 1px;
    background-color: var(--color-orange-dark);
}

.bond__ornament-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.bond__ornament-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.bond__intro {
    max-width: 60rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bond__heading {
    font-size: 50px;
    line-height: 1.15;
}

.bond__description {
    color: var(--color-grey-1);
    font-family: var(--font-family-base);
    font-size: 18px;
    line-height: 26px;
    max-width: 45rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.bond__description p {
    margin: 0;
}

.bond__body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(var(--space-4), 4vw, 2.5rem);
}

.bond__image {
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 1.1rem;
}

.bond__image img {
    width: 100%;
    height: auto;
    display: block;
}

.bond__features--desktop {
    display: none;
}

.bond__features--mobile {
    width: 100%;
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* No cursor: grab here — nothing in the theme implements drag-to-scroll for
       these rows, so it advertised an interaction that does not exist. */
    gap: var(--space-3);
    /* The scrollbar stays visible here. This row has no arrows, no pagination
       and no drag handler, so hiding it left every card past the first one or two
       with nothing at all to indicate they existed, let alone a way to reach
       them. Until real controls are added, the scrollbar is the only affordance. */
    scrollbar-width: thin;
    /*
     * `overflow-x: auto` forces `overflow-y` to compute to a clipping value
     * too, cutting off `.bond__feature`'s own `box-shadow` top/bottom.
     * `padding-block` gives the shadow room within the box; the matching
     * negative `margin-block` cancels it back out so it doesn't add visible
     * spacing.
     */
    padding-block: 12px;
    margin-block: -12px;
}

/* Deliberately not hidden — see the scrollbar-width note above. In Blink this
   rule would override that and put us back to an invisible scroller. */
.bond__features--mobile::-webkit-scrollbar {
    height: 8px;
}

.bond__features--mobile::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(44, 48, 31, 0.35);
}

.bond__feature {
    flex: 0 0 min(290px, 85vw);
    scroll-snap-align: start;
    user-select: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: 0.75rem;
    background-color: #f9f3ea;
    box-shadow: 0px 3px 10px 0px #464A3A3D;
    text-align: left;
    border: 1px solid #FAE0C0
}

.bond__feature-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-orange-dark);
    border-radius: 50%;
}

.bond__feature-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.bond__feature-icon svg path {
    stroke: var(--color-orange-dark);
}

.bond__feature-text {
    font-family: var(--font-family-base);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-text);
}

.bond__feature-text p {
    margin: 0;
}

.bond__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding-inline: var(--space-4);
    border-radius: 8px;
    background-color: var(--color-grey-1);
    color: var(--color-beige-2);
    font-family: var(--font-family-base);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.bond__button:hover,
.bond__button:focus-visible {
    opacity: 0.85;
}

/* 1200px, not 900px. The three-column body below needs a 660px middle track plus
   two side columns whose own min-content is ~190px each — about 1040px of track
   before gaps — against the 828px a 900px viewport actually offers. The overflow
   was then eaten by .bond { overflow: hidden }, silently cutting the right-hand
   feature column off with no scrollbar and no other way to reach it: measured
   170px lost per feature at 900px. The stacked layout holds until it fits. */
@media (min-width: 1200px) {
    .bond__body {
        display: grid;
        grid-template-columns: 0.5fr minmax(660px, 60%) 0.5fr;
        align-items: center;
        gap: clamp(var(--space-4), 4vw, 2.5rem);
    }

    .bond__features--desktop {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .bond__features--left {
        align-items: stretch;
    }

    .bond__features--right {
        align-items: stretch;
    }

    .bond__features--mobile {
        display: none;
    }

    .bond__feature {
        flex: initial;
    }
}

/* Complement of the 1200px switch above. */
@media (max-width: 1199px) {
    .bond__inner {
    }

    .bond__ornament {
    }

    .bond__ornament-line {
    }

    .bond__ornament-icon {
        width: 32px;
        height: 32px;
    }

    .bond__intro {
    }

    .bond__heading {
        font-weight: 400;
        font-size: 40px;
        line-height: 36px;
    }

    .bond__description {
        font-size: 16px;
        line-height: 24px;
    }

    .bond__body {
    }

    .bond__image {
    }

    .bond__features--desktop {
    }

    .bond__features--mobile {
    }

    .bond__feature {
    }

    .bond__feature-icon {
    }

    .bond__feature-text {
        font-size: 14px;
        line-height: 20px;
    }
    .bond__feature-icon svg{
        width: 20px;
        height: 20px;
    }

    .bond__button {
        width: 100%;
    }
}

@media (max-width: 699px) {
    .bond::before {
        width: 160px;
        height: 133px;
    }
}