@font-face {
    font-family: 'Bitter';
    src: url('../fonts/Bitter-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 200 900; 
    font-style: normal; 
    font-display: swap;
}
@font-face {
    font-family: 'Assistant';
    src: url('../fonts/Assistant-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}


/* =========================================
   CORE LAYOUT FIXES
   ========================================= */

html {
    scroll-behavior: smooth;
    font-size: 18px;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

.site-layout {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.site-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.home {
/*    flex: 1;*/
		width: 100%;
/*    align-items: stretch;*/
}

.sidebar {
    min-height: 100vh;
}

.site-footer {
    position: relative !important;

    width: 100%;
    display: block;

    clear: both;

    margin-top: auto;

    padding: 20px 20px;

    border-top: 1px solid #333;

    background: #000;

    z-index: 10;
}
.site-content {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
}
@media (max-width: 768px) {

    .sidebar {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

}
.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    		font-family: 'Assistant', sans-serif;  
		font-weight: 300;
		font-size:  14px;
		/*background-color: #000;*/ 
		color: #999; 
		line-height: 1.6; 
    
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 768px) {

    .site-layout {
        flex-direction: column;
    }

    .sidebar {
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: auto;
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid #333;
    }

    .home {
        flex-direction: column;
    }
}


/* =========================================
   1. RESET & FONTS
   ========================================= */
/*@font-face {
    font-family: 'Bitter';
    src: url('../fonts/Bitter-VariableFont_wght.ttf') format('ttf');
    font-weight: 200 900; font-style: normal; font-display: swap;
}*/
* { box-sizing: border-box; margin: 0; padding: 0; }

/* =========================================
   2. GLOBAL LAYOUT & BODY & FONT
   ========================================= */
body { 
		font-family: 'Bitter', sans-serif; 
		font-weight: 300; 
		background-color: #000; 
		color: #999; 
		line-height: 1.6; }
.home {
    	width: 100%;
		align-items: flex-start; 
}

/* =========================================
   3. SIDEBAR (STICKY + FULL HEIGHT)
   ========================================= */
.sidebar {
    flex: 0 0 220px !important; width: 220px !important; min-width: 220px !important; max-width: 220px !important;
    min-height: 100vh; padding: 3rem 1.5rem; background: #000; border-right: 1px solid #333;
    display: flex; flex-direction: column; justify-content: flex-start;
    position: sticky; top: 0; z-index: 100;
}
.site-title { font-size: 20px; letter-spacing: 0.15em; text-transform: none; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #333; font-weight: 400;}
.main-navigation ul { list-style: none; display: flex; flex-direction: column; gap: 20px; margin-top: 2rem; }
.main-navigation a { color: #999; text-decoration: none; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; transition: opacity 0.3s ease; }
.main-navigation a:hover { opacity: 0.6; }

/* =========================================
   4. CONTENT AREA & HERO
   ========================================= */
.hero { flex: 1; display: flex; justify-content: center; align-items: center; padding: 3rem; padding-left: 4.5rem; background: transparent; width: 100%; }
.single-work.hero { align-items: flex-start !important; padding-top: 0 !important; justify-content: flex-start; }
.hero-image { max-width: 100%; max-height: 80vh; object-fit: contain; display: block; padding-top: 0px;}

/* =========================================
   5. PROJECT GRID & HOVER
   ========================================= */
.project-grid { display: flex; flex-wrap: wrap; gap: 2rem; width: 100%; padding: 4rem; padding-top: 0.1rem; padding-bottom: 0.1rem; justify-content: flex-start; }
.project-item { height: 600px; position: relative; overflow: hidden; flex-shrink: 0; cursor: pointer; }
.project-image-wrapper { width: 100%; height: 100%; }
.project-item img { height: 100%; width: auto; display: block; object-fit: contain; transition: opacity 0.4s ease, filter 0.4s ease; }
.project-item:hover img { opacity: 0.6; filter: brightness(0.7); }
.project-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; opacity: 0; visibility: hidden; transition: all 0.4s ease; background: transparent; padding: 1.5rem; text-align: left; }
.project-item:hover .project-overlay { opacity: 1; visibility: visible; }
.project-info { transform: translateY(10px); transition: transform 0.4s ease; }
.project-item:hover .project-info { transform: translateY(0); }
.project-name { font-size: 16px; letter-spacing: 0; text-transform: none; margin-bottom: 0.3rem; font-weight: 400; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.project-meta { font-size: 14px; line-height: 1.4; font-weight: 300; color: #eee; text-shadow: 0 1px 2px rgba(0,0,0,0.3); letter-spacing: 0.02em; }
.project-header .project-title { 
		font-size: 18px !important; 
		font-weight: 300 !important; 
		color: #999 !important; 
		letter-spacing: 0.15em !important; 
		text-transform: uppercase !important; 
		margin-top: 1rem; 
		margin-bottom: 1rem; 
		padding-left: 4rem; 
		border: none !important; 
}

/* =========================================
   6. SINGLE WORK PAGE
   ========================================= */
.work-content { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 4rem 4rem 4rem !important; display: flex; flex-direction: column; align-items: flex-start; }
.work-project-link { font-size: 14px !important; font-weight: 500 !important; color: #999 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; margin-top: 0 !important; margin-bottom: 1rem; padding-top: 1rem !important; text-align: left; width: 100%; }
.work-project-link a { color: inherit; text-decoration: none !important; transition: color 0.3s ease; }
.work-project-link a:hover { color: #555; }
.work-image-area { position: relative; width: 100%; max-width: 100%; }
.work-image img { max-width: 100%; height: auto; display: block; }

.work-caption { margin-top: 1.5rem; width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.work-main-title { font-size: 18px; font-weight: 500; letter-spacing: 0; text-transform: none; margin-bottom: 0.4rem; margin-top: 0; text-align: left; color: #999; width: 100%; }
.work-details-inline { 
		margin-top: 0; 
		width: 100%; 
		text-align: left; 
		font-size: 16px;
		}
.work-meta-text { font-size: 16px; color: #999; font-weight: 400; letter-spacing: 0.02em; }



/* =========================================
   8. MOBILE RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
    .home { flex-direction: column; }
    
    .sidebar {
        flex: 0 0 auto !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        min-height: auto !important;
        padding: 1rem 0.5rem !important;
        background: #fff !important;
        border: none !important;
        border-bottom: 1px solid #eee !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 !important;
    }
    
    .site-title {
        font-size: 16px !important;
        margin: 0 auto 0.6rem auto !important;
        padding: 0 0 0.6rem 0 !important;
        border-bottom: 1px solid #000 !important;
        text-align: center !important;
        width: fit-content !important;
    }
    
    .main-navigation ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.5rem 1rem !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    
    .main-navigation li { list-style: none !important; }
    
    .main-navigation a {
        font-size: 11px !important;
        letter-spacing: 0.1em;
        padding: 0.2rem 0 !important;
        display: inline-block !important;
        text-align: center !important;
    }
    
    .hero { padding: 1.5rem 1rem !important; }
    .single-work.hero { padding-top: 0 !important; }
    
    .project-grid {
        padding: 1rem !important;
        gap: 1rem !important;
        justify-content: center !important;
    }
    .project-item { height: 200px !important; }
    
    .project-header .project-title {
        padding-left: 0rem !important;
        text-align: center !important;
        margin-top: 1rem !important;
        margin-bottom: 0rem !important;
    }
    
    .work-content {
        padding: 0rem !important;
        padding-top: 0.3rem !important;
        align-items: center !important;
    }
    .work-main-title {
        font-size: 16px !important;
        text-align: center !important;
    }
    .work-project-link {
        text-align: center !important;
        padding-left: 0 !important;
    }
    .work-details-inline { 
    text-align: center !important; 
    font-size:14px;
    }
    
    /* Отключаем навигацию на мобильных */
    .nav-zone, .nav-arrow { display: none !important; }
    
    /* Пагинация */
    .pagination-line { gap: 6px !important; }
    .pagination-line a,
    .pagination-line span {
        min-width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }
    
}
@media (max-width: 768px) {

    .sidebar {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: auto !important;

        overflow: visible !important;
    }

    .lang-switcher,
    .language-switcher,
    .pll-parent-menu-item {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}