/* =========================================================
   ГАРАЖ 403 — блок "ЗАГЛЯНИ ВНУТРЬ" (скриншоты продукта)
   плейсхолдеры-макеты + варианты компоновки A/B/C/D/E
   ========================================================= */
.sec-inside{ background:var(--grape); border-bottom:var(--bd-fat); }
html[data-pal="white"] .sec-inside{ background:var(--grape); }

/* variant switcher (gararge-tab style) */
.peek-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.peek-tab{ font-family:var(--mono); font-weight:700; font-size:13px; text-transform:lowercase;
  background:var(--cream); color:var(--ink); border:2px solid var(--ink); border-radius:7px;
  padding:9px 14px; cursor:pointer; transition:transform .12s, box-shadow .12s, background .15s; box-shadow:3px 3px 0 var(--ink); }
.peek-tab:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.peek-tab.on{ background:var(--lemon); transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
html[data-pal="night"] .peek-tab{ background:#2e2c29; color:#f3f1ea; border-color:#f3f1ea; box-shadow:3px 3px 0 rgba(255,255,255,.18); }
html[data-pal="night"] .peek-tab.on{ background:var(--lemon); color:var(--ink); border-color:var(--ink); }

/* variant visibility */
.peek-variant{ display:none; margin-top:38px; }
.peek-variant.on{ display:block; }

/* ---------- MOCK SCREEN (placeholder продукта) ---------- */
.shot{ position:relative; border:var(--bd-fat); border-radius:10px; overflow:hidden; background:#fff;
  box-shadow:var(--pop-lg); aspect-ratio:16/10; }
html[data-pal="night"] .shot{ box-shadow:8px 8px 0 rgba(255,255,255,.16); }
.shot-bar{ display:flex; align-items:center; gap:8px; padding:9px 12px; background:#f1efe8; border-bottom:2px solid var(--ink); }
.shot-dots{ display:flex; gap:5px; }
.shot-dots i{ width:9px; height:9px; border-radius:50%; background:var(--ink); display:block; opacity:.85; }
.shot-url{ flex:1; font-family:var(--mono); font-size:10.5px; color:#6b6b63; background:#fff; border:1.5px solid var(--ink);
  border-radius:5px; padding:3px 9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shot-body{ position:absolute; inset:38px 0 0 0; padding:16px 18px; overflow:hidden; }
.bar{ height:9px; border-radius:3px; background:#e6e3d9; }
.bar.dark{ background:#23211c; }
.bar.hl{ background:var(--lemon); box-shadow:0 0 0 1px var(--ink); }
.bar.sm{ height:7px; }
.placeholder-note{ position:absolute; left:12px; bottom:9px; font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:#b4b0a4; z-index:5; }
.s-vault .placeholder-note, .s-build .placeholder-note{ left:auto; right:10px; }

/* tag/sticker on shots */
.shot-sticker{ position:absolute; z-index:4; font-family:var(--mono); font-weight:700; font-size:12px; text-transform:uppercase;
  background:var(--lemon); color:var(--ink); border:2px solid var(--ink); padding:5px 10px; border-radius:6px;
  box-shadow:3px 3px 0 var(--ink); }

/* ----- screen: ARTICLE ----- */
.s-article .shot-body{ display:flex; flex-direction:column; gap:9px; }
.s-article .progress{ height:6px; background:#e6e3d9; border-radius:100px; overflow:hidden; border:1px solid var(--ink); }
.s-article .progress span{ display:block; height:100%; width:47%; background:var(--lemon); }
.s-article .kicker{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:#a08a2a; }
.s-article .h{ font-family:var(--disp); font-weight:800; font-size:clamp(15px,2.4vw,21px); line-height:1; color:var(--ink); text-transform:none; }
.s-article .lines{ display:flex; flex-direction:column; gap:7px; margin-top:3px; }
.s-article .ptext{ font-family:var(--sans); font-weight:500; font-size:clamp(11px,1.5vw,13.5px); line-height:1.45; color:#3a382f; }
.s-article .mark-hl{ background:var(--lemon); box-shadow:0 0 0 1px var(--ink); padding:0 2px; }
.s-article .ai-chip{ position:absolute; right:14px; bottom:14px; display:flex; align-items:center; gap:7px;
  background:var(--ink); color:var(--cream); font-family:var(--mono); font-size:11px; font-weight:700;
  padding:7px 11px; border-radius:100px; }
.s-article .ai-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--lemon); }

/* ----- screen: BUILD (доска идей) ----- */
.s-build .shot-body{ display:flex; flex-direction:column; gap:9px; }
.s-build .board-h{ font-family:var(--disp); font-weight:800; font-size:14px; text-transform:uppercase; color:var(--ink); }
.s-build .idea{ display:flex; align-items:center; gap:10px; border:2px solid var(--ink); border-radius:7px; padding:8px 10px; background:#fff; }
.s-build .vote{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:34px;
  border:1.5px solid var(--ink); border-radius:5px; padding:3px 0; font-family:var(--mono); font-weight:700; font-size:11px; line-height:1; }
.s-build .vote .arr{ font-size:9px; }
.s-build .idea-main{ flex:1; display:flex; flex-direction:column; gap:5px; }
.s-build .ititle{ font-family:var(--sans); font-weight:600; font-size:clamp(10px,1.4vw,12.5px); line-height:1.2; color:var(--ink); }
.s-build .pill{ align-self:flex-start; font-family:var(--mono); font-size:9px; font-weight:700; text-transform:uppercase;
  padding:2px 7px; border-radius:100px; border:1.5px solid var(--ink); }
.s-build .pill.work{ background:var(--lemon); }
.s-build .pill.done{ background:var(--sage); }
.s-build .pill.pick{ background:var(--rose); }

/* ----- screen: VAULT (склад) ----- */
.s-vault .shot-body{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; align-content:start; }
.s-vault .vcard{ border:2px solid var(--ink); border-radius:7px; padding:9px; display:flex; flex-direction:column; gap:7px; background:#fff; min-height:0; }
.s-vault .vcard .ic{ width:26px; height:26px; border:1.5px solid var(--ink); border-radius:5px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:12px; }
.s-vault .vcard.c1 .ic{ background:var(--lemon); } .s-vault .vcard.c2 .ic{ background:var(--sage); }
.s-vault .vcard.c3 .ic{ background:var(--rose); } .s-vault .vcard.c4 .ic{ background:var(--dough); }
.s-vault .vcard.c5 .ic{ background:var(--orchid); color:var(--cream); } .s-vault .vcard.c6 .ic{ background:var(--plum); color:var(--cream); }
.s-vault .fname{ font-family:var(--mono); font-size:10px; color:var(--ink); }
.s-vault .ftag{ font-family:var(--mono); font-size:8.5px; color:#9a958a; }

/* ---------- caption block (заголовок + описание) ---------- */
.peek-cap .ct{ font-family:var(--disp); font-weight:800; font-size:clamp(22px,3vw,34px); line-height:1.0; text-transform:none; margin:0 0 12px; color:var(--ink); }
.peek-cap .cd{ font-family:var(--sans); font-weight:500; font-size:clamp(15px,1.7vw,18px); color:var(--ink); opacity:.72; margin:0; max-width:42ch; }
.peek-try{ display:inline-flex; align-items:center; gap:.4em; margin-top:16px; font-family:var(--mono); font-weight:700;
  font-size:14px; color:var(--ink); background:var(--lemon); border:2px solid var(--ink); border-radius:7px;
  padding:9px 14px; box-shadow:3px 3px 0 var(--ink); transition:transform .12s, box-shadow .12s; }
.peek-try:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.peek-try:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
html[data-pal="night"] .peek-try{ color:var(--ink); }
.peek-cap .cn{ display:inline-block; font-family:var(--mono); font-weight:700; font-size:13px; color:var(--ink);
  background:var(--lemon); border:2px solid var(--ink); border-radius:6px; padding:3px 9px; margin-bottom:16px; }
.va-row:nth-child(1) .peek-cap .cn{ background:var(--rose); }
.va-row:nth-child(2) .peek-cap .cn{ background:var(--sage); }
.va-row:nth-child(3) .peek-cap .cn{ background:var(--lemon); }
html[data-pal="night"] .peek-cap .ct, html[data-pal="night"] .peek-cap .cd{ color:#f3f1ea; }

.va-row .shot-wrap{ position:relative; }
.vc-main{ position:relative; }

/* ===== VARIANT A — scroll-unfold (стопка → зигзаг) ===== */
.uf-scroll{ position:relative; height:300vh; }
.uf-stage{ position:sticky; top:0; height:100vh; }
.uf-row{ position:absolute; left:0; right:0; display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(20px,4vw,56px); align-items:center; }
.uf-row.r0{ top:5%; } .uf-row.r1{ top:37%; } .uf-row.r2{ top:69%; }
.uf-row.flip .uf-shot-col{ order:2; } .uf-row.flip .uf-cap{ order:1; }
.uf-shot-col{ display:flex; justify-content:center; }
.uf-shot-col .shot{ width:100%; max-width:380px; will-change:transform; }
.uf-row.r0 .uf-cap{ text-align:left; }
.uf-cap{ will-change:opacity, transform; }
.uf-scroll:not(.plain) .uf-cap{ opacity:0; }
/* when JS disabled / plain mode, fall back to static stack */
.uf-scroll.plain{ height:auto; }
.uf-scroll.plain .uf-stage{ position:static; height:auto; display:flex; flex-direction:column; gap:40px; }
.uf-scroll.plain .uf-row{ position:static; }
.va-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; margin-bottom:46px; }
.va-row:last-child{ margin-bottom:0; }
.va-row.flip .peek-cap{ order:2; }
.va-row.flip .shot-wrap{ order:1; }
.va-row .shot{ transform:rotate(-1.2deg); }
.va-row.flip .shot{ transform:rotate(1.2deg); }

/* ===== VARIANT B — три в ряд ===== */
.vb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.vb-cell .shot{ margin-bottom:16px; }
.vb-cell .ct{ font-size:clamp(17px,2vw,21px); margin-bottom:7px; }
.vb-cell .cd{ font-size:14px; }
.vb-cell:nth-child(1) .shot{ transform:rotate(-1.5deg); }
.vb-cell:nth-child(2) .shot{ transform:rotate(1deg); }
.vb-cell:nth-child(3) .shot{ transform:rotate(-1deg); }

/* ===== VARIANT C — главный + два мелких ===== */
.vc-wrap{ display:grid; grid-template-columns:1.5fr 1fr; gap:22px; align-items:start; }
.vc-main .ct{ margin-top:18px; }
.vc-side{ display:flex; flex-direction:column; gap:22px; }
.vc-side .ct{ font-size:18px; margin:10px 0 4px; }
.vc-side .cd{ font-size:13.5px; }
.vc-main .shot{ transform:rotate(-1deg); }

/* ===== VARIANT D — в рамке-табличке garage403 ===== */
.vd-stack{ display:flex; flex-direction:column; gap:40px; }
.vd-plate{ max-width:920px; margin:0 auto; width:100%; }
.plate-frame{ background:#2b2e33; border:4px solid var(--ink); border-radius:14px; padding:14px; box-shadow:var(--pop-lg);
  background-image:radial-gradient(circle at 14px 14px, rgba(255,255,255,.18) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 14px) 14px, rgba(255,255,255,.18) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 14px calc(100% - 14px), rgba(255,255,255,.18) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), rgba(255,255,255,.18) 0 1.6px, transparent 2.4px); }
.plate-bar{ display:flex; align-items:center; gap:12px; padding:0 6px 12px; }
.plate-tag{ font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.1em; color:#ffd23c;
  background:#16181c; border:2px solid #000; border-radius:5px; padding:5px 10px; }
.plate-url{ flex:1; font-family:var(--mono); font-size:12px; color:#c7c7c2; background:#16181c; border:2px solid #000;
  border-radius:6px; padding:6px 12px; }
/* plate provides chrome — hide the shot's own browser bar to avoid doubling */
.plate-frame .shot-bar{ display:none; }
.plate-frame .shot-body{ top:0; }
.vd-cap{ max-width:920px; margin:14px auto 0; text-align:center; }
.vd-cap .ct{ margin-bottom:8px; }
.vd-cap .cd{ margin:0 auto; }

/* ===== VARIANT E — диагональный стек (внахлёст) ===== */
.ve-stage{ position:relative; max-width:880px; margin:0 auto; padding:10px 0 36px; min-height:clamp(340px,46vw,520px); }
.ve-stage .shot{ position:absolute; width:62%; box-shadow:8px 8px 0 var(--ink); }
html[data-pal="night"] .ve-stage .shot{ box-shadow:8px 8px 0 rgba(255,255,255,.2); }
.ve-stage .e1{ left:0; top:0; transform:rotate(-4deg); z-index:1; }
.ve-stage .e2{ right:0; top:8%; transform:rotate(3.5deg); z-index:3; }
.ve-stage .e3{ left:14%; bottom:0; transform:rotate(-1.5deg); z-index:2; }
.ve-stage .shot:hover{ z-index:5; }
.ve-legend{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:14px; }
.ve-legend span{ font-family:var(--mono); font-weight:700; font-size:13px; text-transform:lowercase;
  border:2px solid var(--ink); border-radius:100px; padding:6px 14px; background:var(--cream); }
.ve-legend span b{ color:var(--crimson); }
html[data-pal="night"] .ve-legend span{ background:#2e2c29; color:#f3f1ea; border-color:#f3f1ea; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  .uf-scroll{ height:auto !important; }
  .uf-stage{ position:static !important; height:auto !important; display:flex; flex-direction:column; gap:28px; }
  .uf-row{ position:static !important; grid-template-columns:1fr !important; gap:14px; transform:none !important; }
  .uf-row .shot{ transform:none !important; }
  .uf-cap{ opacity:1 !important; transform:none !important; }
  .va-row{ grid-template-columns:1fr; gap:20px; }
  .va-row.flip .shot-wrap{ order:0; } .va-row.flip .peek-cap{ order:1; }
  .vb-grid{ grid-template-columns:1fr; }
  .vc-wrap{ grid-template-columns:1fr; }
  .s-vault .shot-body{ grid-template-columns:repeat(2,1fr); }
  .s-vault .vcard:nth-child(n+5){ display:none; }
  .ve-stage{ min-height:0; padding:0; display:flex; flex-direction:column; gap:18px; }
  .ve-stage .shot{ position:static; width:100%; transform:none !important; }
}