/* Block: Partnership Model. All selectors scoped under .partnership-model (BEM). */

.partnership-model {
    position: relative;
    overflow: hidden;
    background: var(--main-color);
    padding: 100px 0;
}

.partnership-model__inner {
    position: relative;
    z-index: 1;
    /*width: 95%;*/
    /*max-width: 1440px;*/
    margin: 0 auto;
}

/* ---- Head (eyebrow / title / subtitle), left-aligned ---------------------- */
.partnership-model__head {
    max-width: 900px;
    margin: 0 0 40px;
}

.partnership-model__eyebrow {
    display: block;
    margin: 0 0 16px;
    font-family: "Chalet Custom", sans-serif;
    color: var(--lightblue);
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: 0.36px;
    text-transform: uppercase;
}

.partnership-model__title {
    margin: 0 0 16px;
    padding: 0;
    font-family: "Zurich", sans-serif;
    font-weight: bold;
    font-size: 60px;
    line-height: 1.1;
    letter-spacing: -0.6px;
    color: #fff;
}

.partnership-model__subtitle {
    margin: 0;
    max-width: 830px;
    font-family: "Chalet Custom", sans-serif;
    font-size: 24px;
    line-height: 1.4;
    color: #fff;
}

/* ---- Body: tall photo (left) + glass card (right) ------------------------- */
.partnership-model__body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    /* Proportional gutter (~150px at 1440) — reproduces both the 1920 and 1440
       frames, which share the same photo/card/gutter ratio (~40.5 / 49.1%). */
    column-gap: 10.4%;
    align-items: stretch;
}

.partnership-model__photo {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
}

/* Absolutely-positioned fill: the photo never dictates the grid row height, so
   it matches the card column exactly (equal-height columns, as in the design). */
.partnership-model__photo-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.partnership-model__card {
    display: flex;
    flex-direction: column;
    gap: 33px;
    padding: 50px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.partnership-model__card-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.partnership-model__card-title {
    margin: 0;
    padding: 0;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: #fff;
}

.partnership-model__card-description {
    margin: 0;
    font-family: "Chalet Custom", sans-serif;
    font-size: 20px;
    line-height: 1.4;
    color: #fff;
}

.partnership-model__divider {
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

/* ---- Stage cards ---------------------------------------------------------- */
.partnership-model__stages {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.partnership-model__stage {
    min-height: 200px;
    padding: 28px;
    background: rgba(210, 223, 232, 0.1);
    border-radius: 8px;
    -webkit-backdrop-filter: blur(16.5px);
    backdrop-filter: blur(16.5px);
}

.partnership-model__stage-label {
    display: block;
    margin: 0 0 6px;
    color: #7AE567;
    font-family: "Chalet Custom", sans-serif;
    font-size: 16px;
    line-height: 1.3;
    text-transform: uppercase;
}

.partnership-model__stage-title {
    margin: 0 0 6px;
    padding: 0;
    font-family: "Chalet Custom", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: #fff;
}

.partnership-model__stage-text {
    margin: 0;
    font-family: "Chalet Custom", sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: #fff;
}

/* ---- Benefits ------------------------------------------------------------- */
.partnership-model__benefits {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.partnership-model__benefit {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #fff;
    font-family: "Chalet Custom", sans-serif;
    font-size: 20px;
    line-height: 1.5;
}

.partnership-model__check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 3px;
}

/* ---- CTA ------------------------------------------------------------------ */
.partnership-model__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 18px 38px;
    background: #7AE567;
    border-radius: 8px;
    color: var(--main-color);
    font-family: "Chalet Custom", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    text-align: center;
    text-transform: capitalize;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.partnership-model__button:hover,
.partnership-model__button:focus {
    opacity: 0.9;
    color: var(--main-color);
    text-decoration: none;
}

/* ---- Responsive -----------------------------------------------------------
   Three tiers matching the Figma frames:
   base >=1500px = 1920 frame, <=1499px = 1440 frame, <=1023px = 375 frame. */

/* Tablet / laptop — Figma frame 1440. Same 2-column layout, type scaled down.
   The body grid uses a proportional gutter, so columns/gap already match the
   1440 frame here — only typography and the inner card are scaled. */
@media (max-width: 1499px) {
    .partnership-model {
        padding: 72px 0;
    }

    .partnership-model__eyebrow {
        font-size: 16px;
    }

    .partnership-model__title {
        font-size: 50px;
    }

    .partnership-model__subtitle {
        font-size: 20px;
    }

    .partnership-model__photo {
        border-radius: 20px;
    }

    .partnership-model__card {
        gap: 27.5px;
        padding: 40px;
        border-radius: 20px;
    }

    .partnership-model__card-head {
        gap: 6px;
    }

    .partnership-model__card-title {
        font-size: 24px;
    }

    .partnership-model__card-description {
        font-size: 16px;
    }

    .partnership-model__stages {
        gap: 16px;
    }

    .partnership-model__stage {
        min-height: 167px;
        padding: 24px;
        border-radius: 7px;
    }

    .partnership-model__stage-label {
        font-size: 14px;
    }

    .partnership-model__stage-title {
        font-size: 16px;
    }

    .partnership-model__stage-text {
        font-size: 14px;
    }

    .partnership-model__benefits {
        gap: 10px;
    }

    .partnership-model__benefit {
        gap: 6px;
        font-size: 16px;
    }

    .partnership-model__check {
        width: 20px;
        height: 20px;
        margin-top: 2px;
    }

    .partnership-model__button {
        padding: 15px 32px;
        font-size: 18px;
        border-radius: 7px;
    }
}

/* Mobile — Figma frame 375. Fully stacked: photo on top, card below;
   single-column stages; head is centered. */
@media (max-width: 1023px) {
    .partnership-model {
        padding: 48px 0;
    }

    /* Centered head on mobile (matches the 375 frame). */
    .partnership-model__head {
        margin-bottom: 24px;
        text-align: center;
    }

    .partnership-model__eyebrow {
        margin-bottom: 10px;
        font-size: 12px;
    }

    .partnership-model__title {
        font-size: 26px;
    }

    .partnership-model__subtitle {
        font-size: 16px;
    }

    /* Photo stacks above the card, landscape crop (335x234 in the frame). */
    .partnership-model__body {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .partnership-model__photo {
        aspect-ratio: 43 / 30;
        max-height: 320px;
        border-radius: 18px;
    }

    .partnership-model__card {
        gap: 18px;
        padding: 30px 28px;
        border-radius: 20px;
    }

    .partnership-model__card-head {
        gap: 4px;
    }

    .partnership-model__card-title {
        font-size: 18px;
    }

    .partnership-model__card-description {
        font-size: 14px;
    }

    /* Single-column stage cards, height driven by content. */
    .partnership-model__stages {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .partnership-model__stage {
        min-height: 0;
    }

    .partnership-model__benefits {
        gap: 7px;
    }

    .partnership-model__benefit {
        gap: 4px;
        font-size: 14px;
    }

    .partnership-model__check {
        width: 16px;
        height: 16px;
    }

    .partnership-model__button {
        padding: 10px 22px;
        font-size: 14px;
        border-radius: 4px;
    }
}