/* ---------------------------------------------------------------------------
   МП 06.09.2026. Hero-блок разделов огневой линейки.
   Разметка — local/templates/concretika/include/firepits-hero.php.
   Все классы с префиксом mphero-, чтобы не пересечься со стилями сайта.
   Пропорции и типографика повторяют hero лендинга /firepits/.
   --------------------------------------------------------------------------- */

.mphero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(74vh, 660px);
    color: #ffffff;
    overflow: hidden;
}

.mphero__bg {
    position: absolute;
    inset: 0;
}

.mphero__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Затемнение слева направо: текст лежит слева, справа кадр остаётся открытым. */
.mphero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(0, 0, 0, .50) 0%, rgba(0, 0, 0, .22) 55%, rgba(0, 0, 0, .08) 100%);
}

.mphero__in {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 80px;
    padding-bottom: 52px;
}

.mphero__eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.mphero__h1 {
    margin: 10px 0 0;
    max-width: 16ch;
    font-weight: 300;
    font-size: clamp(34px, 5.2vw, 64px);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: #ffffff;
}

.mphero__lead {
    margin-top: 18px;
    max-width: 60ch;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
}

.mphero__cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.mphero__btn {
    display: inline-flex;
    align-items: center;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 14px;
    letter-spacing: .02em;
    white-space: nowrap;
    transition: background .18s ease-in-out, color .18s ease-in-out;
}

.mphero__btn--p {
    background: #fe693a;
    color: #ffffff;
}

.mphero__btn--p:hover {
    background: #e2532a;
    color: #ffffff;
}

.mphero__btn--w {
    border-color: rgba(255, 255, 255, .65);
    color: #ffffff;
}

.mphero__btn--w:hover {
    background: #ffffff;
    color: #141414;
}

@media (max-width: 767px) {
    .mphero {
        min-height: min(66vh, 460px);
    }
    .mphero__in {
        padding-top: 48px;
        padding-bottom: 36px;
    }
    .mphero__h1 {
        max-width: none;
    }
    .mphero__lead {
        font-size: 15px;
        margin-top: 14px;
    }
    .mphero__cta {
        margin-top: 22px;
    }
    .mphero__btn {
        padding: 12px 20px;
        font-size: 13px;
    }
}