/* ==========================================================================
   PROEKT.CSS — SHARKLAB 2026 project-presentation page
   Extends tokens/components from sharklab.css. Loaded after it.
   ========================================================================== */

.sh-proj{padding-top:120px;padding-bottom:0}

/* ---- header ---- */
.sh-proj__head{padding:0 56px 40px}
.sh-proj__crumbs{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--muted-2);margin-bottom:28px}
.sh-root .sh-proj__crumbs a{color:var(--muted-2)}
.sh-root .sh-proj__crumbs a:hover{color:var(--rust)}

.sh-proj__headrow{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.sh-proj__chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.sh-chip2{padding:8px 16px;border:1px solid rgba(243,235,226,.28);border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--cream)}
.sh-chip2--fill{background:var(--rust);border-color:var(--rust);color:var(--ink)}

.sh-proj__title{font-size:clamp(34px,4.6vw,56px);font-weight:800;letter-spacing:-1px;line-height:1.04;margin:0 0 16px}
.sh-proj__dek{font-size:17px;line-height:1.6;color:var(--muted);max-width:62ch;margin:0}

.sh-proj__stage{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:12px 22px;
  background:linear-gradient(100deg,var(--rust),#E08A6E);
  color:var(--ink);font-weight:800;font-size:13px;letter-spacing:1px;
  clip-path:var(--notch);
  box-shadow:0 10px 26px rgba(200,85,61,.28);
}
.sh-proj__stage i{font-style:normal;font-size:14px}

/* ---- video, водещ елемент ---- */
.sh-proj__videosec{padding:0 56px;margin-bottom:72px}
.sh-proj__video{
  position:relative;width:100%;aspect-ratio:16/9;
  clip-path:var(--notch);
  background:var(--ink-2);
  box-shadow:0 30px 70px rgba(0,0,0,.45), 0 0 0 1px var(--line-dark);
}
.sh-proj__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sh-proj__videopending{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--muted-2);font-weight:700;font-size:14px;letter-spacing:.4px;
  background:radial-gradient(circle at 50% 40%,#231210 0%,var(--ink-2) 75%);
}
.sh-proj__videopending-icon{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:rgba(243,235,226,.08);color:var(--muted-2);
}

/* ---- description + info card ---- */
.sh-proj__body{
  padding:0 56px 88px;
  display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start;
}
.sh-proj__desc h2{font-size:27px;font-weight:800;letter-spacing:-.3px;margin:0 0 18px}
.sh-proj__desc > p{font-size:16px;line-height:1.75;color:var(--muted);margin:0 0 16px;max-width:68ch}
.sh-proj__desc > p:last-of-type{margin-bottom:48px}

.sh-proj__subgrid{display:flex;flex-direction:column}
.sh-proj__sub{padding:28px 0;border-top:1px solid var(--line-dark)}
.sh-proj__sub:first-child{padding-top:0;border-top:0}
.sh-proj__sub h3{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:800;letter-spacing:-.2px;color:var(--cream);margin:0 0 14px}
.sh-proj__sub h3 svg{width:22px;height:22px;flex:none;color:var(--rust)}
.sh-proj__sub p{font-size:15px;line-height:1.75;color:var(--muted);margin:0 0 14px;max-width:68ch}
.sh-proj__sub p:last-child{margin-bottom:0}

.sh-proj__info{
  background:var(--ink-2);
  border:1px solid var(--line-dark);
  clip-path:var(--notch);
  padding:32px 28px;
  position:sticky;top:120px;
}
.sh-proj__info h2{font-size:15px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--cream);margin:0 0 22px}
.sh-proj__infolist{margin:0;display:flex;flex-direction:column;gap:18px}
.sh-proj__infolist > div{padding-top:16px;border-top:1px solid var(--line-dark)}
.sh-proj__infolist > div:first-child{padding-top:0;border-top:0}
.sh-proj__infolist dt{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted-2);margin:0 0 6px}
.sh-proj__infolist dd{font-size:14.5px;font-weight:600;color:var(--cream);margin:0;line-height:2}

/* ---- CTA share banner ---- */
.sh-proj__ctasec{padding:0 56px 72px}
.sh-proj__cta{
  position:relative;overflow:hidden;
  display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;
  background:linear-gradient(115deg,var(--ox-deep) 0%,var(--ox) 100%);
  clip-path:var(--notch);
  padding:36px 44px;
}
.sh-proj__cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(243,235,226,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(243,235,226,.07) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 80% 100% at 30% 50%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 80% 100% at 30% 50%,#000 0%,transparent 72%);
}
.sh-proj__ctatext{position:relative;flex:1;min-width:240px}
.sh-proj__cta h2{font-size:21px;font-weight:800;margin:0 0 8px;color:var(--cream)}
.sh-proj__cta p{font-size:14.5px;line-height:1.6;color:rgba(243,235,226,.85);margin:0;max-width:56ch}
.sh-proj__cta strong{color:var(--cream)}
.sh-proj__cta p + p{margin-top:12px}
.sh-proj__soc{position:relative;display:flex;gap:12px;flex:none}
.sh-proj__soc a{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:rgba(243,235,226,.14);color:var(--cream);
  transition:background .2s,transform .2s;
}
.sh-proj__soc a:hover{background:var(--cream);color:var(--ox-deep);transform:translateY(-3px)}
.sh-proj__soc svg{width:20px;height:20px}

/* ---- prev/next ---- */
.sh-proj__navrow{padding:72px 56px 0;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sh-proj__navcard{
  display:flex;flex-direction:column;gap:10px;
  padding:26px 28px;
  background:var(--ink-2);border:1px solid var(--line-dark);
  clip-path:var(--notch);
  transition:background .2s,border-color .2s;
}
.sh-root .sh-proj__navcard:hover{background:#26100c;border-color:rgba(200,85,61,.4)}
.sh-proj__navcard--next{align-items:flex-end;text-align:right}
.sh-proj__navlabel{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2)}
.sh-proj__navname{font-size:17px;font-weight:700;color:var(--cream)}
.sh-proj__navthumb{display:block;align-self:stretch;aspect-ratio:16/9;overflow:hidden;margin:-26px -28px 8px;background:#000}
.sh-proj__navthumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.sh-root .sh-proj__navcard:hover .sh-proj__navthumb img{transform:scale(1.04)}

.sh-proj__allbtn{padding:40px 56px 96px;text-align:center}

/* ---- responsive ---- */
@media (max-width:900px){
  .sh-proj{padding-top:96px}
  .sh-proj__head,.sh-proj__videosec,.sh-proj__body,.sh-proj__ctasec,.sh-proj__navrow,.sh-proj__allbtn{padding-left:24px;padding-right:24px}
  .sh-proj__body{grid-template-columns:1fr}
  .sh-proj__info{position:static}
  .sh-proj__navrow{grid-template-columns:1fr}
  .sh-proj__navcard--next{align-items:flex-start;text-align:left}
  .sh-proj__headrow{flex-direction:column}
}