/* ==========================================================
   Слой поверх main.css: первый экран и шапка
   ========================================================== */

/* --- Шапка: сплошная по ширине окна --- */
.navbar .container { min-height: 72px; }
.logo { display: flex; align-items: baseline; flex: 0 0 auto; }
.nav-links { gap: clamp(1.25rem, 2vw, 2.3rem); }
.cta-button-nav { border-radius: 11px; }

/* --- Первый экран --- */
.hero {
    position: relative;
    overflow: hidden;
    min-height: 620px;
    height: auto;
    padding: 3.5rem 0 5rem;
    isolation: isolate;
    background: var(--page-bg);
}

.hero .container { max-width: 1280px; }

/* контейнер первого экрана – система координат для фонового слоя */
.hero-content {
    position: relative;
    width: 100%;
    z-index: 1;
}

.hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.hero-copy { position: relative; z-index: 2; }

.hero-title {
    max-width: none;
    margin-bottom: 1.4rem;
    font-size: clamp(1.55rem, 2.25vw, 2.45rem);
    line-height: 1.16;
    letter-spacing: -.025em;
}

.hero-line { display: block; }
.hero-uni { color: #3b4fd8; }

/* Название вуза курсивом – та же деталь, что «lab» в логотипе */
.hero-uni-text { font-style: italic; }

.hero-copy .hero-description {
    max-width: 520px;
    margin-bottom: 2.1rem;
    color: #4e566f;
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.7;
}

.hero .cta-button {
    min-width: 230px;
    box-shadow: 0 12px 28px rgba(59, 79, 216, .23);
}

/* --- Фотография: задний слой по ширине контейнера --- */
/* фотография во всю ширину экрана, вплотную под шапкой */
.hero-photo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: none;
    box-shadow: none;
}

.hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 78% center;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

/* растворение фотографии в фоне слева, чтобы текст читался */
.hero-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg,
            var(--page-bg) 0%,
            rgba(250, 248, 244, .97) 26%,
            rgba(250, 248, 244, .6) 44%,
            rgba(250, 248, 244, 0) 64%),
        linear-gradient(180deg,
            rgba(250, 248, 244, 0) 72%,
            rgba(250, 248, 244, .9) 100%);
}

/* --- Кликабельные плашки поверх фотографии: только на мобильных --- */
.hero-actions {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.hero-chip {
    position: absolute;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.15rem;
    border: 1px solid rgba(255, 255, 255, .7);
    /* тот же радиус, что у кнопок сайта – чтобы читались как кликабельные */
    border-radius: 12px;
    /* стекло с индиговым подтоном */
    background: linear-gradient(135deg, rgba(236, 238, 255, .62), rgba(206, 214, 255, .34));
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow:
        0 10px 26px rgba(17, 24, 47, .12),
        inset 0 1px 0 rgba(255, 255, 255, .7);
    font-family: 'Golos Text', Inter, sans-serif;
    font-size: .8rem;
    font-weight: 600;
    color: #2C3A96;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .22s ease, background .22s ease, color .22s ease,
                border-color .22s ease, box-shadow .22s ease;
}

/* дуга в зоне неба, между текстом и фигурой */
.hero-chip:nth-child(1) { top: 26%; left: 50%; }
.hero-chip:nth-child(2) { top: 42%; left: 44%; }
.hero-chip:nth-child(3) { top: 58%; left: 50%; }

.hero-chip:hover,
.hero-chip:focus-visible {
    background: linear-gradient(135deg, rgba(59, 79, 216, .88), rgba(47, 63, 176, .88));
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
    transform: translateY(-2px);
    box-shadow:
        0 14px 30px rgba(59, 79, 216, .3),
        inset 0 1px 0 rgba(255, 255, 255, .35);
}

.scroll-indicator { display: none; }

@media (max-width: 1180px) {
    .nav-links { gap: 1.15rem; }
    .nav-links a { font-size: .84rem; }
    .hero { min-height: 0; padding: 3.4rem 0 0; }
    .hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
    .hero-title { font-size: clamp(1.8rem, 4.2vw, 2.5rem); }

    /* фотография уходит ПОД текст отдельной полосой во всю ширину.
       .hero – флекс-контейнер, поэтому порядок задаётся через order,
       а не отрицательными отступами. */
    .hero {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }
    .hero-content { order: 1; }
    .hero-photo {
        order: 2;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        margin: .6rem 0 0;
        aspect-ratio: 4 / 3;
    }
    .hero-photo img { object-position: 74% center; }
    /* полоса мягко проявляется из фона и так же в него уходит */
    .hero-photo::before {
        background: linear-gradient(180deg,
            var(--page-bg) 0%,
            rgba(250, 248, 244, .55) 14%,
            rgba(250, 248, 244, 0) 42%,
            rgba(250, 248, 244, 0) 68%,
            rgba(250, 248, 244, .6) 90%,
            var(--page-bg) 100%);
    }

    /* плашки действий столбиком слева на фотографии */
    .hero-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: .5rem;
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 3;
        padding: 0 0 0 16px;
        pointer-events: none;
    }

    .hero-chip {
        position: static;
        pointer-events: auto;
        min-height: 40px;
        font-size: .76rem;
    }
    .hero-photo img { object-position: 76% center; }
}

@media (max-width: 980px) {
    .navbar .container { min-height: 66px; }
    .logo-phd, .logo-lab { font-size: 27px; }
}

@media (max-width: 600px) {
    .navbar .container { min-height: 60px; }
    .logo-phd, .logo-lab { font-size: 24px; }
    .hero { padding: 2.6rem 0 0; min-height: 0; }
    .hero-photo { margin: 1.4rem 0 0; aspect-ratio: 4 / 3; }
    .hero-copy .hero-description { margin-bottom: 1.4rem; }
    .hero-title { font-size: clamp(1.7rem, 8.4vw, 2.2rem); }
    .hero-copy .hero-description { font-size: 1rem; line-height: 1.62; }
    .hero .cta-button { width: 100%; min-width: 0; }
    .hero-chip { font-size: .72rem; min-height: 38px; padding: 0 .8rem; }
}