/* Блок «Портфолио»: плотная сетка плиток разной высоты (макет Е). Те же переменные, что в karto4ki.css. */
/* Геометрия утверждённого блока (эталон sayt-maket-podarki.html, «Так выглядели заказы других компаний»): шапка — заголовок слева, ссылка справа по нижней линии заголовка; сетка на всю ширину окна, зазор 10 px, без скруглений */
.pf-verh{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:nowrap}
.pf-verh>:first-child{min-width:0}.pf-vse{flex:none;white-space:nowrap}
.pf-vse{display:inline-flex;align-items:center;gap:8px;font:600 15.5px/1.2 var(--txt,"Onest",system-ui,sans-serif);color:var(--petrol,#0F3D47);text-decoration:none;border-bottom:1px solid var(--latun,#D9A441);padding-bottom:3px}
.pf-vse:hover{color:var(--petrol-s,#246E7F)}
.pf-vse:focus-visible,.pf-ph:focus-visible,.pf-hochu:focus-visible{outline:3px solid var(--latun,#D9A441);outline-offset:3px}
.pf-grid{list-style:none;margin:var(--zag-sod,56px) calc(50% - 50vw) 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(220px,17vw,360px);gap:10px}
.pf-tile{position:relative;margin:0;border-radius:0;overflow:hidden;background:#F3F4F4;min-width:0}
.pf-b{grid-column:span 2;grid-row:span 2}.pf-w{grid-column:span 2}
.pf-ph{position:absolute;inset:0;display:block;color:inherit;text-decoration:none}
.pf-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pf-tile:hover .pf-ph img{transform:scale(1.04)}
.pf-cap{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;pointer-events:none;color:#fff;font-family:var(--txt,"Onest",system-ui,sans-serif);
 background:linear-gradient(180deg,rgba(11,48,57,0) 0%,rgba(11,48,57,.72) 62%,rgba(11,48,57,.88) 100%)}
.pf-cap b{display:block;font:600 16px/1.3 var(--txt,"Onest",system-ui,sans-serif);text-shadow:0 1px 3px rgba(0,0,0,.35)}
.pf-cap span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin-top:3px;font:400 13.5px/1.35 var(--txt,"Onest",system-ui,sans-serif);color:rgba(255,255,255,.88)}
.pf-b .pf-cap b{font-size:19px}.pf-b .pf-cap span{font-size:14.5px}
.pf-hochu{position:absolute;right:12px;top:12px;z-index:2;background:#fff;color:var(--petrol,#0F3D47);font:600 13px/1 var(--txt,"Onest",system-ui,sans-serif);padding:10px 13px;border-radius:6px;text-decoration:none;box-shadow:0 2px 8px rgba(18,38,43,.14);transition:background .15s,color .15s}
.pf-hochu:hover{background:var(--latun,#D9A441);color:var(--petrol,#0F3D47)}

@media(max-width:639px){
 .pf-verh{display:block}.pf-vse{margin-top:16px}
 .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:190px;gap:6px;margin-top:var(--zag-sod,32px)}
 .pf-b,.pf-w{grid-column:span 2}.pf-b{grid-row:span 1;}
 .pf-cap{padding:36px 12px 11px}.pf-cap b,.pf-b .pf-cap b{font-size:14.5px}.pf-cap span,.pf-b .pf-cap span{font-size:12.5px;-webkit-line-clamp:2}
 .pf-hochu{right:8px;top:8px;padding:9px 11px;font-size:12.5px}
 .pf-vse{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.pf-ph img,.pf-hochu{transition:none}.pf-tile:hover .pf-ph img{transform:none}}