/* Holgo · портфолио сайтов на /services/ai-razrabotka-sajtov (блок #portfolio, focus.js → webPortfolio).
   Карточка: сцена со снимком первого экрана в окне браузера и телефоном поверх, ниже — описание.
   Цвета только из переменных темы, поэтому блок одинаково работает в светлой и тёмной теме.
   Скруглений нет намеренно: на сайте действует общее правило «углы всегда прямые» —
   это фирменный стиль, поэтому и телефон здесь прямоугольный. */
.focus-portfolio-grid{display:grid;gap:24px;margin-top:32px}
@media (min-width:900px){.focus-portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}

.focus-portfolio-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);background:var(--card)}

.focus-portfolio-stage{position:relative;display:block;padding:28px 28px 30px;overflow:hidden;
 background:linear-gradient(160deg,color-mix(in oklab,var(--primary) 9%,var(--card)) 0%,color-mix(in oklab,var(--primary) 3%,var(--card)) 100%);
 border-bottom:1px solid var(--border)}
.focus-portfolio-browser{display:block;width:84%;overflow:hidden;background:var(--background);
 box-shadow:0 1px 0 color-mix(in oklab,var(--foreground) 6%,transparent),0 18px 40px -18px color-mix(in oklab,var(--foreground) 45%,transparent)}
.focus-portfolio-bar{display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;background:var(--muted);border-bottom:1px solid var(--border)}
.focus-portfolio-bar i{width:7px;height:7px;background:color-mix(in oklab,var(--foreground) 22%,transparent)}
.focus-portfolio-bar b{margin-left:8px;font-size:11px;font-weight:500;line-height:1;color:var(--muted-foreground);letter-spacing:.01em}
.focus-portfolio-browser img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.focus-portfolio-phone{position:absolute;right:26px;bottom:18px;width:20%;height:auto;aspect-ratio:360/779;object-fit:cover;object-position:top;
 border:5px solid #17181a;background:#17181a;
 box-shadow:0 18px 36px -14px color-mix(in oklab,var(--foreground) 55%,transparent)}

.focus-portfolio-body{display:flex;flex:1;flex-direction:column;padding:24px 28px 28px}
.focus-portfolio-kind{margin:0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
.focus-portfolio-body h3{margin:8px 0 0;font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--foreground)}
.focus-portfolio-text{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--muted-foreground)}
.focus-portfolio-facts{display:grid;gap:8px;margin:18px 0 0;padding:16px 0 0;list-style:none;border-top:1px solid var(--border)}
.focus-portfolio-facts li{position:relative;padding-left:20px;font-size:14px;line-height:1.45;color:var(--foreground)}
.focus-portfolio-facts li::before{content:"";position:absolute;left:2px;top:.42em;width:8px;height:8px;background:var(--primary);opacity:.85}
.focus-portfolio-link,.focus-portfolio-here{align-self:flex-start;margin:22px 0 0;font-size:14px;font-weight:500}
.focus-portfolio-link{display:inline-flex;gap:6px;padding-bottom:3px;color:var(--foreground);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--foreground) 35%,transparent)}
.focus-portfolio-link span{color:var(--primary)}
.focus-portfolio-link:focus-visible,.focus-portfolio-stage:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.focus-portfolio-here{color:var(--muted-foreground)}

@media (hover:hover) and (pointer:fine){
 .focus-portfolio-browser,.focus-portfolio-phone{transition:transform .5s cubic-bezier(.16,1,.3,1)}
 a.focus-portfolio-stage:hover .focus-portfolio-browser{transform:translateY(-4px)}
 a.focus-portfolio-stage:hover .focus-portfolio-phone{transform:translateY(-8px)}
 .focus-portfolio-link:hover{border-bottom-color:var(--primary)}
}
@media (prefers-reduced-motion:reduce){.focus-portfolio-browser,.focus-portfolio-phone{transition:none!important;transform:none!important}}

@media (max-width:760px){
 .focus-portfolio-grid{margin-top:24px;gap:18px}
 .focus-portfolio-stage{padding:18px 18px 20px}
 .focus-portfolio-browser{width:82%}
 .focus-portfolio-bar{height:18px;padding:0 8px;gap:4px}
 .focus-portfolio-bar i{width:5px;height:5px}
 .focus-portfolio-bar b{margin-left:6px;font-size:9px}
 .focus-portfolio-phone{right:16px;bottom:12px;width:23%;border-width:3px}
 .focus-portfolio-body{padding:20px 20px 22px}
 .focus-portfolio-body h3{font-size:21px}
 .focus-portfolio-text{font-size:15px}
}