@font-face {
    font-family: "Old Soviet";
    src: url("../fonts/old-Soviet.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


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

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #343232;
    color: #202020;
    font-family: "Old Soviet", sans-serif;
}


/* ========================================
   СТЕНА
   ======================================== */

.wall {
    position: relative;

    width: 100%;
    min-height: 100vh;

    background:
        url("../img/wall_route.jpg")
        center top / cover no-repeat;

    background-attachment: fixed;
}


/* ========================================
   ДОСКА
   ======================================== */

.board {
    position: relative;

    width: 92vw;
    max-width: 1900px;

    min-height: 3000px;

    margin: 0 auto;

    /*
     * Поверхность доски.
     */
    background:
        url("../img/board-surface.png")
        repeat;

    background-size: 400px 400px;

    box-sizing: border-box;

    overflow: hidden;
}


/* ========================================
   ВЕРХНЯЯ КРОМКА
   ======================================== */

.board-top {
    position: absolute;

    z-index: 20;

    
    top: 0;
    left: 0;

    width: 100%;
    height: 80px;

    background-image: url("../img/board-top.png");
    background-position: left top;
    background-repeat: no-repeat;

    
    background-size: auto 80px;

    pointer-events: none;
}


/* ========================================
   ЛЕВАЯ КРОМКА
   ======================================== */

.board-left {
    position: absolute;

    z-index: 20;

    
    top: 80px;
    left: 0;

    width: 50px;

    
    height: calc(100% - 80px);

    background:
        url("../img/board-left.png")
        left top / 50px auto repeat-y;

    pointer-events: none;
}


/* ========================================
   СОДЕРЖИМОЕ ДОСКИ
   ======================================== */

.board-content {
    position: relative;

    z-index: 30;

    /*
     * Слева оставляем место
     * для левой кромки.
     */
    margin-left: 60px;

    /*
     * Сверху оставляем место
     * для верхней кромки.
     */
    padding-top: 100px;

    padding-right: 35px;
    padding-bottom: 100px;

    box-sizing: border-box;
}


/* ========================================
   РАСКЛАДКА МАРШРУТА
   ======================================== */

.route-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 0.9fr);

    gap: 50px;

    align-items: start;
}


/* ========================================
   ЛЕВАЯ ЧАСТЬ — ДНЕВНИК
   ======================================== */

.route-days {
    min-width: 0;
}


/* ========================================
   ПРАВАЯ ЧАСТЬ — КАРТА
   ======================================== */

.route-map {
    position: sticky;

    top: 20px;

    min-height: 600px;

    box-sizing: border-box;

    border: 1px solid rgba(0, 0, 0, 0.25);
}


/* ========================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ======================================== */

@media (max-width: 768px) {

    .wall {
        background-attachment: scroll;
    }


    .board {
        width: 100%;
        min-height: 2500px;
    }


    /* -------------------------
       Верхняя кромка
       ------------------------- */

    .board-top {
    top: 0;
    left: 0;

    width: 100%;
    height: 80px;

    background-size: auto 80px;
    }


    /* -------------------------
       Левая кромка
       ------------------------- */

    .board-left {
        top: 80px;
        left: 0;

        width: 50px;

        height: calc(100% - 80px);
    }


    /* -------------------------
       Содержимое
       ------------------------- */

    .board-content {
        margin-left: 60px;

        padding-top: 80px;
        padding-right: 20px;
        padding-bottom: 80px;
    }


    /* -------------------------
       Одна колонка
       ------------------------- */

    .route-layout {
        display: flex;

        flex-direction: column;

        gap: 30px;
    }


    /* -------------------------
       Карта сверху
       ------------------------- */

    .route-map {
        position: relative;

        order: -1;

        width: 100%;

        min-height: 350px;
    }

}