/* -----------------------------------------------------------------------------
   native.css — то, что в оригинале делал JS темы.
   CSS темы не тронут; здесь только замена поведения плагинов на нативное.
   Каждый блок помечен, какую функцию custom.js он заменяет.
   -------------------------------------------------------------------------- */

/* <picture> вокруг картинок для webp-фолбэка: у элемента свой инлайновый бокс,
   из-за которого поехали бы float и размеры (.mypic, плитки портфолио).
   display:contents убирает его, и раскладка остаётся прежней. */
picture { display: contents; }

/* custom.js: jQuery('.start_loader').fadeOut(850) на window.load */
.start_loader { display: none; }

/* custom.js pageSetup(): вертикальное центрирование задаётся html padding-top
   в app.js по формуле темы. Проценты header 11% / .mainpart 80% / footer 9%
   считаются от высоты body, поэтому ей нужна определённая высота. */
html, body { height: 100%; }
body { margin: 0; }

/* custom.js Nav(): клик по .menu-button-minus двигает .menu margin-left
   940px <-> 0 (jQuery.animate, 400ms) и делает fadeToggle заголовкам (600ms).
   Класс menu-button-plus переключает иконку plus.png / minus.png. */
header .menu { transition: margin-left 400ms; }
header .menu.menu-open { margin-left: 0; }
.header-titles { transition: opacity 600ms; }
.header-titles.titles-hidden { opacity: 0; pointer-events: none; }

/* custom.js Scroll(): niceScroll на .mainpart + jump(): $.scrollTo.
   Горизонтальная лента секций прокручивается нативно, якоря #home/#resume/... */
.mainpart {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

/* custom.js pageSetup(): $('.first-block').css('width', (html - header)/2) */
.first-block { width: calc(max(0px, (100vw - 980px) / 2)); }

/* custom.js Portfolio(): fadeIn/fadeOut .frame-overlay и .portfolio-meta по hover */
.portfolio-post .frame-overlay {
    display: block;
    opacity: 0;
    transition: opacity 300ms;
}
.portfolio-post a.item-image:hover .frame-overlay { opacity: .9; }
.portfolio-post .portfolio-meta { transition: opacity 300ms; }
.portfolio-post a.item-image:hover .portfolio-meta { opacity: .9; }

/* jquery.isotope: layoutMode masonry. Плитка 295px + margin 6px, 3 в ряд. */
#portfolio_loop { display: flex; flex-wrap: wrap; align-content: flex-start; }
.isotope-item.is-filtered-out { display: none; }

/* jquery.jscrollpane на .portfoliopart */
.portfoliopart { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }

/* jquery.mCustomScrollbar на .about-paragraph и .contact-add */
.about-paragraph, .contact-add { overflow-y: auto; scrollbar-width: thin; }

/* Телефон и почта ссылками: в скине yellow.css у a цвет #ffae00, а фон
   секции контактов такой же — без этого ссылки сливаются с фоном. */
.contact-add a { color: inherit; text-decoration: none; }
.contact-add a:hover { text-decoration: underline; }

/* custom.js viewP(): снимает visibility:hidden с подписей диаграмм */
.chart span, .chartbox p { visibility: visible; }

/* jquery.easy-pie-chart: size 130, lineWidth 21, trackColor #2e2e2e, barColor #ffae00 */
.chart {
    position: relative;
    width: 130px;
    height: 130px;
    line-height: 130px;
    text-align: center;
}
.chart svg { position: absolute; top: 0; left: 0; }
.chart span { position: relative; z-index: 1; }

/* custom.js Resume(): $('.hideme').animate({opacity:1}) при показе секции.
   В style.css задано .hideme{opacity:0}. */
.hideme { opacity: 1; }

/* jquery.carouFredSel на .car: карусель услуг, 4 диаграммы по 3 на экран.
   Ширину «окна» (ровно N целых элементов) выставляет app.js, как carouFredSel. */
.car {
    display: flex;
    overflow: hidden;
    scroll-behavior: smooth;
}
.car > li { float: none; flex: 0 0 auto; }
/* .chartbox во float выпадает из потока, и li получается уже подписи —
   при листании хвост подписи заезжал в соседний экран. */
.car > li .chartbox { float: none; display: inline-block; }

/* carouFredSel показывает свои кнопки prev/next; в теме они display:none
   и в обычном состоянии, и в :hover — перебиваем оба правила. */
.charts .resume-skill-prev,
.charts .resume-skill-next,
.charts .resume-skill-prev:hover,
.charts .resume-skill-next:hover { display: block; }

/* jquery.carouFredSel на .experiences: оригинал клонировал список в #fooX,
   удаляя чётные/нечётные, и синхронизировал два ряда. Тот же порядок
   (1,3,5 сверху / 2,4,6 снизу) даёт grid с раскладкой по колонкам.
   Селектор с .skills — иначе перебивает .car,.skills ul{display:block}. */
.skills ul.experiences {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.skills ul.experiences > li { float: none; scroll-snap-align: start; }
.car::-webkit-scrollbar, .experiences::-webkit-scrollbar { display: none; }
.resume-skill-prev, .resume-skill-next { cursor: pointer; }

/* ---------------------------------------------------------- страница проекта
   В теме html,body{height:100%;overflow:hidden;max-height:800px} — это под
   горизонтальную главную. На одиночной записи оригинал скроллил страницу
   через niceScroll; здесь просто возвращаем обычную прокрутку. */
body.single-portfolio,
html:has(body.single-portfolio) {
    height: auto;
    max-height: none;
    overflow: visible;
}
/* header у темы height:11%; при height:auto у body он схлопывается,
   а .menu-area и .header-titles спозиционированы от его низа. */
body.single-portfolio header { height: 88px; }

body.single-portfolio .portfolio-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
}
body.single-portfolio .content_margin { padding: 0 20px; }
body.single-portfolio .portfolio-back a { color: #ffae00; }

/* Smart Slider 3 -> нативная лента со scroll-snap */
.portfolio-slider { position: relative; }
.portfolio-slider .pslides {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.portfolio-slider .pslides::-webkit-scrollbar { display: none; }
.portfolio-slider .pslide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: block;
    float: none;
}
.portfolio-slider .pslide img {
    display: block;
    width: 100%;
    height: min(70vh, 600px);
    object-fit: contain;   /* data-mode="fit" у Smart Slider, фон прозрачный */
}
.portfolio-slider .pnav {
    position: absolute;
    top: calc(50% - 22px);
    width: 44px;
    height: 44px;
    border: 0;
    background: rgba(255, 255, 255, .75);
    cursor: pointer;
}
.portfolio-slider .pprev { left: 10px; }
.portfolio-slider .pnext { right: 10px; }
.portfolio-slider .pnav::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 auto;
    border-top: 2px solid #44631d;
    border-right: 2px solid #44631d;
}
.portfolio-slider .pprev::before { transform: rotate(-135deg); }
.portfolio-slider .pnext::before { transform: rotate(45deg); }
.portfolio-slider .pdots { text-align: center; padding: 12px 0 0; }
.portfolio-slider .pdot {
    width: 10px;
    height: 10px;
    margin: 0 4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d6d6d6;
    cursor: pointer;
}
.portfolio-slider .pdot.current { background: #ffae00; }

/* jquery.magnific-popup: .ajax-popup-link -> нативный <dialog> */
#lightbox {
    border: 0;
    padding: 0;
    width: min(90vw, 900px);
    max-width: 900px;
    background: #fff;
    color: #000;
}
#lightbox::backdrop { background: rgba(11, 11, 11, .8); }
#lightbox .lightbox-title {
    margin: 0;
    padding: 18px 30px 12px;
    font-size: 20px;
    font-weight: 600;
}
#lightbox .lightbox-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 10px;
    padding: 0 10px 10px;
}
#lightbox .lightbox-track img {
    flex: 0 0 100%;
    width: 100%;
    height: min(70vh, 560px);
    object-fit: contain;
    scroll-snap-align: center;
    background: #f4f4f4;
}
#lightbox .lightbox-close {
    position: absolute;
    top: 6px;
    right: 12px;
    z-index: 2;
    border: 0;
    background: none;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    color: #555;
}
#lightbox .lightbox-nav {
    position: absolute;
    top: 55%;
    width: 44px;
    height: 44px;
    border: 0;
    background: rgba(255, 255, 255, .75);
    cursor: pointer;
}
#lightbox .lightbox-prev { left: 16px; }
#lightbox .lightbox-next { right: 16px; }
#lightbox .lightbox-prev::before,
#lightbox .lightbox-next::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 auto;
    border-top: 2px solid #44631d;
    border-right: 2px solid #44631d;
}
#lightbox .lightbox-prev::before { transform: rotate(-135deg); }
#lightbox .lightbox-next::before { transform: rotate(45deg); }