/*
Theme Name: MC Blueprint
Theme URI: https://johngorn.com
Description: Дочерняя тема missioncontrol — чертёж-синька (Blueprint). Рендер из jg_page_content(). Пробная тема JG. Скоуп только на главной.
Author: Evgeny Gorun
Template: missioncontrol
Version: 1.0
*/

body.jg-blueprint{
  --bg:#123c8c; --txt:#eaf1ff; --mut:#bcd2fa; --mut2:#a9c3f5; --acc:#8fe3ff; --dash:#cfe0ff;
  background:var(--bg)!important; color:var(--txt)!important;
  font-family:Consolas,"Cascadia Code","Cascadia Mono",ui-monospace,monospace!important; line-height:1.55;
  position:relative;
}
.jg-blueprint *{box-sizing:border-box}
.jg-blueprint img{max-width:100%;height:auto}
.jg-blueprint a{color:var(--acc)}
/* миллиметровая сетка */
body.jg-blueprint::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 1px,transparent 1px 120px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 120px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 24px);}

.bp-wrap{position:relative;z-index:1;max-width:1060px;margin:0 auto;padding:26px 20px}
.bp-frame{border:2px solid var(--txt);padding:30px 30px 0}
.bp-stamptop{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);border-bottom:1px solid rgba(234,241,255,.3);padding-bottom:12px;margin-bottom:22px}
.bp-stamptop a{color:var(--mut2)} .bp-stamptop .cur{color:var(--acc)} .bp-stamptop .sep{opacity:.5}
/* nav */
.bp-nav{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:26px}
.bp-nav a{color:var(--mut);text-decoration:none} .bp-nav a:hover{color:var(--acc)}

/* Узел-секция */
.bp-node{border:1.5px dashed var(--dash);padding:22px 20px;position:relative;margin-bottom:26px}
.bp-node>.id{position:absolute;top:-11px;left:14px;background:var(--bg);padding:0 8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.bp-h2{font-size:clamp(20px,3vw,30px);font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin:0 0 8px}
.bp-sub{color:var(--mut);font-size:14px;margin:0 0 18px;max-width:660px}
.bp-hl{color:var(--acc);font-weight:700}   /* перекрас .hl/.proj-hl */

/* Hero */
.bp-hero .kick{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin:0 0 8px}
.bp-name{font-size:clamp(30px,5vw,52px);font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.04;margin:0 0 10px}
.bp-name em{font-style:normal} .bp-name span{color:var(--acc)}
.bp-desc{color:var(--mut);font-size:15px;margin:0 0 18px;max-width:680px;line-height:1.6}
.bp-btns{display:flex;flex-wrap:wrap;gap:12px}
.bp-btn{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:11px 20px;border:1.5px solid var(--acc);background:var(--acc)}
.jg-blueprint .bp-btn{color:#0a2352}
.jg-blueprint .bp-btn img.emoji{filter:brightness(0) opacity(.75)}
.jg-blueprint .bp-btn:hover{background:transparent;color:var(--acc);text-decoration:none}
.jg-blueprint .bp-btn.sec{background:transparent;color:var(--txt);border-color:var(--dash)}
.jg-blueprint .bp-btn.sec:hover{border-color:var(--acc);color:var(--acc)}
.jg-blueprint .bp-btn.sec img.emoji{filter:none}

/* Stats */
.bp-stats{display:flex;flex-wrap:wrap;gap:22px 40px}
.bp-stat .n{font-size:42px;font-weight:700;line-height:1;color:var(--acc)}
.bp-stat .l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut2);margin-top:4px}

/* About */
.bp-about{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start}
.bp-about img{border:3px solid var(--txt);display:block;width:100%}   /* цветное фото, белая рамка-вклейка */
.bp-ci{font-size:13px;margin:7px 0;display:flex;gap:8px} .bp-ci .ico{width:16px;color:var(--acc)}
.bp-grad{color:var(--acc);font-style:normal}
.bp-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.bp-badges span{font-size:11px;color:var(--mut);border:1px solid var(--dash);padding:4px 9px}

/* Skills */
.bp-skg{margin-bottom:16px}
.bp-skg h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);border-bottom:1px dashed var(--dash);padding-bottom:5px;margin:0 0 8px}
.bp-sk{display:grid;grid-template-columns:1fr 110px 84px;align-items:center;gap:12px;padding:4px 0;font-size:13.5px}
.bp-sk .bar{height:6px;border:1px solid var(--dash);position:relative;overflow:hidden}
.bp-sk .bar i{position:absolute;left:0;top:0;height:100%;background:var(--acc)}
.bp-sk .lvl{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut2);text-align:right}

/* Nodes-grid (portfolio/autolab/process) */
.bp-nodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}
.bp-item{border:1.5px dashed var(--dash);padding:18px 16px;position:relative}
.bp-item>.id{position:absolute;top:-11px;left:12px;background:var(--bg);padding:0 8px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.bp-item h3{font-size:15px;text-transform:uppercase;margin:0 0 8px} .bp-item p{font-size:13px;color:var(--mut);line-height:1.55;margin:0}
.bp-item .tags{font-size:10.5px;color:var(--mut2);margin-top:8px} .bp-item .tags span:not(:last-child)::after{content:" · "}
.bp-item .more{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--acc);margin-top:8px;display:inline-block}
a.bp-item.alab-card{text-decoration:none;color:inherit;cursor:pointer;display:block} a.bp-item.alab-card:hover{border-color:var(--acc)}

/* Rows (lab/automate) */
.bp-row{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px dashed rgba(207,224,255,.35);font-size:14px}
.bp-row .ico{font-size:16px} .bp-row .nm{min-width:150px;color:var(--txt)} .bp-row .ds{color:var(--mut)} .bp-row .arw{color:var(--acc)}

/* Status / LIVE TELEMETRY */
.bp-stx-live{display:flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--acc);margin-bottom:4px}
.bp-stx-live .dot{width:8px;height:8px;border-radius:50%;background:var(--acc)}
.bp-stx-upd{font-size:11px;color:var(--mut2);margin-bottom:16px}
.bp-stx-row{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:10px 0;border-top:1px dashed rgba(207,224,255,.35);font-size:13.5px}
.bp-stx-row .nd{color:var(--txt)} .bp-stx-row .mt{color:var(--mut2);flex:1;min-width:120px;font-size:12px}
.bp-stx-row .ok{color:var(--acc);font-size:12px} .bp-stx-row .ok.down{color:#ffb4b4}

/* Gallery */
.bp-gal img{border:3px solid var(--txt);cursor:zoom-in;width:100%;display:block}
.bp-lb{display:none;position:fixed;inset:0;z-index:9999;background:rgba(10,20,50,.92);align-items:center;justify-content:center;padding:24px}
.bp-lb.open{display:flex} .bp-lb img{max-width:94vw;max-height:90vh;border:3px solid var(--txt);cursor:zoom-out}

/* Resume */
.bp-res{padding:14px 0;border-bottom:1px dashed rgba(207,224,255,.35)}
.bp-res h3{font-size:16px;text-transform:uppercase;margin:0 0 3px}
.bp-res .meta{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--acc);margin-bottom:6px}
.bp-res p{margin:0;font-size:13.5px;color:var(--mut)}

/* Contact + форма */
.bp-clink{display:flex;gap:10px;align-items:center;padding:11px 0;border-bottom:1px dashed rgba(207,224,255,.35);font-size:14px}
.bp-clink .ico{width:20px;color:var(--acc)} .bp-clink strong{min-width:110px}
.bp-form{max-width:560px;margin-top:20px;display:grid;gap:12px}
.bp-form label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut2);display:block;margin-bottom:4px}
.bp-form input,.bp-form textarea{width:100%;font-family:inherit;font-size:14px;padding:11px 13px;border:1.5px solid var(--dash);background:rgba(255,255,255,.05);color:var(--txt)}
.bp-form textarea{min-height:110px;resize:vertical} .bp-form ::placeholder{color:var(--mut2)}
#cf-btn{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--acc);color:#0a2352;border:0;padding:13px 24px;cursor:pointer;justify-self:start}
#cf-btn:hover{opacity:.88} .form-msg{font-size:13px;margin-top:4px}
.form-ok{color:var(--acc)} .form-err{color:#ffb4b4}

/* Штамп-таблица в подвале */
.bp-stamp{border:2px solid var(--txt);border-bottom:0;margin:34px -30px 0;display:grid;grid-template-columns:repeat(4,1fr);font-size:11.5px}
.bp-stamp div{border-right:1px solid var(--txt);border-top:1px solid var(--txt);padding:10px 12px}
.bp-stamp div:nth-child(4n){border-right:0}
.bp-stamp b{display:block;color:var(--mut2);font-weight:400;font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:3px}
.bp-stamp .ok{color:var(--acc)}

/* перекрас классов подсветки ИЗ ДАННЫХ под чертёж (голубой) */
.jg-blueprint .hl,.jg-blueprint .proj-hl{color:var(--acc);font-weight:700;background:none;-webkit-text-fill-color:var(--acc)}
.jg-blueprint .about2-grad{color:var(--acc);font-style:normal;background:none;-webkit-text-fill-color:var(--acc)}

/* Мобилка: сетку упростить, рамку сузить */
@media(max-width:700px){
  body.jg-blueprint::before{background:repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 1px,transparent 1px 40px),repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 40px)}
  .bp-frame{padding:18px 14px 0} .bp-stamp{margin:24px -14px 0;grid-template-columns:1fr 1fr}
  .bp-stamp div:nth-child(4n){border-right:1px solid var(--txt)} .bp-stamp div:nth-child(2n){border-right:0}
  .bp-about{grid-template-columns:1fr} .bp-sk{grid-template-columns:1fr 70px 74px}
}

/* ==== mobile overflow fix 20260725-160412 (group B: skills row) ==== */
@media(max-width:640px){
  .bp-sk{grid-template-columns:1fr 56px auto}
  .bp-sk>*{min-width:0}
  .bp-sk .lvl{overflow-wrap:break-word}
  .ds{overflow-wrap:break-word}
}

/* ==== mobile overflow fix 20260725-160847 (group B2: .ds row wrap) ==== */
@media(max-width:640px){
  .bp-row{flex-wrap:wrap}
  .bp-row>*{min-width:0}
  .bp-row .ds{flex:1 1 100%;overflow-wrap:break-word}
}

/* ==== mobile overflow fix 20260725-162639 (group C: contacts/email) ==== */
@media(max-width:640px){
  #contact{overflow-wrap:anywhere}
  .bp-ci{flex-wrap:wrap}
  .bp-ci>*{min-width:0}
}