/* ==========================================================================
   Главная страница
   Спокойная сетка, сдержанная типографика, минимум декора.
   ========================================================================== */

.page-home {
    --home-radius: 22px;
    --home-radius-sm: 16px;
    --home-section-pad: clamp(56px, 7vw, 104px);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.home-hero {
    position: relative;
    padding: clamp(124px, 14vw, 168px) 0 clamp(56px, 7vw, 96px);
    background: var(--surface-deep);
    color: var(--ink-inverse);
}

.home-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: end;
    gap: 0 clamp(32px, 5vw, 64px);
}

.home-hero__copy {
    min-width: 0;
}

.home-hero .section-kicker {
    margin-bottom: 18px;
    color: var(--resin-soft);
    font-size: 0.76rem;
    letter-spacing: 0.2em;
}

.home-hero__title {
    max-width: 20ch;
    font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem);
    text-wrap: balance;
    line-height: 1.06;
    letter-spacing: -0.015em;
}

.home-hero__lead {
    max-width: 46ch;
    margin-top: 18px;
    color: var(--ink-inverse-muted);
    font-size: 1.02rem;
    line-height: 1.55;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.home-hero__actions .button {
    min-height: 50px;
    padding: 12px 24px;
}

/* тонкая строка материалов вместо плашек поверх фотографии */
.home-hero__materials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 26px;
    color: rgba(247, 240, 231, 0.58);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-hero__materials span {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}

.home-hero__materials span:not(:last-child)::after {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--resin);
    opacity: 0.75;
}

.home-hero__visual {
    position: relative;
    min-width: 0;
}

.home-hero__figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--home-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #1d1513;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.34);
}

.home-hero__figure img,
.home-hero__figure picture {
    display: block;
    width: 100%;
    height: 100%;
}

.home-hero__image {
    object-fit: cover;
}

/* персонаж выглядывает из-за левого края фотографии */
.home-hero__person {
    position: absolute;
    left: 0;
    /* поднимаем выше скругления нижнего угла фото: подошва обрезана по прямой,
       на закруглённом крае был бы виден срез */
    bottom: calc(var(--home-radius) + 6px);
    z-index: 3;
    width: auto;
    height: 60%;
    /* 85.1% ширины картинки — это «стена»: сдвигаем её за край фото,
       снаружи остаётся только сам персонаж */
    transform: translateX(-85.1%);
    filter: drop-shadow(-14px 16px 26px rgba(0, 0, 0, 0.38));
    pointer-events: none;
    user-select: none;
}

/* --------------------------------------------------------------------------
   Секции контента
   -------------------------------------------------------------------------- */

.home-section {
    position: relative;
    padding: var(--home-section-pad) 0;
}

.home-section + .home-section {
    padding-top: 0;
}

.home-section:last-of-type {
    padding-bottom: var(--home-section-pad);
}

.home-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    padding-bottom: 16px;
    margin-bottom: clamp(22px, 3vw, 32px);
    border-bottom: 1px solid var(--line);
}

.home-section__head .section-kicker {
    margin-bottom: 8px;
    font-size: 0.76rem;
}

.home-section__title {
    max-width: 22ch;
    font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem);
    line-height: 1.14;
    letter-spacing: -0.01em;
}

.home-section__link {
    flex: 0 0 auto;
    font-size: 0.95rem;
}

/* стрелки карусели + ссылка «все …» в правой части шапки секции */
.home-section__tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 14px;
}

/* --------------------------------------------------------------------------
   Финальный блок: мастерская + индивидуальный заказ
   -------------------------------------------------------------------------- */

.home-commission {
    position: relative;
    padding: clamp(48px, 6vw, 84px) 0;
    background: var(--surface-deep);
    color: var(--ink-inverse);
}

.home-commission__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, max-content) max-content;
    justify-content: center;
    align-items: center;
    gap: 24px clamp(40px, 8vw, 128px);
}

.home-commission .section-kicker {
    margin-bottom: 14px;
    color: var(--resin-soft);
    font-size: 0.76rem;
}

.home-commission__title {
    max-width: 18ch;
    font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
}

.home-commission__lead {
    max-width: 48ch;
    margin-top: 16px;
    color: var(--ink-inverse-muted);
    font-size: 1rem;
    line-height: 1.55;
}

.home-commission__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.home-commission__actions .button {
    min-height: 50px;
    padding: 12px 24px;
}

.home-commission__actions .text-link {
    color: var(--resin-soft);
}

.home-commission__actions .text-link::after {
    border-color: currentColor;
}

/* --------------------------------------------------------------------------
   Адаптив
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
    .home-hero__grid,
    .home-commission__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-commission__grid {
        justify-content: stretch;
    }

    .home-hero__grid {
        gap: 28px 0;
    }

    .home-hero__title {
        max-width: 20ch;
    }

    .home-hero__figure {
        aspect-ratio: 16 / 10;
    }

    /* на узких экранах фото сдвигаем вправо, чтобы слева осталось место персонажу */
    .home-hero__figure {
        margin-left: 8%;
    }

    .home-hero__person {
        left: 8%;
        height: 34%;
        transform: translateX(-85.1%);
    }
}

@media (max-width: 720px) {
    .home-hero {
        padding-top: 108px;
    }

    /* На телефоне персонаж не помещается целиком, а строка материалов
       ломается на две — убираем оба, фото возвращаем на всю ширину. */
    .home-hero__person,
    .home-hero__materials {
        display: none;
    }

    .home-hero__figure {
        margin-left: 0;
    }

    .home-hero__actions .button,
    .home-commission__actions .button {
        min-height: 46px;
        padding: 11px 18px;
    }

    .home-section__head {
        align-items: flex-start;
    }
}