/* Змінні CSS */
:root {
    --nav-height: 740px;
}

.nav {
    width: var(--main-width);
    height: var(--nav-height);
    position: relative;
    margin-top: var(--header-height);
    left: calc((100% + var(--sidebar-width)) / 2);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
}

/* ===== Navigator Section Styles ===== */
.navigator-section {
    height: var(--nav-height);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    align-items: start;
    padding: 0;
    box-sizing: border-box;
}

.column-navigator {
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-weight: medium;
}

.square-video {
    will-change: filter;
    width: 100%;
    height: var(--sidebar-width);
    opacity: 100%; /* Початкова прозорість */
    filter: grayscale(100%);
    transition: filter 0.3s ease, opacity 0.3s ease; /* Плавний перехід */
}

.square-video:hover {
    filter: none; /* Відновлення кольорів при наведенні */
    opacity: 100%; /* Зміна прозорості при наведенні */
}

.navigator-description {
    width: 100%;
    height: 40px;
    text-decoration: none; /* Забирає підкреслення */
    background-color: #ffffff;
    display: flex;
    align-items: center; /* Вирівнює елементи по правому краю */
    justify-content: flex-start;
}

.architectural {
    font-family: 'Lato', sans-serif;
    font-weight: thin;
    font-size: 13px;
    color: var(--AD-grey);
}

.context {
    margin-left: 5px;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: var(--AD-black);
}

.navigator-extension {
    background-color: #ffffff;
    width: 100%;
    height: var(--sidebar-width);
    display: flex;
    align-items: center; /* Вирівнює елементи по правому краю */
    opacity: 75%;

    font-family: 'Lato', sans-serif;
    font-weight: light;
    font-size: 13px;
    color: var(--AD-black);
}