/* «Наша команда» на /about/. Кадр 2103:1456.
   Stage y0 = Figma 7056. Колонка 1440 (x − 240). Absolute/grid — от 1401px.
   Контент из ИБ, вёрстка по Draft. */

.af-team {
    position: relative;
    padding: 48px 0 56px;
    background: #fff;
    overflow: visible;
}

.af-team__stage {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.af-team__title {
    margin: 0 0 28px;
    font-family: 'Google Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.8px;
    text-align: center;
    color: #4D4D4D;
}

.af-team__title span {
    color: #3EA74F;
}

.af-team__tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    max-width: 100%;
    height: 48px;
    margin: 0 auto 32px;
    padding: 0;
    box-sizing: border-box;
    background: #E7F7E9;
    border-radius: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.af-team__tabs::-webkit-scrollbar {
    display: none;
}

.af-team__tab {
    flex: 0 0 auto;
    height: 48px;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 40px;
    background: transparent;
    color: #4D4D4D;
    font-family: 'Google Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
}

.af-team__tab.is-active {
    background: #59CA6B;
    color: #fff;
}

.af-team__panel[hidden],
.af-team__panel:not(.is-active) {
    display: none !important;
}

.af-team__panel.is-active {
    display: block;
}

.af-team__groups {
    display: flex;
    flex-direction: column;
    gap: 56px;
    width: 100%;
}

.af-team__groups--departments {
    gap: 12px;
}

.af-team__group {
    width: 100%;
}

/* Сброс глобальных styles main.css: details / details>div (FAQ padding 180px). */
.af-team__group--accordion {
    border-radius: 20px;
    background: #f5fff7;
    box-sizing: border-box;
    scroll-margin-top: 96px;
    padding: 0;
    width: 100%;
    max-width: none;
}

body.page-about details.af-team__group--accordion > .af-team__group-body {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    box-sizing: border-box;
}

.af-team__group-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    padding: 18px 20px;
    list-style: none;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}

.af-team__group-summary::-webkit-details-marker,
.af-team__group-summary::marker {
    display: none;
    content: '';
}

.af-team__group-title {
    margin: 0 0 28px;
    font-family: 'Google Sans', Arial, sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.56px;
    text-align: center;
    color: #3EA74F;
}

.af-team__group-summary .af-team__group-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.af-team__group-toggle {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #c5efcc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='10' viewBox='0 0 15 10' fill='none'%3E%3Cpath d='M14.7836 7.93039C15.2119 8.57513 14.9849 9.41445 14.2758 9.80384C13.5667 10.193 12.6454 9.98501 12.2172 9.34036C10.887 7.3378 10.4093 6.48697 9.9828 5.76216C9.5867 5.08908 9.22604 4.51009 8.08827 2.98129C7.97687 2.83161 7.88161 2.78085 7.8246 2.75932C7.75809 2.73433 7.65642 2.71747 7.51015 2.73446C7.17855 2.77318 6.8259 2.96392 6.64882 3.14999C5.68885 4.25354 4.9919 5.30721 4.40663 6.27892C3.85019 7.20279 3.29949 8.22795 2.77187 8.99408C2.33209 9.6321 1.40548 9.82523 0.70351 9.4256C0.0018 9.02575-0.2106 8.18327 0.2289 7.54505C0.7011 6.85932 1.1052 6.08177 1.7758 4.96839C2.4124 3.91143 3.2092 2.70304 4.3266 1.42393L4.3578 1.38842C4.9951 0.706645 6.0208 0.157133 7.1312 0.02817C8.3375-0.111757 9.6817 0.255243 10.5726 1.45235C11.7582 3.04529 12.1739 3.706 12.6273 4.4765C13.0504 5.19548 13.4967 5.99306 14.7836 7.93039Z' fill='%233EA74F'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 9px;
    transition: background-color 0.2s ease;
}

.af-team__group--accordion[open] .af-team__group-toggle,
.af-team__group--accordion.is-open .af-team__group-toggle {
    background-color: #3ea74f;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='10' viewBox='0 0 15 10' fill='none'%3E%3Cpath d='M0.21642 2.06961C-0.21186 1.42487 0.0151 0.585552 0.724232 0.19616C1.43332-0.192995 2.35461 0.014993 2.78282 0.659638C4.11305 2.6622 4.59066 3.51303 5.0172 4.23784C5.4133 4.91092 5.77396 5.48991 6.91173 7.01871C7.02313 7.16839 7.11839 7.21915 7.1754 7.24068C7.24191 7.26567 7.34358 7.28253 7.48985 7.26554C7.82145 7.22682 8.1741 7.03608 8.35118 6.85001C9.31115 5.74646 10.0081 4.69279 10.5934 3.72108C11.1498 2.79721 11.7005 1.77205 12.2281 1.00592C12.6679 0.367903 13.5945 0.174773 14.2965 0.574401C14.9982 0.97425 15.2106 1.81673 14.7711 2.45495C14.2989 3.14068 13.8948 3.91823 13.2242 5.03161C12.5876 6.08857 11.7908 7.29696 10.6734 8.57607L10.6422 8.61158C10.0049 9.29336 8.97924 9.84287 7.86876 9.97183C6.66247 10.1118 5.31829 9.74476 4.42735 8.54765C3.24184 6.95471 2.82609 6.294 2.37267 5.5235C1.94956 4.80452 1.5033 4.00694 0.21642 2.06961Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

.af-team__group--accordion .af-team__group-body {
    height: 0;
    overflow: hidden;
    transition: height 0.4s ease;
}

.af-team__group--accordion .af-team__group-body .af-team__cards-wrap {
    padding: 0 16px 28px;
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    .af-team__group--accordion .af-team__group-body {
        transition: none;
    }
}

.af-team__cards-wrap {
    width: 100%;
}

.af-team__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    justify-content: center;
}

.af-team-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 355px;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    box-sizing: border-box;
}

.af-team-card.is-hidden {
    display: none !important;
}

.af-team-card__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 275px;
    margin: 36px 0 0;
    background: transparent;
}

.af-team-card__name {
    margin: 0;
    color: #3EA74F;
    font-family: 'Google Sans', Arial, sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 0.9;
}

.af-team-card__position {
    margin: 0;
    color: rgba(95, 94, 94, 0.6);
    font-family: 'Google Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.1;
}

.af-team-card__email {
    color: #343333;
    font-family: 'Google Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.1;
    text-decoration: none;
    word-break: break-word;
}

.af-team-card__email:hover {
    color: #3EA74F;
}

.af-team-card__media {
    position: relative;
    width: 324px;
    max-width: 100%;
    height: auto;
    margin: 0;
    aspect-ratio: 324 / 335;
    overflow: visible;
}

/* Поворот общий для фото и кружков — иначе точки остаются в AABB и съезжают с кадра. */
.af-team-card__photo-stage {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-5deg);
    transform-origin: center center;
    overflow: visible;
}

.af-team-card__photo-wrap {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0f0;
}

.af-team-card__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.af-team-card__dot {
    position: absolute;
    z-index: 2;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3EA74F;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

/* Центры на кромке кадра (половина 10px-bullet снаружи — как в Figma). */
.af-team-card__dot--a {
    left: 63.3%;
    top: 0;
}

.af-team-card__dot--b {
    left: 100%;
    top: 6.9%;
}

.af-team-card__dot--c {
    left: 100%;
    top: 51.3%;
}

.af-team__more {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 250px;
    height: 50px;
    margin: 36px auto 0;
    padding: 0 32px;
    border: 0;
    border-radius: 999px;
    background: #3EA74F;
    color: #fff;
    font-family: 'Google Sans', Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

/* Figma 2103:1651–1659 — Документы / Отчёты / Вакансии */
.af-team__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 401px;
    margin: 40px auto 0;
}

.af-team__link {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 64px;
    padding: 0 28px;
    border-radius: 20px;
    background: #3EA74F;
    color: #fff;
    font-family: 'Google Sans', Arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -0.2px;
    text-decoration: none;
}

.af-team__link:hover {
    background: #359545;
    color: #fff;
}

@media (min-width: 768px) and (max-width: 1400px) {

    body.page-about .af-team__stage {
        max-width: 1100px;
        padding: 0 24px;
    }

    body.page-about .af-team__title {
        font-size: 52px;
        letter-spacing: -1.04px;
        margin-bottom: 36px;
    }

    body.page-about .af-team__tabs {
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
        max-width: 100%;
        margin: 0 auto 40px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.page-about .af-team__tabs::-webkit-scrollbar {
        display: none;
    }

    body.page-about .af-team__tab {
        flex: 0 0 auto;
        height: 53px;
        padding: 0 22px;
        font-size: 18px;
    }

    body.page-about .af-team__groups--departments {
        gap: 16px;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    body.page-about details.af-team__group--accordion {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }

    body.page-about .af-team__group-summary {
        justify-content: space-between;
        padding: 22px 28px;
        gap: 16px;
    }

    body.page-about .af-team__group-title {
        margin: 0 0 36px;
        font-size: 32px;
        letter-spacing: -0.64px;
    }

    body.page-about .af-team__group-summary .af-team__group-title {
        margin: 0;
        text-align: left;
    }

    body.page-about .af-team__group-toggle {
        width: 43px;
        height: 43px;
    }

    body.page-about details.af-team__group--accordion {
        padding: 0;
    }

    body.page-about details.af-team__group--accordion > .af-team__group-body {
        padding: 0;
    }

    body.page-about .af-team__group--accordion .af-team__group-body .af-team__cards-wrap {
        padding: 0 28px 40px;
    }

    body.page-about .af-team__cards {
        grid-template-columns: repeat(4, minmax(0, 240px));
        gap: 56px 28px;
        justify-content: center;
        width: 100%;
        max-width: 100%;
    }

    body.page-about .af-team-card {
        margin: 0;
        max-width: none;
        width: 100%;
    }

    body.page-about .af-team-card__name {
        font-size: 22px;
    }
}

@media (min-width: 1401px) {

    body.page-about .af-team {
        padding: 0;
        overflow-x: clip;
        background: #fff;
    }

    body.page-about .af-team__stage {
        width: 1440px;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    body.page-about .af-team__title {
        margin: 0 0 73px;
        font-size: 66px;
        letter-spacing: -1.32px;
    }

    /* Мятный трек на всю ширину; кнопки по контенту, разнесены space-between */
    body.page-about .af-team__tabs {
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
        max-width: 100%;
        height: 53px;
        margin: 0 auto 76px;
        padding: 0;
        gap: 0;
        overflow-x: auto;
        overflow-y: hidden;
        background: #E7F7E9;
        border-radius: 40px;
    }

    body.page-about .af-team__tab {
        flex: 0 0 auto;
        height: 53px;
        padding: 0 28px;
        font-size: 24px;
        line-height: 1.1;
    }

    body.page-about .af-team__tab.is-active {
        background: #59CA6B;
        color: #fff;
    }

    body.page-about .af-team__groups--departments {
        gap: 16px;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    body.page-about details.af-team__group--accordion {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }

    body.page-about .af-team__group-summary {
        justify-content: space-between;
        padding: 24px 36px;
        gap: 18px;
    }

    body.page-about .af-team__group-title {
        margin: 0 0 48px;
        font-size: 40px;
        letter-spacing: -0.8px;
        text-align: center;
    }

    body.page-about .af-team__group-summary .af-team__group-title {
        margin: 0;
        font-size: 32px;
        letter-spacing: -0.64px;
        text-align: left;
    }

    body.page-about .af-team__group-toggle {
        width: 48px;
        height: 48px;
        background-size: 15px 10px;
    }

    body.page-about .af-team__group--accordion {
        scroll-margin-top: 110px;
    }

    body.page-about details.af-team__group--accordion {
        padding: 0;
    }

    body.page-about details.af-team__group--accordion > .af-team__group-body {
        padding: 0;
    }

    body.page-about .af-team__group--accordion .af-team__group-body .af-team__cards-wrap {
        padding: 0 36px 56px;
    }

    body.page-about .af-team__cards {
        grid-template-columns: repeat(4, 260px);
        column-gap: 80px;
        row-gap: 80px;
        justify-content: center;
        /* 4×260 + 3×80 = 1280 */
        width: 1280px;
        max-width: 100%;
        margin: 0 auto;
    }

    body.page-about .af-team__groups--departments .af-team__cards {
        width: 1280px;
        max-width: 100%;
    }

    body.page-about .af-team-card {
        width: 260px;
        max-width: none;
        margin: 0;
    }

    body.page-about .af-team-card__content {
        max-width: 220px;
        margin: 32px 0 0 36px;
        gap: 10px;
    }

    body.page-about .af-team-card__name {
        font-size: 22px;
        line-height: 0.9;
    }

    body.page-about .af-team-card__position {
        font-size: 13px;
    }

    body.page-about .af-team-card__email {
        font-size: 13px;
    }

    body.page-about .af-team-card__media {
        width: 260px;
        height: 269px;
        aspect-ratio: auto;
    }

    body.page-about .af-team-card__photo-stage,
    body.page-about .af-team-card__photo-wrap {
        width: 260px;
        height: 269px;
    }

    body.page-about .af-team__more {
        margin-top: 48px;
        border-radius: 20px;
        min-width: 280px;
        height: 53px;
        background: #3EA74F;
        font-size: 16px;
    }

    /* Figma: кнопки 401×88, gap 42, от фото ~157 */
    body.page-about .af-team__links {
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        gap: 42px;
        width: 1287px;
        max-width: 100%;
        margin: 157px auto 0;
    }

    body.page-about .af-team__link {
        flex: 0 0 401px;
        width: 401px;
        max-width: calc((100% - 84px) / 3);
        height: 88px;
        min-height: 88px;
        padding: 0 43px;
        font-size: 26px;
        letter-spacing: -0.26px;
    }
}

@media (max-width: 767px) {

    body.page-about .af-team__groups--departments {
        gap: 10px;
    }

    body.page-about .af-team__group-summary {
        padding: 14px 16px;
        gap: 10px;
        justify-content: space-between;
    }

    body.page-about .af-team__group-title {
        margin: 0 0 20px;
        font-size: 24px;
        letter-spacing: -0.48px;
        text-align: center;
    }

    body.page-about .af-team__group-summary .af-team__group-title {
        margin: 0;
        font-size: 18px;
        letter-spacing: -0.36px;
        text-align: left;
    }

    body.page-about .af-team__group-toggle {
        width: 36px;
        height: 36px;
        background-size: 12px 8px;
    }

    body.page-about .af-team__group--accordion {
        scroll-margin-top: 72px;
    }

    body.page-about .af-team__group--accordion .af-team__group-body .af-team__cards-wrap {
        padding: 0 12px 20px;
    }

    body.page-about .af-team__cards-wrap {
        display: block;
        width: calc(100% + 16px);
        margin: 0 -16px 0 0;
        padding: 0 16px 8px 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    body.page-about .af-team__cards-wrap::-webkit-scrollbar {
        display: none;
    }

    body.page-about .af-team__cards {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 20px;
        width: max-content;
        padding-right: 16px;
    }

    body.page-about .af-team__cards .af-team-card {
        flex: 0 0 280px;
        width: 280px;
        max-width: 280px;
        scroll-snap-align: start;
    }

    body.page-about .af-team__cards .af-team-card.is-hidden {
        display: flex !important;
    }

    body.page-about .af-team__more {
        display: none !important;
    }

    body.page-about .af-team-card__media {
        width: 280px;
    }

    body.page-about .af-team-card__content {
        margin: 28px 0 0 12px;
        max-width: 250px;
    }
}