/* public/css/home.css: главная страница (intro, баннеры duo и trio, блок «О компании»).
   Hero и кнопка-капсула берутся из site.css. */

/* ================= intro ================= */
.hm-intro { padding: clamp(80px, 12vw, 170px) clamp(16px, 3vw, 40px); }
.hm-intro p {
    max-width: 780px; margin: 0 auto; text-align: center;
    font-size: 18px; font-weight: 300; line-height: 1.4; color: var(--c-additional);
}

/* ================= баннеры ================= */
.hm-banners { padding: 0 clamp(14px, 1.3vw, 18px) clamp(80px, 11vw, 160px); }
.hm-grid { display: grid; gap: 10px; }
.hm-grid + .hm-grid { margin-top: clamp(64px, 9vw, 130px); }
.hm-grid--duo  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-grid--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 15px; }

/* duo: фото на всю карточку, текст поверх внизу слева */
.hm-duo {
    position: relative; display: block; overflow: hidden; aspect-ratio: 667 / 500;
    color: #fff; text-decoration: none; background: var(--c-gradient, #0b1228);
}
.hm-duo-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
a.hm-duo:hover .hm-duo-img { transform: scale(1.03); }
.hm-duo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(var(--c-gradient-rgb, 0, 0, 0), .25), rgba(var(--c-gradient-rgb, 0, 0, 0), .6));
}
.hm-duo-text {
    position: absolute; left: clamp(12px, 2.3vw, 24px); right: clamp(12px, 2.3vw, 24px); bottom: clamp(12px, 2.3vw, 26px); z-index: 1;
    display: flex; flex-direction: column; gap: 10px;
}
.hm-duo-title { font-size: clamp(14px, 2.2vw, 26px); font-weight: 300; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; }
.hm-duo-caption { font-size: clamp(10px, 1.1vw, 13px); font-weight: 300; line-height: 1.3; color: var(--c-additional); }

/* trio: фото, ниже заголовок и ссылка */
.hm-trio { display: flex; flex-direction: column; min-width: 0; }
.hm-trio-media { position: relative; display: block; overflow: hidden; aspect-ratio: 443 / 500; background: var(--c-gradient, #0b1228); }
.hm-trio-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-trio-media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(var(--c-gradient-rgb, 0, 0, 0), .2), rgba(var(--c-gradient-rgb, 0, 0, 0), .5));
}
.hm-trio-title { margin: 16px 0 8px; font-size: 18px; font-weight: 300; line-height: 1.25; letter-spacing: .02em; text-transform: uppercase; }
.hm-trio-link {
    width: fit-content; font-size: 14px; font-weight: 300;
    text-decoration: underline; text-underline-offset: 3px; color: var(--c-additional, var(--c-text));
}
.hm-trio-link:hover { color: var(--c-text); }

/* ================= о компании ================= */
.hm-about { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(380px, 41vw, 720px); overflow: hidden; color: #fff; background: #14161a; }
.hm-about-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: 720px; padding: 64px 20px; text-align: center; }
.hm-about-title { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 300; line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; }
.hm-about-sub { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.35; color: var(--c-additional); }
.hm-about .btn-capsule {
    padding: 12px 28px; font-size: 12px; font-weight: 500; text-transform: uppercase;
    color: #fff; background: transparent; border: 1px solid #fff;
    transition: background .2s, color .2s;
}
.hm-about .btn-capsule:hover { background: #fff; color: var(--c-bg); opacity: 1; }

/* ================= мобильная версия ================= */
@media (max-width: 860px) {
    .hm-banners { padding-bottom: 72px; }
    .hm-grid--duo { gap: 8px; }                /* два в ряд остаются и на телефоне */
    .hm-duo { aspect-ratio: 3 / 4; }
    .hm-duo-text { gap: 6px; }
    .hm-grid--trio { grid-template-columns: 1fr; gap: 40px; }
    .hm-trio-media { aspect-ratio: 4 / 3.4; }
    .hm-about { min-height: 420px; }
    .hm-intro p { font-size: 15px; }
    .hm-about-sub { font-size: 14px; }
}