/*!
Theme Name: Miranov
Theme URI:
Author: Mavikde
Author URI: https://vk.com/mavikde
Description: Разработка сайтов на CMS WordPress. Данная тема создана уникально для сайта ретуши Miranov
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: miranov
*/

/* --- DaMiOne --- */
@font-face {
    font-family: 'DaMiOne';
    src: url('fonts/DaMiOne-Regular.ttf') format('truetype');
    font-weight: normal; /* 400 */
    font-style: normal;
    font-display: swap;
}

/* --- GOST2304 Type A --- */
@font-face {
    font-family: 'GOST2304 Type A';
    src: url('fonts/GOST2304TypeA-Reg.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GOST2304 Type A';
    src: url('fonts/GOST2304TypeA-italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* --- GOST2304 Type B --- */
@font-face {
    font-family: 'GOST2304 Type B';
    src: url('fonts/GOST2304TypeB.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GOST2304 Type B';
    src: url('fonts/GOST2304TypeB-italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* Ubuntu Regular */
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Regular.ttf') format('truetype');
    font-weight: normal; 
    font-style: normal;
    font-display: swap;
}

/* Ubuntu Light */
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Light.ttf') format('truetype');
    font-weight: 300; 
    font-style: normal;
    font-display: swap;
}

/* Ubuntu Italic */
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* Ubuntu Light Italic */
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
*/

/* Ubuntu Medium */
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


/* Ubuntu Medium Italic */
@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu-Mediumitalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}


html{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-text-size-adjust:100%;}
body{font:20px/1.5 'Ubuntu-Light',sans-serif;background-color:#2a2a2a;color:#baa77b;} /* Общая типографика */

*{margin:0;padding:0;}
*,*::before,*::after{box-sizing:inherit;}
*:focus{outline:none;}
main{display:block;}
img{height:auto;max-width:100%;border-style:none;}
p{margin:0;}
b,strong{font-weight:bolder;}

h1,h2,h3,h4,h5,h6{color:#fff;font-family:'Ubuntu-LightItalic',sans-serif;line-height:1;margin:0;}
.home h1,.home h2{text-transform:uppercase;text-align:center;margin:30px 0 20px 0;}
/*clear:both;*/
h1{font-size:32px;text-transform:uppercase;}
h2{font-size:28px;}h3{font-size:24px;}h4{font-size:26px;}
h1,h2,h3{font-weight:400;margin:10px 0;}
h5{font-size:20px;font-weight:400;font-style:italic;margin:10px 0 5px 0;}
h6{font-size:18px;font-weight:300;font-style:italic;margin:10px 0 0 0;}

.photo-page h1{font-size:30px;}
.photo-page H2{text-transform:uppercase;}

a{color:#e7ddd3;background-color:transparent;text-decoration:none;}
a:visited,a:focus{color:#e7ddd3;}
a:hover,a:active{outline:0;}
.entry-content a:hover{outline:0;border-bottom:1px solid #555;}

.site{margin:0 auto;width:96%;padding:0 2%;max-width:1300px;}

/*=========== HEADER ==============*/
.site-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-content:space-between;padding:20px 0 5px 0;border-bottom:1px solid #555;margin-bottom:20px;}
.site-branding{clear:both;z-index:99;margin-right:30px;}
.site-branding img{max-width:170px;}


/* ----- Navigation ------------------- */
.main-navigation{z-index:999;}
	/*построение*/
.main-navigation ul{display:-webkit-box;display:-ms-flexbox;display:flex;list-style:none;margin:0;padding:0;
display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}

.main-navigation ul ul{display:block;position:absolute;left:-999em;z-index:99999;}
.main-navigation ul ul li {
    display: block !important; /* Делает каждый пункт подменю отдельной строкой (столбиком) */
    width: 100%; /* Занимает всю ширину выпадающего блока */
    text-align: left !important; /* Выравнивает текст по левому краю в выпадающем списке */
}
.main-navigation ul ul ul{display:none;}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul{left:auto;}
	/*дизайн*/
.main-navigation ul ul{margin:5px 0 0 -10px;}
.main-navigation li{max-width:200px;padding:5px 10px;-webkit-transition: .3s linear;-o-transition: .3s linear;transition: .3s linear;}
.main-navigation li li{background-color:rgba(0, 0, 0, 0.6);margin-bottom:1px;border-radius:6px;cursor:pointer;}

/* стиль общий для любых меню */
.menustyle li a{font-size:16px;line-height:1.1;display:block;color:#bbb;text-decoration:none;text-transform:uppercase;}
.menustyle li li a{color:#ddd!important;text-transform:none;}
.menustyle li a:hover,.menustyle li li a:hover{color:#E4D250!important;}/*baa77b*/

/*активное меню всем меню */
.menustyle .current-menu-item a,
.menustyle .current-menu-parent a,.menustyle ul ul .current-menu-item a{color:#E4D250;} 
[aria-current]:not([aria-current="false"]) {color:#E4D250;} /*вариант акт.меню для версий слабовидящих, необязателен*/

/*немного плавности для main-navigation*/
.main-navigation ul ul{visibility:hidden;opacity:0;}
.main-navigation ul li:hover > ul{visibility:visible;opacity:1;-webkit-transition:opacity 0.6s;-o-transition:opacity 0.6s;transition:opacity 0.6s;}

/* for Small menu for main-navigation */
.menu-toggle{display:none;}
button{all:unset;border:0;background:transparent;}/*--- Если кнопка используется для 3х линий, то - Сброс стилей кнопки ---*/
@media screen and (max-width:800px){.main-navigation ul{display:none;}
.menu-toggle,.main-navigation.toggled ul{display:block;}/*добавляет к main-navigation класс toggled для моб.меню*/
}
/* Small menu Основа стилей + откр/закр иконка */
.main-navigation.toggled ul{background-color:#2a2a2a;color: #fff !important;}
.main-navigation.toggled ul ul{position:relative;display:block;left:0;visibility:visible;opacity:1;-webkit-box-shadow:none;box-shadow:none;}/*скидываем все стили большого меню*/

.main-navigation .close-icon,.main-navigation.toggled .open-icon{display:none;}
.main-navigation .open-icon:hover,.main-navigation .close-icon:hover{cursor:pointer;}
.main-navigation .open-icon{background:transparent url(img/icon_menu_open.svg) 0 0 no-repeat;}
.main-navigation .close-icon{background:transparent url(img/icon_menu_close.svg) 0 0 no-repeat;}
.main-navigation .open-icon,.main-navigation.toggled .close-icon{background-size:100% auto!important;display:block;width:30px;height:30px;position:absolute;top:10px;right:20px;}

/*============== HOME sections =====================*/
section{width:96%;width:100%;}/*margin:30px 2%;*/
section#slider-container{width:100%;margin:0;}
section h1{text-align:center;text-transform:uppercase;}

/*--------- HOME slider только изо ------------*/
#slider-container{padding-bottom:20px;border-bottom:1px solid #555;}
.slider-wrap{display:-ms-grid;display:grid;grid-auto-flow:dense;gap:0 20px;-ms-grid-columns:1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;grid-template-columns:repeat(5, 1fr);height:60vh;max-height:450px;}

#slider-container .item{height:100%;border-radius:20px;border:1px solid #999;
background-position:center;background-size:100%;background-repeat:none;
-webkit-box-shadow:3px 3px 5px 2px rgba(0,0,0,.7);box-shadow:3px 3px 5px 2px rgba(0,0,0,.7);-webkit-transition:all 3s ease-in-out;-o-transition:all 3s ease-in-out;transition:all 3s ease-in-out;}/*ховер увелич нельзя background-size:cover;*/
/*============================================================================================================================================*/

/* ------------------------------------------- */
/* 1. БАЗОВОЕ СОСТОЯНИЕ КАРТОЧКИ (ДО НАВЕДЕНИЯ) */
/* ------------------------------------------- */

/* Селектор для всех ссылок с классом .item внутри контейнера #slider-container */
#slider-container a.item {
    display: flex;             /* Включает Flexbox для центрирования содержимого */
    position: relative;        /* Устанавливает контекст позиционирования для псевдо-элемента ::before */
    font-family: 'DaMiOne';    /* Применяет указанный шрифт к тексту */
    text-transform: uppercase; /* Делает весь текст заглавными буквами */
    height: 100%;              /* Задает высоту элемента равной 100% родителя */
    border-radius: 20px;       /* Скругляет углы карточки */
    overflow: hidden;          /* Обрезает содержимое и псевдо-элемент по скругленным углам */

    /* Центрирование текста: */
    align-items: center;     /* Выравнивает содержимое по вертикали (центр) */
    justify-content: center; /* Выравнивает содержимое по горизонтали (центр) */
    text-align: center;      /* Выравнивает текст внутри своего блока */
    
    /* Стили изображения */
    background-size: 100%;     /* Начальный размер фонового изображения (для зума) */
    background-position: center; /* Центрирует фоновое изображение внутри контейнера */

    /* Плавные переходы для зума и рамки */
    /* Определяет, какие свойства будут плавно меняться и как долго */
    transition: background-size 0.8s ease-in-out, border 0.7s ease-in-out;
}

/* Создаем затемняющий слой (псевдо-элемент) */
#slider-container a.item::before {
    content: "";               /* Обязательное свойство для псевдо-элементов */
    position: absolute;        /* Позиционирует слой относительно родителя (.item) */
    top: 0;                    /* Привязывает слой к верхнему краю */
    left: 0;                   /* Привязывает слой к левому краю */
    right: 0;                  /* Привязывает слой к правому краю */
    bottom: 0;                 /* Привязывает слой к нижнему краю */
    /* !!! ИЗМЕНЕНО: Начальное состояние - полупрозрачный черный фон (темный) !!! */
    background-color: rgba(0, 0, 0, 0.5); /* Цвет слоя по умолчанию (50% затемнения) */
    
    /* Плавный переход для цвета слоя */
    transition: background-color 0.5s ease-in-out; /* Анимирует изменение прозрачности */
    z-index: 1;                /* Устанавливает слой под текстом, но над фоном */
}


/* ------------------------------------------- */
/* 2. СОСТОЯНИЕ ПРИ НАВЕДЕНИИ КУРСОРА (:hover) */
/* ------------------------------------------- */

/* При наведении на карточку (.item) */
#slider-container a.item:hover {
    background-size: 110%; /* Эффект приближения изображения (зум 110%) */
    border: 1px solid #fff; /* Добавляет белую рамку толщиной 1px */
}

/* !!! ИЗМЕНЕНО: Убираем затемнение при наведении на карточку !!! */
/* При наведении на карточку, меняем цвет затемняющего слоя */
#slider-container a.item:hover::before {
    background-color: rgba(0, 0, 0, 0); /* Становится полностью прозрачным (затемнение исчезает) */
}

/* ------------------------------------------- */
/* 3. СТИЛИ ДЛЯ ТЕКСТА (ЧТОБЫ ОН БЫЛ СВЕРХУ) */
/* ------------------------------------------- */

/* Стили для текстовых элементов внутри контейнера */
#slider-container .card-title, 
#slider-container h2 {
    z-index: 2; /* Поднимает текст над затемняющим слоем, чтобы он был виден */
    position: relative; /* Необходимо для работы z-index */
    
    /* Ваши стили текста */
    color: #fff;       /* Цвет текста: белый */
    padding: 10px;     /* Внутренний отступ вокруг текста */
    margin: 0;         /* Удаляет стандартные внешние отступы браузера */
}

/*============================================================================================================================================*/
#slider-container .item-1{background-image: url("sliders/image1.jpg");}
#slider-container .item-2{background-image: url("sliders/image2.jpg");}
#slider-container .item-3{background-image: url("sliders/image3.jpg");}
#slider-container .item-4{background-image: url("sliders/image4.jpg");}
#slider-container .item-5{background-image: url("sliders/image5.jpg");}

/*.home #page-slider-cover{display:none;}*/

.home-question{padding:10px 0;border-bottom:1px solid #555;}
.home h2{margin:0;padding:0;font-size:36px;}

/* списки */
.home section ul,.entry-content ul{margin:0 50px;font-size:19px;}
.home section ul li::before,.entry-content ul li::before{content:'';padding-right:10px;}

/*Цитата quote ОТБРОШЕНО УДАЛИТЬ */
.home-quote{border-top:1px solid #555;padding:5px;text-align:right;}/*width:80%;margin:0 auto;*/
.home-quote h1{display:none!important;}
blockquote{font-style:italic;}
blockquote:before{content:'\201e';margin-right:5px;}
blockquote:after{content:'\201c';margin-left:5px;}/* '“' '”' \00ab \00bb \201e \201c;*/
.home-quote span{display:block;font-size:14px;text-align:right;margin-right:7%;}



/*========== PAGE slider & content ===========*/
#video-slider,#page-slider-cover{position:relative;width:100%;border-radius:20px;border:1px solid #777;-webkit-box-shadow:5px 5px 10px 2px rgba(0,0,0,.7);box-shadow:5px 5px 10px 2px rgba(0,0,0,.7);overflow:hidden;margin-bottom:35px;}
#page-slider-cover{height:40vh;}

.img-slider{position:relative;width:100%;height:100%;background-position:50% 50%;background-size:cover;background-repeat:no-repeat;padding-top:25px;}
.img-slider header{position:absolute;width:100%;bottom:2%;}/*по центру: transform:translate(0, -50%);top:50%; */
.img-slider header h1{text-align:center;font-size:44px;line-height:1;letter-spacing:2px;word-spacing:5px;background-color:rgba(0, 0, 0, 0.7);border-top:1px solid #444;border-bottom:1px solid #444;padding:20px 0;}

.page-template-info-page #page-slider-cover{height:20vh;}

/*=========== Навигация везде ===========*/
article{padding-bottom:30px;}
.menu-portfolio ul li,.buttn,.nav-previous,.nav-next{margin:0 3px 10px 2px;padding:5px 8px;text-align:center;border:1px solid #555;border-radius:8px;-webkit-box-shadow:3px 3px 5px 2px rgba(0,0,0,.7);box-shadow:3px 3px 5px 2px rgba(0,0,0,.7);}
.archive .navcat{float:right;margin:0 0 20px 20px;}

.navcat-cover{font-style:italic;position:relative;width:100%;border-top:1px solid #444;border-bottom:1px solid #444;padding:20px 0;padding:20px 0 25px 0;margin-bottom:50px;}

.navcat-cover .navcateg{position:absolute;left:calc(50% - 90px);width:180px;}
.navcat-cover .nav-previous,.navcat-cover .nav-next{position:absolute;width:120px;text-align:center!important;}
.navcat-cover .nav-previous{left:0;}
.navcat-cover .nav-next{right:0;}

.navcat,.navcateg,.nav-previous,.nav-next{font-size:14px;clear:both;}
.navcat a,.navcateg a,.nav-previous a,.nav-next a{color:#999;}
.navcat:hover,.navcateg:hover,.nav-previous:hover,.nav-next:hover{background-color:#333;border:1px solid #666;}
.navcat:hover a,.navcateg:hover a,.nav-previous:hover a,.nav-next:hover a{color:#baa77b;}




/*------- portfolio-menu --------*/

.menu-portfolio ul{display:-ms-grid;display:grid;gap:5px 10px;grid-auto-flow:dense;grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));border-bottom:1px solid #444;
list-style:none;margin:0 0 30px 0;padding-bottom:10px;}.menu-portfolio ul ul{display:none;}
.menu-portfolio ul li{display:flex;align-items:center;justify-content:center;border:1px solid #777;}
.menu-portfolio ul li a{width:100%;}
.menu-portfolio ul li:hover{background-color:#333;}

.menu-portfolio .pfname{width:100%;display:-ms-grid;display:grid;-ms-grid-columns:2fr 20px 1fr 20px 2fr;grid-template-columns:2fr 1fr 2fr;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0 10px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:10px;}
.pfname h3{font-size:19px;font-family:'DaMiOne-Regular',sans-serif;text-transform:uppercase;}
.pfname h3,.pfname hr{text-align:center;line-height:1;margin:6px 0 4px 0;}

hr{height:1px;margin:15px 0;background-color:#777;}
.site-main hr{background-color:#baa77b;}/*бледно желтый*/
.pfname hr{background-color:#555;}/*заголовок*/



/*=========== Content ==========*/
.entry-meta{clear:both;margin-top:30px;}
.entry-content{width:100%;padding:0 2%;}





/*========== archive ===========*/

.attachment-post-thumbnail.wp-post-image{}

.archive-list{}




/*========= ГАЛЕРЕИ ===========*/
.gallery{z-index:1;margin-top:30px;display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));grid-gap:10px 0;}
.gallery a:hover{border:none;}
.gallery a img{filter:grayscale(1);opacity:0.9;border:1px solid #555;}
.gallery a:hover img{filter: grayscale(0);opacity:1;border:1px solid #888;}
/*----------- lightbox -----------*/
/*.gallery{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));grid-gap:10px;}*/
.lightbox{z-index:2;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
.lightbox img{max-width:90%;max-height:90%;border:1px solid #999;border-radius:20px;}
.lightbox .close{position:absolute;top:30px;right:20px;color:#999;font-size:60px;font-weight:100;cursor:pointer;}
.nav{position:absolute;top:45%;width:98%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;color:#777;font-size:60px;}
.unit,.prev,.next{cursor:pointer;}
.close:hover,.prev:hover,.next:hover{color:#fff;}
/*----------- end lightbox -----------*/


/*-------- До-После twentytwenty ---------*/

/*archive .photo-page{display:none;}*/

.twentytwenty-container{width:60%;float:left;margin:0 2% 20px 0;}

.photo-page .entry-content .gallery{margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start;grid-gap:10px;}/*display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));*/

.photo-page .entry-content .gallery .unit{max-width:49%;}


/*============= Виджеты и сайдбары ==============*/
#secondary{background-color:#ddd;}


/*============== FOOTER & Site-footer-line =====================*/
.site-footer{clear:both;margin:50px 0 10px 0;}

.contact-info{display:-ms-grid;display:grid;-ms-grid-columns:minmax(30px, 2fr) 30px 120px 30px minmax(20px, 100px) 30px 160px;grid-template-columns:minmax(30px, 2fr) 120px minmax(20px, 100px) 160px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0 30px;text-align:center;}

.contact-info div{border-top:1px solid #666;}

#social{list-style:none;display:-ms-grid;display:grid;-ms-grid-columns:1fr 20px 1fr 20px 1fr;grid-template-columns:1fr 1fr 1fr;-webkit-box-align:right;-ms-flex-align:right;align-items:right;gap:0 20px;}
#social li{text-align:right;}

.contact-info a.email{white-space:nowrap;font-size:18px;}
.contact-info a.email:hover,.contact-info a i:hover{color:#E4D250;}

.site-info{font-size:14px;color:#888;}
.site-info .sep{font-size:12px;color:#555;font-weight:600;padding:0 30px;}
.site-info .made{color:#444;font-size:13px;}
.site-info .made a{color:#555;text-decoration:none;}
.site-info .made a:hover{color:#888;}


/*========= 404 ===========*/

body.error404{}



/* ============== Mobil ================== */
@media screen and (min-width:1500px){
}
		/* между стили выше вне поправок */
@media screen and (max-width:1200px){
}
@media screen and (max-width:800px){
}
@media screen and (max-width:500px){
.contact-info{grid-template-columns:minmax(20px, 2fr) 100px minmax(15px, 100px) 130px;gap:0 20px;}
#social li{text-align:left;}
.contact-info a.email{font-size:16px;}
}

.white-box {background-color: #fff;padding:100px;}


/* ==========================================================================
   Страница Ретушь фотографий.
 Изменение основного контейнера + блок раскрытия текста
   ========================================================================== */

/* Убедитесь, что родительский блок позиционируется относительно */
#page-slider-cover {
    position: relative; 
}

/* 1. Позиционирование контейнера заголовка внутри баннера */
.slider-title-wrapper {
    position: absolute; /* Позволяет нам точно разместить его */
    top: 0;             /* Прижимаем к верхнему краю */
    left: 0;            /* Прижимаем к левому краю */
    width: 100%;        /* Растягиваем на всю ширину баннера */
    padding: 20px;      /* Небольшой отступ от края баннера */
    box-sizing: border-box; /* Учитываем padding в ширине 100% */
}

/* 2. Создание полупрозрачной полосы-градиента */
.slider-title-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; 
    height: 100%;
    /* ГРАДИЕНТ */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    /* Удаляем z-index: -1; */
    z-index: 1; /* Поднимаем градиент над фоновой картинкой */
}

/* Тонкая белая линия с градиентом, расположенная под заголовком */
.slider-title-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0; /* Прижимаем ко дну нашего wrapper'а */
    left: 0;
    width: 50%; /* Длина до середины, как у темного градиента */
    height: 1px; /* Максимально тонкая линия (1 пиксель) */
    /* Градиент: от белого (100% видимости) до полностью прозрачного */
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1; 
}

/* 3. Стилизация самого текста заголовка */
.slider-title-wrapper h1 {
    color: #ffffff;      
    font-size: 2em;      
    margin: 0;           
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); 
    position: relative; /* Добавляем позиционирование, чтобы z-index работал */
    z-index: 2;         /* Делаем текст выше градиента */
}


/* Цвет текста "Подробнее" */
#toggle-details-button h3 {
    color: #baa77b;
    cursor: pointer; /* Делаем курсор "рукой", чтобы было понятно, что это кнопка */
	/* Добавьте эту строку с нужным размером */
    font-size: 0.6em; /* Вы можете изменить 1.2em на 1em (меньше) или 1.5em (больше) */
}

/* Стили для скрытия блока по умолчанию */
.details-hidden {
    display: none; /* Скрываем блок */
    opacity: 0;    /* Делаем его прозрачным */
    /* Добавляем плавный переход для красивого появления */
    transition: opacity 0.5s ease-out; 
}

/* Стили для показа блока при активном состоянии */
.details-visible {
    display: block; /* Показываем блок */
    opacity: 1;     /* Делаем его видимым */
}


/* Стили для контейнера "узнать подробнее" */
#toggle-details-button {
    display: flex;         /* Включаем гибкое позиционирование */
    align-items: center;   /* Выравниваем элементы по вертикальному центру */
    justify-content: space-between; /* Распределяем пространство между элементами */
    /* Дополнительные стили, которые могли быть в оригинальном .menu-portfolio pfname */
    margin-bottom: 10px; 
    gap: 10px; /* Отступ между линиями и текстом */
}

/* Стили для самих линий hr внутри "Подробнее" */
#toggle-details-button hr {
    flex-grow: 1;      
    border: none;      /* Убираем все границы */
    
    /* Используем высоту и цвет фона для максимально тонкой линии */
    height: 1px; /* Устанавливаем высоту 1 пиксель */
    background-color: #555; /* Цвет линии из оригинального стиля */
    
    margin: 0;         
}

/* Стили для нового блока заголовка ЗНАЕТЕ ЧТО ТАКОЕ РЕТУШЬ ФОТОГРАФИЙ? H2 */
.text-block-h2-wrapper {
    text-align: center;      /* Выравниваем весь текст внутри по центру */
    margin: 40px 0 20px;     /* Отступы */
    color: #ffffff;          /* Цвет текста */
    width: 100%;             /* Убеждаемся, что блок занимает всю ширину */
}
/* ==========================================================================
   Конец. Страница Ретушь фотографий.
 Изменение основного контейнера + блок раскрытия текста
   ========================================================================== */



/* ==========================================================================
   Стили для шаблона Портфолио (Исправленная версия с !important)
   ========================================================================== */

/* Добавляем обводку и тень к основному контейнеру макета */
.main-content-layout {
    display: flex; /* Принудительно задаем горизонтальное расположение (!important) или наоборот */
    justify-content: space-between !important;
	position: relative !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important; /* Белый цвет с 40% прозрачности */
    border-radius: 20px !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2) !important;
    padding: 20px !important;
    background-color: #2a2a2a !important;
    flex-wrap: wrap !important; /* Убедимся, что колонки не переносятся (nowrap) или переносятся (wrap) */
}

/* Стили для левой колонки с видео */
.video-container-left {
    width: 48% !important; /* Устанавливаем ширину левой колонки */
    display: flex !important; /* Включаем Flexbox для самой колонки */
    flex-direction: column !important; /* Направляем элементы вертикально */
    justify-content: center !important; /* Центрируем содержимое по вертикали внутри колонки */
    align-items: center !important; /* Центрируем по горизонтали */
}

.video-wrapper {
    /* Меняем пропорции с 1:1 на стандартные для видео 16:9 */
    aspect-ratio: 16 / 9 !important; 
    width: 100% !important; 
    margin-bottom: 0px !important; /* Убираем нижний отступ, чтобы не мешал центрированию */
    overflow: hidden !important; 
    /* Убираем display: flex отсюда, мы его перенесли выше */
}

.video-wrapper video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    background-color: #000 !important;
}


/* Стили для правой колонки с сеткой изображений (6 шт, 1:1) */
.gallery-container-right {
    width: 48% !important; /* Устанавливаем ширину правой колонки */
    
    /* ДОБАВЛЕНО/ИЗМЕНЕНО: Используем Flexbox для управления содержимым колонки */
    display: flex !important;
    flex-direction: column !important;
    height: auto !important; /* Позволяет контейнеру автоматически растягиваться */
}

.image-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; 
    grid-auto-rows: 1fr !important; 
    gap: 10px !important; 
}

.image-grid img {
    width: 100% !important;
    height: 100% !important; 
    object-fit: cover !important;
}

/* --- Стили для центрирования блока "C9 production" в правой колонке --- */

/* 1. Стили для самого блока с текстом contact-info */
.contact-info {
    /* Прижимает этот блок к нижней части контейнера, занимая все доступное пространство над собой */
    margin-top: auto !important; 
    padding: 10px 0 !important; /* Обновленные отступы */
    width: 100% !important;
    text-align: center !important; /* Центрирует сам текст внутри этого блока */
    box-sizing: border-box !important; /* Гарантирует, что padding не увеличит ширину свыше 100% */
}

/* 2. Стили для самой ссылки, чтобы она не вылезала за края */
.contact-info a.email {
    display: block !important;
    word-wrap: break-word !important; /* Предотвращает выход длинного текста за границы */
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* Добавляем вертикальную линию разделитель в центр main-content-layout */
.vertical-separator-guaranteed {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; 
    width: 1px; 
    /* Тот же градиент */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 10;
}

/* Вертикальный отступ между блоками портфолио видео + 6 фотографий */
.main-content-layout {
    margin-bottom: 50px; /* Отступ снизу для следующего блока */
    padding-bottom: 50px; /* Отступ сверху для разделителя */
    position: relative; /* Нужен для позиционирования псевдоэлемента */
}

/* Убираем полосу у самого последнего блока, чтобы она не висела перед футером */
article > .main-content-layout:last-of-type::after {
    display: none;
}


.pfname {
    display: flex;       /* Используем Flexbox для выравнивания линий и текста в ряд */
    align-items: center; /* Выравниваем элементы по центру вертикали */
    justify-content: center; /* Центрируем содержимое внутри контейнера */
    gap: 20px;           /* Отступ между линиями и текстом */
}

.title-line {
    flex-grow: 1;        /* Позволяет линиям занимать доступное пространство */
    border: none;
    border-top: 1px solid #ffffff; /* Цвет и толщина линии (подберите под свой дизайн) */
    margin: 0;           /* Убираем стандартные отступы <hr> */
}

.title-container {
    text-align: center; /* Центрируем строки заголовка друг относительно друга */
    white-space: nowrap; /* Предотвращает перенос текста на новую строку, если есть место */
}

.main-title {
    font-size: 24px;     /* Размер шрифта для "ЦИФРОВАЯ ТЕХНИКА" */
    font-weight: bold;
    color: #ffffff;      /* Цвет текста */
    margin: 0;           /* Убираем стандартные отступы <h1> */
    text-transform: uppercase;
}

.subtitle {
    font-size: 16px;     /* Размер шрифта для "портфолио" (меньше) */
    color: #cccccc;      /* Цвет текста (можно сделать светлее) */
    margin: 0;           /* Убираем стандартные отступы <h2> */
    text-transform: lowercase; /* Если нужно маленькими буквами, как в запросе */
}



.source-manual-entry {
    /* Чтобы убедиться, что блок не "заплывает" рядом с колонками */
    clear: both; 
    /* Отступ сверху, чтобы отделить от верхнего блока */
    margin-top: 20px; 
    /* Выравнивание текста по правому краю контейнера */
    text-align: right; 
    /* Добавляем нижнюю линию */
    border-top: 1px solid #333; 
    padding-top: 10px;
    font-size: 0.9em;
}

.source-manual-entry p {
    margin: 0; /* Убираем стандартный отступ параграфа */
}

/* ==========================================================================
   Конец.Стили для шаблона Портфолио (Исправленная версия с !important)
   ========================================================================== */


/* ==========================================================================
   Стили Модального Окна
   ========================================================================== */

.modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed; /* Оставаться на месте при прокрутке */
    z-index: 10000; /* Сильно высокий z-index, чтобы быть над всем */
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.9); /* Темный полупрозрачный фон */
    justify-content: center;
    align-items: center;
}

.modal-content {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 900px;
    position: relative;
    /* Убеждаемся, что контент внутри modal-content отображается */
    display: block !important; 
}

.close-button {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001; /* Над контентом */
}

/* Стили для TwentyTwenty внутри модального окна */
.modal-content .twentytwenty-container {
    height: 60vh; /* Задаем высоту для модального окна */
}

/* Модальное окно "До/После" */
.modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    z-index: 99999; /* Поверх всего */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Черный фон */
    justify-content: center;
    align-items: center;
}

.modal-content {
    width: 95%;
    max-width: 1200px; /* Максимальная ширина слайдера */
    position: relative;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.close-button {
    position: absolute;
    top: -50px;
    right: 0;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close-button:hover {
    color: #E4D250;
}

/* Настройка TwentyTwenty внутри модалки */
.twentytwenty-container {
    width: 100%;
    max-height: 85vh;
}

.twentytwenty-container img {
    width: 100%;
    display: block;
}

/* ==========================================================================
   Конец. Стили Модального Окна
   ========================================================================== */

/* ==========================================================================
   Стили для карточек. Главная страница
   ========================================================================== */
.item {
    /* Ваши стили ширины/высоты и фона */
    height: 400px; /* Например, высота карточки */
    
    display: flex;           /* Включает Flexbox */
    align-items: center;     /* Выравнивает содержимое по вертикали (центр) */
    justify-content: center; /* Выравнивает содержимое по горизонтали (центр) */
    text-decoration: none;   /* Убирает подчеркивание у ссылки */
    box-sizing: border-box;  /* Убедитесь, что отступы не увеличивают размер блока */
}

.card-title {
    /* Удалите 'position: absolute', 'top: ...', 'left: ...' и т.п. */
    margin: 0;
    padding: 10px 20px;
    color: white;
    background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон для читаемости */
    text-align: center; /* Дополнительное выравнивание текста внутри спана */
}
/* ==========================================================================
   Конец. Стили для карточек. Главная страница
   ========================================================================== */

/* ==========================================================================
   Страница "Контакты".
   ========================================================================== */
/* Стилизация списка кнопок */
.contact-buttons {
    list-style: none;
    padding: 0;
    margin: 30px 0; 
    display: flex;
    justify-content: center;
    gap: 30px; 
    flex-wrap: wrap;
}

/* Общие стили для всех кнопок */
.contact-btn {
    display: block; /* Изменил на block, чтобы width работал корректно */
    width: 180px;   /* *** Установил фиксированную ширину для всех кнопок *** */
    padding: 10px 20px;
    background-color: #333;
    color: #D4C092;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: center; /* Центрируем текст внутри фиксированной ширины */
    transition: background-color 0.3s, box-shadow 0.3s;
    border: 1px solid #aaa;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    /* Добавил свойство для одинаковой высоты */
    box-sizing: border-box; 
    min-height: 42px; /* чтобы высота была одинаковая, даже если текст перенесется */
}

.contact-btn:hover {
    background-color: #444; 
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}
/* Добавляем отступ сверху для блока "Узнать подробнее" */
.toggle-details-wrapper {
    margin-top: 40px; 
}

/* Принудительно центрируем все абзацы внутри скрытого блока ТОЛЬКО на странице Контакты */
.page-template-info-page #details-content p {
    color: #D4C092;
    text-align: center !important; /* Применяем центрирование к самим параграфам */
}

.page-template-info-page #details-content p strong {
    color: #fff; /* Убеждаемся, что жирный текст тоже белый */
}

/* Оставляем общие стили блока, которые были ранее */
.page-template-info-page #details-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    margin-top: 20px;
    margin-bottom: 20px;
}
/* ==========================================================================
   Конец. Страница "Контакты".
   ========================================================================== */

/* ========================= Сервис шаблон. ========================================================================== */

.service-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрирует контент вертикально */
    align-items: center;     /* Центрирует контент горизонтально */
    min-height: 50vh;        /* Занимает минимум 50% высоты области просмотра */
    text-align: center;
    padding: 20px;
    font-size: 1.2em;
    color: #fff; /* Используем ваш стандартный цвет текста, если он темный, замените на #333 */
}

.service-page-container a {
    color: #D4C092; /* Используем ваш золотистый цвет для ссылки */
    text-decoration: none;
    font-weight: bold;
}

.service-page-container a:hover {
    text-decoration: underline;
}
/* ========================= Конец. Сервис шаблон. ========================================================================== */

/* ========================= Страница Обтравка. ========================================================================== */
/* Контейнер для трех изображений в ряд на десктопе */
.gallery-row {
    display: flex;       /* Используем flexbox для размещения элементов в ряд */
    justify-content: space-around; /* Равномерное распределение */
    gap: 10px;           /* Отступ между картинками */
    margin-top: 15px;
}

.gallery-row img {
    width: 32%;          /* Примерно по трети ширины каждая */
    height: auto;
    border-radius: 5px;
    object-fit: cover;   
}
/* ========================= Конец. Страница Обтравка. ========================================================================== */

.site-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 40px; /* Отступы по бокам */
    font-family: 'Ubuntu-Light', sans-serif;
    font-size: 14px;
    color: #baa77b;
    background-color: #2a2a2a;
    border-top: 1px solid rgba(186, 167, 123, 0.1);
}

/* Делим футер на 3 равные части */
.site-info-item {
    flex: 1; 
}

.footer-left {
    text-align: left;
}

.footer-center {
    text-align: center;
}

.footer-right {
    text-align: right;
}

/* Стили ссылок */
.site-info a {
    color: #baa77b;
    text-decoration: none;
    transition: opacity 0.3s;
}

.site-info a:hover {
    opacity: 0.7;
}

.privacy-link {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
}

/* На мобильных устройствах выстраиваем в колонку */
@media (max-width: 800px) {
    .site-info {
        flex-direction: column;
        gap: 15px;
        padding: 30px 20px;
    }
    .footer-left, .footer-center, .footer-right {
        text-align: center;
    }
}