/* ========================================= */
/* СТРАНИЦА "ИСТОРИЯ" */
/* ========================================= */

@import url('personal-data.css');

/* ========================================= */
/* ОСНОВНОЙ КОНТЕЙНЕР */
/* ========================================= */

.history-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;

    background-image: url('../Images/Promo_background2.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;

    padding: 180px 60px 80px 60px;
}

.history-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1;
}

.history-page .personal-title,
.history-subtitle,
.history-content,
.history-page .personal-back {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================= */
/* ПОДЗАГОЛОВОК */
/* ========================================= */

.history-subtitle {
    font-family: 'Oswald', sans-serif;
    font-size: 35px;
    font-weight: 300;
    color: #a3c4d9;
    text-align: center;
    letter-spacing: 0.5px;
    margin: 0 auto 50px auto;
    display: block;
}

/* ========================================= */
/* ОСНОВНОЙ ТЕКСТ */
/* ========================================= */

.history-content {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 25px;
    line-height: 1.7;
    letter-spacing: 0.3px;
}

/* Абзацы выровнены по ширине, как в макете */
.history-content p {
    margin: 0 0 25px 0;
    text-align: justify;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* ========================================= */
/* ФОТО МИЛОСЛАВОВА — обтекается текстом */
/* ========================================= */

.history-figure-float {
    float: right;
    width: 280px;
    margin: 0 0 25px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.history-figure-float img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.history-figure-float figcaption {
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    color: #a3c4d9;
    text-align: center;
    letter-spacing: 1px;
}

/* ========================================= */
/* БЛОК: два фото слева + текст справа */
/* ========================================= */

.history-text-with-photos {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    margin: 50px 0;
    align-items: start;
    clear: both; /* Сбрасываем обтекание предыдущего float */
}

.history-photos-left {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.history-text-right p {
    margin-bottom: 20px;
    text-align: justify;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* ========================================= */
/* ФОТО С ПОДПИСЯМИ (в блоке слева) */
/* ========================================= */

.history-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.history-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    filter: grayscale(30%);
    transition: filter 0.3s ease;
}

.history-figure img:hover {
    filter: grayscale(0%);
}

.history-figure figcaption {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    color: #a3c4d9;
    text-align: center;
    letter-spacing: 1px;
}
/* ========================================= */
/* ГАЛЕРЕЯ ИСТОРИЧЕСКИХ ФОТО */
/* ========================================= */

.history-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 60px 0 40px 0;
    clear: both;
    align-items: stretch;
    height: 900px; /* ← ФИКСИРОВАННАЯ ВЫСОТА всей галереи */
}

/* Левая фигура */
.history-gallery-large {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    overflow: hidden; /* ← чтобы при увеличении подписи ничего не вылезало */
}

/* Левое фото занимает всё свободное место */
.history-gallery-large img {
    flex: 1;
    width: 100%;
    min-height: 0; /* ← важно для корректного сжатия во flex */
    object-fit: cover;
    object-position: center top;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    filter: grayscale(80%);
    transition: filter 0.3s ease;
    display: block;
}

.history-gallery-large img:hover {
    filter: grayscale(0%);
}

/* Подпись под фото — её высота "зарезервирована", но не влияет на колонки */
.history-gallery-large figcaption {
    font-family: 'Oswald', sans-serif;
    font-size: 25px; /* ← меняйте здесь размер — колонки не будут сдвигаться */
    color: #a3c4d9;
    text-align: center;
    letter-spacing: 1px;
    flex-shrink: 0;
    line-height: 1.3;
}

/* Правая колонка */
.history-gallery-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.history-gallery-item {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.history-gallery-column .history-gallery-item {
    flex: 1;
}

.history-gallery-column .history-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    filter: grayscale(80%);
    transition: filter 0.3s ease;
    display: block;
}

.history-gallery-column .history-gallery-item img:hover {
    filter: grayscale(0%);
}

/* Мобильная версия */
@media (max-width: 768px) {
    .history-gallery {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .history-gallery-large img,
    .history-gallery-column .history-gallery-item img {
        height: auto;
        object-fit: initial;
    }
    
    .history-gallery-column {
        gap: 20px;
    }
}
/* Мобильная версия */
@media (max-width: 768px) {
    .history-gallery {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        gap: 20px !important;
    }

    .history-gallery-large img,
    .history-gallery-column .history-gallery-item img {
        height: auto !important;
        flex: 0 0 auto !important;
        object-fit: initial !important;
    }

    .history-gallery-column {
        gap: 20px !important;
    }
}

/* ========================================= */
/* АДАПТИВ */
/* ========================================= */

@media (max-width: 1024px) {
    .history-text-with-photos {
        grid-template-columns: 200px 1fr;
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .history-page {
        padding: 120px 20px 60px 20px;
    }

    .history-subtitle {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .history-content {
        font-size: 15px;
        line-height: 1.6;
    }

    /* На телефоне фото уходит в центр, обтекание отключается */
    .history-figure-float {
        float: none;
        width: 100%;
        max-width: 240px;
        margin: 0 auto 25px auto;
    }

    .history-text-with-photos {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .history-photos-left {
        flex-direction: row;
        gap: 15px;
    }

    .history-photos-left .history-figure {
        flex: 1;
    }

    .history-gallery {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .history-gallery-column {
        gap: 20px;
    }

    .history-figure figcaption,
    .history-gallery-item figcaption,
    .history-figure-float figcaption {
        font-size: 13px;
    }
}