/* ═══════════════════════════════════════════════════════════
   Villa Megna — Componenti UI
   Bottoni, card, badge, layout, WhatsApp FAB
   ═══════════════════════════════════════════════════════════ */

/* ── Bottoni ────────────────────────────────────────────── */

.vm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vm-space-2);
    padding: var(--vm-space-3) var(--vm-space-6);
    border-radius: var(--vm-radius-sm);
    font-family: var(--vm-font-ui);
    font-size: var(--vm-text-sm);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--vm-transition-base);
    border: 2px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.vm-btn-primary {
    background: var(--vm-gold);
    color: var(--vm-navy);
    border-color: var(--vm-gold);
    box-shadow: var(--vm-shadow-gold);
}
.vm-btn-primary:hover {
    background: var(--vm-gold-dark);
    border-color: var(--vm-gold-dark);
    color: var(--vm-white);
    box-shadow: var(--vm-shadow-xl);
    transform: translateY(-2px);
    text-decoration: none;
}

.vm-btn-outline {
    background: transparent;
    color: var(--vm-gold);
    border-color: var(--vm-gold);
}
.vm-btn-outline:hover {
    background: var(--vm-gold);
    color: var(--vm-navy);
    text-decoration: none;
}

.vm-btn-ghost {
    background: transparent;
    color: var(--vm-white);
    border-color: rgba(255, 255, 255, .5);
}
.vm-btn-ghost:hover {
    background: rgba(255, 255, 255, .1);
    border-color: var(--vm-white);
    color: var(--vm-white);
    text-decoration: none;
}

.vm-btn-navy {
    background: var(--vm-navy);
    color: var(--vm-white);
    border-color: var(--vm-navy);
}
.vm-btn-navy:hover {
    background: var(--vm-navy-light);
    border-color: var(--vm-navy-light);
    color: var(--vm-white);
    text-decoration: none;
}

.vm-btn-lg {
    padding: var(--vm-space-4) var(--vm-space-8);
    font-size: var(--vm-text-base);
}

.vm-btn-sm {
    padding: var(--vm-space-2) var(--vm-space-4);
    font-size: var(--vm-text-xs);
}

/* ── Card ───────────────────────────────────────────────── */

.vm-card {
    background: var(--vm-white);
    border-radius: var(--vm-radius-lg);
    overflow: hidden;
    box-shadow: var(--vm-shadow-md);
    transition: box-shadow var(--vm-transition-base), transform var(--vm-transition-base);
}
.vm-card:hover {
    box-shadow: var(--vm-shadow-xl);
    transform: translateY(-4px);
}

.vm-card-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

.vm-card-body {
    padding: var(--vm-space-6);
}

.vm-card-title {
    font-family: var(--vm-font-heading);
    font-size: var(--vm-text-xl);
    color: var(--vm-navy);
    margin-bottom: var(--vm-space-2);
}

.vm-card-meta {
    font-size: var(--vm-text-sm);
    color: var(--vm-text-muted);
    margin-bottom: var(--vm-space-4);
}

/* ── Badge ──────────────────────────────────────────────── */

.vm-badge {
    display: inline-block;
    padding: var(--vm-space-1) var(--vm-space-3);
    background: var(--vm-gold-light);
    color: var(--vm-gold-dark);
    border-radius: var(--vm-radius-full);
    font-size: var(--vm-text-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-family: var(--vm-font-ui);
}

/* ── Layout sezione ─────────────────────────────────────── */

.vm-section {
    padding: var(--vm-space-20) 0;
}

.vm-container {
    max-width: var(--vm-container-max);
    margin: 0 auto;
    padding: 0 var(--vm-space-6);
}

/* ── Intestazione sezione ───────────────────────────────── */

.vm-section-heading {
    text-align: center;
    margin-bottom: var(--vm-space-12);
}

.vm-section-eyebrow {
    display: block;
    font-family: var(--vm-font-ui);
    font-size: var(--vm-text-xs);
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--vm-gold);
    margin-bottom: var(--vm-space-3);
}

.vm-section-title {
    font-family: var(--vm-font-heading);
    font-size: var(--vm-text-4xl);
    color: var(--vm-navy);
    margin-bottom: var(--vm-space-4);
}

.vm-section-subtitle {
    font-size: var(--vm-text-lg);
    color: var(--vm-text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ── Divisore gold ──────────────────────────────────────── */

.vm-divider {
    width: 60px;
    height: 3px;
    background: var(--vm-gold);
    margin: var(--vm-space-4) auto;
    border: none;
    display: block;
}

/* ── CTA group ──────────────────────────────────────────── */

.vm-cta-group {
    display: flex;
    gap: var(--vm-space-4);
    flex-wrap: wrap;
    align-items: center;
}

/* ── WhatsApp FAB ───────────────────────────────────────── */

.vm-whatsapp-fab {
    position: fixed;
    bottom: calc(var(--vm-sticky-bar-h) + var(--vm-space-4));
    right: var(--vm-space-4);
    width: 56px;
    height: 56px;
    background: #25D366;
    color: var(--vm-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: var(--vm-shadow-lg);
    z-index: var(--vm-z-sticky);
    transition: transform var(--vm-transition-base), box-shadow var(--vm-transition-base);
    text-decoration: none;
}
.vm-whatsapp-fab:hover {
    transform: scale(1.1);
    box-shadow: var(--vm-shadow-xl);
    color: var(--vm-white);
    text-decoration: none;
}

/* ── Mobile ─────────────────────────────────────────────── */

@media (max-width: 768px) {
    .vm-section-title { font-size: var(--vm-text-3xl); }
    .vm-cta-group     { justify-content: center; }
    .vm-container     { padding: 0 var(--vm-space-4); }
}