/* ─────────────────────────────────────────────────────
   Residents → Условия аренды блока
   Pixel-perfect from Figma (frame 1840 px).
   Accordion JS reads --lease-* custom properties.
   ───────────────────────────────────────────────────── */
.residents-lease-terms,
.residents-lease-terms * {
    box-sizing: border-box;
}

/* ── Section ─────────────────────────────────────── */
.residents-lease-terms {
    /* accordion JS variables */
    --lease-row-expanded: 601px;
    --lease-row-collapsed: 112px;
    --lease-icon-expanded: 371px;
    --lease-icon-collapsed: 112px;
    --lease-row-title-expanded: 52px;
    --lease-row-title-collapsed: 34px;

    width: 100%;
    overflow: clip;
    overflow-anchor: none;
    background: #1f1f1f;
    color: #fff;
}

/* ── Inner container ─────────────────────────────── */
.residents-lease-terms__inner {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 72px 40px 0;
}

/* ── Header (intro left + title right) ───────────── */
.residents-lease-terms__header {
    display: grid;
    /* Figma: intro 416px  |  gap 32px  |  title 1fr */
    grid-template-columns: 416px 1fr;
    column-gap: 32px;
    align-items: start;
    padding: 0 0 54px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.residents-lease-terms__intro {
    max-width: 416px;
    margin: 0;
    color: #fff;
    font-family: 'Manrope', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    white-space: pre-line;
}

.residents-lease-terms__title {
    margin: -7px 0 0;
    color: #fff;
    font-family: 'RoadRadio', Arial, Helvetica, sans-serif;
    font-size: clamp(58px, 5.3vw, 100px);
    font-weight: 700;
    line-height: 0.82;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: pre-line;
}

/* ── Row list ────────────────────────────────────── */
.residents-lease-terms__list {
    width: 100%;
}

/* ── Single row — 3-column grid
      Figma columns (1840px):
        index zone  318px  (26 text + 292 gap) = 17.28%
        content+gap 990px  (796 content + 194 gap) = 1fr
        icon        532px  = 28.91%
   ─────────────────────────────────────────────────── */
.residents-lease-terms__row {
    position: relative;
    display: grid;
    grid-template-columns: 17.28% 1fr 28.91%;
    column-gap: 0;
    align-items: start;
    height: var(--lease-row-expanded);
    min-height: 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    background: #1f1f1f;
    overflow-anchor: none;
}

/* ── Index [1] ───────────────────────────────────── */
.residents-lease-terms__index {
    align-self: start;
    padding-top: 44px;
    color: #fff;
    font-family: 'RoadRadio', Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 36px;
    white-space: nowrap;
}

/* ── Content (title + chips) ─────────────────────── */
.residents-lease-terms__content {
    align-self: start;
    padding: 44px 0;
    min-width: 0;
    /* Figma content = 796px, gap to icon = 194px, total col ≈ 990px
       natural width is fine, the 194px gap is implicit space on the right */
}

.residents-lease-terms__content h3 {
    margin: 0 0 27px;
    color: #fff;
    font-family: 'RoadRadio', Arial, Helvetica, sans-serif;
    font-size: var(--lease-row-title-expanded);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* ── Chips (pill tags)
      Figma chip: Manrope 500 24/28, border 2px, radius 9999,
      padding 3 4 3 4, gap between chips 3px
   ─────────────────────────────────────────────────── */
.residents-lease-terms__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
}

.residents-lease-terms__chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 4px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
    color: rgba(255, 255, 255, 0.96);
    font-family: 'Manrope', Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    white-space: nowrap;
}

.residents-lease-terms__chip::before {
    content: '•';
    margin-right: 5px;
    font-size: 15px;
    line-height: 1;
}

/* ── Icon card (dark box with big number)
      Figma: 532×371, bg #0f0f0f
   ─────────────────────────────────────────────────── */
.residents-lease-terms__icon {
    align-self: start;
    width: 100%;
    height: var(--lease-icon-expanded);
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #0f0f0f;
    color: #fff;
}

.residents-lease-terms__icon img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
}

/* Figma number "1": ~84.61×160.6px, RoadRadio 700 */
.residents-lease-terms__icon > span {
    display: block;
    font-family: 'RoadRadio', Arial, Helvetica, sans-serif;
    font-size: clamp(100px, 8.7vw, 160px);
    font-weight: 700;
    line-height: 1;
}

/* ── Accordion active — icon img sizing ──────────── */
@media (min-width: 861px) {
    .residents-lease-terms.is-lease-accordion .residents-lease-terms__icon img {
        width: 60%;
        height: auto;
        max-height: none;
    }
}

/* ═══════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════ */

/* ── ≤1600 px ────────────────────────────────────── */
@media (max-width: 1600px) {
    .residents-lease-terms {
        --lease-row-expanded: 520px;
        --lease-row-collapsed: 106px;
        --lease-icon-expanded: 340px;
        --lease-icon-collapsed: 106px;
        --lease-row-title-expanded: 46px;
        --lease-row-title-collapsed: 30px;
    }

    .residents-lease-terms__inner {
        padding-inline: 40px;
    }

    .residents-lease-terms__header {
        grid-template-columns: 340px 1fr;
        column-gap: 28px;
    }

    .residents-lease-terms__row {
        grid-template-columns: 15% 1fr 28%;
    }

    .residents-lease-terms__chip {
        font-size: 20px;
        line-height: 24px;
    }

    .residents-lease-terms__icon > span {
        font-size: clamp(90px, 8vw, 140px);
    }
}

/* ── ≤1180 px ────────────────────────────────────── */
@media (max-width: 1180px) {
    .residents-lease-terms {
        --lease-row-expanded: 420px;
        --lease-row-collapsed: 96px;
        --lease-icon-expanded: 280px;
        --lease-icon-collapsed: 96px;
        --lease-row-title-expanded: 36px;
        --lease-row-title-collapsed: 25px;
    }

    .residents-lease-terms__inner {
        padding: 64px 24px 0;
    }

    .residents-lease-terms__header {
        grid-template-columns: 260px 1fr;
        column-gap: 24px;
        padding-bottom: 40px;
    }

    .residents-lease-terms__title {
        font-size: clamp(46px, 5.4vw, 64px);
    }

    .residents-lease-terms__row {
        grid-template-columns: 12% 1fr 28%;
        column-gap: 16px;
    }

    .residents-lease-terms__index {
        padding-top: 36px;
        font-size: 24px;
        line-height: 28px;
    }

    .residents-lease-terms__content {
        padding: 36px 0;
    }

    .residents-lease-terms__content h3 {
        margin-bottom: 22px;
    }

    .residents-lease-terms__chip {
        font-size: 16px;
        line-height: 22px;
        padding: 3px 4px;
    }

    .residents-lease-terms__icon > span {
        font-size: clamp(80px, 7vw, 120px);
    }
}

/* ── ≤860 px — mobile stacked ────────────────────── */
@media (max-width: 860px) {
    .residents-lease-terms__inner {
        padding: 54px 16px 0;
    }

    .residents-lease-terms__header {
        display: block;
        padding-bottom: 42px;
    }

    .residents-lease-terms__intro {
        margin-bottom: 28px;
    }

    .residents-lease-terms__title {
        margin-top: 0;
        font-size: clamp(42px, 8vw, 58px);
    }

    .residents-lease-terms__row {
        grid-template-columns: 60px 1fr;
        gap: 0 16px;
        height: auto !important;
        min-height: 0;
        overflow: visible;
        padding: 36px 0;
    }

    .residents-lease-terms__index {
        grid-column: 1;
        grid-row: 1;
        padding-top: 4px;
        font-size: 20px;
        line-height: 24px;
    }

    .residents-lease-terms__content {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        padding: 0 0 28px;
    }

    .residents-lease-terms__content h3 {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .residents-lease-terms__chips {
        gap: 6px;
    }

    .residents-lease-terms__chip {
        font-size: 14px;
        line-height: 20px;
        padding: 3px 6px;
        white-space: normal;
    }

    .residents-lease-terms__icon {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-width: 420px;
        height: 280px;
    }

    .residents-lease-terms__icon > span {
        font-size: 110px;
    }
}

/* ── ≤520 px — tight mobile ──────────────────────── */
@media (max-width: 520px) {
    .residents-lease-terms__inner {
        padding: 44px 16px 0;
    }

    .residents-lease-terms__header {
        padding-bottom: 30px;
    }

    .residents-lease-terms__intro {
        max-width: 280px;
        margin-bottom: 22px;
        font-size: 13px;
        line-height: 18px;
    }

    .residents-lease-terms__title {
        font-size: 36px;
        line-height: 1;
    }

    .residents-lease-terms__row {
        grid-template-columns: 42px 1fr;
        column-gap: 10px;
        padding: 28px 0;
    }

    .residents-lease-terms__index {
        font-size: 13px;
        line-height: 18px;
    }

    .residents-lease-terms__content {
        padding-bottom: 22px;
    }

    .residents-lease-terms__content h3 {
        margin-bottom: 16px;
        font-size: 24px;
        line-height: 1.08;
    }

    .residents-lease-terms__chip {
        font-size: 12px;
        line-height: 16px;
        padding: 2px 4px;
    }

    .residents-lease-terms__icon {
        height: min(68vw, 260px);
    }

    .residents-lease-terms__icon > span {
        font-size: 90px;
    }
}