/* ============================================
   Studio be Photostudio — Page-specific Styles
   ============================================ */

/* === menu.php specific === */
/* Menu card link arrow */
.menu-arrow{opacity:0;transform:translateX(-8px);transition:opacity .3s ease,transform .3s ease}
.menu-card:hover .menu-arrow{opacity:1;transform:translateX(0)}
@media(hover:none){.menu-arrow{opacity:1;transform:translateX(0)}}

/* === gallery.php specific === */
/* === Filter tabs === */
.filter-tab{font-family:'Zen Kaku Gothic New',sans-serif;font-size:11px;letter-spacing:.06em;padding:8px 18px;border-radius:100px;border:1px solid #DDD;color:#7A7A7A;background:transparent;cursor:pointer;transition:all .3s ease;white-space:nowrap}
.filter-tab:hover{border-color:#D4CE8A;color:#3A3A3A}
.filter-tab.active{background:#3A3A3A;color:#fff;border-color:#3A3A3A}
@media(max-width:767px){.filter-tab{font-size:10px;padding:7px 14px}}
/* === Masonry grid === */
.masonry{columns:2;column-gap:10px}
@media(min-width:640px){.masonry{columns:3;column-gap:12px}}
@media(min-width:1024px){.masonry{columns:4;column-gap:14px}}
.masonry-item{break-inside:avoid;margin-bottom:10px;border-radius:8px;overflow:hidden;cursor:pointer;position:relative}
@media(min-width:640px){.masonry-item{margin-bottom:12px}}
@media(min-width:1024px){.masonry-item{margin-bottom:14px}}
.masonry-item img{width:100%;display:block;transition:transform 1s cubic-bezier(.25,.46,.45,.94)}
.masonry-item:hover img{transform:scale(1.04)}
/* Entrance animation */
.masonry-item{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.masonry-item.show{opacity:1;transform:translateY(0)}
/* Category label on hover */
.masonry-label{position:absolute;bottom:0;left:0;right:0;padding:10px 12px;background:linear-gradient(to top,rgba(58,58,58,.5),transparent);opacity:0;transition:opacity .3s ease}
.masonry-item:hover .masonry-label{opacity:1}
@media(hover:none){.masonry-label{opacity:1}}
/* === Lightbox === */
#lb{position:fixed;inset:0;z-index:60;background:rgba(20,20,20,.96);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}
#lb.show{display:flex;opacity:1}
#lb img{max-width:90vw;max-height:82vh;object-fit:contain;border-radius:6px;transition:opacity .4s ease}
#lb .lb-info{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);text-align:center}
#lb .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s ease;border:none}
#lb .lb-nav:hover{background:rgba(255,255,255,.18)}
#lb .lb-prev{left:12px}
#lb .lb-next{right:12px}
@media(max-width:640px){#lb .lb-prev{left:6px}#lb .lb-next{right:6px}#lb .lb-nav{width:36px;height:36px}}

/* === user-guide.php specific === */
/* Timeline connector */
.step-line{position:absolute;left:19px;top:44px;bottom:-20px;width:1px;background:linear-gradient(to bottom,#EEE8AA,#DDD 80%,transparent)}
@media(min-width:768px){.step-line{left:23px}}