/*
 * peptilab/feature-split — frontend styles
 *
 * Layout: text card (left, ~596) + square image (right, ~620), 24px gap,
 * proportional shrink. Stacks on mobile (text top, image bottom).
 */

.pl-feature-split {
    background: #fff;
}

.pl-feature-split__inner {
    max-width:   1360px;          /* 1240 content + 2×60 */
    margin:      0 auto;
    padding:     80px 60px;
    box-sizing:  border-box;
    display:     flex;
    gap:         24px;
    align-items: stretch;
}

/* ============================================================
   Left — text card
   ============================================================ */
.pl-feature-split__text {
    flex:           596 1 0;       /* 596 : 620 ratio at full width */
    min-width:      0;
    display:        flex;
    flex-direction: column;
    padding:        32px;
    border-radius:  32px;
    background:     var( --pl-fs-bg, #F7F9FC );
    box-sizing:     border-box;
}

/* Heading + paragraph */
.pl-feature-split__top {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    margin-bottom:  32px;          /* minimum gap before the feature list */
}

.pl-feature-split__heading {
    margin:         0;
    color:          #1A1A1A;
    font-family:    Switzer, sans-serif;
    font-size:      40px;
    font-style:     normal;
    font-weight:    500;
    line-height:    48px;
    text-transform: capitalize;
}

.pl-feature-split__desc {
    margin:      0;
    color:       #1A1A1A;
    font-family: Inter, sans-serif;
    font-size:   18px;
    font-style:  normal;
    font-weight: 400;
    line-height: 28px;
}

.pl-feature-split__desc p {
    margin: 0;
}

/* ============================================================
   Feature list — 2-column grid, pinned to the bottom of the card
   ============================================================ */
.pl-feature-split__features {
    margin-top:            auto;   /* push to the bottom; height set by image */
    display:               grid;
    grid-template-columns: repeat( 2, minmax(0, 1fr) );
    gap:                   20px;
}

.pl-feature-split__feature {
    display:     flex;
    align-items: flex-start;
    gap:         16px;
}

.pl-feature-split__icon {
    flex-shrink:     0;
    width:           48px;
    height:          48px;
    padding:         10px;
    border-radius:   50%;
    background:      var( --pl-fs-icon-bg, #537FF4 );
    box-sizing:      border-box;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.pl-feature-split__icon img,
.pl-feature-split__icon svg {
    width:      100%;
    height:     100%;
    object-fit: contain;
    display:    block;
}

.pl-feature-split__feature-body {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    min-width:      0;
}

.pl-feature-split__feature-title {
    margin:      0;
    color:       #000E15;
    font-family: Inter, sans-serif;
    font-size:   18px;
    font-style:  normal;
    font-weight: 500;
    line-height: 28px;
}

.pl-feature-split__feature-text {
    margin:      0;
    color:       var( --grey-blue-darker, #6E7787 );
    font-family: Inter, sans-serif;
    font-size:   14px;
    font-style:  normal;
    font-weight: 400;
    line-height: 20px;
}

/* ============================================================
   Right — square image
   ============================================================ */
.pl-feature-split__media {
    flex:          620 1 0;
    min-width:     0;
    align-self:    flex-start;     /* stay square even if the text card is taller */
    aspect-ratio:  1 / 1;
    border-radius: 32px;
    overflow:      hidden;
}

.pl-feature-split__media img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* ============================================================
   Responsive — tablet down-scale handled by flex; stack on mobile
   ============================================================ */
@media (max-width: 1024px) {
    .pl-feature-split__inner {
        padding:        40px 24px;
        flex-direction: column;    /* text top, image bottom */
        gap:            24px;
    }

    .pl-feature-split__text,
    .pl-feature-split__media {
        flex:       0 0 auto;
        width:      100%;
        align-self: stretch;
    }

    .pl-feature-split__text {
        padding: 20px;
    }

    .pl-feature-split__heading {
        font-size:   24px;
        line-height: 32px;
    }

    .pl-feature-split__desc {
        font-size:   16px;
        line-height: 24px;
    }
}

@media (max-width: 1024px) {
    .pl-feature-split__features {
        grid-template-columns: minmax(0, 1fr);
    }
}