/* ============================================================
   looking-guardians — секция «Будущим опекунам и родителям»
   Полное соответствие шаблону Figma/Anima
   Источники: styleguide.css (токены) + style.css (позиции/размеры)
   ============================================================ */

/* --- CSS Custom Properties (из styleguide.css) --- */
:root {
    /* Цвета */
    --lg-white: rgba(255, 255, 255, 1);
    --lg-gray: rgba(95, 94, 94, 1);
    --lg-black: rgba(52, 51, 51, 1);
    --lg-green: rgba(62, 167, 79, 1);
    --lg-dark-green: rgba(24, 94, 48, 1);
    --lg-bg-gray: rgba(244, 244, 244, 1);

    /* Типографика: H2 (шаблон: --1440-h2-*) */
    --lg-h2-font-family: "Roboto", Helvetica, Arial, sans-serif;
    --lg-h2-font-weight: 400;
    --lg-h2-font-size: 56px;
    --lg-h2-letter-spacing: -1.12px;
    --lg-h2-line-height: 100%;
    --lg-h2-font-style: normal;

    /* Типографика: H3 (шаблон: --1440-h3-*) */
    --lg-h3-font-family: "Roboto", Helvetica, Arial, sans-serif;
    --lg-h3-font-weight: 400;
    --lg-h3-font-size: 30px;
    --lg-h3-letter-spacing: 0px;
    --lg-h3-line-height: 90%;
    --lg-h3-font-style: normal;

    /* Типографика: Subtitle (шаблон: --1440-subtitle-*) */
    --lg-subtitle-font-family: "Roboto", Helvetica, Arial, sans-serif;
    --lg-subtitle-font-weight: 400;
    --lg-subtitle-font-size: 20px;
    --lg-subtitle-letter-spacing: 0px;
    --lg-subtitle-line-height: 100%;
    --lg-subtitle-font-style: normal;

    /* Типографика: Body text (шаблон: --1440-txt-short-*) */
    --lg-txt-font-family: "Roboto", Helvetica, Arial, sans-serif;
    --lg-txt-font-weight: 400;
    --lg-txt-font-size: 18px;
    --lg-txt-letter-spacing: 0px;
    --lg-txt-line-height: 110%;
    --lg-txt-font-style: normal;

    /* Типографика: Button (шаблон: --1440-btn-btn-m-*) */
    --lg-btn-font-family: "Roboto", Helvetica, Arial, sans-serif;
    --lg-btn-font-weight: 800;
    --lg-btn-font-size: 13px;
    --lg-btn-letter-spacing: 0px;
    --lg-btn-line-height: normal;
    --lg-btn-font-style: normal;

    /* Радиусы (шаблон: --primitives-1440-border-radius-*) */
    --lg-radius-btn: 100px;
    --lg-radius-card: 10px;

    /* Отступы карточек (шаблон: .card-guardian / .card-guardian-2) */
    --lg-card-padding: 30px;
    --lg-card-gap: 40px;       /* gap между __content и __btn */
    --lg-content-gap: 20px;    /* gap между h3 и p внутри __content */
    --lg-cards-gap: 20px;      /* gap между карточками */
}

/* ============================================================
   Секция (шаблон: .frame)
   ============================================================ */
.looking-guardians {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    background-color: var(--lg-bg-gray);
    overflow: hidden;
}

/* ============================================================
   Декоративная зигзаг-линия сверху (шаблон: .vector)
   Позиция: top:96px, left:555px, 885×151px
   ============================================================ */
.looking-guardians__decor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.looking-guardians__decor--top {
    top: 96px;
    left: 555px;
    width: 885px;
    height: 151px;
}

.looking-guardians__decor--top svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ============================================================
   Scatter-точки (шаблон: bullet-3 … bullet-10)
   10px круги, fill=#185E30
   Позиции из style.css:
     bullet-3:  top:240px, left:1316px
     bullet-4:  top:210px, left:799px
     bullet-5:  top:197px, left:1134px
     bullet-6:  top:1154px(1030+124), left:988px
     bullet-7:  top:1065px(1030+35), left:575px
     bullet-8:  top:1123px(1030+93), left:270px
     bullet-9:  top:1030px, left:1400px
     bullet-10: top:197px, left:549px
   ============================================================ */
.looking-guardians__dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--lg-dark-green);
    pointer-events: none;
    z-index: 0;
}

.looking-guardians__dot--1 { top: 240px; left: 1316px; }   /* bullet-3 */
.looking-guardians__dot--2 { top: 210px; left: 799px;  }   /* bullet-4 */
.looking-guardians__dot--3 { top: 197px; left: 1134px; }   /* bullet-5 */
.looking-guardians__dot--4 { top: 197px; left: 549px;  }   /* bullet-10 */
.looking-guardians__dot--5 { top: 1030px; left: 1400px;}   /* bullet-9 */
.looking-guardians__dot--6 { top: 1065px; left: 575px; }   /* bullet-7 */
.looking-guardians__dot--7 { top: 1123px; left: 270px; }   /* bullet-8 */

/* ============================================================
   Внутренний контейнер
   ============================================================ */
.looking-guardians__inner {
    position: relative;
    z-index: 1;
    padding: 0 20px;
}

/* ============================================================
   Заголовок H2 (шаблон: .div / .text-wrapper / .span)
   Позиция: top:140px, left:calc(50% - 413px)
   font: H2 vars, color:transparent, nowrap, text-align:justify
   span цвет: #3ea74f
   ============================================================ */
.looking-guardians .looking-section-title {
    position: relative;
    margin: 0;
    padding-top: 140px;
    font-family: var(--lg-h2-font-family);
    font-weight: var(--lg-h2-font-weight);
    font-size: var(--lg-h2-font-size);
    letter-spacing: var(--lg-h2-letter-spacing);
    line-height: var(--lg-h2-line-height);
    font-style: var(--lg-h2-font-style);
    color: transparent;
    text-align: center;
    white-space: nowrap;
}

.looking-guardians .looking-section-title span {
    color: var(--lg-green);
    font-family: var(--lg-h2-font-family);
    font-weight: var(--lg-h2-font-weight);
    font-size: var(--lg-h2-font-size);
    letter-spacing: var(--lg-h2-letter-spacing);
    line-height: var(--lg-h2-line-height);
    font-style: var(--lg-h2-font-style);
}

/* ============================================================
   Подзаголовок (шаблон: .text-wrapper-5 / 6 / 7)
   3 строки: top:246px, 266px, 286px — line-height:100%, font-size:20px
   color: var(--black), text-align:justify, nowrap
   ============================================================ */
.looking-guardians .looking-section-lead,
.looking-guardians .looking-section-lead--small {
    font-family: var(--lg-subtitle-font-family);
    font-weight: var(--lg-subtitle-font-weight);
    font-size: var(--lg-subtitle-font-size);
    letter-spacing: var(--lg-subtitle-letter-spacing);
    line-height: var(--lg-subtitle-line-height);
    font-style: var(--lg-subtitle-font-style);
    color: var(--lg-black);
    text-align: center;
    margin-top: 30px;
    margin-bottom: 80px;
}

/* ============================================================
   Сетка: фото + карточки (шаблон: .IMAGE + .div-2)
   .IMAGE:  top:406px, left:20px, 690×575px
   .div-2:  top:426px, left:732px, 572px wide
   ============================================================ */
.looking-guardians__grid {
    display: flex;
    align-items: flex-start;
    gap: 22px; /* 732-20-690=22 */
}

/* ============================================================
   Фото-область (шаблон: .IMAGE)
   top:406px, left:20px, width:690px, height:575px
   Внутри: .image (top:1px, left:91px, 518×575px)
   + 3 bullet-dot (14px круги)
   ============================================================ */
.looking-guardians__photo {
    position: relative;
    flex: 0 0 690px;
    width: 690px;
    height: 575px;
}

.looking-guardians__photo > img {
    position: absolute;
    top: 1px;
    left: 91px;
    width: 518px;
    height: 575px;
    object-fit: cover;
}

/* Bullet-точки вокруг фото (шаблон: .bullet, .img, .bullet-2) */
.looking-photo-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--lg-green);
    aspect-ratio: 1;
}

.looking-photo-dot--top   { top: 185px; left: 93px;  }  /* .bullet:   top:185px, left:93px */
.looking-photo-dot--right { top: 303px; left: 589px; }  /* .img:      top:303px, left:589px */
.looking-photo-dot--left  { top: 0;    left: 412px; }   /* .bullet-2: top:0,    left:412px */

/* ============================================================
   Контейнер карточек (шаблон: .div-2)
   width:572px, flex-column, align-items:flex-start, gap:20px
   ============================================================ */
.looking-guardians__cards {
    flex: 0 0 572px;
    width: 572px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lg-cards-gap);
    margin-top: 20px; /* компенсация: 426-406=20 */
}

/* ============================================================
   Карточка (общие стили — шаблон: .card-guardian / .card-guardian-2)
   flex-column, align-items:flex-start, gap:40px, padding:30px
   align-self:stretch, width:100%, border-radius:10px
   ============================================================ */
.looking-guardian-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lg-card-gap);
    padding: var(--lg-card-padding);
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    border-radius: var(--lg-radius-card);
    box-sizing: border-box;
}

/* Карточка: тёмно-зелёная (шаблон: .card-guardian — background-color: var(--dark-green)) */
.looking-guardian-card--dark {
    background-color: var(--lg-dark-green);
}

/* Карточка: зелёная (шаблон: .card-guardian-2 — background-color: var(--green)) */
.looking-guardian-card--green {
    background-color: var(--lg-green);
}

/* ============================================================
   Контент карточки: заголовок + описание (шаблон: .div-3)
   flex-column, align-items:flex-start, gap:20px
   ============================================================ */
.looking-guardian-card__content {
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lg-content-gap);
}

/* Заголовок карточки (шаблон: .text-wrapper-2)
   H3 vars, color: var(--white), margin-top:-1px */
.looking-guardian-card__content h3 {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: var(--lg-h3-font-family);
    font-weight: var(--lg-h3-font-weight);
    font-size: var(--lg-h3-font-size);
    letter-spacing: var(--lg-h3-letter-spacing);
    line-height: var(--lg-h3-line-height);
    font-style: var(--lg-h3-font-style);
    color: var(--lg-white);
}

/* Описание карточки (шаблон: .p)
   txt-short vars, color: var(--white) */
.looking-guardian-card__content p {
    position: relative;
    align-self: stretch;
    font-family: var(--lg-txt-font-family);
    font-weight: var(--lg-txt-font-weight);
    font-size: var(--lg-txt-font-size);
    letter-spacing: var(--lg-txt-letter-spacing);
    line-height: var(--lg-txt-line-height);
    font-style: var(--lg-txt-font-style);
    color: var(--lg-white);
    margin: 0;
}

/* ============================================================
   Кнопка карточки: активная «ПОДРОБНЕЕ» (шаблон: .button + .text-wrapper-3)
   all:unset, box-sizing:border-box
   display:flex, width:140px, height:40px
   align-items:center, justify-content:center, gap:10px
   padding:10px 30px, background:var(--white), border-radius:100px
   ============================================================ */
.looking-guardian-card__btn {
    all: unset;
    box-sizing: border-box;
    display: flex;
    width: 140px;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 30px;
    position: relative;
    background-color: var(--lg-white);
    border-radius: var(--lg-radius-btn);
    font-family: var(--lg-btn-font-family);
    font-weight: var(--lg-btn-font-weight);
    font-size: var(--lg-btn-font-size);
    letter-spacing: var(--lg-btn-letter-spacing);
    line-height: var(--lg-btn-line-height);
    font-style: var(--lg-btn-font-style);
    color: var(--lg-black);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.looking-guardian-card__btn:hover {
    opacity: 0.9;
}

.looking-guardian-card__btn:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

/* ============================================================
   Кнопка карточки: отключенная «В РАЗРАБОТКЕ» (шаблон: .div-wrapper + .text-wrapper-4)
   all:unset, box-sizing:border-box
   background: #ffffff66, border-radius:100px
   Текст: color:#ffffffcc, margin-left:-6.5px, margin-right:-6.5px
   ============================================================ */
.looking-guardian-card__btn--disabled {
    background-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.8);
    cursor: default;
    pointer-events: none;
}

/* Текст внутри отключенной кнопки (шаблон: .text-wrapper-4 — margin-left:-6.5px) */
.looking-guardian-card__btn--disabled {
    margin-left: -6.5px;
    margin-right: -6.5px;
    width: calc(140px + 13px); /* компенсация margin */
    color: rgba(255, 255, 255, 0.8); /* #ffffffcc */
}

/* ============================================================
   Нижняя волнистая линия (шаблон: .group / .vector-2)
   .group: top:1030px, left:-179px, 1767×134px
   .vector-2: top:3px, left:179px, 1440×128px
   bullet-6/7/8/9: внутри .group
   ============================================================ */
.looking-guardians__wave {
    position: absolute;
    bottom: 0;
    left: -179px;
    width: 1767px;
    height: 134px;
    pointer-events: none;
    z-index: 0;
}

.looking-guardians__wave svg {
    position: absolute;
    top: 3px;
    left: 179px;
    width: 1440px;
    height: 128px;
}

/* ============================================================
   Иллюстрация: облако + птичка (шаблон: .IMAGE-2)
   top:946px, left:882px, 267×267px
   .vector-3: 84.71%×56.61%, top:43.39%, left:15.29%
   .illustration: height:100%, top:0, left:calc(50%-133px), 267px
   ============================================================ */
.looking-guardians__illustration {
    position: absolute;
    bottom: 91px; /* 1304-946-267=91 */
    right: 291px; /* 1440-882-267=291 */
    width: 267px;
    height: 267px;
    pointer-events: none;
    z-index: 0;
}

.looking-guardians__illustration-cloud {
    position: absolute;
    width: 84.71%;
    height: 56.61%;
    top: 43.39%;
    left: 15.29%;
}

.looking-guardians__illustration-bird {
    position: absolute;
    height: 100%;
    top: 0;
    left: calc(50% - 133px);
    width: 267px;
    aspect-ratio: 1;
}

/* ============================================================
   Адаптивность
   ============================================================ */

/* --- Десктоп < 1440px: масштабирование --- */
@media (max-width: 1440px) {
    .looking-guardians {
        max-width: 100%;
    }

    .looking-guardians__decor--top {
        left: calc(50% - 165px);
    }

    .looking-guardians__dot--1 { right: 62px;  left: auto; }
    .looking-guardians__dot--2 { right: 541px; left: auto; }
    .looking-guardians__dot--3 { right: 206px; left: auto; }
    .looking-guardians__dot--4 { left: 549px; }
    .looking-guardians__dot--5 { right: 20px;  left: auto; }
    .looking-guardians__dot--6 { left: 575px; }
    .looking-guardians__dot--7 { left: 270px; }

    .looking-guardians__wave {
        left: -179px;
    }

    .looking-guardians__illustration {
        right: 5%;
    }
}

/* --- Планшет 1024px --- */
@media (max-width: 1200px) {
    .looking-guardians__grid {
        gap: 24px;
    }

    .looking-guardians__photo {
        flex: 0 0 480px;
        width: 480px;
        height: auto;
    }

    .looking-guardians__photo > img {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
    }

    .looking-guardians__cards {
        flex: 1;
        width: auto;
    }

    .looking-guardians .looking-section-title {
        font-size: 44px;
    }

    .looking-guardians__inner {
        padding: 0 24px;
    }

    .looking-guardians__decor--top {
        left: calc(50% - 130px);
        width: 600px;
    }

    .looking-guardians__illustration {
        right: 2%;
        width: 200px;
        height: 200px;
    }

    .looking-guardians__illustration-bird {
        width: 200px;
        left: calc(50% - 100px);
    }
}

/* --- Планшет 768px --- */
@media (max-width: 900px) {
    .looking-guardians__grid {
        flex-direction: column;
        align-items: center;
    }

    .looking-guardians__photo {
        flex: none;
        width: 100%;
        max-width: 500px;
        height: auto;
    }

    .looking-guardians__photo > img {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
    }

    .looking-guardians__cards {
        flex: none;
        width: 100%;
        max-width: 572px;
        margin-top: 0;
    }

    .looking-guardians__decor--top {
        display: none;
    }

    .looking-guardians__dot {
        display: none;
    }

    .looking-guardians__wave {
        display: none;
    }

    .looking-guardians__illustration {
        position: relative;
        bottom: auto;
        right: auto;
        margin: 20px auto 0;
    }
}

/* --- Мобильные 480px --- */
@media (max-width: 520px) {
    .looking-guardians .looking-section-title {
        font-size: 32px;
        letter-spacing: -0.5px;
        white-space: normal;
        padding-top: 100px;
    }

    .looking-guardians .looking-section-lead,
    .looking-guardians .looking-section-lead--small {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .looking-guardians__inner {
        padding: 0 16px;
    }

    .looking-guardian-card {
        padding: 20px;
        gap: 24px;
    }

    .looking-guardian-card__content h3 {
        font-size: 24px;
    }

    .looking-guardian-card__content p {
        font-size: 16px;
    }

    .looking-guardian-card__btn {
        width: auto;
        min-width: 140px;
        height: 36px;
        padding: 8px 24px;
        font-size: 12px;
    }

    .looking-guardian-card__btn--disabled {
        margin-left: -6.5px;
        margin-right: -6.5px;
        width: calc(140px + 13px);
    }

    .looking-photo-dot {
        width: 10px;
        height: 10px;
    }

    .looking-photo-dot--right {
        left: auto;
        right: 0;
    }

    .looking-guardians__illustration {
        width: 160px;
        height: 160px;
    }

    .looking-guardians__illustration-bird {
        width: 160px;
        left: calc(50% - 80px);
    }
}