/* proekty.css — индекс-слой витрины stalpro-design.pages.dev (23.07.2026).
   Внутренний инструмент владельца: нейтральный, тихий; айдентика проектов
   живёт только внутри карточек. Никаких внешних шрифтов — system stack. */

:root{
  --bg:    #F3F4F6;
  --card:  #FFFFFF;
  --ink:   #1A1D21;
  --text:  #33383F;
  --muted: #5B6470;   /* 5.9:1 на --bg */
  --line:  #E1E4E8;
  --line-strong: #C9CED4;
  --link:  #135A8C;   /* 6.4:1 на белом */
  --r: 10px;
  /* айдентика СтальПро */
  --sp-dark: #1A2026; --sp-yellow: #FFD600;
  /* айдентика ПВ (Hi-TechAMG) */
  --pv-ink: #12282E; --pv-dark: #0F2429;
  --pv-grad: linear-gradient(135deg,#33E633 0%,#19D48F 46%,#0CC1ED 100%);
  /* айдентика АртОбои */
  --ao-bg: #F7F5F1; --ao-ink: #26231E; --ao-accent: #2E5E4A; --ao-line: #CFC9BD;
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.wrap{ max-width:1060px; margin:0 auto; padding:0 20px }

/* ---------- шапка инструмента ---------- */
.tool-head{ padding:2.2rem 0 1.4rem; border-bottom:1px solid var(--line) }
.tool-head .kicker{
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .45rem;
}
.tool-head h1{ margin:0; color:var(--ink); font-size:clamp(1.45rem,3.4vw,2rem); line-height:1.2 }
.tool-head .sub{ margin:.55rem 0 0; color:var(--muted); max-width:60ch }

/* крошка «← Выбор проекта» на хабах */
.crumb{ display:inline-flex; align-items:center; min-height:48px; padding:0 .25rem;
  color:var(--link); text-decoration:none; font-weight:600; font-size:.9rem }
.crumb:hover{ text-decoration:underline }

/* цветная идентити-полоса хаба */
.hub-band{ height:6px; border-radius:0 0 4px 4px }
.hub-band--sp{ background:linear-gradient(90deg,var(--sp-yellow) 0 38%,var(--sp-dark) 38% 100%) }
.hub-band--pv{ background:var(--pv-grad) }
.hub-band--ao{ background:linear-gradient(90deg,var(--ao-accent) 0 38%,var(--ao-line) 38% 100%) }

/* ---------- корневая сетка проектов ---------- */
.projects{
  display:grid; grid-template-columns:1fr;
  gap:20px; padding:1.8rem 0 .4rem; list-style:none; margin:0;
}
@media (min-width:720px){ .projects{ grid-template-columns:1fr 1fr } } /* строгая 2×2 под 4 проекта */
.pcard{
  display:flex; flex-direction:column; gap:0; min-height:230px;
  border-radius:var(--r); overflow:hidden; text-decoration:none;
  border:1px solid var(--line); background:var(--card);
  transition:transform .18s ease-out, box-shadow .18s ease-out;
}
a.pcard:hover{ transform:translateY(-3px); box-shadow:0 10px 28px rgba(20,24,30,.12) }
a.pcard:focus-visible{ outline:3px solid var(--link); outline-offset:2px }
.pcard .id{ padding:1.3rem 1.4rem 1.1rem; flex:0 0 auto }
.pcard .meta{ padding:1rem 1.4rem 1.25rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.5rem; flex:1 }
.pcard .meta p{ margin:0; font-size:.9rem; color:var(--muted) }
.pcard .cnt{ margin-top:auto; font-size:.8rem; font-weight:600; color:var(--muted);
  letter-spacing:.04em; text-transform:uppercase }
.pcard .name{ display:block; font-weight:800; font-size:1.3rem; line-height:1.25 }
.pcard .tag{ display:block; margin-top:.3rem; font-size:.8rem; letter-spacing:.06em }

/* СтальПро: тёмный графит + жёлтая плашка + мелкая диагональ */
.id--sp{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 7px),
    var(--sp-dark);
}
.id--sp .name{ color:#fff }
.id--sp .name .mark{ background:var(--sp-yellow); color:#111; padding:.05em .18em }
.id--sp .tag{ color:#B9C0C7 }
.id--sp .bar{ display:block; width:56px; height:5px; background:var(--sp-yellow); margin-bottom:.85rem }

/* ПВ: светлый тех-фон + гексагон с градиентом */
.id--pv{ background:linear-gradient(160deg,#F1FCF2 0%,#EAF7FD 100%);
  display:flex; align-items:center; gap:1rem }
.id--pv .hex{
  flex:0 0 auto; width:52px; height:58px; background:var(--pv-grad);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.id--pv .name{ color:var(--pv-ink) }
.id--pv .tag{ color:#52666C }

/* АртОбои: тёплая галерейная, три «рамы» на стене */
.id--ao{ background:var(--ao-bg) }
.id--ao .frames{ display:flex; gap:8px; margin-bottom:.85rem }
.id--ao .frames i{ display:block; height:26px; border:2px solid var(--ao-accent);
  background:#fff; border-radius:1px }
.id--ao .frames i:nth-child(1){ width:34px }
.id--ao .frames i:nth-child(2){ width:22px; height:20px; margin-top:3px; border-color:var(--ao-line) }
.id--ao .frames i:nth-child(3){ width:28px; height:22px; margin-top:2px; border-color:var(--ao-line) }
.id--ao .name{ color:var(--ao-ink) }
.id--ao .tag{ color:#6B655C }

/* Проект 4 — заглушка */
.pcard--soon{ border:1px dashed var(--line-strong); background:transparent; min-height:230px;
  align-items:center; justify-content:center; text-align:center; display:flex;
  flex-direction:column; gap:.4rem; padding:1.4rem }
.pcard--soon .name{ color:var(--muted); font-weight:700; font-size:1.1rem }
.pcard--soon p{ margin:0; font-size:.88rem; color:var(--muted); max-width:26ch }

/* ---------- раздел «Общее» и архив ---------- */
.common{ margin:1.6rem 0 0; padding:1.3rem 1.4rem 1.1rem; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r) }
.common h2{ margin:0 0 .4rem; font-size:1.02rem; color:var(--ink) }

.arch{ margin:1.8rem 0 2.6rem; font-size:.88rem; color:var(--muted) }
.arch a{ color:var(--link) }

/* ---------- дерево хаба ---------- */
main.hub{ padding-bottom:2.8rem }
.grp{ margin-top:1.7rem; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:1.25rem 1.4rem 1rem }
.grp > h2{ margin:0 0 .35rem; font-size:1.08rem; color:var(--ink);
  display:flex; align-items:baseline; gap:.6rem }
.grp > h2 .n{ font-size:.78rem; font-weight:600; color:var(--muted) }
.grp > .note{ margin:.1rem 0 .5rem; font-size:.86rem; color:var(--muted) }

.branch{ margin-top:.7rem }
.branch > h3{ margin:0; font-size:.8rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted) }
.branch > ul{ list-style:none; margin:.25rem 0 .4rem; padding:0 0 0 .95rem;
  border-left:2px solid var(--line) }
.branch li{ margin:0 }
.branch li a{
  display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  min-height:48px; padding:.35rem .35rem; color:var(--link); text-decoration:none;
}
.branch li a:hover{ text-decoration:underline }
.branch li a:focus-visible{ outline:3px solid var(--link); outline-offset:1px; border-radius:4px }
.branch li .d{ color:var(--muted); font-size:.85rem }
.branch .row-note{ display:flex; align-items:center; min-height:38px; padding:.2rem .35rem;
  color:var(--muted); font-size:.88rem }

/* бейджи статусов */
.b{ display:inline-block; font-style:normal; font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:.14em .5em; border-radius:3px;
  border:1px solid transparent; white-space:nowrap }
.b-fav{ background:var(--sp-yellow); color:#111 }
.b-live{ background:#1E7A46; color:#fff }
.b-pick{ background:var(--pv-ink); color:#fff }
.b-arch{ background:transparent; color:var(--muted); border-color:var(--line-strong) }
.b-md{ background:#EEF1F4; color:#3A424C; border-color:var(--line) }

/* футер инструмента */
.tool-foot{ padding:1rem 0 2.2rem; color:var(--muted); font-size:.82rem }

@media (max-width:640px){
  .tool-head{ padding-top:1.5rem }
  .projects{ gap:14px; padding-top:1.3rem }
  .pcard{ min-height:0 }
  .grp{ padding:1.05rem 1rem .85rem }
}