/* Портфоліо: компактніша сітка, плавний hover-zoom, навігація в lightbox */
#portfolio-grid{gap:.625rem}
@media (min-width:1024px){#portfolio-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.875rem}}
#portfolio-grid .portfolio-tile{transition:box-shadow .35s ease,transform .35s ease;box-shadow:0 1px 2px rgba(26,18,12,.06)}
#portfolio-grid .portfolio-tile img{transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform}
#portfolio-grid [data-lightbox]{overflow:hidden;cursor:zoom-in}
@media (hover:hover){
 #portfolio-grid .portfolio-tile:hover{box-shadow:0 10px 28px -10px rgba(26,18,12,.35);transform:translateY(-2px)}
 #portfolio-grid [data-lightbox]:hover img{transform:scale(1.05)}
}
@media (prefers-reduced-motion:reduce){#portfolio-grid .portfolio-tile,#portfolio-grid .portfolio-tile img{transition:none}#portfolio-grid .portfolio-tile:hover{transform:none}}
#lightbox-img{max-width:92vw;max-height:84vh;object-fit:contain;border-radius:var(--radius-md,12px);cursor:zoom-out;user-select:none;-webkit-user-drag:none}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;border-radius:999px;background:#fbf7f11f;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fbf7f1;font-size:1.5rem;line-height:1;cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}
.lb-nav:hover{background:#fbf7f138}
.lb-nav:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.lb-prev{left:max(.75rem,env(safe-area-inset-left,0))}
.lb-next{right:max(.75rem,env(safe-area-inset-right,0))}
@media (max-width:640px){.lb-nav{top:auto;bottom:max(1rem,env(safe-area-inset-bottom,0));transform:none}}

/* Міні-сітка (варіант 1, 31.10.2026): 3 в ряд на телефоні, тонкі рамки, м'які кути */
#portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:900px;margin-left:auto;margin-right:auto}
#portfolio-grid .portfolio-tile{aspect-ratio:1/1;border-radius:12px;border:1px solid #eadcd2;box-shadow:none}
#portfolio-grid .portfolio-tile img{width:100%;height:100%;object-fit:cover}
#portfolio-grid .portfolio-tile .ba-label{font-size:9px;padding:1px 6px}
#portfolio-grid .portfolio-tile:active img{transform:scale(1.06)}
@media (min-width:640px){#portfolio-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}}
@media (min-width:1024px){#portfolio-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}}
@media (hover:hover){#portfolio-grid .portfolio-tile:hover{transform:none;box-shadow:0 6px 18px -8px rgba(26,18,12,.25)}#portfolio-grid [data-lightbox]:hover img{transform:scale(1.06)}}