/* ==========================================================
   Navigation Panel
========================================================== */

.lqw-has-panel{

    position:relative;

}

/* Hidden by default */

.lqw-nav-panel{

    position:absolute;

    top:100%;

    left:0;

    margin-top:18px;

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:all .25s ease;

    z-index:2000;

}

/* Show on hover */

.lqw-has-panel:hover .lqw-nav-panel{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/* ==========================================================
   COMP-001
   Navigation Panel
========================================================== */

.lqw-nav-panel{

    width:520px;
    
    padding:32px;

    background:#fff;

    border-radius:20px;

    box-shadow:var(--shadow-lg);

    border:1px solid var(--lqw-border);

    overflow:hidden;

}

.lqw-nav-panel-title{

    font-size:13px;

    letter-spacing:2px;

    font-weight:700;

    color:var(--lqw-primary);

    margin-bottom:20px;

}

.lqw-nav-panel-grid{

    display:grid;

    gap:16px;

}

/* ==========================================================
   COMP-002
   Development Card
========================================================== */

.lqw-dev-card{

    display:flex;

    align-items:center;

    gap:20px;

    padding:20px;

    text-decoration:none;

    color:inherit;

    border-radius:18px;

    transition:all .28s ease;

}

.lqw-dev-card:hover{

    
    background:white;

    box-shadow:var(--shadow-md);

    transform:translateY(-4px);

}

.lqw-dev-card:hover{

    background:var(--lqw-light);

}

.lqw-dev-image{

    width:110px;

    height:110px;

    border-radius:16px;

    overflow:hidden;

    flex-shrink:0;


}

.lqw-dev-content h4{

    margin:0;

    font-size:18px;

}

.lqw-dev-content p{

    margin:4px 0;

    color:var(--lqw-text-light);

}

.lqw-dev-content span{

    color:var(--lqw-gold);

    font-weight:700;

}

.lqw-dev-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .35s ease;

}

.lqw-dev-card:hover img{

    transform:scale(1.08);

}

/* Hero */

.lqw-nav-hero{

    margin-bottom:28px;

}

.lqw-nav-hero small{

    color:var(--lqw-gold);

    font-size:12px;

    letter-spacing:2px;

    font-weight:700;

}

.lqw-nav-hero h3{

    margin:8px 0;

    font-size:28px;

}

.lqw-nav-hero p{

    color:var(--lqw-text-light);

    line-height:1.7;

}

/* Explore */

.lqw-explore{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--lqw-gold);

    font-weight:700;

}

.lqw-arrow{

    transition:transform .25s ease;

}

.lqw-dev-card:hover .lqw-arrow{

    transform:translateX(6px);

}