/* ══════════════════════════
   SECTION  .possibility
══════════════════════════ */
.possibility {
    padding: 40px 0 40px;
    overflow: hidden;
    background-color: var(--bg);
    border-bottom: 1px solid var(--grey-1);
}

/* ─── TOP-LEVEL LAYOUT ───
   Mobile:  column (img → text)
   1024px+: row   (img left, text right)
*/
.possibility__layout {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: flex-start;
}

/* ── IMAGE COLUMN ── */
.possibility__img-col {
    width: 100%;
    flex-shrink: 0;
}
.possibility__img-col picture{
    overflow: hidden;
}

.possibility__img {
    width: 100%;
    max-width: 540px;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 12px 36px rgba(0,0,0,.10));
}

/* ── RIGHT TEXT COLUMN ── */
.possibility__text-col {
    width: 100%;
}

.possibility__label {
    display: block;
}

.possibility__title {
    margin-bottom: 24px;
    margin-top: 0;
}

/* ══════════════════════════
   CONTENT GRID
   3 direct children, no wrappers:
     .possibility__list  — bullet list
     .btn-cell   — CTA button
     .possibility-text  — paragraphs

   Mobile:  single column, stacked
   768px+:  2 columns: [list+btn] | [desc]
            list & btn stacked in col 1
            desc spans rows in col 2
══════════════════════════ */
.possibility__content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* ── Feature list ── */
.possibility__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-left: 0;
    padding-left: 0;
    margin-top: 0;
}
.possibility__list li {
    line-height: 1.5;
    color: var(--text);
    padding-left: 20px;
    position: relative;
}
.possibility__list li::before {
    content: '•';
    position: absolute;
    left: 4px;
    top: 0;
    color: var(--dark);
    line-height: 1.5;
}

/* ── Button cell ── */
.btn-cell {
    /* intentionally empty wrapper — just a direct grid child */
}

/* ── Description ── */
.possibility-text {
}
.possibility-text strong {
    color: var(--dark);
    font-weight: 700;
}
.possibility-text p + p {
    margin-top: 14px;
}

.possibility__img-col{
    display: none;
}

.possibility__img-mobile img{
    height: auto;
    object-fit: cover;
}

/* ══════════════════════════
   TABLET  768px
══════════════════════════ */
@media (min-width: 768px) {
    .possibility { padding: 52px 0 64px; }

    .possibility__img { max-width: 100%; margin: 0; }

    /* 2-col content: list+btn left | desc right */
    .possibility__content {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        column-gap: 24px;
        row-gap: 24px;
    }

    .possibility__list {
        grid-column: 1;
        grid-row: 1;
    }
    .btn-cell {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
    }
    .possibility-text {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: start;
    }
}

/* ══════════════════════════
   DESKTOP  1024px
   Two-column outer: img left (bleed) | text right
══════════════════════════ */
@media (min-width: 1024px) {
    .possibility { padding: 56px 0 68px; overflow: visible; }

    .possibility-text.text p {
        margin-bottom: 24px;
    }

    .possibility-text.text p:nth-last-child(1) {
        margin-bottom: 0;
    }

    .possibility__layout {
        flex-direction: row;
        align-items: center;
        gap: 0;
    }

    /* Image bleeds to the left past container edge */
    .possibility__img-col {
        flex: 0 0 auto;
        /* Width: ~46% of content + the left bleed */
        width: calc(33% + 48px + max(0px, (100vw - var(--content)) / 2));
        /* Shift left to bleed beyond container */
        margin-left: calc(-33px - max(0px, (100vw - var(--content)) / 2));
        padding-right: 0;
        display: flex;
        align-items: center;
        overflow: hidden;
        justify-content: flex-end;
    }

    .possibility__img-mobile{
        display: none;
    }

    .possibility__img {
        max-width: 751px;
        width: 100%;
        margin: 0;
    }

    .possibility__text-col {
        flex: 1;
        padding-left: 52px;
        min-width: 0;
    }

    .possibility__title {
        margin-bottom: 28px;
    }

    .possibility__content {
        column-gap: 24px;
        row-gap: 24px;
    }

    .possibility__list li {  }

    .possibility .button.button-black{
        width: fit-content;
    }

    .possibility .text.classic-list li{
        margin: 0 0 0.6rem;
    }
}

/* ══════════════════════════
   1440px+
══════════════════════════ */
@media (min-width: 1440px) {
    .possibility__content {
        column-gap: 24px;
    }
}