/* ==========================================================
   ARMENIA CRYSTAL
   Design System v1.0
   components.css
========================================================== */


/* ----------------------------------------------------------
   BUTTONS
---------------------------------------------------------- */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:var(--button-height);

    padding:0 32px;

    border-radius:var(--button-radius);

    font-family:var(--font-body);

    font-size:15px;

    font-weight:600;

    transition:var(--transition-normal);

    cursor:pointer;

    user-select:none;

}


/* Primary */

.btn-primary{

    color:var(--color-white);

    border:1px solid var(--color-gold);

    background:transparent;

}

.btn-primary:hover{

    background:var(--color-gold);

    color:#050505;

    box-shadow:var(--gold-glow);

}


/* Secondary */

.btn-secondary{

    background:var(--color-bg-card);

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

    color:var(--color-white);

}

.btn-secondary:hover{

    border-color:var(--color-gold);

}


/* Ghost */

.btn-ghost{

    color:var(--color-gold);

    background:none;

}

.btn-ghost:hover{

    opacity:.8;

}


/* ----------------------------------------------------------
   BADGES
---------------------------------------------------------- */

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    border:1px solid var(--color-gold);

    color:var(--color-gold);

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

}


/* ----------------------------------------------------------
   TAGS
---------------------------------------------------------- */

.tag{

    display:inline-flex;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(255,255,255,.05);

    color:var(--color-light);

    font-size:13px;

}


/* ----------------------------------------------------------
   CARD
---------------------------------------------------------- */

.card{

    background:var(--color-bg-card);

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

    border-radius:var(--radius-lg);

    overflow:hidden;

    transition:var(--transition-normal);

}

.card:hover{

    transform:translateY(-6px);

    border-color:var(--color-border-light);

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

}


/* ----------------------------------------------------------
   CARD IMAGE
---------------------------------------------------------- */

.card-image{

    overflow:hidden;

}

.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.card:hover img{

    transform:scale(1.05);

}


/* ----------------------------------------------------------
   SECTION HEADER
---------------------------------------------------------- */

.section-header{

    max-width:760px;

    margin-bottom:64px;

}

.section-header.center{

    margin-inline:auto;

    text-align:center;

}


/* ----------------------------------------------------------
   GLASS PANEL
---------------------------------------------------------- */

.glass{

    backdrop-filter:var(--blur-light);

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    border-radius:var(--radius-lg);

}


/* ----------------------------------------------------------
   SLIDER BUTTON
---------------------------------------------------------- */

.slider-button{

    width:54px;

    height:54px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.45);

    transition:var(--transition-normal);

}

.slider-button:hover{

    border-color:var(--color-gold);

    color:var(--color-gold);

}


/* ----------------------------------------------------------
   IMAGE
---------------------------------------------------------- */

.image-rounded{

    border-radius:var(--image-radius);

    overflow:hidden;

}


/* ----------------------------------------------------------
   DIVIDER
---------------------------------------------------------- */

.gold-divider{

    width:120px;

    height:2px;

    background:var(--color-gold);

    margin:24px 0;

}


/* ----------------------------------------------------------
   ICON BOX
---------------------------------------------------------- */

.icon-box{

    width:64px;

    height:64px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

}


/* ----------------------------------------------------------
   NAVIGATION LINK
---------------------------------------------------------- */

.nav-link{

    position:relative;

    padding:8px 0;

    transition:var(--transition-normal);

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:1px;

    background:var(--color-gold);

    transition:var(--transition-normal);

}

.nav-link:hover{

    color:var(--color-gold);

}

.nav-link:hover::after{

    width:100%;

}


/* ----------------------------------------------------------
   FEATURE LIST
---------------------------------------------------------- */

.feature-list{

    display:grid;

    gap:20px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:14px;

}


/* ----------------------------------------------------------
   CTA BOX
---------------------------------------------------------- */

.cta-box{

    padding:48px;

    border-radius:var(--radius-xl);

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

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.03),
        rgba(255,255,255,.01)
    );

}


/* ----------------------------------------------------------
   HOVER LIFT
---------------------------------------------------------- */

.hover-lift{

    transition:var(--transition-normal);

}

.hover-lift:hover{

    transform:translateY(-6px);

}


/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media (max-width:768px){

    .btn{

        width:100%;

    }

    .cta-box{

        padding:32px;

    }

}

/* =========================================================
   CLICKABLE GOOGLE MAPS
========================================================= */
.google-map-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.google-map-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.open-google-map {
    display: inline-block;
    margin-top: 18px;
    color: #d4af37;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: .16em;
}