/*
<portfolio-file>
File: wwwroot/css/portfolio.css
Author: Vladimir Nikolaevich Kadnikov
Company: IP Kadnikov Vladimir Nikolaevich
Created: 2026-10-07
Purpose: Project presentation styles: portfolio.css.
</portfolio-file>
*/
html{scroll-behavior:smooth}body{overflow-x:hidden}button{font:inherit}button.icon{border:0;padding:0;cursor:pointer}[hidden]{display:none!important}.skip-link{position:fixed;top:-80px;left:16px;z-index:2000;padding:12px 20px;background:white;color:#31485e}.skip-link:focus{top:15px}:focus-visible{outline:3px solid #caa669;outline-offset:4px}#header .photo img{width:100%;object-fit:cover;object-position:50% 35%}.header-horizontal #header .photo{width:88px}.header-vertical #header .photo img{aspect-ratio:1/1;display:block}.profile-caption{padding:0 28px}.header-vertical .profile-caption{padding:20px 15px}.hero-portrait{width:96px;height:96px;object-fit:cover;object-position:center;border:3px solid rgba(255,255,255,.85)}.bg-image{background-size:cover;background-position:center}.bg-image.animated{visibility:visible;animation:none}.section{scroll-margin-top:18px}.header-horizontal .section{scroll-margin-top:88px}.header-horizontal #start{padding-top:148px}.animated{visibility:visible}.sample-caption{font-size:10px;letter-spacing:.4px;color:#8998a1;font-weight:400}.layout-switcher{position:fixed;bottom:20px;left:30px;z-index:900;display:flex;align-items:center;padding:5px;background:#fff;box-shadow:0 3px 24px #172b4240;border:1px solid #e2e8ec;border-radius:6px;font-family:Roboto,Arial,sans-serif;font-size:11px;line-height:1.6}.header-vertical .layout-switcher{left:320px}.layout-switcher a{color:#526779;padding:8px 11px;border-radius:3px}.layout-switcher a.selected{background:#3aa8db;color:#fff}.layout-switcher .compare-link{border-right:1px solid #e5ebee;margin-right:5px}.layout-switcher .compare-link i{margin-right:5px}.demo-label{padding:0 10px;color:#93a1aa;font-size:9px}.contact-background{position:absolute;inset:0;background:linear-gradient(130deg,#e9ece9,#dce6e7 65%,#edf1ed)}.contact-background:after{content:"";position:absolute;inset:0;background-image:linear-gradient(30deg,transparent 46%,#ffffff90 47%,#ffffff90 49%,transparent 50%),linear-gradient(120deg,transparent 46%,#ffffff70 47%,#ffffff70 49%,transparent 50%);background-size:130px 160px;opacity:.5}#portfolio-list{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin:0}#portfolio-list .masonry-sizer{display:none}#portfolio-list .masonry-item{width:auto;padding:0;margin:0;grid-column:span 1}#portfolio-list .masonry-item.col-lg-6{grid-column:span 2}#portfolio-list .item-photo img{width:100%;aspect-ratio:1.2/1;object-fit:cover}.post-title{cursor:pointer}.progress-bar span{font-family:Roboto,Arial,sans-serif}.progress-bar{transition:width .65s ease}#messenger{display:none;overflow-y:auto;max-height:100dvh;padding:40px 0;z-index:1100}#messenger.active{display:block}#messenger-box .messenger-box-content{display:block}#messenger img,#mobile-nav img{width:96px;height:96px;object-fit:cover;object-position:center}#messenger .form-alert{display:none}#messenger .form-alert:not(:empty){display:block;margin:15px 0;padding:14px;border:1px solid #ffffff60;background:#ffffff16;line-height:1.6}#messenger .form-error{display:none}#ajax-modal{background:#fff;z-index:1200}#ajax-modal:not([hidden]){display:block}.modal-error{padding:80px}.dialog-backdrop{display:none;position:fixed;inset:0;background:#10243470;z-index:1000}.dialog-backdrop.active{display:block}.header-vertical #header{overflow-y:auto;scrollbar-width:thin}.header-vertical #main-menu{padding-bottom:110px}.header-vertical .profile-caption{position:static!important;margin-top:-105px}.nav-vertical>li>a{padding-top:11px;padding-bottom:11px}
@media(max-width:1199px){.header-horizontal .profile-caption{display:none}.header-vertical .layout-switcher{left:280px}.header-vertical #main-menu{padding-bottom:100px}}
@media(max-width:991px){.layout-switcher,.header-vertical .layout-switcher{left:12px;bottom:12px}.demo-label{display:none}.layout-switcher a{padding:8px}.header-horizontal #start{padding-top:60px}#start{min-height:100svh;display:flex;align-items:flex-end;padding-bottom:90px}#start .v-bottom{padding-top:80px;padding-bottom:55px}#start h1{font-size:43px;line-height:1.12}#start .container-wide{width:90%}.section,.header-horizontal .section{scroll-margin-top:0}.header-vertical #mobile-nav-toggle{display:block}#portfolio-list{grid-template-columns:repeat(2,1fr);gap:20px}#portfolio-list .masonry-item.col-lg-6{grid-column:span 1}}
@media(max-width:767px){#start h1{font-size:37px}#start .container-wide{width:94%}#start h5{font-size:17px;line-height:1.5}#start .v-bottom{padding-bottom:50px}.hero-portrait{width:90px;height:90px}.btn-lg{padding-left:24px;padding-right:24px}#portfolio-list{grid-template-columns:1fr}.layout-switcher{font-size:10px}.sample-caption{display:block;line-height:1.7;margin-top:8px}.contact-box{max-width:calc(100% - 30px)}#mobile-nav-toggle{top:20px;right:20px}#messenger{padding-top:55px}.ajax-body .container-wide{width:96%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.animated{animation:none!important}.progress-bar{transition:none}}
.header-vertical #main-menu{padding-bottom:0}.header-vertical .profile-caption{margin-top:22px;padding:20px 15px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition:none!important}}

/* The hidden right-hand menu overlays the page without moving its content. */
.form-trap{display:none}
#back-to-top,#messenger-toggle{position:fixed;right:calc(24px + env(safe-area-inset-right,0px));width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;z-index:900}
#back-to-top{bottom:calc(24px + env(safe-area-inset-bottom,0px));background:#fff;color:#3aa8db;box-shadow:0 3px 24px #172b4226}
#back-to-top:hover,#back-to-top:focus{background:#3aa8db;color:#fff}
#messenger-toggle{bottom:calc(94px + env(safe-area-inset-bottom,0px))}
@media(max-width:767px){#back-to-top,#messenger-toggle{right:calc(16px + env(safe-area-inset-right,0px))}#back-to-top{bottom:calc(16px + env(safe-area-inset-bottom,0px))}#messenger-toggle{bottom:calc(86px + env(safe-area-inset-bottom,0px))}}
@media print{#back-to-top,#messenger-toggle{display:none!important}}
#mobile-nav{visibility:hidden;z-index:1050;transition:transform .3s ease-out,visibility 0s .3s}
#mobile-nav a,#mobile-nav button{transition-property:color,background-color,opacity,transform}
.mobile-nav-open #mobile-nav{visibility:visible;transition:transform .3s ease-out}
.header-drawer #mobile-nav-toggle{display:block}
.header-drawer .section{padding-left:0;scroll-margin-top:0}
.mobile-nav-open #content,.mobile-nav-open.header-horizontal #header,.mobile-nav-open.header-horizontal #header.sticky{transform:none;-webkit-transform:none}
@media(prefers-reduced-motion:reduce){#mobile-nav{transition:none!important}}

/* Bilingual profile, factual skills, and the Yandex contact map. */
.language-switcher{position:fixed;right:104px;top:37px;z-index:980;display:flex;gap:3px;background:#fff;border-radius:22px;padding:4px;box-shadow:0 2px 12px #172b4230;font:700 12px Roboto,Arial,sans-serif}
.language-switcher a{padding:8px 10px;border-radius:20px;color:#31485e;line-height:1}
.language-switcher a[aria-current=page]{background:#3aa8db;color:#fff}
.header-horizontal .language-switcher{top:100px;right:30px}
.skill-group{margin-bottom:22px}.skill-group h5{font-size:16px;margin-bottom:10px}
.skill-tags{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0 0 18px;list-style:none}
.skill-tags li{padding:5px 10px;background:#eff7fb;border:1px solid #daeaf2;border-radius:3px;color:#31546b;font:500 12px/1.5 Roboto,Arial,sans-serif}
.language-skill{border-top:3px solid #3aa8db;margin:0 0 25px;padding:13px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.language-skill span{color:#687887}.education-entry h5{margin-top:10px;line-height:1.4}
.event-company{display:block;margin:6px 0;font-weight:500}.event-description{line-height:1.7}
.experience-summary{margin-top:-12px;margin-bottom:25px;color:#687887;font-size:13px}
.event-duration{display:block;margin:4px 0 12px;font-size:11px;color:#687887}
.experience-timeline .event-name{margin-bottom:6px;line-height:1.5}
.event-details{margin:10px 0 15px;font-size:12px;line-height:1.7;color:#687887}
.event-details span{display:block;margin-bottom:5px}
.event-responsibilities,.event-projects{padding-left:19px;margin:15px 0 0;line-height:1.8}
.event-responsibilities li,.event-projects li{padding-left:3px;margin-bottom:9px}
.experience-timeline .event-projects-heading{margin:22px 0 10px;text-transform:none;letter-spacing:0;font-size:13px;line-height:1.6;color:inherit}
.resume-experience-column{overflow-wrap:anywhere}
.experience-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.experience-action,.experience-details>summary{border:1px solid #daeaf2;border-radius:4px;background:#eff7fb;color:#31546b;font:500 12px/1.5 Roboto,Arial,sans-serif;cursor:pointer}
.experience-action{padding:8px 12px;min-height:36px}
.experience-action:hover:not(:disabled),.experience-details>summary:hover{background:#e0f0f8;border-color:#aad7ed}
.experience-action:disabled{opacity:.55;cursor:default}
.experience-timeline .timeline-event{padding-top:20px;padding-bottom:20px}
.experience-timeline .timeline-event:before{top:20px}
.experience-timeline .event-date{line-height:1.6}
.experience-timeline .event-duration{margin:2px 0 7px}
.experience-timeline .event-name{font-size:16px;font-weight:500;line-height:1.4}
.experience-timeline .event-company{font-size:12px;line-height:1.6;margin-bottom:10px}
.experience-details>summary{list-style:none;display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:8px 12px}
.experience-details>summary::-webkit-details-marker{display:none}
.experience-details>summary .when-open,.experience-details[open]>summary .when-closed{display:none}
.experience-details[open]>summary .when-open{display:inline}
.experience-details[open]>summary i{transform:rotate(180deg)}
.experience-details-content{padding-top:4px}
@media print{.experience-actions,.experience-details>summary{display:none!important}.experience-details::details-content{content-visibility:visible;height:auto}.experience-details-content{display:block!important}.experience-timeline .timeline-event{break-inside:avoid}}
.resume-box .speciality{padding-bottom:18px}.speciaity-description{line-height:1.6}
.work-card{height:100%;background:#fff}.work-visual{min-height:185px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;background:#31485e;color:#fff}
.work-visual>i{font-size:56px;color:#caa669}.work-visual>span{font:400 11px/1.6 Roboto,Arial,sans-serif;letter-spacing:1px;text-align:center;padding:0 16px;color:#dbe4eb}
.work-visual.development{background:#2d536a}.work-visual.infrastructure{background:#405660}
#portfolio-list .item-title{padding:24px}#portfolio-list .item-title .title{display:block;font-size:21px;line-height:1.4;margin-bottom:12px}
#portfolio-list .item-title p{line-height:1.8;font-size:13px}.work-details{color:#248abd;font-weight:500;font-size:12px}
.approach-grid p{max-width:380px;line-height:1.9}.approach-grid .col-md-4{margin-bottom:25px}
#contact{position:relative;min-height:max(760px,100svh);padding:60px 0}
.contact-map{position:absolute;inset:0;background:#e7ecef}.contact-map iframe{width:100%;height:100%;border:0;display:block}
#contact .contact-box{position:relative;margin:35px 0 35px 7%;width:410px;padding:40px;max-width:calc(100% - 30px);z-index:1;pointer-events:auto}
.contact-list li{display:flex;align-items:flex-start;gap:15px;overflow-wrap:anywhere;line-height:1.8}.contact-list .inline-icon{position:static;flex-shrink:0;min-width:16px;padding-top:4px}
.contact-box .map-note{margin-top:20px;margin-bottom:0;opacity:.8}.contact-box .btn{white-space:normal}
.header-horizontal #header{padding-right:20px}.header-horizontal #main-menu .nav>li>a{padding-left:12px;padding-right:12px}
@media(max-width:991px){.header-horizontal .language-switcher{top:27px;right:94px}#contact .contact-box{margin-left:30px}#start h1{max-width:760px}.resume-box{overflow-wrap:anywhere}}
@media(max-width:767px){.language-switcher{top:27px;right:94px}#start h1{font-size:36px}#start .btn-link{padding-left:10px;padding-right:10px}#contact{display:flex;flex-direction:column;min-height:0;padding:0}#contact .contact-box{order:0;margin:0;padding:35px 25px;width:100%;max-width:100%}.contact-map{order:1;position:relative;height:420px}.approach-grid .col-md-4{margin-bottom:35px}}